onekijs-ui 0.21.1 → 0.21.2

package/dist/components/datetime/hooks/useDateRangeAdapter.d.ts

@@ -2,5 +2,6 @@ import { DateRangeAdapter } from '../typings';
 declare const useDateRangeAdapter: () => DateRangeAdapter<{
     from: Date | null;
     to: Date | null;
+    label?: string | null | undefined;
 }>;
 export default useDateRangeAdapter;

package/dist/components/datetime/hooks/useQuickRanges.d.ts

@@ -1,4 +1,4 @@
 import { AnonymousObject } from 'onekijs-framework';
-import { DateQuickRange, DateStringRange, DefaultQuickRange } from '../typings';
-declare const useQuickRanges: (ranges: DateQuickRange | DefaultQuickRange | ((DateQuickRange | DefaultQuickRange)[])) => AnonymousObject<DateStringRange>;
+import { DateStringRange, QuickRange } from '../typings';
+declare const useQuickRanges: (ranges: QuickRange | QuickRange[]) => AnonymousObject<DateStringRange>;
 export default useQuickRanges;

package/dist/components/datetime/hooks/useTimestampRangeAdapter.d.ts

@@ -2,5 +2,6 @@ import { DateRangeAdapter } from '../typings';
 declare const useTimestampRangeAdapter: (format?: 'seconds' | 'milliseconds') => DateRangeAdapter<{
     from: number | null;
     to: number | null;
+    label?: string | null | undefined;
 }>;
 export default useTimestampRangeAdapter;

package/dist/components/datetime/typings.d.ts

@@ -2,10 +2,12 @@
 import { AnonymousObject } from 'onekijs-framework';
 import { StylableProps } from '../../styles/typings';
 import { DropdownWidthModifier } from '../dropdown/typings';
