main.js

                    groupNode = node;
                    break;
                }
            }
        }
        if (!groupNode) {
            groupNode = {
                group: {
                    value: groupValue,
                    spec: groupSpec,
                },
                children: [],
            };
            nodes.splice(newGroupIndex, 0, groupNode);
        }
        return groupNode;
    }
    function insertResourceNodeInSiblings(resourceNode, siblings, orderSpecs) {
        var i;
        for (i = 0; i < siblings.length; i += 1) {
            var cmp = compareByFieldSpecs(siblings[i].resourceFields, resourceNode.resourceFields, orderSpecs); // TODO: pass in ResourceApi?
            if (cmp > 0) { // went 1 past. insert at i
                break;
            }
        }
        siblings.splice(i, 0, resourceNode);
    }
    function buildResourceFields(resource) {
        var obj = __assign(__assign(__assign({}, resource.extendedProps), resource.ui), resource);
        delete obj.ui;
        delete obj.extendedProps;
        return obj;
    }
    function isGroupsEqual(group0, group1) {
        return group0.spec === group1.spec && group0.value === group1.value;
    }

    var resourceCommonPlugin = createPlugin({
        deps: [
            premiumCommonPlugin,
        ],
        reducers: [
            reduceResources,
        ],
        isLoadingFuncs: [
            function (state) { return state.resourceSource && state.resourceSource.isFetching; },
        ],
        eventRefiners: EVENT_REFINERS$1,
        eventDefMemberAdders: [generateEventDefResourceMembers],
        isDraggableTransformers: [transformIsDraggable],
        eventDragMutationMassagers: [massageEventDragMutation],
        eventDefMutationAppliers: [applyEventDefMutation],
        dateSelectionTransformers: [transformDateSelectionJoin],
        datePointTransforms: [transformDatePoint],
        dateSpanTransforms: [transformDateSpan],
        viewPropsTransformers: [ResourceDataAdder, ResourceEventConfigAdder],
        isPropsValid: isPropsValidWithResources,
        externalDefTransforms: [transformExternalDef],
        eventResizeJoinTransforms: [transformEventResizeJoin],
        eventDropTransformers: [transformEventDrop],
        optionChangeHandlers: optionChangeHandlers,
        optionRefiners: OPTION_REFINERS$6,
        listenerRefiners: LISTENER_REFINERS$1,
        propSetHandlers: { resourceStore: handleResourceStore },
    });

    var ResourceDayTableJoiner = /** @class */ (function (_super) {
        __extends(ResourceDayTableJoiner, _super);
        function ResourceDayTableJoiner() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ResourceDayTableJoiner.prototype.transformSeg = function (seg, resourceDayTableModel, resourceI) {
            var colRanges = resourceDayTableModel.computeColRanges(seg.firstCol, seg.lastCol, resourceI);
            return colRanges.map(function (colRange) { return (__assign(__assign(__assign({}, seg), colRange), { isStart: seg.isStart && colRange.isStart, isEnd: seg.isEnd && colRange.isEnd })); });
        };
        return ResourceDayTableJoiner;
    }(VResourceJoiner));

    var ResourceDayTable = /** @class */ (function (_super) {
        __extends(ResourceDayTable, _super);
        function ResourceDayTable() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.allowAcrossResources = false;
            _this.splitter = new VResourceSplitter();
            _this.slicers = {};
            _this.joiner = new ResourceDayTableJoiner();
            _this.tableRef = createRef();
            _this.handleRootEl = function (rootEl) {
                if (rootEl) {
                    _this.context.registerInteractiveComponent(_this, { el: rootEl });
                }
                else {
                    _this.context.unregisterInteractiveComponent(_this);
                }
            };
            return _this;
        }
        ResourceDayTable.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var resourceDayTableModel = props.resourceDayTableModel, nextDayThreshold = props.nextDayThreshold, dateProfile = props.dateProfile;
            var splitProps = this.splitter.splitProps(props);
            this.slicers = mapHash(splitProps, function (split, resourceId) { return _this.slicers[resourceId] || new DayTableSlicer(); });
            var slicedProps = mapHash(this.slicers, function (slicer, resourceId) { return slicer.sliceProps(splitProps[resourceId], dateProfile, nextDayThreshold, context, resourceDayTableModel.dayTableModel); });
            this.allowAcrossResources = resourceDayTableModel.dayTableModel.colCnt === 1; // hack for EventResizing
            return (createElement(Table, __assign({ forPrint: props.forPrint, ref: this.tableRef, elRef: this.handleRootEl }, this.joiner.joinProps(slicedProps, resourceDayTableModel), { cells: resourceDayTableModel.cells, dateProfile: dateProfile, colGroupNode: props.colGroupNode, tableMinWidth: props.tableMinWidth, renderRowIntro: props.renderRowIntro, dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, showWeekNumbers: props.showWeekNumbers, expandRows: props.expandRows, headerAlignElRef: props.headerAlignElRef, clientWidth: props.clientWidth, clientHeight: props.clientHeight })));
        };
        ResourceDayTable.prototype.prepareHits = function () {
            this.tableRef.current.prepareHits();
        };
        ResourceDayTable.prototype.queryHit = function (positionLeft, positionTop) {
            var rawHit = this.tableRef.current.positionToHit(positionLeft, positionTop);
            if (rawHit) {
                return {
                    component: this,
                    dateSpan: {
                        range: rawHit.dateSpan.range,
                        allDay: rawHit.dateSpan.allDay,
                        resourceId: this.props.resourceDayTableModel.cells[rawHit.row][rawHit.col].resource.id,
                    },
                    dayEl: rawHit.dayEl,
                    rect: {
                        left: rawHit.relativeRect.left,
                        right: rawHit.relativeRect.right,
                        top: rawHit.relativeRect.top,
                        bottom: rawHit.relativeRect.bottom,
                    },
                    layer: 0,
                };
            }
            return null;
        };
        return ResourceDayTable;
    }(DateComponent));

    var ResourceDayTableView = /** @class */ (function (_super) {
        __extends(ResourceDayTableView, _super);
        function ResourceDayTableView() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.flattenResources = memoize(flattenResources);
            _this.buildResourceDayTableModel = memoize(buildResourceDayTableModel);
            _this.headerRef = createRef();
            _this.tableRef = createRef();
            return _this;
        }
        ResourceDayTableView.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var options = context.options;
            var resourceOrderSpecs = options.resourceOrder || DEFAULT_RESOURCE_ORDER;
            var resources = this.flattenResources(props.resourceStore, resourceOrderSpecs);
            var resourceDayTableModel = this.buildResourceDayTableModel(props.dateProfile, context.dateProfileGenerator, resources, options.datesAboveResources, context);
            var headerContent = options.dayHeaders && (createElement(ResourceDayHeader, { ref: this.headerRef, resources: resources, dateProfile: props.dateProfile, dates: resourceDayTableModel.dayTableModel.headerDates, datesRepDistinctDays: true }));
            var bodyContent = function (contentArg) { return (createElement(ResourceDayTable, { ref: _this.tableRef, dateProfile: props.dateProfile, resourceDayTableModel: resourceDayTableModel, businessHours: props.businessHours, eventStore: props.eventStore, eventUiBases: props.eventUiBases, dateSelection: props.dateSelection, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, dayMaxEvents: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, showWeekNumbers: options.weekNumbers, expandRows: !props.isHeightAuto, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint })); };
            return options.dayMinWidth
                ? this.renderHScrollLayout(headerContent, bodyContent, resourceDayTableModel.colCnt, options.dayMinWidth)
                : this.renderSimpleLayout(headerContent, bodyContent);
        };
        return ResourceDayTableView;
    }(TableView));
    function buildResourceDayTableModel(dateProfile, dateProfileGenerator, resources, datesAboveResources, context) {
        var dayTable = buildDayTableModel(dateProfile, dateProfileGenerator);
        return datesAboveResources ?
            new DayResourceTableModel(dayTable, resources, context) :
            new ResourceDayTableModel(dayTable, resources, context);
    }

    var resourceDayGridPlugin = createPlugin({
        deps: [
            premiumCommonPlugin,
            resourceCommonPlugin,
            dayGridPlugin,
        ],
        initialView: 'resourceDayGridDay',
        views: {
            resourceDayGrid: {
                type: 'dayGrid',
                component: ResourceDayTableView,
                needsResourceData: true,
            },
            resourceDayGridDay: {
                type: 'resourceDayGrid',
                duration: { days: 1 },
            },
            resourceDayGridWeek: {
                type: 'resourceDayGrid',
                duration: { weeks: 1 },
            },
            resourceDayGridMonth: {
                type: 'resourceDayGrid',
                duration: { months: 1 },
                // TODO: wish we didn't have to C&P from dayGrid's file
                monthMode: true,
                fixedWeekCount: true,
            },
        },
    });

    var ResourceDayTimeColsJoiner = /** @class */ (function (_super) {
        __extends(ResourceDayTimeColsJoiner, _super);
        function ResourceDayTimeColsJoiner() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ResourceDayTimeColsJoiner.prototype.transformSeg = function (seg, resourceDayTable, resourceI) {
            return [
                __assign(__assign({}, seg), { col: resourceDayTable.computeCol(seg.col, resourceI) }),
            ];
        };
        return ResourceDayTimeColsJoiner;
    }(VResourceJoiner));

    var ResourceDayTimeCols = /** @class */ (function (_super) {
        __extends(ResourceDayTimeCols, _super);
        function ResourceDayTimeCols() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.allowAcrossResources = false;
            _this.buildDayRanges = memoize(buildDayRanges);
            _this.splitter = new VResourceSplitter();
            _this.slicers = {};
            _this.joiner = new ResourceDayTimeColsJoiner();
            _this.timeColsRef = createRef();
            _this.handleRootEl = function (rootEl) {
                if (rootEl) {
                    _this.context.registerInteractiveComponent(_this, { el: rootEl });
                }
                else {
                    _this.context.unregisterInteractiveComponent(_this);
                }
            };
            return _this;
        }
        ResourceDayTimeCols.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var dateEnv = context.dateEnv, options = context.options;
            var dateProfile = props.dateProfile, resourceDayTableModel = props.resourceDayTableModel;
            var dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
            var splitProps = this.splitter.splitProps(props);
            this.slicers = mapHash(splitProps, function (split, resourceId) { return _this.slicers[resourceId] || new DayTimeColsSlicer(); });
            var slicedProps = mapHash(this.slicers, function (slicer, resourceId) { return slicer.sliceProps(splitProps[resourceId], dateProfile, null, context, dayRanges); });
            this.allowAcrossResources = dayRanges.length === 1;
            return ( // TODO: would move this further down hierarchy, but sliceNowDate needs it
            createElement(NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' }, function (nowDate, todayRange) { return (createElement(TimeCols, __assign({ ref: _this.timeColsRef, rootElRef: _this.handleRootEl }, _this.joiner.joinProps(slicedProps, resourceDayTableModel), { dateProfile: dateProfile, axis: props.axis, slotDuration: props.slotDuration, slatMetas: props.slatMetas, cells: resourceDayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: options.nowIndicator && _this.buildNowIndicatorSegs(nowDate), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, forPrint: props.forPrint, onSlatCoords: props.onSlatCoords }))); }));
        };
        ResourceDayTimeCols.prototype.buildNowIndicatorSegs = function (date) {
            var nonResourceSegs = this.slicers[''].sliceNowDate(date, this.context, this.dayRanges);
            return this.joiner.expandSegs(this.props.resourceDayTableModel, nonResourceSegs);
        };
        ResourceDayTimeCols.prototype.queryHit = function (positionLeft, positionTop) {
            var rawHit = this.timeColsRef.current.positionToHit(positionLeft, positionTop);
            if (rawHit) {
                return {
                    component: this,
                    dateSpan: {
                        range: rawHit.dateSpan.range,
                        allDay: rawHit.dateSpan.allDay,
                        resourceId: this.props.resourceDayTableModel.cells[0][rawHit.col].resource.id,
                    },
                    dayEl: rawHit.dayEl,
                    rect: {
                        left: rawHit.relativeRect.left,
                        right: rawHit.relativeRect.right,
                        top: rawHit.relativeRect.top,
                        bottom: rawHit.relativeRect.bottom,
                    },
                    layer: 0,
                };
            }
            return null;
        };
        return ResourceDayTimeCols;
    }(DateComponent));

    var ResourceDayTimeColsView = /** @class */ (function (_super) {
        __extends(ResourceDayTimeColsView, _super);
        function ResourceDayTimeColsView() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.flattenResources = memoize(flattenResources);
            _this.buildResourceTimeColsModel = memoize(buildResourceTimeColsModel);
            _this.buildSlatMetas = memoize(buildSlatMetas);
            return _this;
        }
        ResourceDayTimeColsView.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var options = context.options, dateEnv = context.dateEnv;
            var dateProfile = props.dateProfile;
            var splitProps = this.allDaySplitter.splitProps(props);
            var resourceOrderSpecs = options.resourceOrder || DEFAULT_RESOURCE_ORDER;
            var resources = this.flattenResources(props.resourceStore, resourceOrderSpecs);
            var resourceDayTableModel = this.buildResourceTimeColsModel(dateProfile, context.dateProfileGenerator, resources, options.datesAboveResources, context);
            var slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, options.slotDuration, dateEnv);
            var dayMinWidth = options.dayMinWidth;
            var hasAttachedAxis = !dayMinWidth;
            var hasDetachedAxis = dayMinWidth;
            var headerContent = options.dayHeaders && (createElement(ResourceDayHeader, { resources: resources, dates: resourceDayTableModel.dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null }));
            var allDayContent = (options.allDaySlot !== false) && (function (contentArg) { return (createElement(ResourceDayTable, __assign({}, splitProps.allDay, { dateProfile: dateProfile, resourceDayTableModel: resourceDayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: hasAttachedAxis ? _this.renderTableRowAxis : null, showWeekNumbers: false, expandRows: false, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }, _this.getAllDayMaxEventProps()))); });
            var timeGridContent = function (contentArg) { return (createElement(ResourceDayTimeCols, __assign({}, splitProps.timed, { dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, resourceDayTableModel: resourceDayTableModel, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, onSlatCoords: _this.handleSlatCoords, expandRows: contentArg.expandRows, forPrint: props.forPrint, onScrollTopRequest: _this.handleScrollTopRequest }))); };
            return hasDetachedAxis
                ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, resourceDayTableModel.colCnt, dayMinWidth, slatMetas, this.state.slatCoords)
                : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);
        };
        return ResourceDayTimeColsView;
    }(TimeColsView));
    function buildResourceTimeColsModel(dateProfile, dateProfileGenerator, resources, datesAboveResources, context) {
        var dayTable = buildTimeColsModel(dateProfile, dateProfileGenerator);
        return datesAboveResources ?
            new DayResourceTableModel(dayTable, resources, context) :
            new ResourceDayTableModel(dayTable, resources, context);
    }

    var resourceTimeGridPlugin = createPlugin({
        deps: [
            premiumCommonPlugin,
            resourceCommonPlugin,
            timeGridPlugin,
        ],
        initialView: 'resourceTimeGridDay',
        views: {
            resourceTimeGrid: {
                type: 'timeGrid',
                component: ResourceDayTimeColsView,
                needsResourceData: true,
            },
            resourceTimeGridDay: {
                type: 'resourceTimeGrid',
                duration: { days: 1 },
            },
            resourceTimeGridWeek: {
                type: 'resourceTimeGrid',
                duration: { weeks: 1 },
            },
        },
    });

    /*
    Renders the DOM responsible for the subrow expander area,
    as well as the space before it (used to align expanders of similar depths)
    */
    function ExpanderIcon(_a) {
        var depth = _a.depth, hasChildren = _a.hasChildren, isExpanded = _a.isExpanded, onExpanderClick = _a.onExpanderClick;
        var nodes = [];
        for (var i = 0; i < depth; i += 1) {
            nodes.push(createElement("span", { className: "fc-icon" }));
        }
        var iconClassNames = ['fc-icon'];
        if (hasChildren) {
            if (isExpanded) {
                iconClassNames.push('fc-icon-minus-square');
            }
            else {
                iconClassNames.push('fc-icon-plus-square');
            }
        }
        nodes.push(createElement("span", { className: 'fc-datagrid-expander' + (hasChildren ? '' : ' fc-datagrid-expander-placeholder'), onClick: onExpanderClick },
            createElement("span", { className: iconClassNames.join(' ') })));
        return createElement.apply(void 0, __spreadArrays([Fragment, {}], nodes));
    }

    function refineHookProps$1(raw) {
        return {
            resource: new ResourceApi(raw.context, raw.resource),
            fieldValue: raw.fieldValue,
            view: raw.context.viewApi,
        };
    }

    var SpreadsheetIndividualCellInner = /** @class */ (function (_super) {
        __extends(SpreadsheetIndividualCellInner, _super);
        function SpreadsheetIndividualCellInner() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SpreadsheetIndividualCellInner.prototype.render = function () {
            var props = this.props;
            return (createElement(ContentHook, { hookProps: props.hookProps, content: props.colSpec.cellContent, defaultContent: renderResourceInner }, function (innerElRef, innerContent) { return (createElement("span", { className: "fc-datagrid-cell-main", ref: innerElRef }, innerContent)); }));
        };
        return SpreadsheetIndividualCellInner;
    }(BaseComponent));
    function renderResourceInner(hookProps) {
        return hookProps.fieldValue || createElement(Fragment, null, "\u00A0");
    }

    // worth making a PureComponent? (because of innerHeight)
    var SpreadsheetIndividualCell = /** @class */ (function (_super) {
        __extends(SpreadsheetIndividualCell, _super);
        function SpreadsheetIndividualCell() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.refineHookProps = memoizeObjArg(refineHookProps$1);
            _this.normalizeClassNames = buildClassNameNormalizer();
            _this.onExpanderClick = function (ev) {
                var props = _this.props;
                if (props.hasChildren) {
                    _this.context.dispatch({
                        type: 'SET_RESOURCE_ENTITY_EXPANDED',
                        id: props.resource.id,
                        isExpanded: !props.isExpanded,
                    });
                }
            };
            return _this;
        }
        SpreadsheetIndividualCell.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var colSpec = props.colSpec;
            var hookProps = this.refineHookProps({
                resource: props.resource,
                fieldValue: props.fieldValue,
                context: context,
            });
            var customClassNames = this.normalizeClassNames(colSpec.cellClassNames, hookProps);
            return (createElement(MountHook, { hookProps: hookProps, didMount: colSpec.cellDidMount, willUnmount: colSpec.cellWillUnmount }, function (rootElRef) { return (createElement("td", { ref: rootElRef, "data-resource-id": props.resource.id, className: [
                    'fc-datagrid-cell',
                    'fc-resource',
                ].concat(customClassNames).join(' ') },
                createElement("div", { className: "fc-datagrid-cell-frame", style: { height: props.innerHeight } },
                    createElement("div", { className: "fc-datagrid-cell-cushion fc-scrollgrid-sync-inner" },
                        colSpec.isMain && (createElement(ExpanderIcon, { depth: props.depth, hasChildren: props.hasChildren, isExpanded: props.isExpanded, onExpanderClick: _this.onExpanderClick })),
                        createElement(SpreadsheetIndividualCellInner, { hookProps: hookProps, colSpec: colSpec }))))); }));
        };
        return SpreadsheetIndividualCell;
    }(BaseComponent));

    // for VERTICAL cell grouping, in spreadsheet area
    var SpreadsheetGroupCell = /** @class */ (function (_super) {
        __extends(SpreadsheetGroupCell, _super);
        function SpreadsheetGroupCell() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SpreadsheetGroupCell.prototype.render = function () {
            var _a = this, props = _a.props, context = _a.context;
            var colSpec = props.colSpec;
            var hookProps = {
                groupValue: props.fieldValue,
                view: context.viewApi,
            };
            // a grouped cell. no data that is specific to this specific resource
            // `colSpec` is for the group. a GroupSpec :(
            return (createElement(RenderHook, { hookProps: hookProps, classNames: colSpec.cellClassNames, content: colSpec.cellContent, defaultContent: renderGroupInner, didMount: colSpec.cellDidMount, willUnmount: colSpec.cellWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (
            // TODO: make data-attr with group value?
            createElement("td", { className: ['fc-datagrid-cell', 'fc-resource-group'].concat(classNames).join(' '), rowSpan: props.rowSpan, ref: rootElRef },
                createElement("div", { className: "fc-datagrid-cell-frame fc-datagrid-cell-frame-liquid" },
                    createElement("div", { className: "fc-datagrid-cell-cushion fc-sticky", ref: innerElRef }, innerContent)))); }));
        };
        return SpreadsheetGroupCell;
    }(BaseComponent));
    function renderGroupInner(hookProps) {
        return hookProps.groupValue || createElement(Fragment, null, "\u00A0");
    }

    var SpreadsheetRow = /** @class */ (function (_super) {
        __extends(SpreadsheetRow, _super);
        function SpreadsheetRow() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SpreadsheetRow.prototype.render = function () {
            var props = this.props;
            var resource = props.resource, rowSpans = props.rowSpans, depth = props.depth;
            var resourceFields = buildResourceFields(resource); // slightly inefficient. already done up the call stack
            return (createElement("tr", null, props.colSpecs.map(function (colSpec, i) {
                var rowSpan = rowSpans[i];
                if (rowSpan === 0) { // not responsible for group-based rows. VRowGroup is
                    return null;
                }
                if (rowSpan == null) {
                    rowSpan = 1;
                }
                var fieldValue = colSpec.field ? resourceFields[colSpec.field] :
                    (resource.title || getPublicId(resource.id));
                if (rowSpan > 1) {
                    return (createElement(SpreadsheetGroupCell, { key: i, colSpec: colSpec, fieldValue: fieldValue, rowSpan: rowSpan }));
                }
                return (createElement(SpreadsheetIndividualCell, { key: i, colSpec: colSpec, resource: resource, fieldValue: fieldValue, depth: depth, hasChildren: props.hasChildren, isExpanded: props.isExpanded, innerHeight: props.innerHeight }));
            })));
        };
        return SpreadsheetRow;
    }(BaseComponent));
    SpreadsheetRow.addPropsEquality({
        rowSpans: isArraysEqual,
    });

    // for HORIZONTAL cell grouping, in spreadsheet area
    var SpreadsheetGroupRow = /** @class */ (function (_super) {
        __extends(SpreadsheetGroupRow, _super);
        function SpreadsheetGroupRow() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.innerInnerRef = createRef();
            _this.onExpanderClick = function () {
                var props = _this.props;
                _this.context.dispatch({
                    type: 'SET_RESOURCE_ENTITY_EXPANDED',
                    id: props.id,
                    isExpanded: !props.isExpanded,
                });
            };
            return _this;
        }
        SpreadsheetGroupRow.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var hookProps = { groupValue: props.group.value, view: context.viewApi };
            var spec = props.group.spec;
            return (createElement("tr", null,
                createElement(RenderHook, { hookProps: hookProps, classNames: spec.labelClassNames, content: spec.labelContent, defaultContent: renderCellInner, didMount: spec.labelDidMount, willUnmount: spec.labelWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("td", { ref: rootElRef, colSpan: props.spreadsheetColCnt, className: [
                        'fc-datagrid-cell',
                        'fc-resource-group',
                        context.theme.getClass('tableCellShaded'),
                    ].concat(classNames).join(' ') },
                    createElement("div", { className: "fc-datagrid-cell-frame", style: { height: props.innerHeight } },
                        createElement("div", { className: "fc-datagrid-cell-cushion fc-scrollgrid-sync-inner", ref: _this.innerInnerRef },
                            createElement(ExpanderIcon, { depth: 0, hasChildren: true, isExpanded: props.isExpanded, onExpanderClick: _this.onExpanderClick }),
                            createElement("span", { className: "fc-datagrid-cell-main", ref: innerElRef }, innerContent))))); })));
        };
        return SpreadsheetGroupRow;
    }(BaseComponent));
    SpreadsheetGroupRow.addPropsEquality({
        group: isGroupsEqual,
    });
    function renderCellInner(hookProps) {
        return hookProps.groupValue || createElement(Fragment, null, "\u00A0");
    }

    var SPREADSHEET_COL_MIN_WIDTH = 20;
    var SpreadsheetHeader = /** @class */ (function (_super) {
        __extends(SpreadsheetHeader, _super);
        function SpreadsheetHeader() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.resizerElRefs = new RefMap(_this._handleColResizerEl.bind(_this));
            _this.colDraggings = {};
            return _this;
        }
        SpreadsheetHeader.prototype.render = function () {
            var _this = this;
            var _a = this.props, colSpecs = _a.colSpecs, superHeaderRendering = _a.superHeaderRendering, rowInnerHeights = _a.rowInnerHeights;
            var hookProps = { view: this.context.viewApi };
            var rowNodes = [];
            rowInnerHeights = rowInnerHeights.slice(); // copy, because we're gonna pop
            if (superHeaderRendering) {
                var rowInnerHeight_1 = rowInnerHeights.shift();
                rowNodes.push(createElement("tr", { key: "row-super" },
                    createElement(RenderHook, { hookProps: hookProps, classNames: superHeaderRendering.headerClassNames, content: superHeaderRendering.headerContent, didMount: superHeaderRendering.headerDidMount, willUnmount: superHeaderRendering.headerWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("th", { colSpan: colSpecs.length, ref: rootElRef, className: [
                            'fc-datagrid-cell',
                            'fc-datagrid-cell-super',
                        ].concat(classNames).join(' ') },
                        createElement("div", { className: "fc-datagrid-cell-frame", style: { height: rowInnerHeight_1 } },
                            createElement("div", { className: "fc-datagrid-cell-cushion fc-scrollgrid-sync-inner", ref: innerElRef }, innerContent)))); })));
            }
            var rowInnerHeight = rowInnerHeights.shift();
            rowNodes.push(createElement("tr", { key: "row" }, colSpecs.map(function (colSpec, i) {
                var isLastCol = i === (colSpecs.length - 1);
                // need empty inner div for abs positioning for resizer
                return (createElement(RenderHook, { key: i, hookProps: hookProps, classNames: colSpec.headerClassNames, content: colSpec.headerContent, didMount: colSpec.headerDidMount, willUnmount: colSpec.headerWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("th", { ref: rootElRef, className: ['fc-datagrid-cell'].concat(classNames).join(' ') },
                    createElement("div", { className: "fc-datagrid-cell-frame", style: { height: rowInnerHeight } },
                        createElement("div", { className: "fc-datagrid-cell-cushion fc-scrollgrid-sync-inner" },
                            colSpec.isMain && (createElement("span", { className: "fc-datagrid-expander fc-datagrid-expander-placeholder" },
                                createElement("span", { className: "fc-icon" }))),
                            createElement("span", { className: "fc-datagrid-cell-main", ref: innerElRef }, innerContent)),
                        !isLastCol &&
                            createElement("div", { className: "fc-datagrid-cell-resizer", ref: _this.resizerElRefs.createRef(i) })))); }));
            })));
            return (createElement(Fragment, null, rowNodes));
        };
        SpreadsheetHeader.prototype._handleColResizerEl = function (resizerEl, index) {
            var colDraggings = this.colDraggings;
            if (!resizerEl) {
                var dragging = colDraggings[index];
                if (dragging) {
                    dragging.destroy();
                    delete colDraggings[index];
                }
            }
            else {
                var dragging = this.initColResizing(resizerEl, parseInt(index, 10));
                if (dragging) {
                    colDraggings[index] = dragging;
                }
            }
        };
        SpreadsheetHeader.prototype.initColResizing = function (resizerEl, index) {
            var _a = this.context, pluginHooks = _a.pluginHooks, isRtl = _a.isRtl;
            var onColWidthChange = this.props.onColWidthChange;
            var ElementDraggingImpl = pluginHooks.elementDraggingImpl;
            if (ElementDraggingImpl) {
                var dragging = new ElementDraggingImpl(resizerEl);
                var startWidth_1; // of just the single column
                var currentWidths_1; // of all columns
                dragging.emitter.on('dragstart', function () {
                    var allCells = findElements(elementClosest(resizerEl, 'tr'), 'th');
                    currentWidths_1 = allCells.map(function (cellEl) { return (cellEl.getBoundingClientRect().width); });
                    startWidth_1 = currentWidths_1[index];
                });
                dragging.emitter.on('dragmove', function (pev) {
                    currentWidths_1[index] = Math.max(startWidth_1 + pev.deltaX * (isRtl ? -1 : 1), SPREADSHEET_COL_MIN_WIDTH);
                    if (onColWidthChange) {
                        onColWidthChange(currentWidths_1.slice()); // send a copy since currentWidths continues to be mutated
                    }
                });
                dragging.setAutoScrollEnabled(false); // because gets weird with auto-scrolling time area
                return dragging;
            }
            return null;
        };
        return SpreadsheetHeader;
    }(BaseComponent));

    var ResourceTimelineLaneMisc = /** @class */ (function (_super) {
        __extends(ResourceTimelineLaneMisc, _super);
        function ResourceTimelineLaneMisc() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ResourceTimelineLaneMisc.prototype.render = function () {
            var _a = this, props = _a.props, context = _a.context;
            var hookProps = { resource: new ResourceApi(context, props.resource) }; // just easier to make directly
            return (createElement(ContentHook, { hookProps: hookProps, content: context.options.resourceLaneContent }, function (innerElRef, innerContent) { return (innerContent && // TODO: test how this would interfere with height
                createElement("div", { className: "fc-timeline-lane-misc", ref: innerElRef }, innerContent)); }));
        };
        return ResourceTimelineLaneMisc;
    }(BaseComponent));

    var ResourceTimelineLane = /** @class */ (function (_super) {
        __extends(ResourceTimelineLane, _super);
        function ResourceTimelineLane() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.refineHookProps = memoizeObjArg(refineHookProps$2);
            _this.normalizeClassNames = buildClassNameNormalizer();
            _this.handleHeightChange = function (innerEl, isStable) {
                if (_this.props.onHeightChange) {
                    _this.props.onHeightChange(
                    // would want to use own <tr> ref, but not guaranteed to be ready when this fires
                    elementClosest(innerEl, 'tr'), isStable);
                }
            };
            return _this;
        }
        ResourceTimelineLane.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, context = _a.context;
            var options = context.options;
            var hookProps = this.refineHookProps({ resource: props.resource, context: context });
            var customClassNames = this.normalizeClassNames(options.resourceLaneClassNames, hookProps);
            return (createElement("tr", { ref: props.elRef },
                createElement(MountHook, { hookProps: hookProps, didMount: options.resourceLaneDidMount, willUnmount: options.resourceLaneWillUnmount }, function (rootElRef) { return (createElement("td", { ref: rootElRef, className: ['fc-timeline-lane', 'fc-resource'].concat(customClassNames).join(' '), "data-resource-id": props.resource.id },
                    createElement("div", { className: "fc-timeline-lane-frame", style: { height: props.innerHeight } },
                        createElement(ResourceTimelineLaneMisc, { resource: props.resource }),
                        createElement(TimelineLane, { dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, nextDayThreshold: props.nextDayThreshold, businessHours: props.businessHours, eventStore: props.eventStore, eventUiBases: props.eventUiBases, dateSelection: props.dateSelection, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, timelineCoords: props.timelineCoords, onHeightChange: _this.handleHeightChange })))); }))); // important NOT to do liquid-height. dont want to shrink height smaller than content
        };
        return ResourceTimelineLane;
    }(BaseComponent));
    function refineHookProps$2(raw) {
        return {
            resource: new ResourceApi(raw.context, raw.resource),
        };
    }

    /*
    parallels the SpreadsheetGroupRow
    */
    var DividerRow = /** @class */ (function (_super) {
        __extends(DividerRow, _super);
        function DividerRow() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        DividerRow.prototype.render = function () {
            var _this = this;
            var props = this.props;
            var renderingHooks = this.props.renderingHooks;
            var hookProps = { groupValue: props.groupValue, view: this.context.viewApi };
            return (createElement("tr", { ref: props.elRef },
                createElement(RenderHook, { hookProps: hookProps, classNames: renderingHooks.laneClassNames, content: renderingHooks.laneContent, didMount: renderingHooks.laneDidMount, willUnmount: renderingHooks.laneWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("td", { ref: rootElRef, className: [
                        'fc-timeline-lane',
                        'fc-resource-group',
                        _this.context.theme.getClass('tableCellShaded'),
                    ].concat(classNames).join(' ') },
                    createElement("div", { style: { height: props.innerHeight }, ref: innerElRef }, innerContent))); })));
        };
        return DividerRow;
    }(BaseComponent));

    var ResourceTimelineLanesBody = /** @class */ (function (_super) {
        __extends(ResourceTimelineLanesBody, _super);
        function ResourceTimelineLanesBody() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ResourceTimelineLanesBody.prototype.render = function () {
            var _a = this, props = _a.props, context = _a.context;
            var rowElRefs = props.rowElRefs, innerHeights = props.innerHeights;
            return (createElement("tbody", null, props.rowNodes.map(function (node, index) {
                if (node.group) {
                    return (createElement(DividerRow, { key: node.id, elRef: rowElRefs.createRef(node.id), groupValue: node.group.value, renderingHooks: node.group.spec, innerHeight: innerHeights[index] || '' }));
                }
                if (node.resource) {
                    var resource = node.resource;
                    return (createElement(ResourceTimelineLane, __assign({ key: node.id, elRef: rowElRefs.createRef(node.id) }, props.splitProps[resource.id], { resource: resource, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, nextDayThreshold: context.options.nextDayThreshold, businessHours: resource.businessHours || props.fallbackBusinessHours, innerHeight: innerHeights[index] || '', timelineCoords: props.slatCoords, onHeightChange: props.onRowHeightChange })));
                }
                return null;
            })));
        };
        return ResourceTimelineLanesBody;
    }(BaseComponent));

    var ResourceTimelineLanes = /** @class */ (function (_super) {
        __extends(ResourceTimelineLanes, _super);
        function ResourceTimelineLanes() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.rootElRef = createRef();
            _this.rowElRefs = new RefMap();
            return _this;
        }
        ResourceTimelineLanes.prototype.render = function () {
            var _a = this, props = _a.props, context = _a.context;
            return (createElement("table", { ref: this.rootElRef, className: 'fc-scrollgrid-sync-table ' + context.theme.getClass('table'), style: {
                    minWidth: props.tableMinWidth,
                    width: props.clientWidth,
                    height: props.minHeight,
                } },
                createElement(ResourceTimelineLanesBody, { rowElRefs: this.rowElRefs, rowNodes: props.rowNodes, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, splitProps: props.splitProps, fallbackBusinessHours: props.fallbackBusinessHours, slatCoords: props.slatCoords, innerHeights: props.innerHeights, onRowHeightChange: props.onRowHeightChange })));
        };
        ResourceTimelineLanes.prototype.componentDidMount = function () {
            this.updateCoords();
        };
        ResourceTimelineLanes.prototype.componentDidUpdate = function () {
            this.updateCoords();
        };
        ResourceTimelineLanes.prototype.componentWillUnmount = function () {
            if (this.props.onRowCoords) {
                this.props.onRowCoords(null);
            }
        };
        ResourceTimelineLanes.prototype.updateCoords = function () {
            var props = this.props;
            if (props.onRowCoords && props.clientWidth !== null) { // a populated clientWidth means sizing has stabilized
                this.props.onRowCoords(new PositionCache(this.rootElRef.current, collectRowEls(this.rowElRefs.currentMap, props.rowNodes), false, true));
            }
        };
        return ResourceTimelineLanes;
    }(BaseComponent));
    function collectRowEls(elMap, rowNodes) {
        return rowNodes.map(function (rowNode) { return elMap[rowNode.id]; });
    }

    var ResourceTimelineGrid = /** @class */ (function (_super) {
        __extends(ResourceTimelineGrid, _super);
        function ResourceTimelineGrid() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.computeHasResourceBusinessHours = memoize(computeHasResourceBusinessHours);
            _this.resourceSplitter = new ResourceSplitter(); // doesn't let it do businessHours tho
            _this.bgSlicer = new TimelineLaneSlicer();
            _this.slatsRef = createRef(); // needed for Hit creation :(
            _this.state = {
                slatCoords: null,
            };
            _this.handleEl = function (el) {
                if (el) {
                    _this.context.registerInteractiveComponent(_this, { el: el });
                }
                else {
                    _this.context.unregisterInteractiveComponent(_this);
                }
            };
            _this.handleSlatCoords = function (slatCoords) {
                _this.setState({ slatCoords: slatCoords });
                if (_this.props.onSlatCoords) {
                    _this.props.onSlatCoords(slatCoords);
                }
            };
            _this.handleRowCoords = function (rowCoords) {
                _this.rowCoords = rowCoords;
                if (_this.props.onRowCoords) {
                    _this.props.onRowCoords(rowCoords);
                }
            };
            return _this;
        }
        ResourceTimelineGrid.prototype.render = function () {
            var _this = this;
            var _a = this, props = _a.props, state = _a.state, context = _a.context;
            var dateProfile = props.dateProfile, tDateProfile = props.tDateProfile;
            var timerUnit = greatestDurationDenominator(tDateProfile.slotDuration).unit;
            var hasResourceBusinessHours = this.computeHasResourceBusinessHours(props.rowNodes);
            var splitProps = this.resourceSplitter.splitProps(props);
            var bgLaneProps = splitProps[''];
            var bgSlicedProps = this.bgSlicer.sliceProps(bgLaneProps, dateProfile, tDateProfile.isTimeScale ? null : props.nextDayThreshold, context, // wish we didn't need to pass in the rest of these args...
            dateProfile, context.dateProfileGenerator, tDateProfile, context.dateEnv);
            // WORKAROUND: make ignore slatCoords when out of sync with dateProfile
            var slatCoords = state.slatCoords && state.slatCoords.dateProfile === props.dateProfile ? state.slatCoords : null;
            return (createElement("div", { ref: this.handleEl, className: "fc-timeline-body", style: { minWidth: props.tableMinWidth } },
                createElement(NowTimer, { unit: timerUnit }, function (nowDate, todayRange) { return (createElement(Fragment, null,
                    createElement(TimelineSlats, { ref: _this.slatsRef, dateProfile: dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, clientWidth: props.clientWidth, tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, onCoords: _this.handleSlatCoords, onScrollLeftRequest: props.onScrollLeftRequest }),
                    createElement(TimelineLaneBg, { businessHourSegs: hasResourceBusinessHours ? null : bgSlicedProps.businessHourSegs, bgEventSegs: bgSlicedProps.bgEventSegs, timelineCoords: slatCoords, 
                        // empty array will result in unnecessary rerenders?
                        eventResizeSegs: (bgSlicedProps.eventResize ? bgSlicedProps.eventResize.segs : []), dateSelectionSegs: bgSlicedProps.dateSelectionSegs, nowDate: nowDate, todayRange: todayRange }),
                    createElement(ResourceTimelineLanes, { rowNodes: props.rowNodes, dateProfile: dateProfile, tDateProfile: props.tDateProfile, nowDate: nowDate, todayRange: todayRange, splitProps: splitProps, fallbackBusinessHours: hasResourceBusinessHours ? props.businessHours : null, clientWidth: props.clientWidth, minHeight: props.expandRows ? props.clientHeight : '', tableMinWidth: props.tableMinWidth, innerHeights: props.rowInnerHeights, slatCoords: slatCoords, onRowCoords: _this.handleRowCoords, onRowHeightChange: props.onRowHeightChange }),
                    (context.options.nowIndicator && slatCoords && slatCoords.isDateInRange(nowDate)) && (createElement("div", { className: "fc-timeline-now-indicator-container" },
                        createElement(NowIndicatorRoot, { isAxis: false, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { ref: rootElRef, className: ['fc-timeline-now-indicator-line'].concat(classNames).join(' '), style: { left: slatCoords.dateToCoord(nowDate) } }, innerContent)); }))))); })));
        };
        // Hit System
        // ------------------------------------------------------------------------------------------
        ResourceTimelineGrid.prototype.queryHit = function (positionLeft, positionTop) {
            var rowCoords = this.rowCoords;
            var rowIndex = rowCoords.topToIndex(positionTop);
            if (rowIndex != null) {
                var resource = this.props.rowNodes[rowIndex].resource;
                if (resource) { // not a group
                    var slatHit = this.slatsRef.current.positionToHit(positionLeft);
                    if (slatHit) {
                        return {
                            component: this,
                            dateSpan: {
                                range: slatHit.dateSpan.range,
                                allDay: slatHit.dateSpan.allDay,
                                resourceId: resource.id,
                            },
                            rect: {
                                left: slatHit.left,
                                right: slatHit.right,
                                top: rowCoords.tops[rowIndex],
                                bottom: rowCoords.bottoms[rowIndex],
                            },
                            dayEl: slatHit.dayEl,
                            layer: 0,
                        };
                    }
                }
            }
            return null;
        };
        return ResourceTimelineGrid;
    }(DateComponent));
    function computeHasResourceBusinessHours(rowNodes) {
        for (var _i = 0, rowNodes_1 = rowNodes; _i < rowNodes_1.length; _i++) {
            var node = rowNodes_1[_i];
            var resource = node.resource;
            if (resource && resource.businessHours) {
                return true;
            }
        }
        return false;
    }

    var MIN_RESOURCE_AREA_WIDTH = 30; // definitely bigger than scrollbars
    // RENAME?
    var ResourceTimelineViewLayout = /** @class */ (function (_super) {
        __extends(ResourceTimelineViewLayout, _super);
        function ResourceTimelineViewLayout() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.scrollGridRef = createRef();
            _this.timeBodyScrollerElRef = createRef();
            _this.spreadsheetHeaderChunkElRef = createRef();
            _this.rootElRef = createRef();
            _this.state = {
                resourceAreaWidthOverride: null,
            };
            return _this;
        }
        ResourceTimelineViewLayout.prototype.render = function () {
            var _a = this, props = _a.props, state = _a.state, context = _a.context;
            var options = context.options;
            var stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
            var stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(options);
            var sections = [
                {
                    type: 'header',
                    key: 'header',
                    syncRowHeights: true,
                    isSticky: stickyHeaderDates,
                    chunks: [
                        {
                            key: 'datagrid',
                            elRef: this.spreadsheetHeaderChunkElRef,
                            // TODO: allow the content to specify this. have general-purpose 'content' with obj with keys
                            tableClassName: 'fc-datagrid-header',
                            rowContent: props.spreadsheetHeaderRows,
                        },
                        {
                            key: 'divider',
                            outerContent: (createElement("td", { className: 'fc-resource-timeline-divider ' + context.theme.getClass('tableCellShaded') })),
                        },
                        {
                            key: 'timeline',
                            content: props.timeHeaderContent,
                        },
                    ],
                },
                {
                    type: 'body',
                    key: 'body',
                    syncRowHeights: true,
                    liquid: true,
                    expandRows: Boolean(options.expandRows),
                    chunks: [
                        {
                            key: 'datagrid',
                            tableClassName: 'fc-datagrid-body',
                            rowContent: props.spreadsheetBodyRows,
                        },
                        {
                            key: 'divider',
                            outerContent: (createElement("td", { className: 'fc-resource-timeline-divider ' + context.theme.getClass('tableCellShaded') })),
                        },
                        {
                            key: 'timeline',
                            scrollerElRef: this.timeBodyScrollerElRef,
                            content: props.timeBodyContent,
                        },
                    ],
                },
            ];
            if (stickyFooterScrollbar) {
                sections.push({
                    type: 'footer',
                    key: 'footer',
                    isSticky: true,
                    chunks: [
                        {
                            key: 'datagrid',
                            content: renderScrollShim,
                        },
                        {
                            key: 'divider',
                            outerContent: (createElement("td", { className: 'fc-resource-timeline-divider ' + context.theme.getClass('tableCellShaded') })),
                        },
                        {
                            key: 'timeline',
                            content: renderScrollShim,
                        },
                    ],
                });
            }
            var resourceAreaWidth = state.resourceAreaWidthOverride != null
                ? state.resourceAreaWidthOverride
                : options.resourceAreaWidth;
            return (createElement(ScrollGrid, { ref: this.scrollGridRef, elRef: this.rootElRef, liquid: !props.isHeightAuto && !props.forPrint, colGroups: [
                    { cols: props.spreadsheetCols, width: resourceAreaWidth },
                    { cols: [] },
                    { cols: props.timeCols },
                ], sections: sections }));
        };
        ResourceTimelineViewLayout.prototype.forceTimeScroll = function (left) {
            var scrollGrid = this.scrollGridRef.current;
            scrollGrid.forceScrollLeft(2, left); // 2 = the time area
        };
        ResourceTimelineViewLayout.prototype.forceResourceScroll = function (top) {
            var scrollGrid = this.scrollGridRef.current;
            scrollGrid.forceScrollTop(1, top); // 1 = the body
        };
        ResourceTimelineViewLayout.prototype.getResourceScroll = function () {
            var timeBodyScrollerEl = this.timeBodyScrollerElRef.current;
            return timeBodyScrollerEl.scrollTop;
        };
        // Resource Area Resizing
        // ------------------------------------------------------------------------------------------
        // NOTE: a callback Ref for the resizer was firing multiple times with same elements (Preact)
        // that's why we use spreadsheetResizerElRef instead
        ResourceTimelineViewLayout.prototype.componentDidMount = function () {
            this.initSpreadsheetResizing();
        };
        ResourceTimelineViewLayout.prototype.componentWillUnmount = function () {
            this.destroySpreadsheetResizing();
        };
        ResourceTimelineViewLayout.prototype.initSpreadsheetResizing = function () {
            var _this = this;
            var _a = this.context, isRtl = _a.isRtl, pluginHooks = _a.pluginHooks;
            var ElementDraggingImpl = pluginHooks.elementDraggingImpl;
            var spreadsheetHeadEl = this.spreadsheetHeaderChunkElRef.current;
            if (ElementDraggingImpl) {
                var rootEl_1 = this.rootElRef.current;
                var dragging = this.spreadsheetResizerDragging = new ElementDraggingImpl(rootEl_1, '.fc-resource-timeline-divider');
                var dragStartWidth_1;
                var viewWidth_1;
                dragging.emitter.on('dragstart', function () {
                    dragStartWidth_1 = spreadsheetHeadEl.getBoundingClientRect().width;
                    viewWidth_1 = rootEl_1.getBoundingClientRect().width;
                });
                dragging.emitter.on('dragmove', function (pev) {
                    var newWidth = dragStartWidth_1 + pev.deltaX * (isRtl ? -1 : 1);
                    newWidth = Math.max(newWidth, MIN_RESOURCE_AREA_WIDTH);
                    newWidth = Math.min(newWidth, viewWidth_1 - MIN_RESOURCE_AREA_WIDTH);
                    _this.setState({
                        resourceAreaWidthOverride: newWidth,
                    });
                });
                dragging.setAutoScrollEnabled(false); // because gets weird with auto-scrolling time area
            }
        };
        ResourceTimelineViewLayout.prototype.destroySpreadsheetResizing = function () {
            if (this.spreadsheetResizerDragging) {
                this.spreadsheetResizerDragging.destroy();
            }
        };
        return ResourceTimelineViewLayout;
    }(BaseComponent));

    var ResourceTimelineView = /** @class */ (function (_super) {
        __extends(ResourceTimelineView, _super);
        function ResourceTimelineView(props, context) {
            var _this = _super.call(this, props, context) || this;
            _this.processColOptions = memoize(processColOptions);
            _this.buildTimelineDateProfile = memoize(buildTimelineDateProfile);
            _this.hasNesting = memoize(hasNesting);
            _this.buildRowNodes = memoize(buildRowNodes);