@monolith-forensics/monolith-ui 1.8.1-dev.0 → 1.8.1-dev.1

package/dist/SuperDatePicker/SuperDatePicker.js

@@ -1,557 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import moment from "moment";
-import { CalendarClock, ChevronDown, ChevronsLeft, ChevronsRight, Loader2Icon, RefreshCw, Search, ZoomIn, ZoomOut, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import styled, { keyframes } from "styled-components";
-import { Button } from "../Button";
-import DateInput from "../DateInput";
-import Input from "../Input";
-import { Popover } from "../Popover";
-import { SegmentedControl } from "../SegmentedControl";
-import { Switch } from "../Switch";
-import { DEFAULT_CONTROL_SIZE, getControlSizeTokens, } from "../core";
-const UNIT_LABELS = {
-    s: "seconds",
-    m: "minutes",
-    h: "hours",
-    d: "days",
-    w: "weeks",
-    M: "months",
-    y: "years",
-};
-const REFRESH_UNIT_LABELS = {
-    s: "Seconds",
-    m: "Minutes",
-    h: "Hours",
-};
-const UNIT_TO_MOMENT = {
-    s: "seconds",
-    m: "minutes",
-    h: "hours",
-    d: "days",
-    w: "weeks",
-    M: "months",
-    y: "years",
-};
-const DEFAULT_COMMONLY_USED_RANGES = [
-    { start: "now-15m", end: "now", label: "Last 15 minutes" },
-    { start: "now-30m", end: "now", label: "Last 30 minutes" },
-    { start: "now-1h", end: "now", label: "Last 1 hour" },
-    { start: "now-24h", end: "now", label: "Last 24 hours" },
-    { start: "now-7d", end: "now", label: "Last 7 days" },
-    { start: "now/d", end: "now", label: "Today" },
-    { start: "now/w", end: "now", label: "Week to date" },
-    { start: "now/M", end: "now", label: "Month to date" },
-    { start: "now/y", end: "now", label: "Year to date" },
-    { start: "now-1d/d", end: "now-1d/d", label: "Yesterday" },
-];
-const DATE_MATH_PATTERN = /^now(?:(\+|-)(\d+)(ms|s|m|h|d|w|M|y))?(?:\/(s|m|h|d|w|M|y))?$/;
-const REFRESH_UNIT_TO_MS = {
-    s: 1000,
-    m: 60 * 1000,
-    h: 60 * 60 * 1000,
-};
-const spin = keyframes `
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const Root = styled.div `
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: ${({ $width }) => ($width === "restricted" ? "620px" : "none")};
-  width: ${({ $width }) => {
-    if ($width === "full")
-        return "100%";
-    if ($width === "restricted")
-        return "min(100%, 620px)";
-    return "auto";
-}};
-  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
-  pointer-events: ${({ $disabled }) => ($disabled ? "none" : "auto")};
-`;
-const ControlButton = styled.button `
-  box-sizing: border-box;
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  color: ${({ theme }) => theme.palette.text.primary};
-  background: ${({ theme, $variant }) => $variant === "text" ? "transparent" : theme.palette.input.background};
-  border: 1px solid
-    ${({ theme, $variant }) => $variant === "text" ? "transparent" : theme.palette.input.border};
-  border-radius: 5px;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: ${({ $size }) => `${getControlSizeTokens($size).iconGap}px`};
-  min-height: ${({ $size }) => `${getControlSizeTokens($size).height}px`};
-  min-width: ${({ $width }) => $width === "auto" ? "240px" : $width === "full" ? "0" : "360px"};
-  width: ${({ $width }) => ($width === "full" ? "100%" : "auto")};
-  padding: ${({ $size }) => `0 ${getControlSizeTokens($size).inputPaddingX}px`};
-  text-align: left;
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease;
-
-  &:hover {
-    background: ${({ theme }) => theme.palette.action.hover};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.primary.main};
-    outline-offset: 2px;
-  }
-
-  svg {
-    color: ${({ theme }) => theme.palette.text.secondary};
-    width: ${({ $size }) => `${getControlSizeTokens($size).iconSize}px`};
-    height: ${({ $size }) => `${getControlSizeTokens($size).iconSize}px`};
-  }
-`;
-const ControlLabel = styled.span `
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).fontSize}px`};
-`;
-const ControlMeta = styled.span `
-  color: ${({ theme, $active }) => $active ? theme.palette.primary.main : theme.palette.text.secondary};
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-`;
-const LoadingIcon = styled(Loader2Icon) `
-  animation: ${spin} 0.8s linear infinite;
-`;
-const Dropdown = styled.div `
-  width: min(680px, calc(100vw - 28px));
-  max-height: min(640px, calc(100vh - 80px));
-  overflow: auto;
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).fontSize}px`};
-`;
-const AutoOnlyDropdown = styled(Dropdown) `
-  width: min(360px, calc(100vw - 28px));
-`;
-const Panel = styled.div `
-  display: grid;
-  gap: 12px;
-  padding-top: 12px;
-`;
-const Section = styled.div `
-  display: grid;
-  gap: 8px;
-`;
-const SectionHeader = styled.div `
-  color: ${({ theme }) => theme.palette.text.secondary};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).supportingFontSize}px`};
-  font-weight: 700;
-  letter-spacing: 0;
-`;
-const RangeGrid = styled.div `
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-
-  @media (max-width: 520px) {
-    grid-template-columns: 1fr;
-  }
-`;
-const RangeButton = styled.button `
-  border: 1px solid
-    ${({ theme, $active }) => $active ? theme.palette.primary.main : theme.palette.divider};
-  border-radius: 5px;
-  background: ${({ theme, $active }) => $active ? `${theme.palette.primary.main}18` : "transparent"};
-  color: ${({ theme }) => theme.palette.text.primary};
-  cursor: pointer;
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).fontSize}px`};
-  min-height: ${({ $size }) => `${getControlSizeTokens($size).height}px`};
-  padding: 0 ${({ $size }) => `${getControlSizeTokens($size).inputPaddingX}px`};
-  text-align: left;
-
-  &:hover {
-    background: ${({ theme }) => theme.palette.action.hover};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.primary.main};
-    outline-offset: 1px;
-  }
-`;
-const FormGrid = styled.div `
-  display: grid;
-  gap: 10px;
-`;
-const FieldRow = styled.label `
-  display: grid;
-  gap: 5px;
-  color: ${({ theme }) => theme.palette.text.secondary};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).supportingFontSize}px`};
-`;
-const InlineRow = styled.div `
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-`;
-const NativeSelect = styled.select `
-  box-sizing: border-box;
-  min-height: ${({ $size }) => `${getControlSizeTokens($size).height}px`};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.palette.input.border};
-  background: ${({ theme }) => theme.palette.input.background};
-  color: ${({ theme }) => theme.palette.text.primary};
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).fontSize}px`};
-  padding: 0 ${({ $size }) => `${getControlSizeTokens($size).inputPaddingX}px`};
-`;
-const Footer = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 4px;
-`;
-const Hint = styled.div `
-  color: ${({ theme }) => theme.palette.text.secondary};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).supportingFontSize}px`};
-`;
-const DisabledDisplay = styled.div `
-  color: ${({ theme }) => theme.palette.text.secondary};
-  font-size: ${({ $size }) => `${getControlSizeTokens($size).fontSize}px`};
-`;
-const WindowButtonGroup = styled.div `
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-`;
-const IconOnly = styled.span `
-  display: inline-flex;
-  align-items: center;
-
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-`;
-const parseDateMath = (value, options = {}) => {
-    const match = DATE_MATH_PATTERN.exec(value);
-    if (!match) {
-        const absolute = moment(value);
-        return absolute.isValid() ? absolute : null;
-    }
-    const [, operator, amountText, unit, roundUnit] = match;
-    const next = moment();
-    if (operator && amountText && unit) {
-        const amount = Number(amountText);
-        const momentUnit = UNIT_TO_MOMENT[unit];
-        if (operator === "+") {
-            next.add(amount, momentUnit);
-        }
-        else {
-            next.subtract(amount, momentUnit);
-        }
-    }
-    if (roundUnit) {
-        const momentRoundUnit = UNIT_TO_MOMENT[roundUnit];
-        return options.roundUp
-            ? next.endOf(momentRoundUnit)
-            : next.startOf(momentRoundUnit);
-    }
-    return next;
-};
-const parseRange = (start, end) => ({
-    startMoment: parseDateMath(start),
-    endMoment: parseDateMath(end, { roundUp: true }),
-});
-const isRangeValid = (start, end) => {
-    const { startMoment, endMoment } = parseRange(start, end);
-    return Boolean((startMoment === null || startMoment === void 0 ? void 0 : startMoment.isValid()) &&
-        (endMoment === null || endMoment === void 0 ? void 0 : endMoment.isValid()) &&
-        !startMoment.isAfter(endMoment));
-};
-const toDate = (input) => {
-    if (!input)
-        return undefined;
-    return moment.isMoment(input) ? input.toDate() : input;
-};
-const serializeMoment = (value) => value.milliseconds(0).toISOString();
-const pluralizeUnit = (unit, amount) => {
-    const label = UNIT_LABELS[unit];
-    return amount === 1 ? label.replace(/s$/, "") : label;
-};
-const getRelativeDescription = (start, end) => {
-    const startMatch = /^now-(\d+)(s|m|h|d|w|M|y)$/.exec(start);
-    const endMatch = /^now\+(\d+)(s|m|h|d|w|M|y)$/.exec(end);
-    if (startMatch && end === "now") {
-        const amount = Number(startMatch[1]);
-        const unit = startMatch[2];
-        return `Last ${amount} ${pluralizeUnit(unit, amount)}`;
-    }
-    if (start === "now" && endMatch) {
-        const amount = Number(endMatch[1]);
-        const unit = endMatch[2];
-        return `Next ${amount} ${pluralizeUnit(unit, amount)}`;
-    }
-    return null;
-};
-const getRangeLabel = (start, end, dateFormat, ranges) => {
-    const exactMatch = ranges.find((range) => range.start === start && range.end === end);
-    if (exactMatch)
-        return exactMatch.label;
-    const relative = getRelativeDescription(start, end);
-    if (relative)
-        return relative;
-    const { startMoment, endMoment } = parseRange(start, end);
-    if (!startMoment || !endMoment)
-        return `${start} - ${end}`;
-    return `${startMoment.format(dateFormat)} - ${endMoment.format(dateFormat)}`;
-};
-const msToUnitValue = (interval, preferredUnit) => {
-    const unit = preferredUnit ||
-        (interval % REFRESH_UNIT_TO_MS.h === 0
-            ? "h"
-            : interval % REFRESH_UNIT_TO_MS.m === 0
-                ? "m"
-                : "s");
-    return {
-        unit,
-        value: Math.max(1, Math.round(interval / REFRESH_UNIT_TO_MS[unit])),
-    };
-};
-const getRefreshInterval = (value, unit, minInterval) => Math.max(minInterval, value * REFRESH_UNIT_TO_MS[unit]);
-const isDisabledConfig = (value) => typeof value === "object" && value !== null && "display" in value;
-export const SuperDatePicker = ({ className, style, start, end, defaultStart = "now-15m", defaultEnd = "now", onTimeChange = () => { }, commonlyUsedRanges = DEFAULT_COMMONLY_USED_RANGES, recentlyUsedRanges = [], customQuickSelectPanels = [], isDisabled = false, isLoading = false, width = "restricted", size = DEFAULT_CONTROL_SIZE, variant = "outlined", compressed = false, showUpdateButton = true, updateButtonProps, quickSelectButtonProps, isQuickSelectOnly = false, isAutoRefreshOnly = false, isPaused = true, refreshInterval = 1000, refreshMinInterval = 0, refreshIntervalUnits, onRefresh, onRefreshChange, showTimeWindowButtons = false, minDate, maxDate, timeZoneDisplay, dateFormat = "MMM D, YYYY HH:mm:ss", "aria-label": ariaLabel = "Date range picker", }) => {
-    var _a, _b, _c, _d;
-    const resolvedSize = compressed ? "xs" : size;
-    const isControlled = useRef(start !== undefined || end !== undefined);
-    const disabled = Boolean(isDisabled);
-    const [internalStart, setInternalStart] = useState(defaultStart);
-    const [internalEnd, setInternalEnd] = useState(defaultEnd);
-    const currentStart = start !== null && start !== void 0 ? start : internalStart;
-    const currentEnd = end !== null && end !== void 0 ? end : internalEnd;
-    const [draftStart, setDraftStart] = useState(currentStart);
-    const [draftEnd, setDraftEnd] = useState(currentEnd);
-    const [opened, setOpened] = useState(false);
-    const [activeTab, setActiveTab] = useState("quick");
-    const [relativeAmount, setRelativeAmount] = useState(15);
-    const [relativeUnit, setRelativeUnit] = useState("m");
-    const [relativeDirection, setRelativeDirection] = useState("last");
-    const refreshParts = useMemo(() => msToUnitValue(refreshInterval, refreshIntervalUnits), [refreshInterval, refreshIntervalUnits]);
-    const [draftRefreshValue, setDraftRefreshValue] = useState(refreshParts.value);
-    const [draftRefreshUnit, setDraftRefreshUnit] = useState(refreshParts.unit);
-    const [draftPaused, setDraftPaused] = useState(isPaused);
-    const allKnownRanges = useMemo(() => [...commonlyUsedRanges, ...recentlyUsedRanges], [commonlyUsedRanges, recentlyUsedRanges]);
-    const displayLabel = useMemo(() => getRangeLabel(currentStart, currentEnd, dateFormat, allKnownRanges), [allKnownRanges, currentEnd, currentStart, dateFormat]);
-    const isDraftInvalid = !isRangeValid(draftStart, draftEnd);
-    const hasPendingChanges = draftStart !== currentStart || draftEnd !== currentEnd;
-    const absoluteDraftStartValue = (_b = (_a = parseDateMath(draftStart)) === null || _a === void 0 ? void 0 : _a.toISOString()) !== null && _b !== void 0 ? _b : draftStart;
-    const absoluteDraftEndValue = (_d = (_c = parseDateMath(draftEnd, { roundUp: true })) === null || _c === void 0 ? void 0 : _c.toISOString()) !== null && _d !== void 0 ? _d : draftEnd;
-    const disabledDisplay = isDisabledConfig(isDisabled)
-        ? isDisabled.display
-        : null;
-    useEffect(() => {
-        setDraftStart(currentStart);
-        setDraftEnd(currentEnd);
-    }, [currentStart, currentEnd]);
-    useEffect(() => {
-        setDraftRefreshValue(refreshParts.value);
-        setDraftRefreshUnit(refreshParts.unit);
-    }, [refreshParts.unit, refreshParts.value]);
-    useEffect(() => {
-        setDraftPaused(isPaused);
-    }, [isPaused]);
-    useEffect(() => {
-        if (!onRefresh || isPaused || disabled)
-            return;
-        let cancelled = false;
-        let timer;
-        const schedule = () => {
-            timer = setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
-                try {
-                    yield onRefresh({
-                        start: currentStart,
-                        end: currentEnd,
-                        refreshInterval,
-                    });
-                }
-                catch (_a) {
-                    onRefreshChange === null || onRefreshChange === void 0 ? void 0 : onRefreshChange({
-                        isPaused: true,
-                        refreshInterval,
-                        intervalUnits: refreshParts.unit,
-                    });
-                    return;
-                }
-                if (!cancelled)
-                    schedule();
-            }), Math.max(refreshMinInterval, refreshInterval));
-        };
-        schedule();
-        return () => {
-            cancelled = true;
-            clearTimeout(timer);
-        };
-    }, [
-        currentEnd,
-        currentStart,
-        disabled,
-        isPaused,
-        onRefresh,
-        onRefreshChange,
-        refreshInterval,
-        refreshMinInterval,
-        refreshParts.unit,
-    ]);
-    const commitRange = useCallback((nextStart, nextEnd, options = {}) => {
-        const isInvalid = !isRangeValid(nextStart, nextEnd);
-        if (!isControlled.current && !isInvalid) {
-            setInternalStart(nextStart);
-            setInternalEnd(nextEnd);
-        }
-        setDraftStart(nextStart);
-        setDraftEnd(nextEnd);
-        onTimeChange({
-            start: nextStart,
-            end: nextEnd,
-            isInvalid,
-            isQuickSelection: Boolean(options.quickSelection),
-        });
-        if (options.close) {
-            setOpened(false);
-        }
-    }, [onTimeChange]);
-    const handleDraftStartChange = (nextValue) => {
-        const nextStart = nextValue || draftStart;
-        setDraftStart(nextStart);
-        if (showUpdateButton === false) {
-            commitRange(nextStart, draftEnd);
-        }
-    };
-    const handleDraftEndChange = (nextValue) => {
-        const nextEnd = nextValue || draftEnd;
-        setDraftEnd(nextEnd);
-        if (showUpdateButton === false) {
-            commitRange(draftStart, nextEnd);
-        }
-    };
-    const commitDraft = () => {
-        if (isDraftInvalid)
-            return;
-        commitRange(draftStart, draftEnd, { close: true });
-    };
-    const handleQuickSelect = (range) => {
-        commitRange(range.start, range.end, {
-            quickSelection: true,
-            close: true,
-        });
-    };
-    const applyRelativeRange = () => {
-        const safeAmount = Math.max(1, Math.floor(relativeAmount || 1));
-        const nextStart = relativeDirection === "last"
-            ? `now-${safeAmount}${relativeUnit}`
-            : "now";
-        const nextEnd = relativeDirection === "last"
-            ? "now"
-            : `now+${safeAmount}${relativeUnit}`;
-        if (showUpdateButton === false) {
-            commitRange(nextStart, nextEnd, { close: true });
-            return;
-        }
-        setDraftStart(nextStart);
-        setDraftEnd(nextEnd);
-    };
-    const applyRefresh = () => {
-        onRefreshChange === null || onRefreshChange === void 0 ? void 0 : onRefreshChange({
-            isPaused: draftPaused,
-            refreshInterval: getRefreshInterval(draftRefreshValue, draftRefreshUnit, refreshMinInterval),
-            intervalUnits: draftRefreshUnit,
-        });
-    };
-    const shiftWindow = (direction) => {
-        const { startMoment, endMoment } = parseRange(currentStart, currentEnd);
-        if (!startMoment || !endMoment)
-            return;
-        const duration = endMoment.diff(startMoment);
-        const amount = direction === "backward" ? -duration : duration;
-        commitRange(serializeMoment(startMoment.clone().add(amount, "milliseconds")), serializeMoment(endMoment.clone().add(amount, "milliseconds")));
-    };
-    const zoomWindow = (direction) => {
-        var _a;
-        const { startMoment, endMoment } = parseRange(currentStart, currentEnd);
-        if (!startMoment || !endMoment)
-            return;
-        const config = typeof showTimeWindowButtons === "object" ? showTimeWindowButtons : {};
-        const zoomFactor = (_a = config.zoomFactor) !== null && _a !== void 0 ? _a : 0.5;
-        const duration = endMoment.diff(startMoment);
-        const delta = duration * zoomFactor;
-        const halfDelta = delta / 2;
-        const modifier = direction === "out" ? 1 : -1;
-        commitRange(serializeMoment(startMoment.clone().subtract(halfDelta * modifier, "milliseconds")), serializeMoment(endMoment.clone().add(halfDelta * modifier, "milliseconds")));
-    };
-    const renderUpdateButton = (iconOnly = false) => {
-        var _a;
-        if (showUpdateButton === false)
-            return null;
-        return (_jsx(Button, Object.assign({ size: resolvedSize, variant: "contained", color: "primary", disabled: isDraftInvalid || !hasPendingChanges, onClick: commitDraft }, updateButtonProps, { children: iconOnly ? (_jsx(IconOnly, { children: _jsx(Search, {}) })) : ((_a = updateButtonProps === null || updateButtonProps === void 0 ? void 0 : updateButtonProps.children) !== null && _a !== void 0 ? _a : "Update") })));
-    };
-    const renderQuickRanges = (title, ranges, emptyLabel) => {
-        if (ranges.length === 0) {
-            return emptyLabel ? _jsx(Hint, { "$size": resolvedSize, children: emptyLabel }) : null;
-        }
-        return (_jsxs(Section, { children: [_jsx(SectionHeader, { "$size": resolvedSize, children: title }), _jsx(RangeGrid, { children: ranges.map((range) => (_jsx(RangeButton, { type: "button", "$size": resolvedSize, "$active": range.start === currentStart && range.end === currentEnd, onClick: () => handleQuickSelect(range), children: range.label }, `${range.label}-${range.start}-${range.end}`))) })] }));
-    };
-    const renderQuickPanel = () => (_jsxs(Panel, { children: [renderQuickRanges("Commonly used", commonlyUsedRanges), renderQuickRanges("Recently used", recentlyUsedRanges, "No recently used ranges."), customQuickSelectPanels.map((panel) => (_jsxs(Section, { children: [_jsx(SectionHeader, { "$size": resolvedSize, children: panel.title }), panel.content] }, panel.title))), timeZoneDisplay && _jsx(Hint, { "$size": resolvedSize, children: timeZoneDisplay })] }));
-    const renderAbsolutePanel = () => (_jsxs(Panel, { children: [_jsxs(FormGrid, { children: [_jsxs(FieldRow, { "$size": resolvedSize, children: ["Start", _jsx(DateInput, { value: absoluteDraftStartValue, onChange: handleDraftStartChange, size: resolvedSize, format: "YYYY-MM-DD HH:mm:ss", enableCalendar: true, clearable: false, min: toDate(minDate), max: toDate(maxDate) })] }), _jsxs(FieldRow, { "$size": resolvedSize, children: ["End", _jsx(DateInput, { value: absoluteDraftEndValue, onChange: handleDraftEndChange, size: resolvedSize, format: "YYYY-MM-DD HH:mm:ss", enableCalendar: true, clearable: false, min: toDate(minDate), max: toDate(maxDate) })] })] }), isDraftInvalid && (_jsx(Hint, { "$size": resolvedSize, children: "Choose a valid range where start is before end." })), _jsx(Footer, { children: renderUpdateButton() })] }));
-    const renderRelativePanel = () => (_jsxs(Panel, { children: [_jsxs(InlineRow, { children: [_jsx(SegmentedControl, { data: [
-                            { value: "last", label: "Last" },
-                            { value: "next", label: "Next" },
-                        ], value: relativeDirection, onChange: (value) => setRelativeDirection(value), size: resolvedSize }), _jsx(Input, { type: "number", min: 1, value: relativeAmount, size: resolvedSize, width: 86, onChange: (event) => setRelativeAmount(Number(event.target.value)) }), _jsx(NativeSelect, { "$size": resolvedSize, value: relativeUnit, onChange: (event) => setRelativeUnit(event.target.value), children: Object.entries(UNIT_LABELS).map(([unit, label]) => (_jsx("option", { value: unit, children: label }, unit))) }), _jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", onClick: applyRelativeRange, children: "Apply" })] }), _jsxs(Hint, { "$size": resolvedSize, children: ["Currently set to ", getRangeLabel(draftStart, draftEnd, dateFormat, allKnownRanges), "."] }), _jsx(Footer, { children: renderUpdateButton() })] }));
-    const renderRefreshPanel = () => (_jsxs(Panel, { children: [_jsx(InlineRow, { children: _jsx(Switch, { size: resolvedSize, value: !draftPaused, onChange: (checked) => setDraftPaused(!checked), label: "Refresh" }) }), _jsxs(InlineRow, { children: [_jsx(Input, { type: "number", min: 1, value: draftRefreshValue, size: resolvedSize, width: 90, onChange: (event) => setDraftRefreshValue(Math.max(1, Number(event.target.value))) }), _jsx(NativeSelect, { "$size": resolvedSize, value: draftRefreshUnit, onChange: (event) => setDraftRefreshUnit(event.target.value), children: Object.entries(REFRESH_UNIT_LABELS).map(([unit, label]) => (_jsx("option", { value: unit, children: label }, unit))) }), _jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", onClick: applyRefresh, children: "Apply" })] }), _jsxs(Hint, { "$size": resolvedSize, children: ["Refresh is ", draftPaused ? "paused" : "on", ", interval set to", " ", draftRefreshValue, " ", REFRESH_UNIT_LABELS[draftRefreshUnit].toLowerCase(), "."] })] }));
-    const renderDropdownContent = () => {
-        if (isAutoRefreshOnly) {
-            return _jsx(AutoOnlyDropdown, { "$size": resolvedSize, children: renderRefreshPanel() });
-        }
-        if (isQuickSelectOnly) {
-            return _jsx(Dropdown, { "$size": resolvedSize, children: renderQuickPanel() });
-        }
-        const tabs = [
-            { value: "quick", label: "Quick" },
-            { value: "absolute", label: "Absolute" },
-            { value: "relative", label: "Relative" },
-            ...(onRefreshChange
-                ? [{ value: "refresh", label: "Refresh" }]
-                : []),
-        ];
-        return (_jsxs(Dropdown, { "$size": resolvedSize, children: [_jsx(SegmentedControl, { data: tabs, value: activeTab, onChange: setActiveTab, size: resolvedSize, fullWidth: true }), activeTab === "quick" && renderQuickPanel(), activeTab === "absolute" && renderAbsolutePanel(), activeTab === "relative" && renderRelativePanel(), activeTab === "refresh" && renderRefreshPanel()] }));
-    };
-    const renderTriggerLabel = () => {
-        if (disabledDisplay) {
-            return _jsx(DisabledDisplay, { "$size": resolvedSize, children: disabledDisplay });
-        }
-        if (isAutoRefreshOnly) {
-            return `Refresh ${isPaused ? "paused" : `every ${refreshParts.value}${refreshParts.unit}`}`;
-        }
-        if (isQuickSelectOnly) {
-            return "Quick select";
-        }
-        return displayLabel;
-    };
-    const timeWindowConfig = typeof showTimeWindowButtons === "object" ? showTimeWindowButtons : {};
-    const showWindowButtons = Boolean(showTimeWindowButtons) && !isAutoRefreshOnly;
-    return (_jsxs(Root, { className: className, style: style, "$width": width, "$disabled": disabled, children: [showWindowButtons && (_jsxs(WindowButtonGroup, { children: [_jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", title: "Move time window backward", onClick: () => shiftWindow("backward"), children: _jsx(IconOnly, { children: _jsx(ChevronsLeft, {}) }) }), timeWindowConfig.showZoomIn && (_jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", title: "Zoom in", onClick: () => zoomWindow("in"), children: _jsx(IconOnly, { children: _jsx(ZoomIn, {}) }) })), _jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", title: "Zoom out", onClick: () => zoomWindow("out"), children: _jsx(IconOnly, { children: _jsx(ZoomOut, {}) }) }), _jsx(Button, { type: "button", size: resolvedSize, variant: "outlined", title: "Move time window forward", onClick: () => shiftWindow("forward"), children: _jsx(IconOnly, { children: _jsx(ChevronsRight, {}) }) })] })), _jsxs(Popover, { opened: opened, onChange: setOpened, disabled: disabled, position: "bottom-start", width: isAutoRefreshOnly ? 360 : undefined, transitionProps: { transition: "pop", duration: 120 }, children: [_jsx(Popover.Target, { children: _jsxs(ControlButton, Object.assign({ type: "button", "$size": resolvedSize, "$width": width, "$variant": variant, "aria-label": ariaLabel }, quickSelectButtonProps, { children: [isAutoRefreshOnly ? _jsx(RefreshCw, {}) : _jsx(CalendarClock, {}), _jsx(ControlLabel, { "$size": resolvedSize, children: renderTriggerLabel() }), _jsx(ControlMeta, { "$active": !isPaused && Boolean(onRefreshChange), children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(ChevronDown, {}) })] })) }), _jsx(Popover.Dropdown, { children: renderDropdownContent() })] }), showUpdateButton === "iconOnly" && !isAutoRefreshOnly
-                ? renderUpdateButton(true)
-                : null] }));
-};
-export default SuperDatePicker;

package/dist/SuperDatePicker/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SuperDatePicker";
-export * from "./SuperDatePicker";

package/dist/SuperDatePicker/index.js

@@ -1,2 +0,0 @@
-export { default } from "./SuperDatePicker";
-export * from "./SuperDatePicker";