+import { Placement } from '@popperjs/core';
 export type BasePickerProps = StylableProps & {
     animationMs?: number;
     attachDropdownToBody?: boolean;
     autoFocus?: boolean;
+    combo?: boolean;
     disabled?: boolean;
     dropdownWidthModifier?: DropdownWidthModifier;
     nullable?: boolean;
@@ -13,11 +15,13 @@ export type BasePickerProps = StylableProps & {
     onFocus?: () => void;
     openOnFocus?: boolean;
     placeholder?: string;
+    placement?: Placement;
 };
 export type CalendarComponentProps = StylableProps & {
     from: DatePickerDate;
     maxDate?: Date;
     minDate?: Date;
+    nextSelectEdge: 'from' | 'to';
     onChange: (formDate: string | undefined, toDate?: string) => void;
     type: DatePickerType;
     to: DatePickerDate;
@@ -65,20 +69,23 @@ export type DatePickerType = {
 };
 export type DateQuickRange = {
     label: string;
-    from: Date;
-    to: Date;
+    from: Date | (() => Date);
+    to: Date | (() => Date);
 };
 export type DateRange = {
     from: Date | null;
     to: Date | null;
+    label?: string | null;
 };
 export type DateStringRange = {
     from: string | null;
     to: string | null;
+    label?: string | null;
 };
 export type TimestampRange = {
     from: number | null;
     to: number | null;
+    label?: string | null;
 };
 export type DateRangeAdapter<T extends any = any> = {
     fromDateRange: (range: DateStringRange) => T;
@@ -86,9 +93,10 @@ export type DateRangeAdapter<T extends any = any> = {
 };
 export type DateRangePickerProps<T extends any = any> = BasePickerProps & {
     adapter?: DateRangeAdapter<T>;
-    value?: T | null;
+    closeOnQuickSelect?: boolean;
     onChange?: (value: T | null) => void;
     quickRanges?: AnonymousObject<DateStringRange>;
+    value?: T | null;
 };
 export type DateTimePickerProps<T extends any = any> = DatePickerProps<T> & DisplayTime;
 export type DateTimeRangePickerProps<T extends any = any> = DateRangePickerProps<T> & DisplayTime;
@@ -99,13 +107,16 @@ export type DisplayTime = {
     displaySeconds?: boolean;
 };
 export type PickerComponentProps = BasePickerProps & DisplayTime & {
+    closeOnQuickSelect?: boolean;
     type: DatePickerType;
     quickRanges?: AnonymousObject<DateStringRange>;
     value?: string | null;
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string | null, label?: string | null) => void;
+    label?: string | null;
 };
+export type QuickRange = DefaultQuickRange | DateQuickRange;
 export type QuickTimeRangeComponentProps = {
-    currentQuickRangeLabel?: string;
+    currentQuickRangeLabel?: string | null;
     quickRanges: AnonymousObject<DateStringRange>;
     onChange: (quickRangeLabel: string) => void;
 };

package/dist/components/datetime/util.d.ts

@@ -1,7 +1,7 @@
 import { AnonymousObject } from 'onekijs-framework';
-import { DateStringRange } from './typings';
-export declare const dateToString: (d: Date | string) => string;
-export declare const toDateRange: (value: string | null) => DateStringRange | null;
-export declare const qr: (quickRange: string) => DateStringRange | null;
-export declare const defaultQuickRanges: () => AnonymousObject<DateStringRange>;
+import { DateQuickRange, DateStringRange, DefaultQuickRange } from './typings';
+export declare const dateToString: (d: Date | string | (() => Date)) => string;
+export declare const toDateRange: (value: string | null, label?: string | null) => DateStringRange | null;
+export declare const qr: (quickRange: DefaultQuickRange) => DateQuickRange;
+export declare const defaultQuickRanges: () => AnonymousObject<DateQuickRange>;
 export declare const findQuickRangeLabel: (quickRanges: AnonymousObject<DateStringRange> | undefined, dateRange: DateStringRange | string | null | undefined) => string | undefined;

package/dist/index.js

@@ -885,7 +885,7 @@ const TogglerIcon = styled(IconComponent$b) `
 const AccordionPanelTitle = ({ title, active, onClick }) => {
     return (React.createElement("div", { className: "o-accordion-panel-title", onClick: onClick },
         React.createElement(TogglerIcon, { open: active }),
-        React.createElement("span", null, `${title}`)));
+        React.createElement("span", null, title)));
 };
 
 const AccordionPanel = ({ title, initialActive, initialExpand, children, Component = AccordionPanelTitle, link, }) => {
@@ -12005,6 +12005,12 @@ const datePickerStyle = () => {
       }
     }
 
+    .o-datepicker-input {
+      input:read-only {
+        ${cursor('pointer')}
+      }
+    }
+
 
     .o-datepicker-icon {
       ${cursor('pointer')}
@@ -12199,72 +12205,6 @@ const useDatePickerContext = () => {
     return React.useContext(DefaultDatePickerContext);
 };
 
-const dateToString = (d) => {
-    if (typeof d === 'string') {
-        d = new Date(d);
-    }
-    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-};
-const toDateRange = (value) => {
-    if (value) {
-        const [from, to] = value.trim().split(/ to\s*/);
-        return {
-            from: from && from.trim() ? from.trim() : null,
-            to: to && to.trim() ? to.trim() : null,
-        };
-    }
-    else {
-        return null;
-    }
-};
-const qr = (quickRange) => {
-    if (typeof quickRange === 'string') {
-        const from = new Date();
-        const to = new Date();
-        switch (quickRange) {
-            case 'Last hour':
-                from.setHours(from.getHours() - 1);
-                break;
-            case 'Last day':
-                from.setDate(from.getDate() - 1);
-                break;
-            case 'Last week':
-                from.setDate(from.getDate() - 7);
-                break;
-            case 'Last month':
-                from.setMonth(from.getMonth() - 1);
-                break;
-            case 'Last year':
-                from.setFullYear(from.getFullYear() - 1);
-                break;
-            default: return null;
-        }
-        return { from: dateToString(from), to: dateToString(to) };
-    }
-    return quickRange;
-};
-const defaultQuickRanges = () => {
-    return ['Last hour', 'Last day', 'Last week', 'Last month', 'Last year'].reduce((accumulator, label) => {
-        const quickRange = qr(label);
-        if (quickRange) {
-            accumulator[label] = quickRange;
-        }
-        return accumulator;
-    }, {});
-};
-const findQuickRangeLabel = (quickRanges, dateRange) => {
-    if (!quickRanges || !dateRange)
-        return;
-    const dr = typeof dateRange === 'string' ? toDateRange(dateRange) : dateRange;
-    if (dr === null)
-        return;
-    if (!dr.from || !dr.to)
-        return;
-    return Object.keys(quickRanges).find((label) => {
-        return dr.from === quickRanges[label].from && dr.to === quickRanges[label].to;
-    });
-};
-
 const isCurrent = (d, year, month, day) => {
     return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
 };
@@ -12319,7 +12259,7 @@ const defaultMinDate = new Date();
 defaultMinDate.setFullYear(1900);
 const defaultMaxDate = new Date();
 defaultMaxDate.setFullYear(2100);
-const CalendarComponent = ({ from, to, type, minDate = defaultMinDate, maxDate = defaultMaxDate, className, onChange, }) => {
+const CalendarComponent = ({ from, to, type, minDate = defaultMinDate, maxDate = defaultMaxDate, nextSelectEdge, className, onChange, }) => {
     const maxYear = maxDate.getFullYear();
     const minYear = minDate.getFullYear();
     const years = React.useRef([...Array(maxYear).keys()].slice(minYear));
@@ -12461,23 +12401,44 @@ const CalendarComponent = ({ from, to, type, minDate = defaultMinDate, maxDate =
             calendarDays.map((calendarDay, index) => (React.createElement("div", { key: `${fromDay}-${index}`, className: `o-calendar-day${calendarDay.endRange
                     ? ` o-calendar-day-${isInversed ? 'start' : 'end'}-range${transientTo ? '-transient' : ''}`
                     : ''}${calendarDay.startRange ? ` o-calendar-day-${isInversed ? 'end' : 'start'}-range` : ''}${calendarDay.active ? ' o-calendar-day-active' : ''}${calendarDay.inRange ? ` o-calendar-day-in-range${transientTo ? '-transient' : ''}` : ''}${calendarDay.month === currentMonth ? ' o-calendar-day-in-month' : ''}${calendarDay.current ? ' o-calendar-day-current' : ''}`, onClick: () => {
-                    const currentDateString = `${calendarDay.year}-${String(calendarDay.month + 1).padStart(2, '0')}-${String(calendarDay.day).padStart(2, '0')}`;
+                    const nextDateString = `${calendarDay.year}-${String(calendarDay.month + 1).padStart(2, '0')}-${String(calendarDay.day).padStart(2, '0')}`;
                     if (type.range && from.year !== undefined && from.month !== undefined && from.day !== undefined) {
-                        // we assume we change the "to" date
-                        // if the new "to" date is before the "from" date, we need to switch
+                        // It's a date range and not the first selection
+                        // We must determine if it's a change for the from or the to
                         const fromDateString = `${from.year}-${from.month.padStart(2, '0')}-${String(from.day).padStart(2, '0')}`;
                         const fromDate = new Date(fromDateString);
-                        const endDate = new Date(currentDateString);
-                        if (fromDate <= endDate) {
-                            onChange(undefined, currentDateString);
+                        let endDate = undefined;
+                        let endDateString = undefined;
+                        if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
+                            // it's not the second click
+                            endDateString = `${to.year}-${to.month.padStart(2, '0')}-${String(to.day).padStart(2, '0')}`;
+                            endDate = new Date(endDateString);
+                        }
+                        const nextDate = new Date(nextDateString);
+                        if (endDate) {
+                            if (nextDate <= fromDate) {
+                                onChange(nextDateString, endDateString);
+                            }
+                            else if (nextDate >= endDate) {
+                                onChange(fromDateString, nextDateString);
+                            }
+                            else if (nextSelectEdge === 'from') {
+                                onChange(nextDateString, endDateString);
+                            }
+                            else {
+                                onChange(fromDateString, nextDateString);
+                            }
+                        }
+                        else if (nextDate <= fromDate) {
+                            onChange(nextDateString, fromDateString);
                         }
                         else {
-                            onChange(currentDateString, fromDateString);
+                            onChange(fromDateString, nextDateString);
                         }
                     }
                     else {
                         // we assume that it's not a range or the first selection of the range
-                        onChange(currentDateString);
+                        onChange(nextDateString);
                     }
                 }, onMouseEnter: () => {
                     if (transientTo) {
@@ -12716,11 +12677,10 @@ const formatDate = (type, fromDate, fromTime, toDate, toTime) => {
     }
     return result;
 };
-const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoFocus, className, disabled, dropdownWidthModifier = 'min', nullable = false, onBlur: forwardBlur, onChange: forwardChange, onFocus: forwardFocus, openOnFocus = false, placeholder, quickRanges, type, displayHours = true, displayMinutes = true, displaySeconds = true, value: externalValue, }) => {
+const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoFocus, className, closeOnQuickSelect = true, combo = false, disabled, dropdownWidthModifier = 'min', label, nullable = false, onBlur: forwardBlur, onChange: forwardChange, onFocus: forwardFocus, openOnFocus = false, placeholder, placement = 'bottom-start', quickRanges, type, displayHours = true, displayMinutes = true, displaySeconds = true, value: externalValue, }) => {
     const containerRef = React.useRef(null);
     const stateRef = React.useRef({});
     const dropdownRef = React.useRef(null);
-    const quickRangesRef = React.useRef(quickRanges);
     const lastExternalValueRef = React.useRef();
     const currentValueRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
@@ -12732,12 +12692,6 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
         value = currentValueRef.current;
     }
     const [fromString, toString] = value ? value.split(/ to\s*/) : [];
-    const [label, setLabel] = React.useState(() => {
-        if (type.range) {
-            return findQuickRangeLabel(quickRangesRef.current, value);
-        }
-        return;
-    });
     const validFromRef = React.useRef();
     const validToRef = React.useRef();
     if (!fromString || /\s*/.test(fromString)) {
@@ -12746,6 +12700,8 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
     if (!toString || /\s*/.test(toString)) {
         validToRef.current = undefined;
     }
+    // this setting is used to detect if the user changes the from or the to
+    const nextSelectEdgeRef = React.useRef('to');
     const from = parseDate(fromString?.trim());
     const previousFrom = parseDate(validFromRef.current);
     if (!type['date'] || !isValidDate(`${from['day']}-${from['month']}-${from['year']}`)) {
@@ -12823,14 +12779,13 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
             }
         }
     }, [open, forwardBlur, setOpen, focus]);
-    const onChange = React.useCallback((nextValue) => {
+    const onChange = React.useCallback((nextValue, label) => {
         currentValueRef.current = nextValue;
-        setLabel(undefined);
         // check if the nextValue is a valid value
         // if it's not a valid value, we keep it internally
         if (forwardChange && isValidValue(nextValue, type)) {
             setInternalValue(null);
-            forwardChange(nextValue);
+            forwardChange(nextValue, label);
         }
         else {
             setInternalValue(nextValue);
@@ -12843,8 +12798,17 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
         if (toDate === undefined) {
             toDate = to['date'];
         }
+        if (fromDate !== from['date']) {
+            nextSelectEdgeRef.current = 'to';
+        }
+        else {
+            nextSelectEdgeRef.current = 'from';
+        }
         onChange(formatDate(type, fromDate, from['time'], toDate, to['time']));
     };
+    const removeLabel = () => {
+        onChangeDate();
+    };
     const onChangeTime = (nextTime, edge) => {
         if (edge === 'from') {
             onChange(formatDate(type, from['date'], nextTime, to['date'], to['time']));
@@ -12854,11 +12818,13 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
         }
     };
     const onChangeQuickRange = (quickRangeLabel) => {
-        if (quickRangesRef.current) {
-            const quickRange = quickRangesRef.current[quickRangeLabel];
+        if (quickRanges) {
+            const quickRange = quickRanges[quickRangeLabel];
             if (quickRange) {
-                onChange(`${quickRange.from} to ${quickRange.to}`);
-                setLabel(quickRangeLabel);
+                onChange(`${quickRange.from} to ${quickRange.to}`, quickRangeLabel);
+            }
+            if (closeOnQuickSelect) {
+                setOpen(false);
             }
         }
     };
@@ -12882,14 +12848,6 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
             onChange,
         };
     }, [open, setOpen, triggerRef, nullable, onChange]);
-    React.useEffect(() => {
-        if (type.range && !label) {
-            const quickRangeLabel = findQuickRangeLabel(quickRangesRef.current, value);
-            if (quickRangeLabel) {
-                setLabel(quickRangeLabel);
-            }
-        }
-    }, [value]);
     React.useEffect(() => {
         if (forwardChange && lastExternalValueRef.current !== undefined && externalValue !== undefined && externalValue !== lastExternalValueRef.current) {
             // case when we block the onChange due to a wrong internal value
@@ -12900,20 +12858,23 @@ const PickerComponent = ({ animationMs = 200, attachDropdownToBody = true, autoF
     });
     return (React.createElement(DefaultDatePickerContext.Provider, { value: context },
         React.createElement("div", { className: addClassname('o-datepicker', className), ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false) },
-            React.createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: "bottom-start", widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
+            React.createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: placement, widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
                 React.createElement("div", { ref: dropdownRef, className: `o-datepicker-dropdown-content${type['range'] ? ' o-datepicker-range' : ''}${validFromRef.current !== undefined ? ' o-datepicker-active' : ''}` },
-                    type['range'] && quickRangesRef.current && Object.keys(quickRangesRef.current).length > 0 && (React.createElement(QuickTimeRangeComponent, { key: "quick_range", quickRanges: quickRangesRef.current, onChange: onChangeQuickRange, currentQuickRangeLabel: label })),
+                    type['range'] && quickRanges && Object.keys(quickRanges).length > 0 && (React.createElement(QuickTimeRangeComponent, { key: "quick_range", quickRanges: quickRanges, onChange: onChangeQuickRange, currentQuickRangeLabel: label })),
                     type['date'] && (React.createElement("div", { className: "o-calendar", key: "calendar" },
-                        React.createElement(CalendarComponent, { from: from, to: to, type: type, onChange: onChangeDate }))),
+                        React.createElement(CalendarComponent, { from: from, to: to, type: type, onChange: onChangeDate, nextSelectEdge: nextSelectEdgeRef.current }))),
                     type['time'] && (React.createElement("div", { className: "o-time", key: "time" },
                         React.createElement(TimeComponent, { from: from, to: to, type: type, onChange: onChangeTime, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }))))),
             React.createElement("span", { ref: triggerRef, key: "input" },
-                React.createElement(Input, { placeholder: placeholder, onChange: (e) => onChange(e.target.value), value: label ? label : !value ? '' : value, onFocus: onFocus, onBlur: onBlur, autoFocus: autoFocus, disabled: disabled, SuffixComponent: IconComponent, onClick: () => {
+                React.createElement(Input, { className: "o-datepicker-input", placeholder: placeholder, onChange: (e) => onChange(e.target.value), value: label ? label : !value ? '' : value, onFocus: onFocus, onBlur: onBlur, autoFocus: autoFocus, disabled: disabled, SuffixComponent: IconComponent, readOnly: !combo, onClick: () => {
                         if (!open) {
                             setOpen(true);
                         }
+                        else if (combo) {
+                            removeLabel();
+                        }
                         else {
-                            setLabel(undefined);
+                            setOpen(false);
                         }
                     } })))));
 };
@@ -12937,6 +12898,77 @@ const DatePickerComponent = (props) => {
     return React.createElement(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$5 });
 };
 
+const dateToString = (d) => {
+    if (typeof d === 'function') {
+        d = d();
+    }
+    if (typeof d === 'string') {
+        d = new Date(d);
+    }
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+};
+const toDateRange = (value, label) => {
+    if (value) {
+        const [from, to] = value.trim().split(/ to\s*/);
+        return {
+            from: from && from.trim() ? from.trim() : null,
+            to: to && to.trim() ? to.trim() : null,
+            label,
+        };
+    }
+    else {
+        return null;
+    }
+};
+const qr = (quickRange) => {
+    return {
+        label: quickRange,
+        from: () => {
+            const d = new Date();
+            switch (quickRange) {
+                case 'Last hour':
+                    d.setHours(d.getHours() - 1);
+                    break;
+                case 'Last day':
+                    d.setDate(d.getDate() - 1);
+                    break;
+                case 'Last week':
+                    d.setDate(d.getDate() - 7);
+                    break;
+                case 'Last month':
+                    d.setMonth(d.getMonth() - 1);
+                    break;
+                case 'Last year':
+                    d.setFullYear(d.getFullYear() - 1);
+                    break;
+            }
+            return d;
+        },
+        to: () => new Date(),
+    };
+};
+const defaultQuickRanges = () => {
+    return ['Last hour', 'Last day', 'Last week', 'Last month', 'Last year'].reduce((accumulator, label) => {
+        const quickRange = qr(label);
+        if (quickRange) {
+            accumulator[label] = quickRange;
+        }
+        return accumulator;
+    }, {});
+};
+const findQuickRangeLabel = (quickRanges, dateRange) => {
+    if (!quickRanges || !dateRange)
+        return;
+    const dr = typeof dateRange === 'string' ? toDateRange(dateRange) : dateRange;
+    if (dr === null)
+        return;
+    if (!dr.from || !dr.to)
+        return;
+    return Object.keys(quickRanges).find((label) => {
+        return dr.from === quickRanges[label].from && dr.to === quickRanges[label].to;
+    });
+};
+
 const type$4 = {
     date: true,
     time: false,
@@ -12944,8 +12976,8 @@ const type$4 = {
 };
 const DateRangePickerComponent = (props) => {
     const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange ? (value) => {
-        const dateRange = toDateRange(value);
+    const onChange = forwardChange ? (value, label) => {
+        const dateRange = toDateRange(value, label);
         if (dateRange === null || !adapter) {
             forwardChange(dateRange);
         }
@@ -12954,16 +12986,19 @@ const DateRangePickerComponent = (props) => {
         }
     } : undefined;
     let value = null;
+    let valueLabel;
     if (externalValue) {
         if (adapter) {
-            const { from, to } = adapter.toDateRange(externalValue);
+            const { from, to, label } = adapter.toDateRange(externalValue);
             value = `${from || ''} to ${to || ''}`;
+            valueLabel = label;
         }
         else {
             value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
+            valueLabel = externalValue.label;
         }
     }
-    return React.createElement(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$4 });
+    return React.createElement(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$4, label: valueLabel });
 };
 
 const type$3 = {
@@ -12992,8 +13027,8 @@ const type$2 = {
 };
 const DateTimeRangePickerComponent = (props) => {
     const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange ? (value) => {
-        const dateRange = toDateRange(value);
+    const onChange = forwardChange ? (value, label) => {
+        const dateRange = toDateRange(value, label);
         if (dateRange === null || !adapter) {
             forwardChange(dateRange);
         }
@@ -13002,16 +13037,19 @@ const DateTimeRangePickerComponent = (props) => {
         }
     } : undefined;
     let value = null;
+    let valueLabel;
     if (externalValue) {
         if (adapter) {
-            const { from, to } = adapter.toDateRange(externalValue);
+            const { from, to, label } = adapter.toDateRange(externalValue);
             value = `${from || ''} to ${to || ''}`;
+            valueLabel = label;
         }
         else {
             value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
+            valueLabel = externalValue.label;
         }
     }
-    return React.createElement(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$2 });
+    return React.createElement(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$2, label: valueLabel });
 };
 
 const type$1 = {
@@ -13052,11 +13090,11 @@ const TimeRangePicker = styled(TimeRangePickerComponent) `
 `;
 
 const useQuickRanges = (ranges) => {
-    const ref = onekijsFramework.useLazyRef(() => {
+    const result = onekijsFramework.useLazyRef(() => {
         if (!Array.isArray(ranges)) {
             ranges = [ranges];
         }
-        return ranges.reduce((accumulator, range) => {
+        const quickRanges = ranges.reduce((accumulator, range) => {
             if (typeof (range) === 'string') {
                 if (range === 'all') {
                     accumulator = Object.assign(accumulator, defaultQuickRanges());
@@ -13069,15 +13107,36 @@ const useQuickRanges = (ranges) => {
                 }
             }
             else {
-                accumulator[range.label] = {
-                    from: dateToString(range.from),
-                    to: dateToString(range.to),
-                };
+                accumulator[range.label] = range;
             }
             return accumulator;
         }, {});
+        const target = Object.keys(quickRanges).reduce((accumulator, label) => {
+            accumulator[label] = {
+                from: null,
+                to: null,
+                label
+            };
+            return accumulator;
+        }, {});
+        const handler = {
+            get: function (_, prop) {
+                if (typeof prop === 'string') {
+                    const quickRange = quickRanges[prop];
+                    if (quickRange) {
+                        return {
+                            from: dateToString(quickRange.from),
+                            to: dateToString(quickRange.to),
+                            label: quickRange.label,
+                        };
+                    }
+                }
+                return undefined;
+            }
+        };
+        return new Proxy(target, handler);
     });
-    return ref.current;
+    return result.current;
 };
 
 const useDateRangeAdapter = () => {
@@ -13086,12 +13145,14 @@ const useDateRangeAdapter = () => {
             return {
                 from: range.from === null ? null : new Date(range.from),
                 to: range.to === null ? null : new Date(range.to),
+                label: range.label,
             };
         },
         toDateRange: (value) => {
             return {
                 from: !value.from ? null : dateToString(value.from),
                 to: !value.to ? null : dateToString(value.to),
+                label: value.label,
             };
         }
     });
@@ -13124,12 +13185,14 @@ const useTimestampRangeAdapter = (format = 'milliseconds') => {
             return {
                 from: toTimestamp(range.from),
                 to: toTimestamp(range.to),
+                label: range.label,
             };
         },
         toDateRange: (value) => {
             return {
                 from: fromTimestamp(value.from),
                 to: fromTimestamp(value.to),
+                label: value.label,
             };
         }
     });