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

package/dist/SuperDatePicker/SuperDatePicker.js

@@ -0,0 +1,557 @@
+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

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

package/dist/SuperDatePicker/index.js

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

package/dist/Switch/Switch.d.ts

@@ -2,8 +2,8 @@ import { CSSProperties, ReactNode } from "react";
 import { Size } from "../core";
 export type SwitchProps = {
     className?: string;
-    onChange: (e: any) => void;
-    size?: Exclude<Size, "xxs">;
+    onChange: (checked: boolean) => void;
+    size?: Size;
     label?: string;
     labelPosition?: "left" | "right";
     description?: ReactNode;