@fullcalendar/timeline 7.0.0-beta.3 → 7.0.0-beta.5

package/cjs/internal.cjs

@@ -0,0 +1,1224 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@fullcalendar/core');
+var internal = require('@fullcalendar/core/internal');
+var classNames = require('@fullcalendar/core/internal-classnames');
+var preact = require('@fullcalendar/core/preact');
+var internal$1 = require('@fullcalendar/scrollgrid/internal');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+const MIN_AUTO_LABELS = 18; // more than `12` months but less that `24` hours
+const MAX_AUTO_SLOTS_PER_LABEL = 6; // allows 6 10-min slots in an hour
+const MAX_AUTO_CELLS = 200; // allows 4-days to have a :30 slot duration
+internal.config.MAX_TIMELINE_SLOTS = 1000;
+// potential nice values for slot-duration and interval-duration
+const STOCK_SUB_DURATIONS = [
+    { years: 1 },
+    { months: 1 },
+    { days: 1 },
+    { hours: 1 },
+    { minutes: 30 },
+    { minutes: 15 },
+    { minutes: 10 },
+    { minutes: 5 },
+    { minutes: 1 },
+    { seconds: 30 },
+    { seconds: 15 },
+    { seconds: 10 },
+    { seconds: 5 },
+    { seconds: 1 },
+    { milliseconds: 500 },
+    { milliseconds: 100 },
+    { milliseconds: 10 },
+    { milliseconds: 1 },
+];
+function buildTimelineDateProfile(dateProfile, dateEnv, allOptions, dateProfileGenerator) {
+    let tDateProfile = {
+        labelInterval: allOptions.slotHeaderInterval,
+        slotDuration: allOptions.slotDuration,
+    };
+    validateLabelAndSlot(tDateProfile, dateProfile, dateEnv); // validate after computed grid duration
+    ensureLabelInterval(tDateProfile, dateProfile, dateEnv);
+    ensureSlotDuration(tDateProfile, dateProfile, dateEnv);
+    let input = allOptions.slotHeaderFormat;
+    let rawFormats = Array.isArray(input) ? input :
+        (input != null) ? [input] :
+            computeHeaderFormats(tDateProfile, dateProfile, dateEnv, allOptions);
+    tDateProfile.headerFormats = rawFormats.map((rawFormat) => internal.createFormatter(rawFormat));
+    tDateProfile.isTimeScale = Boolean(tDateProfile.slotDuration.milliseconds);
+    let largeUnit = null;
+    if (!tDateProfile.isTimeScale) {
+        const slotUnit = internal.greatestDurationDenominator(tDateProfile.slotDuration).unit;
+        if (/year|month|week/.test(slotUnit)) {
+            largeUnit = slotUnit;
+        }
+    }
+    tDateProfile.largeUnit = largeUnit;
+    /*
+    console.log('label interval =', timelineView.labelInterval.humanize())
+    console.log('slot duration =', timelineView.slotDuration.humanize())
+    console.log('header formats =', timelineView.headerFormats)
+    console.log('isTimeScale', timelineView.isTimeScale)
+    console.log('largeUnit', timelineView.largeUnit)
+    */
+    let rawSnapDuration = allOptions.snapDuration;
+    let snapDuration;
+    let snapsPerSlot;
+    if (rawSnapDuration) {
+        snapDuration = internal.createDuration(rawSnapDuration);
+        snapsPerSlot = internal.wholeDivideDurations(tDateProfile.slotDuration, snapDuration);
+        // ^ TODO: warning if not whole?
+    }
+    if (snapsPerSlot == null) {
+        snapDuration = tDateProfile.slotDuration;
+        snapsPerSlot = 1;
+    }
+    tDateProfile.snapDuration = snapDuration;
+    tDateProfile.snapsPerSlot = snapsPerSlot;
+    // more...
+    let timeWindowMs = internal.asRoughMs(dateProfile.slotMaxTime) - internal.asRoughMs(dateProfile.slotMinTime);
+    // TODO: why not use normalizeRange!?
+    let normalizedStart = normalizeDate(dateProfile.renderRange.start, tDateProfile, dateEnv);
+    let normalizedEnd = normalizeDate(dateProfile.renderRange.end, tDateProfile, dateEnv);
+    // apply slotMinTime/slotMaxTime
+    // TODO: View should be responsible.
+    if (tDateProfile.isTimeScale) {
+        normalizedStart = dateEnv.add(normalizedStart, dateProfile.slotMinTime);
+        normalizedEnd = dateEnv.add(internal.addDays(normalizedEnd, -1), dateProfile.slotMaxTime);
+    }
+    tDateProfile.timeWindowMs = timeWindowMs;
+    tDateProfile.normalizedRange = { start: normalizedStart, end: normalizedEnd };
+    let slotDates = [];
+    let slotDatesMajor = [];
+    let date = normalizedStart;
+    let majorUnit = internal.computeMajorUnit(dateProfile, dateEnv);
+    while (date < normalizedEnd) {
+        if (isValidDate(date, tDateProfile, dateProfile, dateProfileGenerator)) {
+            slotDates.push(date);
+            slotDatesMajor.push(internal.isMajorUnit(date, majorUnit, dateEnv));
+        }
+        date = dateEnv.add(date, tDateProfile.slotDuration);
+    }
+    tDateProfile.slotDates = slotDates;
+    tDateProfile.slotDatesMajor = slotDatesMajor;
+    // more...
+    let snapIndex = -1;
+    let snapDiff = 0; // index of the diff :(
+    const snapDiffToIndex = [];
+    const snapIndexToDiff = [];
+    date = normalizedStart;
+    while (date < normalizedEnd) {
+        if (isValidDate(date, tDateProfile, dateProfile, dateProfileGenerator)) {
+            snapIndex += 1;
+            snapDiffToIndex.push(snapIndex);
+            snapIndexToDiff.push(snapDiff);
+        }
+        else {
+            snapDiffToIndex.push(snapIndex + 0.5);
+        }
+        date = dateEnv.add(date, tDateProfile.snapDuration);
+        snapDiff += 1;
+    }
+    tDateProfile.snapDiffToIndex = snapDiffToIndex;
+    tDateProfile.snapIndexToDiff = snapIndexToDiff;
+    tDateProfile.snapCnt = snapIndex + 1; // is always one behind
+    tDateProfile.slotCnt = tDateProfile.snapCnt / tDateProfile.snapsPerSlot;
+    // more...
+    tDateProfile.cellRows = buildCellRows(tDateProfile, dateEnv, majorUnit);
+    tDateProfile.slotsPerLabel = internal.wholeDivideDurations(tDateProfile.labelInterval, tDateProfile.slotDuration);
+    return tDateProfile;
+}
+/*
+snaps to appropriate unit
+*/
+function normalizeDate(date, tDateProfile, dateEnv) {
+    let normalDate = date;
+    if (!tDateProfile.isTimeScale) {
+        normalDate = internal.startOfDay(normalDate);
+        if (tDateProfile.largeUnit) {
+            normalDate = dateEnv.startOf(normalDate, tDateProfile.largeUnit);
+        }
+    }
+    return normalDate;
+}
+/*
+snaps to appropriate unit
+*/
+function normalizeRange(range, tDateProfile, dateEnv) {
+    if (!tDateProfile.isTimeScale) {
+        range = internal.computeVisibleDayRange(range);
+        if (tDateProfile.largeUnit) {
+            let dayRange = range; // preserve original result
+            range = {
+                start: dateEnv.startOf(range.start, tDateProfile.largeUnit),
+                end: dateEnv.startOf(range.end, tDateProfile.largeUnit),
+            };
+            // if date is partially through the interval, or is in the same interval as the start,
+            // make the exclusive end be the *next* interval
+            if (range.end.valueOf() !== dayRange.end.valueOf() || range.end <= range.start) {
+                range = {
+                    start: range.start,
+                    end: dateEnv.add(range.end, tDateProfile.slotDuration),
+                };
+            }
+        }
+    }
+    return range;
+}
+function isValidDate(date, tDateProfile, dateProfile, dateProfileGenerator) {
+    if (dateProfileGenerator.isHiddenDay(date)) {
+        return false;
+    }
+    if (tDateProfile.isTimeScale) {
+        // determine if the time is within slotMinTime/slotMaxTime, which may have wacky values
+        let day = internal.startOfDay(date);
+        let timeMs = date.valueOf() - day.valueOf();
+        let ms = timeMs - internal.asRoughMs(dateProfile.slotMinTime); // milliseconds since slotMinTime
+        ms = ((ms % 86400000) + 86400000) % 86400000; // make negative values wrap to 24hr clock
+        return ms < tDateProfile.timeWindowMs; // before the slotMaxTime?
+    }
+    return true;
+}
+function validateLabelAndSlot(tDateProfile, dateProfile, dateEnv) {
+    const { currentRange } = dateProfile;
+    // make sure labelInterval doesn't exceed the max number of cells
+    if (tDateProfile.labelInterval) {
+        const labelCnt = dateEnv.countDurationsBetween(currentRange.start, currentRange.end, tDateProfile.labelInterval);
+        if (labelCnt > internal.config.MAX_TIMELINE_SLOTS) {
+            console.warn('slotHeaderInterval results in too many cells');
+            tDateProfile.labelInterval = null;
+        }
+    }
+    // make sure slotDuration doesn't exceed the maximum number of cells
+    if (tDateProfile.slotDuration) {
+        const slotCnt = dateEnv.countDurationsBetween(currentRange.start, currentRange.end, tDateProfile.slotDuration);
+        if (slotCnt > internal.config.MAX_TIMELINE_SLOTS) {
+            console.warn('slotDuration results in too many cells');
+            tDateProfile.slotDuration = null;
+        }
+    }
+    // make sure labelInterval is a multiple of slotDuration
+    if (tDateProfile.labelInterval && tDateProfile.slotDuration) {
+        const slotsPerLabel = internal.wholeDivideDurations(tDateProfile.labelInterval, tDateProfile.slotDuration);
+        if (slotsPerLabel === null || slotsPerLabel < 1) {
+            console.warn('slotHeaderInterval must be a multiple of slotDuration');
+            tDateProfile.slotDuration = null;
+        }
+    }
+}
+function ensureLabelInterval(tDateProfile, dateProfile, dateEnv) {
+    const { currentRange } = dateProfile;
+    let { labelInterval } = tDateProfile;
+    if (!labelInterval) {
+        // compute based off the slot duration
+        // find the largest label interval with an acceptable slots-per-label
+        let input;
+        if (tDateProfile.slotDuration) {
+            for (input of STOCK_SUB_DURATIONS) {
+                const tryLabelInterval = internal.createDuration(input);
+                const slotsPerLabel = internal.wholeDivideDurations(tryLabelInterval, tDateProfile.slotDuration);
+                if (slotsPerLabel !== null && slotsPerLabel <= MAX_AUTO_SLOTS_PER_LABEL) {
+                    labelInterval = tryLabelInterval;
+                    break;
+                }
+            }
+            // use the slot duration as a last resort
+            if (!labelInterval) {
+                labelInterval = tDateProfile.slotDuration;
+            }
+            // compute based off the view's duration
+            // find the largest label interval that yields the minimum number of labels
+        }
+        else {
+            for (input of STOCK_SUB_DURATIONS) {
+                labelInterval = internal.createDuration(input);
+                const labelCnt = dateEnv.countDurationsBetween(currentRange.start, currentRange.end, labelInterval);
+                if (labelCnt >= MIN_AUTO_LABELS) {
+                    break;
+                }
+            }
+        }
+        tDateProfile.labelInterval = labelInterval;
+    }
+    return labelInterval;
+}
+function ensureSlotDuration(tDateProfile, dateProfile, dateEnv) {
+    const { currentRange } = dateProfile;
+    let { slotDuration } = tDateProfile;
+    if (!slotDuration) {
+        const labelInterval = ensureLabelInterval(tDateProfile, dateProfile, dateEnv); // will compute if necessary
+        // compute based off the label interval
+        // find the largest slot duration that is different from labelInterval, but still acceptable
+        for (let input of STOCK_SUB_DURATIONS) {
+            const trySlotDuration = internal.createDuration(input);
+            const slotsPerLabel = internal.wholeDivideDurations(labelInterval, trySlotDuration);
+            if (slotsPerLabel !== null && slotsPerLabel > 1 && slotsPerLabel <= MAX_AUTO_SLOTS_PER_LABEL) {
+                slotDuration = trySlotDuration;
+                break;
+            }
+        }
+        // only allow the value if it won't exceed the view's # of slots limit
+        if (slotDuration) {
+            const slotCnt = dateEnv.countDurationsBetween(currentRange.start, currentRange.end, slotDuration);
+            if (slotCnt > MAX_AUTO_CELLS) {
+                slotDuration = null;
+            }
+        }
+        // use the label interval as a last resort
+        if (!slotDuration) {
+            slotDuration = labelInterval;
+        }
+        tDateProfile.slotDuration = slotDuration;
+    }
+    return slotDuration;
+}
+function computeHeaderFormats(tDateProfile, dateProfile, dateEnv, allOptions) {
+    let format1;
+    let format2;
+    const { labelInterval } = tDateProfile;
+    const { currentRange } = dateProfile;
+    let unit = internal.greatestDurationDenominator(labelInterval).unit;
+    const weekNumbersVisible = allOptions.weekNumbers;
+    let format0 = (format1 = (format2 = null));
+    // NOTE: weekNumber computation function wont work
+    if ((unit === 'week') && !weekNumbersVisible) {
+        unit = 'day';
+    }
+    switch (unit) {
+        case 'year':
+            format0 = { year: 'numeric' }; // '2015'
+            break;
+        case 'month':
+            if (dateEnv.diffWholeYears(currentRange.start, currentRange.end) > 1) {
+                format0 = { year: 'numeric' }; // '2015'
+            }
+            format1 = { month: 'short' }; // 'Jan'
+            break;
+        case 'week':
+            if (dateEnv.diffWholeYears(currentRange.start, currentRange.end) > 1) {
+                format0 = { year: 'numeric' }; // '2015'
+            }
+            format1 = { week: 'narrow' }; // 'Wk4'
+            break;
+        case 'day':
+            if (dateEnv.diffWholeYears(currentRange.start, currentRange.end) > 1) {
+                format0 = { year: 'numeric', month: 'long' }; // 'January 2014'
+            }
+            else if (dateEnv.diffWholeMonths(currentRange.start, currentRange.end) > 1) {
+                format0 = { month: 'long' }; // 'January'
+            }
+            if (weekNumbersVisible) {
+                format1 = { week: 'short' }; // 'Wk 4'
+            }
+            format2 = { weekday: 'narrow', day: 'numeric' }; // 'Su 9'
+            break;
+        case 'hour':
+            if (weekNumbersVisible) {
+                format0 = { week: 'short' }; // 'Wk 4'
+            }
+            if (internal.diffWholeDays(currentRange.start, currentRange.end) > 1) {
+                format1 = { weekday: 'short', day: 'numeric', month: 'numeric', omitCommas: true }; // Sat 4/7
+            }
+            format2 = {
+                hour: 'numeric',
+                minute: '2-digit',
+                omitZeroMinute: true,
+                meridiem: 'short',
+            };
+            break;
+        case 'minute':
+            // sufficiently large number of different minute cells?
+            if ((internal.asRoughMinutes(labelInterval) / 60) >= MAX_AUTO_SLOTS_PER_LABEL) {
+                format0 = {
+                    hour: 'numeric',
+                    meridiem: 'short',
+                };
+                format1 = (params) => (':' + internal.padStart(params.date.minute, 2) // ':30'
+                );
+            }
+            else {
+                format0 = {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    meridiem: 'short',
+                };
+            }
+            break;
+        case 'second':
+            // sufficiently large number of different second cells?
+            if ((internal.asRoughSeconds(labelInterval) / 60) >= MAX_AUTO_SLOTS_PER_LABEL) {
+                format0 = { hour: 'numeric', minute: '2-digit', meridiem: 'lowercase' }; // '8:30 PM'
+                format1 = (params) => (':' + internal.padStart(params.date.second, 2) // ':30'
+                );
+            }
+            else {
+                format0 = { hour: 'numeric', minute: '2-digit', second: '2-digit', meridiem: 'lowercase' }; // '8:30:45 PM'
+            }
+            break;
+        case 'millisecond':
+            format0 = { hour: 'numeric', minute: '2-digit', second: '2-digit', meridiem: 'lowercase' }; // '8:30:45 PM'
+            format1 = (params) => ('.' + internal.padStart(params.millisecond, 3));
+            break;
+    }
+    return [].concat(format0 || [], format1 || [], format2 || []);
+}
+function buildCellRows(tDateProfile, dateEnv, majorUnit) {
+    let slotDates = tDateProfile.slotDates;
+    let formats = tDateProfile.headerFormats;
+    let cellRows = formats.map(() => []); // indexed by row,col
+    let slotAsDays = internal.asCleanDays(tDateProfile.slotDuration);
+    let guessedSlotUnit = slotAsDays === 7 ? 'week' :
+        slotAsDays === 1 ? 'day' :
+            null;
+    // specifically for navclicks
+    let rowUnitsFromFormats = formats.map((format) => (format.getSmallestUnit ? format.getSmallestUnit() : null));
+    // builds cellRows and slotCells
+    for (let i = 0; i < slotDates.length; i += 1) {
+        let date = slotDates[i];
+        for (let row = 0; row < formats.length; row += 1) {
+            let format = formats[row];
+            let rowCells = cellRows[row];
+            let leadingCell = rowCells[rowCells.length - 1];
+            let isLastRow = row === formats.length - 1;
+            let isSuperRow = formats.length > 1 && !isLastRow; // more than one row and not the last
+            let isMajor = internal.isMajorUnit(date, majorUnit, dateEnv);
+            let newCell = null;
+            let rowUnit = rowUnitsFromFormats[row] || (isLastRow ? guessedSlotUnit : null);
+            if (isSuperRow) {
+                let [text] = dateEnv.format(date, format);
+                if (!leadingCell || (leadingCell.text !== text)) {
+                    newCell = buildCellObject(date, isMajor, text, rowUnit);
+                }
+                else {
+                    leadingCell.colspan += 1;
+                }
+            }
+            else if (!leadingCell ||
+                internal.isInt(dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.labelInterval))) {
+                let [text] = dateEnv.format(date, format);
+                newCell = buildCellObject(date, isMajor, text, rowUnit);
+            }
+            else {
+                leadingCell.colspan += 1;
+            }
+            if (newCell) {
+                rowCells.push(newCell);
+            }
+        }
+    }
+    return cellRows;
+}
+function buildCellObject(date, isMajor, text, rowUnit) {
+    return { date, isMajor, text, rowUnit, colspan: 1 }; // colspan mutated later
+}
+
+class TimelineSlatCell extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.getDateMeta = internal.memoize(internal.getDateMeta);
+    }
+    render() {
+        let { props, context } = this;
+        let { dateEnv, options } = context;
+        let { date, tDateProfile, isMajor } = props;
+        let dateMeta = this.getDateMeta(props.date, dateEnv, props.dateProfile, props.todayRange, props.nowDate);
+        let isMinor = tDateProfile.isTimeScale &&
+            !internal.isInt(dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval));
+        let renderProps = Object.assign(Object.assign({}, dateMeta), { isMajor,
+            isMinor, view: context.viewApi });
+        return (preact.createElement(internal.ContentContainer, { tag: "div", className: core.joinClassNames(classNames__default["default"].tight, classNames__default["default"].alignStart, // shrinks width of InnerContent
+            props.borderStart ? classNames__default["default"].borderOnlyS : classNames__default["default"].borderNone, classNames__default["default"].internalTimelineSlot), attrs: Object.assign({ 'data-date': dateEnv.formatIso(date, {
+                    omitTimeZoneOffset: true,
+                    omitTime: !tDateProfile.isTimeScale,
+                }) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
+                width: props.width,
+            }, renderProps: renderProps, generatorName: undefined, classNameGenerator: options.slotLaneClass, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }));
+    }
+}
+
+class TimelineSlats extends internal.BaseComponent {
+    render() {
+        let { props } = this;
+        let { tDateProfile, slotWidth } = props;
+        let { slotDates, slotDatesMajor } = tDateProfile;
+        return (preact.createElement("div", { "aria-hidden": true, className: core.joinClassNames(classNames__default["default"].flexRow, classNames__default["default"].fill), style: { height: props.height } }, slotDates.map((slotDate, i) => {
+            let key = slotDate.toISOString();
+            return (preact.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isMajor: slotDatesMajor[i], borderStart: Boolean(i), 
+                // dimensions
+                width: slotWidth }));
+        })));
+    }
+}
+
+class TimelineHeaderCell extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.getDateMeta = internal.memoize(internal.getDateMeta);
+        // ref
+        this.innerWrapperElRef = preact.createRef();
+    }
+    render() {
+        let { props, state, context } = this;
+        let { dateEnv, options } = context;
+        let { cell, dateProfile, tDateProfile } = props;
+        // the cell.rowUnit is f'd
+        // giving 'month' for a 3-day view
+        // workaround: to infer day, do NOT time
+        let dateMeta = this.getDateMeta(cell.date, dateEnv, dateProfile, props.todayRange, props.nowDate);
+        let hasNavLink = options.navLinks && !dateMeta.isDisabled && (cell.rowUnit && cell.rowUnit !== 'time');
+        let isTime = tDateProfile.isTimeScale && !props.rowLevel; // HACK: faulty way of determining this
+        let renderProps = Object.assign(Object.assign({}, dateMeta), { level: props.rowLevel, isMajor: cell.isMajor, isMinor: false, isNarrow: false, isTime,
+            hasNavLink, text: cell.text, isFirst: props.isFirst, view: context.viewApi });
+        const { slotHeaderAlign } = options;
+        const align = this.align =
+            typeof slotHeaderAlign === 'function'
+                ? slotHeaderAlign({ level: props.rowLevel, isTime })
+                : slotHeaderAlign;
+        const isSticky = this.isSticky =
+            props.rowLevel && options.slotHeaderSticky !== false;
+        let edgeCoord;
+        if (isSticky) {
+            if (align === 'center') {
+                if (state.innerWidth != null) {
+                    edgeCoord = `calc(50% - ${state.innerWidth / 2}px)`;
+                }
+            }
+            else {
+                edgeCoord = (typeof options.slotHeaderSticky === 'number' ||
+                    typeof options.slotHeaderSticky === 'string') ? options.slotHeaderSticky : 0;
+            }
+        }
+        return (preact.createElement(internal.ContentContainer, { tag: "div", className: internal.joinArrayishClassNames(classNames__default["default"].tight, classNames__default["default"].flexCol, props.isFirst ? classNames__default["default"].borderNone : classNames__default["default"].borderOnlyS, align === 'center' ? classNames__default["default"].alignCenter :
+                align === 'end' ? classNames__default["default"].alignEnd :
+                    classNames__default["default"].alignStart, classNames__default["default"].internalTimelineSlot), attrs: Object.assign({ 'data-date': dateEnv.formatIso(cell.date, {
+                    omitTime: !tDateProfile.isTimeScale,
+                    omitTimeZoneOffset: true,
+                }) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
+                width: props.slotWidth != null
+                    ? props.slotWidth * cell.colspan
+                    : undefined,
+            }, renderProps: renderProps, generatorName: "slotHeaderContent", customGenerator: options.slotHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotHeaderClass, didMount: options.slotHeaderDidMount, willUnmount: options.slotHeaderWillUnmount }, (InnerContent) => (preact.createElement("div", { ref: this.innerWrapperElRef, className: core.joinClassNames(classNames__default["default"].flexCol, classNames__default["default"].rigid, isSticky && classNames__default["default"].sticky), style: {
+                left: edgeCoord,
+                right: edgeCoord,
+            } },
+            preact.createElement(InnerContent, { tag: 'div', attrs: hasNavLink
+                    // not tabbable because parent is aria-hidden
+                    ? internal.buildNavLinkAttrs(context, cell.date, cell.rowUnit, undefined, /* isTabbable = */ false)
+                    : {} // don't bother with aria-hidden because parent already hidden
+                , className: internal.generateClassName(options.slotHeaderInnerClass, renderProps) })))));
+    }
+    componentDidMount() {
+        const { props } = this;
+        const innerWrapperEl = this.innerWrapperElRef.current; // TODO: make dynamic with useEffect
+        this.disconnectSize = internal.watchSize(innerWrapperEl, (width, height) => {
+            internal.setRef(props.innerWidthRef, width);
+            internal.setRef(props.innerHeightRef, height);
+            if (this.align === 'center' && this.isSticky) {
+                this.setState({ innerWidth: width });
+            }
+        });
+    }
+    componentWillUnmount() {
+        const { props } = this;
+        this.disconnectSize();
+        internal.setRef(props.innerWidthRef, null);
+        internal.setRef(props.innerHeightRef, null);
+    }
+}
+// Utils
+// -------------------------------------------------------------------------------------------------
+function renderInnerContent(renderProps) {
+    return renderProps.text;
+}
+
+class TimelineHeaderRow extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // refs
+        this.innerWidthRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleInnerWidths);
+        });
+        this.innerHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleInnerHeights);
+        });
+        this.handleInnerWidths = () => {
+            const innerWidthMap = this.innerWidthRefMap.current;
+            let max = 0;
+            for (const innerWidth of innerWidthMap.values()) {
+                max = Math.max(max, innerWidth);
+            }
+            // TODO: ensure not equal?
+            internal.setRef(this.props.innerWidthRef, max);
+        };
+        this.handleInnerHeights = () => {
+            const innerHeightMap = this.innerHeightRefMap.current;
+            let max = 0;
+            for (const innerHeight of innerHeightMap.values()) {
+                max = Math.max(max, innerHeight);
+            }
+            // TODO: ensure not equal?
+            internal.setRef(this.props.innerHeighRef, max);
+            this.setState({ innerHeight: max });
+        };
+    }
+    render() {
+        const { props, innerWidthRefMap, innerHeightRefMap, state, context } = this;
+        const { options } = context;
+        return (preact.createElement("div", { className: internal.joinArrayishClassNames(options.slotHeaderRowClass, classNames__default["default"].flexRow, classNames__default["default"].grow, props.rowLevel // not the last row?
+                ? classNames__default["default"].borderOnlyB
+                : classNames__default["default"].borderNone), style: {
+                // we assign height because we allow cells to have distorted heights for visual effect
+                // but we still want to keep the overall extrenal mass
+                height: state.innerHeight,
+            } }, props.cells.map((cell, cellI) => {
+            // TODO: make this part of the cell obj?
+            // TODO: rowUnit seems wrong sometimes. says 'month' when it should be day
+            // TODO: rowUnit is relevant to whole row. put it on a row object, not the cells
+            // TODO: use rowUnit to key the Row itself?
+            const key = cell.rowUnit + ':' + cell.date.toISOString();
+            return (preact.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isFirst: cellI === 0, 
+                // refs
+                innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key), 
+                // dimensions
+                slotWidth: props.slotWidth }));
+        })));
+    }
+    componentWillUnmount() {
+        internal.setRef(this.props.innerWidthRef, null);
+        internal.setRef(this.props.innerHeighRef, null);
+    }
+}
+
+// Timeline-specific
+// -------------------------------------------------------------------------------------------------
+const MIN_SLOT_WIDTH = 30; // for real
+/*
+TODO: DRY with computeSlatHeight?
+*/
+function computeSlotWidth(slatCnt, slatsPerLabel, slatMinWidth, labelInnerWidth, viewportWidth) {
+    if (labelInnerWidth == null || viewportWidth == null) {
+        return [undefined, undefined, false];
+    }
+    slatMinWidth = Math.max(slatMinWidth || 0, (labelInnerWidth + 1) / slatsPerLabel, MIN_SLOT_WIDTH);
+    const slatTryWidth = viewportWidth / slatCnt;
+    let slotLiquid;
+    let slatWidth;
+    if (slatTryWidth >= slatMinWidth) {
+        slotLiquid = true;
+        slatWidth = slatTryWidth;
+    }
+    else {
+        slotLiquid = false;
+        slatWidth = Math.max(slatMinWidth, slatTryWidth);
+    }
+    return [slatWidth * slatCnt, slatWidth, slotLiquid];
+}
+function timeToCoord(// pixels
+time, dateEnv, dateProfile, tDateProfile, slowWidth) {
+    let date = dateEnv.add(dateProfile.activeRange.start, time);
+    if (!tDateProfile.isTimeScale) {
+        date = internal.startOfDay(date);
+    }
+    return dateToCoord(date, dateEnv, tDateProfile, slowWidth);
+}
+function dateToCoord(// pixels
+date, dateEnv, tDateProfile, slotWidth) {
+    let snapCoverage = computeDateSnapCoverage$1(date, tDateProfile, dateEnv);
+    let slotCoverage = snapCoverage / tDateProfile.snapsPerSlot;
+    return slotCoverage * slotWidth;
+}
+/*
+returned value is between 0 and the number of snaps
+*/
+function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
+    let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
+    if (snapDiff < 0) {
+        return 0;
+    }
+    if (snapDiff >= tDateProfile.snapDiffToIndex.length) {
+        return tDateProfile.snapCnt;
+    }
+    let snapDiffInt = Math.floor(snapDiff);
+    let snapCoverage = tDateProfile.snapDiffToIndex[snapDiffInt];
+    if (internal.isInt(snapCoverage)) { // not an in-between value
+        snapCoverage += snapDiff - snapDiffInt; // add the remainder
+    }
+    else {
+        // a fractional value, meaning the date is not visible
+        // always round up in this case. works for start AND end dates in a range.
+        snapCoverage = Math.ceil(snapCoverage);
+    }
+    return snapCoverage;
+}
+
+class TimelineNowIndicatorLine extends internal.BaseComponent {
+    render() {
+        const { props, context } = this;
+        const xStyle = props.slotWidth == null
+            ? {}
+            : {
+                insetInlineStart: dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth)
+            };
+        return (preact.createElement("div", { className: classNames__default["default"].fill, style: {
+                zIndex: 2,
+                pointerEvents: 'none', // TODO: className
+            } },
+            preact.createElement(internal.NowIndicatorLineContainer, { className: core.joinClassNames(classNames__default["default"].fillY, classNames__default["default"].noMarginY, classNames__default["default"].borderlessY), style: xStyle, date: props.nowDate }),
+            preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].flexCol, // better for negative margins
+                classNames__default["default"].fillY), style: xStyle },
+                preact.createElement("div", { 
+                    // stickiness on NowIndicatorDot misbehaves b/c of negative marginss
+                    className: classNames__default["default"].stickyT },
+                    preact.createElement(internal.NowIndicatorDot, null)))));
+    }
+}
+
+/*
+TODO: DRY with other NowIndicator components
+*/
+class TimelineNowIndicatorArrow extends internal.BaseComponent {
+    render() {
+        const { props, context } = this;
+        const xStyle = props.slotWidth == null
+            ? {}
+            : {
+                insetInlineStart: dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth)
+            };
+        return (preact.createElement("div", { 
+            // crop any overflow that the arrow/line might cause
+            // TODO: just do this on the entire canvas within the scroller
+            className: core.joinClassNames(classNames__default["default"].fill, classNames__default["default"].crop), style: {
+                zIndex: 2,
+                pointerEvents: 'none', // TODO: className
+            } },
+            preact.createElement(internal.NowIndicatorHeaderContainer, { className: classNames__default["default"].abs, style: xStyle, date: props.nowDate })));
+    }
+}
+
+function getTimelineSlotEl(parentEl, index) {
+    return parentEl.querySelectorAll(`.${classNames__default["default"].internalTimelineSlot}`)[index];
+}
+
+/*
+TODO: rename this file!
+*/
+// returned value is between 0 and the number of snaps
+function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
+    let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
+    if (snapDiff < 0) {
+        return 0;
+    }
+    if (snapDiff >= tDateProfile.snapDiffToIndex.length) {
+        return tDateProfile.snapCnt;
+    }
+    let snapDiffInt = Math.floor(snapDiff);
+    let snapCoverage = tDateProfile.snapDiffToIndex[snapDiffInt];
+    if (internal.isInt(snapCoverage)) { // not an in-between value
+        snapCoverage += snapDiff - snapDiffInt; // add the remainder
+    }
+    else {
+        // a fractional value, meaning the date is not visible
+        // always round up in this case. works for start AND end dates in a range.
+        snapCoverage = Math.ceil(snapCoverage);
+    }
+    return snapCoverage;
+}
+
+class TimelineLaneSlicer extends internal.Slicer {
+    sliceRange(origRange, dateProfile, dateProfileGenerator, tDateProfile, dateEnv) {
+        let normalRange = normalizeRange(origRange, tDateProfile, dateEnv);
+        let segs = [];
+        // protect against when the span is entirely in an invalid date region
+        if (computeDateSnapCoverage(normalRange.start, tDateProfile, dateEnv)
+            < computeDateSnapCoverage(normalRange.end, tDateProfile, dateEnv)) {
+            // intersect the footprint's range with the grid's range
+            let slicedRange = internal.intersectRanges(normalRange, tDateProfile.normalizedRange);
+            if (slicedRange) {
+                segs.push({
+                    startDate: slicedRange.start,
+                    endDate: slicedRange.end,
+                    isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
+                        && isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
+                    isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
+                        && isValidDate(internal.addMs(slicedRange.end, -1), tDateProfile, dateProfile, dateProfileGenerator),
+                });
+            }
+        }
+        return segs;
+    }
+}
+
+const DEFAULT_TIME_FORMAT = internal.createFormatter({
+    hour: 'numeric',
+    minute: '2-digit',
+    omitZeroMinute: true,
+    meridiem: 'narrow',
+});
+class TimelineEvent extends internal.BaseComponent {
+    render() {
+        let { props } = this;
+        return (preact.createElement(internal.StandardEvent, Object.assign({}, props, { display: 'row', defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
+    }
+}
+
+class TimelineLaneMoreLink extends internal.BaseComponent {
+    render() {
+        let { props } = this;
+        let { hiddenSegs, resourceId } = props;
+        let dateSpanProps = resourceId ? { resourceId } : {};
+        return (preact.createElement(internal.MoreLinkContainer, { display: 'row', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, isNarrow: false, isMicro: false, popoverContent: () => (preact.createElement(preact.Fragment, null, hiddenSegs.map((seg) => {
+                let { eventRange } = seg;
+                let { instanceId } = eventRange.instance;
+                let isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+                let isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+                let isInvisible = isDragging || isResizing;
+                return (preact.createElement("div", { key: instanceId, style: { visibility: isInvisible ? 'hidden' : undefined } },
+                    preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: false, isSelected: instanceId === props.eventSelection }, internal.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
+            }))) }));
+    }
+}
+
+function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
+    const res = {};
+    for (const seg of segs) {
+        res[internal.getEventKey(seg)] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
+    }
+    return res;
+}
+function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
+    const startCoord = dateToCoord(seg.startDate, dateEnv, tDateProfile, slotWidth);
+    const endCoord = dateToCoord(seg.endDate, dateEnv, tDateProfile, slotWidth);
+    let size = endCoord - startCoord;
+    if (segMinWidth) {
+        size = Math.max(size, segMinWidth);
+    }
+    return { start: startCoord, size };
+}
+function computeFgSegPlacements(// mostly horizontals
+segs, segHorizontals, // TODO: use Map
+segHeights, // keyed by instanceId
+hiddenGroupHeights, strictOrder, maxDepth) {
+    const segRanges = [];
+    // isn't it true that there will either be ALL hcoords or NONE? can optimize
+    for (const seg of segs) {
+        const hcoords = segHorizontals[internal.getEventKey(seg)];
+        if (hcoords) {
+            segRanges.push(Object.assign(Object.assign({}, seg), { start: hcoords.start, end: hcoords.start + hcoords.size }));
+        }
+    }
+    const hierarchy = new internal.SegHierarchy(segRanges, (seg) => segHeights.get(internal.getEventKey(seg)), strictOrder, undefined, // maxCoord
+    maxDepth);
+    const segTops = new Map();
+    hierarchy.traverseSegs((seg, segTop) => {
+        segTops.set(internal.getEventKey(seg), segTop);
+    });
+    const { hiddenSegs } = hierarchy;
+    let totalHeight = 0;
+    for (const segRange of segRanges) {
+        const segKey = internal.getEventKey(segRange);
+        const segHeight = segHeights.get(segKey);
+        const segTop = segTops.get(segKey);
+        if (segHeight != null) {
+            if (segTop != null) {
+                totalHeight = Math.max(totalHeight, segTop + segHeight);
+            }
+        }
+    }
+    const hiddenGroups = internal.groupIntersectingSegs(hiddenSegs);
+    const hiddenGroupTops = new Map();
+    // HACK for hiddenGroup findInsertion() call
+    hierarchy.strictOrder = true;
+    for (const hiddenGroup of hiddenGroups) {
+        const { levelCoord: top } = hierarchy.findInsertion(hiddenGroup, 0);
+        const hiddenGroupHeight = hiddenGroupHeights.get(hiddenGroup.key) || 0;
+        hiddenGroupTops.set(hiddenGroup.key, top);
+        totalHeight = Math.max(totalHeight, top + hiddenGroupHeight);
+    }
+    return [
+        segTops,
+        hiddenGroups,
+        hiddenGroupTops,
+        totalHeight,
+    ];
+}
+
+/*
+TODO: make DRY with other Event Harnesses
+*/
+class TimelineEventHarness extends preact.Component {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.rootElRef = preact.createRef();
+    }
+    render() {
+        const { props } = this;
+        return (preact.createElement("div", { className: classNames__default["default"].abs, style: props.style, ref: this.rootElRef }, props.children));
+    }
+    componentDidMount() {
+        const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
+        this.disconnectHeight = internal.watchHeight(rootEl, (height) => {
+            internal.setRef(this.props.heightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.disconnectHeight();
+        internal.setRef(this.props.heightRef, null);
+    }
+}
+
+class TimelineFg extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.sortEventSegs = internal.memoize(internal.sortEventSegs);
+        // refs
+        this.segHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleSegHeights);
+        });
+        this.moreLinkHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleMoreLinkHeights);
+        });
+        this.handleMoreLinkHeights = () => {
+            this.setState({ moreLinkHeightRev: this.moreLinkHeightRefMap.rev }); // will trigger rerender
+        };
+        this.handleSegHeights = () => {
+            this.setState({ segHeightRev: this.segHeightRefMap.rev }); // will trigger rerender
+        };
+    }
+    /*
+    TODO: lots of memoization needed here!
+    */
+    render() {
+        let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
+        let { options } = context;
+        let { tDateProfile } = props;
+        let mirrorSegs = (props.eventDrag ? props.eventDrag.segs : null) ||
+            (props.eventResize ? props.eventResize.segs : null) ||
+            [];
+        let fgSegs = this.sortEventSegs(props.fgEventSegs, options.eventOrder);
+        let fgSegHorizontals = props.slotWidth != null
+            ? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
+            : {};
+        let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
+        this.totalHeight = totalHeight;
+        return (preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].rel, classNames__default["default"].noShrink), style: {
+                height: totalHeight,
+            } },
+            this.renderFgSegs(fgSegs, fgSegHorizontals, fgSegTops, hiddenGroups, hiddenGroupTops, 
+            /* isMirror = */ false),
+            this.renderFgSegs(mirrorSegs, props.slotWidth // TODO: memoize
+                ? computeManySegHorizontals(mirrorSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
+                : {}, fgSegTops, 
+            /* hiddenGroups = */ [], 
+            /* hiddenGroupTops = */ new Map(), 
+            /* isMirror = */ true)));
+    }
+    renderFgSegs(segs, segHorizontals, segTops, hiddenGroups, hiddenGroupTops, isMirror) {
+        let { props, segHeightRefMap, moreLinkHeightRefMap } = this;
+        return (preact.createElement(preact.Fragment, null,
+            segs.map((seg) => {
+                const { eventRange } = seg;
+                const { instanceId } = eventRange.instance;
+                const segTop = segTops.get(instanceId);
+                const segHorizontalMaybe = segHorizontals[instanceId];
+                const segHorizontal = segHorizontalMaybe || {};
+                const isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+                const isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+                const isInvisible = !isMirror && (isDragging || isResizing || !segHorizontalMaybe || segTop == null);
+                return (preact.createElement(TimelineEventHarness, { key: instanceId, style: {
+                        visibility: isInvisible ? 'hidden' : undefined,
+                        zIndex: 1,
+                        top: segTop || 0,
+                        insetInlineStart: segHorizontal.start,
+                        width: segHorizontal.size,
+                    }, heightRef: isMirror ? undefined : segHeightRefMap.createRef(instanceId) },
+                    preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: isMirror, isSelected: instanceId === props.eventSelection }, internal.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
+            }),
+            hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: {
+                    top: hiddenGroupTops.get(hiddenGroup.key) || 0,
+                    insetInlineStart: hiddenGroup.start,
+                    width: hiddenGroup.end - hiddenGroup.start,
+                }, heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
+                preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, resourceId: props.resourceId }))))));
+    }
+    /*
+    componentDidMount(): void {
+      // might want to do firedTotalHeight, but won't be ready on first render
+    }
+    */
+    componentDidUpdate() {
+        if (this.totalHeight !== this.firedTotalHeight) {
+            this.firedTotalHeight = this.totalHeight;
+            internal.setRef(this.props.heightRef, this.totalHeight);
+        }
+    }
+    componentWillUnmount() {
+        internal.setRef(this.props.heightRef, null);
+    }
+}
+
+class TimelineBg extends internal.BaseComponent {
+    render() {
+        let { props } = this;
+        let highlightSeg = [].concat(props.eventResizeSegs || [], props.dateSelectionSegs);
+        return (preact.createElement(preact.Fragment, null,
+            this.renderSegs(props.businessHourSegs || [], 'non-business'),
+            this.renderSegs(props.bgEventSegs || [], 'bg-event'),
+            this.renderSegs(highlightSeg, 'highlight')));
+    }
+    renderSegs(segs, fillType) {
+        let { tDateProfile, todayRange, nowDate, slotWidth } = this.props;
+        let { dateEnv, options } = this.context;
+        return (preact.createElement(preact.Fragment, null, segs.map((seg) => {
+            let hStyle = {};
+            if (slotWidth != null) {
+                let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
+                hStyle = { insetInlineStart: segHorizontal.start, width: segHorizontal.size };
+            }
+            return (preact.createElement("div", { key: internal.buildEventRangeKey(seg.eventRange), className: classNames__default["default"].fillY, style: hStyle }, fillType === 'bg-event' ? (preact.createElement(internal.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isVertical: false }, internal.getEventRangeMeta(seg.eventRange, todayRange, nowDate)))) : (internal.renderFill(fillType, options))));
+        })));
+    }
+}
+
+class TimelineView extends internal.DateComponent {
+    constructor() {
+        super(...arguments);
+        // memoized
+        this.buildTimelineDateProfile = internal.memoize(buildTimelineDateProfile);
+        this.computeSlotWidth = internal.memoize(computeSlotWidth);
+        // refs
+        this.headerScrollerRef = preact.createRef();
+        this.bodyScrollerRef = preact.createRef();
+        this.footerScrollerRef = preact.createRef();
+        this.headerRowInnerWidthMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleSlotInnerWidths);
+        });
+        this.scrollTime = null;
+        this.slicer = new TimelineLaneSlicer();
+        // Sizing
+        // -----------------------------------------------------------------------------------------------
+        this.handleSlotInnerWidths = () => {
+            const headerSlotInnerWidth = this.headerRowInnerWidthMap.current.get(this.tDateProfile.cellRows.length - 1);
+            if (headerSlotInnerWidth != null && headerSlotInnerWidth !== this.state.slotInnerWidth) {
+                this.setState({ slotInnerWidth: headerSlotInnerWidth });
+            }
+        };
+        this.handleTotalWidth = (totalWidth) => {
+            this.setState({
+                totalWidth,
+            });
+        };
+        this.handleClientWidth = (clientWidth) => {
+            this.setState({
+                clientWidth,
+            });
+        };
+        this.handleTimeScrollRequest = (scrollTime) => {
+            this.scrollTime = scrollTime;
+            this.applyTimeScroll();
+        };
+        this.handleTimeScrollEnd = (isUser) => {
+            if (isUser) {
+                this.scrollTime = null;
+            }
+        };
+        // Hit System
+        // -----------------------------------------------------------------------------------------------
+        this.handeBodyEl = (el) => {
+            this.bodyEl = el;
+            if (el) {
+                this.context.registerInteractiveComponent(this, { el });
+            }
+            else {
+                this.context.unregisterInteractiveComponent(this);
+            }
+        };
+    }
+    render() {
+        const { props, state, context } = this;
+        const { options } = context;
+        const { totalWidth, clientWidth } = state;
+        const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
+        /* date */
+        const tDateProfile = this.tDateProfile = this.buildTimelineDateProfile(props.dateProfile, context.dateEnv, options, context.dateProfileGenerator);
+        const { cellRows } = tDateProfile;
+        const timerUnit = internal.greatestDurationDenominator(tDateProfile.slotDuration).unit;
+        /* table settings */
+        const verticalScrolling = !props.forPrint && !internal.getIsHeightAuto(options);
+        const stickyHeaderDates = !props.forPrint && internal.getStickyHeaderDates(options);
+        const stickyFooterScrollbar = !props.forPrint && internal.getStickyFooterScrollbar(options);
+        /* table positions */
+        const [canvasWidth, slotWidth] = this.computeSlotWidth(tDateProfile.slotCnt, tDateProfile.slotsPerLabel, options.slotMinWidth, state.slotInnerWidth, // is ACTUALLY the label width. rename?
+        clientWidth);
+        this.slotWidth = slotWidth;
+        /* sliced */
+        let slicedProps = this.slicer.sliceProps(props, props.dateProfile, tDateProfile.isTimeScale ? null : options.nextDayThreshold, context, // wish we didn't have to pass in the rest of the args...
+        props.dateProfile, context.dateProfileGenerator, tDateProfile, context.dateEnv);
+        return (preact.createElement(internal.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
+            const enableNowIndicator = // TODO: DRY
+             options.nowIndicator &&
+                slotWidth != null &&
+                internal.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
+            return (preact.createElement(internal.ViewContainer, { viewSpec: context.viewSpec, className: internal.joinArrayishClassNames(
+                // HACK for Safari print-mode, where noScrollbars won't take effect for
+                // the below Scrollers if they have liquid flex height
+                !props.forPrint && classNames__default["default"].flexCol, props.className, options.tableClass, classNames__default["default"].isolate), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects },
+                preact.createElement("div", { className: core.joinClassNames(internal.generateClassName(options.tableHeaderClass, {
+                        isSticky: stickyHeaderDates,
+                    }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].flexCol, stickyHeaderDates && classNames__default["default"].tableHeaderSticky), style: {
+                        zIndex: 1,
+                    } },
+                    preact.createElement(internal.Scroller, { horizontal: true, hideScrollbars: true, className: classNames__default["default"].flexRow, ref: this.headerScrollerRef },
+                        preact.createElement("div", { 
+                            // TODO: DRY
+                            className: core.joinClassNames(classNames__default["default"].rel, // origin for now-indicator
+                            canvasWidth == null && classNames__default["default"].liquid), style: { width: canvasWidth } },
+                            cellRows.map((cells, rowIndex) => {
+                                const rowLevel = cellRows.length - rowIndex - 1;
+                                return (preact.createElement(TimelineHeaderRow, { key: rowIndex, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, cells: cells, slotWidth: slotWidth, innerWidthRef: this.headerRowInnerWidthMap.createRef(rowIndex) }));
+                            }),
+                            enableNowIndicator && (preact.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
+                        Boolean(endScrollbarWidth) && (preact.createElement("div", { className: internal.joinArrayishClassNames(internal.generateClassName(options.fillerClass, { isHeader: true }), classNames__default["default"].borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                    preact.createElement("div", { className: internal.generateClassName(options.slotHeaderDividerClass, {
+                            isHeader: true,
+                            options: { dayMinWidth: options.dayMinWidth },
+                        }) })),
+                preact.createElement(internal.Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
+                        props.forPrint // prevents blank space in print-view on Safari
+                    , className: internal.joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames__default["default"].borderlessX, stickyHeaderDates && classNames__default["default"].borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames__default["default"].noEdgeEffects, classNames__default["default"].flexCol, verticalScrolling && classNames__default["default"].liquid), style: {
+                        zIndex: 0,
+                    }, ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
+                    preact.createElement("div", { "aria-label": options.eventsHint, className: core.joinClassNames(classNames__default["default"].rel, // for canvas origin?
+                        classNames__default["default"].grow), style: { width: canvasWidth }, ref: this.handeBodyEl },
+                        preact.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                            // dimensions
+                            slotWidth: slotWidth }),
+                        preact.createElement(TimelineBg, { tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                            // content
+                            bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : null, 
+                            // dimensions
+                            slotWidth: slotWidth }),
+                        preact.createElement("div", { className: internal.joinArrayishClassNames(options.timelineTopClass) }),
+                        preact.createElement(TimelineFg, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                            // content
+                            fgEventSegs: slicedProps.fgEventSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, 
+                            // dimensions
+                            slotWidth: slotWidth }),
+                        preact.createElement("div", { className: internal.joinArrayishClassNames(options.timelineBottomClass) }),
+                        enableNowIndicator && (preact.createElement(TimelineNowIndicatorLine, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
+                Boolean(stickyFooterScrollbar) && (preact.createElement(internal.FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+                preact.createElement(internal.Ruler, { widthRef: this.handleTotalWidth })));
+        }));
+    }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        this.syncedScroller = new internal$1.ScrollerSyncer(true); // horizontal=true
+        this.updateSyncedScroller();
+        this.resetScroll();
+        this.context.emitter.on('_timeScrollRequest', this.handleTimeScrollRequest);
+        this.syncedScroller.addScrollEndListener(this.handleTimeScrollEnd);
+    }
+    componentDidUpdate(prevProps) {
+        this.updateSyncedScroller();
+        if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+            this.resetScroll();
+        }
+        else {
+            // TODO: inefficient to update so often
+            this.applyTimeScroll();
+        }
+    }
+    componentWillUnmount() {
+        this.syncedScroller.destroy();
+        this.context.emitter.off('_timeScrollRequest', this.handleTimeScrollRequest);
+        this.syncedScroller.removeScrollEndListener(this.handleTimeScrollEnd);
+    }
+    // Scrolling
+    // -----------------------------------------------------------------------------------------------
+    updateSyncedScroller() {
+        this.syncedScroller.handleChildren([
+            this.headerScrollerRef.current,
+            this.bodyScrollerRef.current,
+            this.footerScrollerRef.current
+        ]);
+    }
+    resetScroll() {
+        this.handleTimeScrollRequest(this.context.options.scrollTime);
+    }
+    applyTimeScroll() {
+        const { props, context, tDateProfile, scrollTime, slotWidth } = this;
+        if (scrollTime != null && slotWidth != null) {
+            let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
+            if (x) {
+                x += 1; // overcome border. TODO: DRY this up
+            }
+            this.syncedScroller.scrollTo({ x });
+        }
+    }
+    queryHit(isRtl, positionLeft, positionTop, elWidth, elHeight) {
+        const { props, context, tDateProfile, slotWidth } = this;
+        const { dateEnv } = context;
+        if (slotWidth) {
+            const x = isRtl ? elWidth - positionLeft : positionLeft;
+            const slatIndex = Math.floor(x / slotWidth);
+            const slatX = slatIndex * slotWidth;
+            const partial = (x - slatX) / slotWidth; // floating point number between 0 and 1
+            const localSnapIndex = Math.floor(partial * tDateProfile.snapsPerSlot); // the snap # relative to start of slat
+            let startDate = dateEnv.add(tDateProfile.slotDates[slatIndex], internal.multiplyDuration(tDateProfile.snapDuration, localSnapIndex));
+            let endDate = dateEnv.add(startDate, tDateProfile.snapDuration);
+            // TODO: generalize this coord stuff to TimeGrid?
+            let snapWidth = slotWidth / tDateProfile.snapsPerSlot;
+            let startCoord = slatIndex * slotWidth + (snapWidth * localSnapIndex);
+            let endCoord = startCoord + snapWidth;
+            let left, right;
+            if (isRtl) {
+                left = elWidth - endCoord;
+                right = elWidth - startCoord;
+            }
+            else {
+                left = startCoord;
+                right = endCoord;
+            }
+            return {
+                dateProfile: props.dateProfile,
+                dateSpan: {
+                    range: { start: startDate, end: endDate },
+                    allDay: !tDateProfile.isTimeScale,
+                },
+                rect: {
+                    left,
+                    right,
+                    top: 0,
+                    bottom: elHeight,
+                },
+                getDayEl: () => getTimelineSlotEl(this.bodyEl, slatIndex),
+                layer: 0,
+            };
+        }
+        return null;
+    }
+}
+
+exports.TimelineBg = TimelineBg;
+exports.TimelineFg = TimelineFg;
+exports.TimelineHeaderRow = TimelineHeaderRow;
+exports.TimelineLaneSlicer = TimelineLaneSlicer;
+exports.TimelineNowIndicatorArrow = TimelineNowIndicatorArrow;
+exports.TimelineNowIndicatorLine = TimelineNowIndicatorLine;
+exports.TimelineSlats = TimelineSlats;
+exports.TimelineView = TimelineView;
+exports.buildTimelineDateProfile = buildTimelineDateProfile;
+exports.computeSlotWidth = computeSlotWidth;
+exports.getTimelineSlotEl = getTimelineSlotEl;
+exports.timeToCoord = timeToCoord;