@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,315 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useImperativeHandle, useRef, useState, useLayoutEffect } from 'react';
+import { MobilePopup } from '../../internal/MobilePopup/index.js';
+import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
+import { css, cx } from '../../lib/theming/Emotion.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { Calendar, CalendarDay } from '../Calendar/index.js';
+import { Popup } from '../../internal/Popup/index.js';
+import { DateInput } from '../DateInput/index.js';
+import { isBetween, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } from '../../lib/date/comparison.js';
+import { ZIndex } from '../../internal/ZIndex/index.js';
+import { getRootNode } from '../../lib/rootNode/index.js';
+import { getMenuPositions } from '../../lib/getMenuPositions.js';
+import { Button } from '../Button/index.js';
+import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { InternalDate } from '../../lib/date/InternalDate.js';
+import { InternalDateGetter } from '../../lib/date/InternalDateGetter.js';
+import { ArrowAUpIcon16Light } from '../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light.js';
+import { NativeDateInput } from '../../internal/NativeDateInput/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { LocaleContext } from '../../lib/locale/index.js';
+import { isIOS } from '../../lib/client.js';
+import { getFontSize, styles } from './DateRangePicker.styles.js';
+import { DateRangePickerSeparator } from './DateRangePickerSeparator.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+import { DateRangePickerEnd, DateRangePickerStart } from './DateRangePickerInput.js';
+import { getDateRangePickerTheme, getMobileDateRangePickerTheme } from './DateRangePickerTheme.js';
+import { DateRangePickerLocaleHelper } from './locale/index.js';
+import { validateDateRangePicker } from './helpers/validateDateRangePicker.js';
+import { getStateForValue } from './helpers/getStateForValue.js';
+export var DateRangePickerDataTids = {
+    root: 'DateRangePicker__root',
+    start: 'DateRangePicker__start',
+    end: 'DateRangePicker__end',
+    popup: 'DateRangePicker__popup',
+    calendar: 'DateRangePicker__calendar',
+    todayButton: 'DateRangePicker__todayButton',
+    startOptionalButton: 'DateRangePicker__startOptionalButton',
+    endOptionalButton: 'DateRangePicker__endOptionalButton',
+    mobileStart: 'DateRangePicker__mobileStart',
+    mobileEnd: 'DateRangePicker__mobileEnd',
+    rangeStart: 'DateRangePicker__rangeStart',
+    rangeEnd: 'DateRangePicker__rangeEnd',
+};
+var DayDateAttribute = 'data-date-range-picker-day';
+export var DateRangePicker = Object.assign({
+    Start: DateRangePickerStart,
+    End: DateRangePickerEnd,
+    Separator: DateRangePickerSeparator,
+    validate: validateDateRangePicker,
+}, forwardRefAndName('DateRangePicker', function (props, ref) {
+    var isMobile = useResponsiveLayout().isMobile;
+    var locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
+    var _a = useState(), startValue = _a[0], setStartValue = _a[1];
+    var _b = useState(false), startOptional = _b[0], setStartOptional = _b[1];
+    var _c = useState(false), startDisabled = _c[0], setStartDisabled = _c[1];
+    var _d = useState(), endValue = _d[0], setEndValue = _d[1];
+    var _e = useState(false), endOptional = _e[0], setEndOptional = _e[1];
+    var _f = useState(false), endDisabled = _f[0], setEndDisabled = _f[1];
+    var _g = useState(''), minDate = _g[0], setMinDate = _g[1];
+    var _h = useState(''), maxDate = _h[0], setMaxDate = _h[1];
+    var _j = useState(null), hoveredDay = _j[0], setHoveredDay = _j[1];
+    var _k = useState(false), showCalendar = _k[0], setShowCalendar = _k[1];
+    var _l = useState(null), focusInput = _l[0], setFocusInput = _l[1];
+    var dateRangePickerRef = useRef(null);
+    var calendarRef = useRef(null);
+    var startRef = useRef(null);
+    var endRef = useRef(null);
+    var mobileStartRef = useRef(null);
+    var mobileEndRef = useRef(null);
+    var mobileNativeStartRef = useRef(null);
+    var mobileNativeEndRef = useRef(null);
+    var isCalendarOpen = !startDisabled && !endDisabled && showCalendar;
+    var updateDateRangeValues = function (value) {
+        if (value === void 0) { value = ''; }
+        var currentValues = {
+            currentStart: startValue,
+            currentEnd: endValue,
+            minDate: minDate,
+            maxDate: maxDate,
+        };
+        var updatedState = getStateForValue(focusInput, value, currentValues);
+        setStartValue(updatedState.start);
+        setEndValue(updatedState.end);
+        if (updatedState.isOpen && updatedState.focus) {
+            focus(updatedState.focus);
+        }
+        if (!updatedState.isOpen) {
+            close();
+        }
+    };
+    var open = function (inputType) {
+        if (inputType === void 0) { inputType = 'start'; }
+        setFocusInput(inputType);
+        setShowCalendar(true);
+    };
+    var close = function () {
+        setShowCalendar(false);
+        setHoveredDay(null);
+    };
+    var focus = function (inputType) {
+        if (inputType === void 0) { inputType = 'start'; }
+        setFocusInput(inputType);
+    };
+    var setEmpty = function (type) {
+        switch (type) {
+            case 'start':
+                setStartValue('');
+                focus('end');
+                break;
+            case 'end':
+                setEndValue('');
+                close();
+                break;
+        }
+    };
+    useImperativeHandle(ref, function () {
+        var _a;
+        return ({
+            open: open,
+            close: close,
+            scrollToMonth: (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.scrollToMonth,
+            getRootNode: function () { return dateRangePickerRef.current; },
+        });
+    }, []);
+    useLayoutEffect(function () {
+        if (!focusInput) {
+            return;
+        }
+        // fix DateInput flushSync warning in React 18
+        setTimeout(function () {
+            var _a, _b, _c, _d;
+            var isStart = focusInput === 'start';
+            var currentFieldRef;
+            // Mobile Native Picker
+            if (isMobile && props.useMobileNativeDatePicker) {
+                currentFieldRef = isStart ? mobileNativeStartRef : mobileNativeEndRef;
+                if (isIOS) {
+                    (_a = currentFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                else {
+                    // Android open native datepicker only via click
+                    (_b = currentFieldRef.current) === null || _b === void 0 ? void 0 : _b.click();
+                }
+                return;
+            }
+            // Mobile
+            if (isMobile) {
+                currentFieldRef = isStart ? mobileStartRef : mobileEndRef;
+                (_c = currentFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                return;
+            }
+            // Desktop
+            currentFieldRef = isStart ? startRef : endRef;
+            (_d = currentFieldRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+        });
+    }, [focusInput]);
+    var dateRangePickerContextProps = {
+        startValue: startValue,
+        startOptional: startOptional,
+        startDisabled: startDisabled,
+        endValue: endValue,
+        endOptional: endOptional,
+        endDisabled: endDisabled,
+        minDate: minDate,
+        maxDate: maxDate,
+        size: props.size,
+        setStartValue: setStartValue,
+        setStartOptional: setStartOptional,
+        setStartDisabled: setStartDisabled,
+        setEndValue: setEndValue,
+        setEndOptional: setEndOptional,
+        setEndDisabled: setEndDisabled,
+        setMinDate: setMinDate,
+        setMaxDate: setMaxDate,
+        setFocusInput: setFocusInput,
+        open: open,
+        close: close,
+        dateRangePickerRef: dateRangePickerRef,
+        startRef: startRef,
+        endRef: endRef,
+    };
+    var renderCalendar = function (theme, widthAuto) {
+        var _a;
+        if (widthAuto === void 0) { widthAuto = false; }
+        return (React.createElement(LocaleContext.Provider, { value: {
+                locale: {
+                    Calendar: {
+                        months: locale.months,
+                        dayCellChooseDateAriaLabel: locale.dayCellChooseDateAriaLabel,
+                        selectMonthAriaLabel: locale.selectMonthAriaLabel,
+                        selectYearAriaLabel: locale.selectYearAriaLabel,
+                        selectChosenAriaLabel: locale.selectChosenAriaLabel,
+                    },
+                },
+            } },
+            React.createElement(Calendar, { value: focusInput === 'start' ? startValue : endValue, minDate: minDate, maxDate: maxDate, renderDay: function (dayProps) { return renderCalendarRange(dayProps, theme, props.renderDay); }, onValueChange: function (value) { return updateDateRangeValues(value); }, ref: calendarRef, onMonthChange: props.onMonthChange, className: cx((_a = {}, _a[styles.calendarWidthAuto()] = widthAuto, _a)) })));
+    };
+    var renderMobileCalendar = function (theme) {
+        var _a, _b;
+        return (React.createElement(MobilePopup, { opened: true, headerChildComponent: React.createElement("div", { className: cx(styles.root(theme), styles.inputWrapperWidthFull()) },
+                React.createElement(DateInput, { withIcon: true, value: startValue, width: "auto", size: "medium", className: cx((_a = {}, _a[styles.inputVisuallyFocus(theme)] = focusInput === 'start', _a)), disabled: startDisabled, onValueChange: setStartValue, onFocus: function () { return setFocusInput('start'); }, ref: mobileStartRef, "data-tid": DateRangePickerDataTids.mobileStart }),
+                React.createElement(DateRangePicker.Separator, null),
+                React.createElement(DateInput, { withIcon: true, value: endValue, width: "auto", size: "medium", className: cx((_b = {}, _b[styles.inputVisuallyFocus(theme)] = focusInput === 'end', _b)), disabled: endDisabled, onValueChange: setEndValue, onFocus: function () { return setFocusInput('end'); }, ref: mobileEndRef, "data-tid": DateRangePickerDataTids.mobileEnd })), onCloseRequest: function () { return close(); }, footerChildComponent: renderButtons() },
+            React.createElement(ThemeContext.Provider, { value: getMobileDateRangePickerTheme(theme) }, renderCalendar(theme, true))));
+    };
+    var renderDesktopCalendar = function (theme) { return (React.createElement(Popup, { opened: true, hasShadow: true, priority: ZIndex.priorities.PopupMenu, positions: getMenuPositions(props.menuPos, props.menuAlign), "data-tid": DateRangePickerDataTids.root, anchorElement: getRootNode(dateRangePickerRef.current), margin: parseInt(theme.datePickerMenuOffsetY) },
+        React.createElement("div", { className: styles.calendarWrapper(theme), onMouseDown: function (e) { return e.preventDefault(); }, onMouseMove: handleCalendarRangeMouseMove },
+            renderCalendar(theme),
+            renderButtons()))); };
+    var renderButtons = function () {
+        var today = new InternalDate(locale)
+            .setComponents(InternalDateGetter.getTodayComponents())
+            .toString({ withPad: true, withSeparator: true });
+        var hasOptionalButtons = startOptional || endOptional;
+        return (React.createElement("div", { className: cx(styles.buttonWrap()) },
+            hasOptionalButtons && (React.createElement(React.Fragment, null,
+                focusInput === 'start' && startOptional && (React.createElement(Button, { width: "100%", "data-tid": DateRangePickerDataTids.startOptionalButton, onClick: function () { return setEmpty('start'); } }, locale.startDateEmpty)),
+                focusInput === 'end' && endOptional && (React.createElement(Button, { width: "100%", "data-tid": DateRangePickerDataTids.endOptionalButton, onClick: function () { return setEmpty('end'); } }, locale.endDateEmpty)))),
+            props.enableTodayLink && (React.createElement(Button, { icon: React.createElement(ArrowAUpIcon16Light, null), "aria-label": locale.todayAriaLabel, "data-tid": DateRangePickerDataTids.todayButton, onClick: function () { return updateDateRangeValues(today); } }, !hasOptionalButtons && locale.today))));
+    };
+    var renderMobileNativeDateInput = function () { return (React.createElement(React.Fragment, null,
+        React.createElement(NativeDateInput, { value: startValue, minDate: minDate, maxDate: maxDate, onValueChange: setStartValue, disabled: startDisabled, ref: mobileNativeStartRef }),
+        React.createElement(NativeDateInput, { value: endValue, minDate: minDate, maxDate: maxDate, onValueChange: setEndValue, disabled: endDisabled, ref: mobileNativeEndRef }))); };
+    return (React.createElement(ThemeContext.Consumer, null, function (theme) { return (React.createElement(ThemeContext.Provider, { value: getDateRangePickerTheme(theme) },
+        React.createElement(DateRangePickerContext.Provider, { value: dateRangePickerContextProps },
+            React.createElement(CommonWrapper, __assign({}, props),
+                React.createElement("div", { className: cx(styles.root(theme), styles.inputWrapperWidth(theme), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                      font-size: ", ";\n                    "], ["\n                      font-size: ", ";\n                    "])), getFontSize(theme, props.size))), role: "group", "aria-describedby": props['aria-describedby'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "data-tid": DateRangePickerDataTids.root, ref: dateRangePickerRef, style: { width: props.width } },
+                    props.children,
+                    props.useMobileNativeDatePicker && isMobile
+                        ? renderMobileNativeDateInput()
+                        : isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))))))); }));
+    // Use parent mousemove event instead each CalendarDay's mouseenter / mouseover
+    function handleCalendarRangeMouseMove(e) {
+        if (!startValue && !endValue) {
+            return;
+        }
+        var hoveredElement = e.target;
+        if (!hoveredElement.hasAttribute(DayDateAttribute) && hoveredDay === null) {
+            return;
+        }
+        var date = String(hoveredElement === null || hoveredElement === void 0 ? void 0 : hoveredElement.getAttribute(DayDateAttribute)) || null;
+        setHoveredDay(date);
+    }
+    function renderCalendarRange(props, t, renderDayFn) {
+        var _a, _b;
+        var day = props.date;
+        var isDayFirst = startValue === day;
+        var isDayLast = endValue === day;
+        var isDayInPeriod = Boolean(startValue && endValue && isBetween(day, startValue, endValue));
+        var hasHoveredDay = hoveredDay !== null;
+        var isDayInHoveredPeriod = hasHoveredDay &&
+            Boolean((focusInput === 'start' && endValue && isBetween(day, hoveredDay, endValue)) ||
+                (focusInput === 'end' && startValue && isBetween(day, startValue, hoveredDay)));
+        var hasLeftRoundings;
+        var hasRightRoundings;
+        if (hasHoveredDay) {
+            var isDayBeforeFirstInPeriod = startValue ? isLess(hoveredDay, startValue) : endValue;
+            var isDayAfterLastInPeriod = endValue ? isGreater(hoveredDay, endValue) : startValue;
+            if (isDayFirst && (isGreaterOrEqual(hoveredDay, startValue) || focusInput === 'end')) {
+                hasLeftRoundings = true;
+            }
+            if (isDayLast && (isLessOrEqual(hoveredDay, endValue) || focusInput === 'start')) {
+                hasRightRoundings = true;
+            }
+            var isDayHovered = hoveredDay === day;
+            if (isDayHovered) {
+                if (isDayBeforeFirstInPeriod) {
+                    hasLeftRoundings = true;
+                }
+                if (isDayAfterLastInPeriod) {
+                    hasRightRoundings = true;
+                }
+            }
+        }
+        else {
+            if (isDayFirst) {
+                hasLeftRoundings = true;
+            }
+            if (isDayLast) {
+                hasRightRoundings = true;
+            }
+        }
+        var renderDayProps = __assign(__assign({}, props), (_a = {}, _a[DayDateAttribute] = props.date, _a));
+        var dataTid = null;
+        if (isDayFirst) {
+            dataTid = DateRangePickerDataTids.rangeStart;
+        }
+        else if (isDayLast) {
+            dataTid = DateRangePickerDataTids.rangeEnd;
+        }
+        return (React.createElement("div", { className: cx(styles.rangeCalendarDay(), css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              background: ", ";\n              border-top-left-radius: ", ";\n              border-bottom-left-radius: ", ";\n              border-top-right-radius: ", ";\n              border-bottom-right-radius: ", ";\n            "], ["\n              background: ", ";\n              border-top-left-radius: ", ";\n              border-bottom-left-radius: ", ";\n              border-top-right-radius: ", ";\n              border-bottom-right-radius: ", ";\n            "])), isDayInPeriod && t.rangeCalendarCellBg, hasLeftRoundings && t.calendarCellBorderRadius, hasLeftRoundings && t.calendarCellBorderRadius, hasRightRoundings && t.calendarCellBorderRadius, hasRightRoundings && t.calendarCellBorderRadius), (_b = {},
+                _b[styles.rangeCalendarDayEnd(t)] = isDayFirst || isDayLast,
+                _b[styles.rangeCalendarDayHoverInPeriod(t)] = isDayInPeriod,
+                _b[styles.rangeCalendarDayInHoveredPeriod(t)] = isDayInHoveredPeriod,
+                _b)), "data-tid": dataTid }, renderDayFn ? renderDayFn(renderDayProps) : React.createElement(CalendarDay, __assign({}, renderDayProps))));
+    }
+}));
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=DateRangePicker.js.map

package/components/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useImperativeHandle, useRef, useState, useLayoutEffect, type AriaAttributes } from 'react';\n\nimport { MobilePopup } from '../../internal/MobilePopup/index.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { css, cx } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CalendarDayProps } from '../Calendar/index.js';\nimport { Calendar, CalendarDay } from '../Calendar/index.js';\nimport { Popup } from '../../internal/Popup/index.js';\nimport { DateInput } from '../DateInput/index.js';\nimport { isBetween, isGreater, isGreaterOrEqual, isLess, isLessOrEqual } from '../../lib/date/comparison.js';\nimport type { DatePickerProps } from '../DatePicker/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { getRootNode } from '../../lib/rootNode/index.js';\nimport { getMenuPositions } from '../../lib/getMenuPositions.js';\nimport { Button } from '../Button/index.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { InternalDate } from '../../lib/date/InternalDate.js';\nimport { InternalDateGetter } from '../../lib/date/InternalDateGetter.js';\nimport { ArrowAUpIcon16Light } from '../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light.js';\nimport { NativeDateInput } from '../../internal/NativeDateInput/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { LocaleContext } from '../../lib/locale/index.js';\nimport { isIOS } from '../../lib/client.js';\n\nimport { getFontSize, styles } from './DateRangePicker.styles.js';\nimport { DateRangePickerSeparator } from './DateRangePickerSeparator.js';\nimport type { DateRangePickerContextProps } from './DateRangePickerContext.js';\nimport { DateRangePickerContext } from './DateRangePickerContext.js';\nimport type { DateRangePickerInputType } from './DateRangePickerInput.js';\nimport { DateRangePickerEnd, DateRangePickerStart } from './DateRangePickerInput.js';\nimport { getDateRangePickerTheme, getMobileDateRangePickerTheme } from './DateRangePickerTheme.js';\nimport { DateRangePickerLocaleHelper } from './locale/index.js';\nimport { validateDateRangePicker } from './helpers/validateDateRangePicker.js';\nimport { getStateForValue } from './helpers/getStateForValue.js';\n\nexport const DateRangePickerDataTids = {\n  root: 'DateRangePicker__root',\n  start: 'DateRangePicker__start',\n  end: 'DateRangePicker__end',\n  popup: 'DateRangePicker__popup',\n  calendar: 'DateRangePicker__calendar',\n  todayButton: 'DateRangePicker__todayButton',\n  startOptionalButton: 'DateRangePicker__startOptionalButton',\n  endOptionalButton: 'DateRangePicker__endOptionalButton',\n  mobileStart: 'DateRangePicker__mobileStart',\n  mobileEnd: 'DateRangePicker__mobileEnd',\n  rangeStart: 'DateRangePicker__rangeStart',\n  rangeEnd: 'DateRangePicker__rangeEnd',\n} as const;\n\nconst DayDateAttribute = 'data-date-range-picker-day';\n\nexport interface DateRangePickerProps\n  extends CommonProps,\n    Pick<AriaAttributes, 'aria-describedby' | 'aria-label' | 'aria-labelledby'>,\n    Pick<\n      DatePickerProps,\n      | 'size'\n      | 'width'\n      | 'renderDay'\n      | 'menuPos'\n      | 'menuAlign'\n      | 'useMobileNativeDatePicker'\n      | 'enableTodayLink'\n      | 'onMonthChange'\n    > {\n  /**\n   * Элементы DateRangePicker:\n   * `<DateRangePicker.Start />`\n   * `<DateRangePicker.Separator />`\n   * `<DateRangePicker.End />`\n   */\n  children: React.ReactNode;\n}\n\nexport const DateRangePicker = Object.assign(\n  {\n    Start: DateRangePickerStart,\n    End: DateRangePickerEnd,\n    Separator: DateRangePickerSeparator,\n    validate: validateDateRangePicker,\n  },\n  forwardRefAndName('DateRangePicker', (props: DateRangePickerProps, ref) => {\n    const { isMobile } = useResponsiveLayout();\n    const locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);\n\n    const [startValue, setStartValue] = useState<string>();\n    const [startOptional, setStartOptional] = useState(false);\n    const [startDisabled, setStartDisabled] = useState(false);\n\n    const [endValue, setEndValue] = useState<string>();\n    const [endOptional, setEndOptional] = useState(false);\n    const [endDisabled, setEndDisabled] = useState(false);\n\n    const [minDate, setMinDate] = useState('');\n    const [maxDate, setMaxDate] = useState('');\n\n    const [hoveredDay, setHoveredDay] = useState<string | null>(null);\n    const [showCalendar, setShowCalendar] = useState<boolean>(false);\n    const [focusInput, setFocusInput] = useState<DateRangePickerInputType | null>(null);\n\n    const dateRangePickerRef = useRef<HTMLDivElement>(null);\n    const calendarRef = useRef<Calendar>(null);\n    const startRef = useRef<DateInput>(null);\n    const endRef = useRef<DateInput>(null);\n    const mobileStartRef = useRef<DateInput>(null);\n    const mobileEndRef = useRef<DateInput>(null);\n    const mobileNativeStartRef = useRef<NativeDateInput>(null);\n    const mobileNativeEndRef = useRef<NativeDateInput>(null);\n    const isCalendarOpen = !startDisabled && !endDisabled && showCalendar;\n\n    const updateDateRangeValues = (value = '') => {\n      const currentValues = {\n        currentStart: startValue,\n        currentEnd: endValue,\n        minDate,\n        maxDate,\n      };\n      const updatedState = getStateForValue(focusInput, value, currentValues);\n\n      setStartValue(updatedState.start);\n      setEndValue(updatedState.end);\n\n      if (updatedState.isOpen && updatedState.focus) {\n        focus(updatedState.focus);\n      }\n\n      if (!updatedState.isOpen) {\n        close();\n      }\n    };\n\n    const open = (inputType: DateRangePickerInputType = 'start') => {\n      setFocusInput(inputType);\n      setShowCalendar(true);\n    };\n\n    const close = () => {\n      setShowCalendar(false);\n      setHoveredDay(null);\n    };\n\n    const focus = (inputType: DateRangePickerInputType = 'start') => {\n      setFocusInput(inputType);\n    };\n\n    const setEmpty = (type: DateRangePickerInputType) => {\n      switch (type) {\n        case 'start':\n          setStartValue('');\n          focus('end');\n          break;\n\n        case 'end':\n          setEndValue('');\n          close();\n          break;\n      }\n    };\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        open,\n        close,\n        scrollToMonth: calendarRef.current?.scrollToMonth,\n        getRootNode: () => dateRangePickerRef.current,\n      }),\n      [],\n    );\n\n    useLayoutEffect(() => {\n      if (!focusInput) {\n        return;\n      }\n\n      // fix DateInput flushSync warning in React 18\n      setTimeout(() => {\n        const isStart = focusInput === 'start';\n        let currentFieldRef;\n\n        // Mobile Native Picker\n        if (isMobile && props.useMobileNativeDatePicker) {\n          currentFieldRef = isStart ? mobileNativeStartRef : mobileNativeEndRef;\n          if (isIOS) {\n            currentFieldRef.current?.focus();\n          } else {\n            // Android open native datepicker only via click\n            currentFieldRef.current?.click();\n          }\n          return;\n        }\n\n        // Mobile\n        if (isMobile) {\n          currentFieldRef = isStart ? mobileStartRef : mobileEndRef;\n          currentFieldRef.current?.focus();\n          return;\n        }\n\n        // Desktop\n        currentFieldRef = isStart ? startRef : endRef;\n        currentFieldRef.current?.focus();\n      });\n    }, [focusInput]);\n\n    const dateRangePickerContextProps: DateRangePickerContextProps = {\n      startValue,\n      startOptional,\n      startDisabled,\n      endValue,\n      endOptional,\n      endDisabled,\n      minDate,\n      maxDate,\n      size: props.size,\n      setStartValue,\n      setStartOptional,\n      setStartDisabled,\n      setEndValue,\n      setEndOptional,\n      setEndDisabled,\n      setMinDate,\n      setMaxDate,\n      setFocusInput,\n      open,\n      close,\n      dateRangePickerRef,\n      startRef,\n      endRef,\n    };\n\n    const renderCalendar = (theme: Theme, widthAuto = false) => (\n      <LocaleContext.Provider\n        value={{\n          locale: {\n            Calendar: {\n              months: locale.months,\n              dayCellChooseDateAriaLabel: locale.dayCellChooseDateAriaLabel,\n              selectMonthAriaLabel: locale.selectMonthAriaLabel,\n              selectYearAriaLabel: locale.selectYearAriaLabel,\n              selectChosenAriaLabel: locale.selectChosenAriaLabel,\n            },\n          },\n        }}\n      >\n        <Calendar\n          value={focusInput === 'start' ? startValue : endValue}\n          minDate={minDate}\n          maxDate={maxDate}\n          renderDay={(dayProps) => renderCalendarRange(dayProps, theme, props.renderDay)}\n          onValueChange={(value) => updateDateRangeValues(value)}\n          ref={calendarRef}\n          onMonthChange={props.onMonthChange}\n          className={cx({ [styles.calendarWidthAuto()]: widthAuto })}\n        />\n      </LocaleContext.Provider>\n    );\n\n    const renderMobileCalendar = (theme: Theme) => (\n      <MobilePopup\n        opened\n        headerChildComponent={\n          <div className={cx(styles.root(theme), styles.inputWrapperWidthFull())}>\n            <DateInput\n              withIcon\n              value={startValue}\n              width=\"auto\"\n              size=\"medium\"\n              className={cx({ [styles.inputVisuallyFocus(theme)]: focusInput === 'start' })}\n              disabled={startDisabled}\n              onValueChange={setStartValue}\n              onFocus={() => setFocusInput('start')}\n              ref={mobileStartRef}\n              data-tid={DateRangePickerDataTids.mobileStart}\n            />\n            <DateRangePicker.Separator />\n            <DateInput\n              withIcon\n              value={endValue}\n              width=\"auto\"\n              size=\"medium\"\n              className={cx({ [styles.inputVisuallyFocus(theme)]: focusInput === 'end' })}\n              disabled={endDisabled}\n              onValueChange={setEndValue}\n              onFocus={() => setFocusInput('end')}\n              ref={mobileEndRef}\n              data-tid={DateRangePickerDataTids.mobileEnd}\n            />\n          </div>\n        }\n        onCloseRequest={() => close()}\n        footerChildComponent={renderButtons()}\n      >\n        <ThemeContext.Provider value={getMobileDateRangePickerTheme(theme)}>\n          {renderCalendar(theme, true)}\n        </ThemeContext.Provider>\n      </MobilePopup>\n    );\n\n    const renderDesktopCalendar = (theme: Theme) => (\n      <Popup\n        opened\n        hasShadow\n        priority={ZIndex.priorities.PopupMenu}\n        positions={getMenuPositions(props.menuPos, props.menuAlign)}\n        data-tid={DateRangePickerDataTids.root}\n        anchorElement={getRootNode(dateRangePickerRef.current)}\n        margin={parseInt(theme.datePickerMenuOffsetY)}\n      >\n        <div\n          className={styles.calendarWrapper(theme)}\n          onMouseDown={(e) => e.preventDefault()}\n          onMouseMove={handleCalendarRangeMouseMove}\n        >\n          {renderCalendar(theme)}\n          {renderButtons()}\n        </div>\n      </Popup>\n    );\n\n    const renderButtons = () => {\n      const today = new InternalDate(locale)\n        .setComponents(InternalDateGetter.getTodayComponents())\n        .toString({ withPad: true, withSeparator: true });\n\n      const hasOptionalButtons = startOptional || endOptional;\n      return (\n        <div className={cx(styles.buttonWrap())}>\n          {hasOptionalButtons && (\n            <>\n              {focusInput === 'start' && startOptional && (\n                <Button\n                  width=\"100%\"\n                  data-tid={DateRangePickerDataTids.startOptionalButton}\n                  onClick={() => setEmpty('start')}\n                >\n                  {locale.startDateEmpty}\n                </Button>\n              )}\n              {focusInput === 'end' && endOptional && (\n                <Button\n                  width=\"100%\"\n                  data-tid={DateRangePickerDataTids.endOptionalButton}\n                  onClick={() => setEmpty('end')}\n                >\n                  {locale.endDateEmpty}\n                </Button>\n              )}\n            </>\n          )}\n\n          {props.enableTodayLink && (\n            <Button\n              icon={<ArrowAUpIcon16Light />}\n              aria-label={locale.todayAriaLabel}\n              data-tid={DateRangePickerDataTids.todayButton}\n              onClick={() => updateDateRangeValues(today)}\n            >\n              {!hasOptionalButtons && locale.today}\n            </Button>\n          )}\n        </div>\n      );\n    };\n\n    const renderMobileNativeDateInput = () => (\n      <>\n        <NativeDateInput\n          value={startValue}\n          minDate={minDate}\n          maxDate={maxDate}\n          onValueChange={setStartValue}\n          disabled={startDisabled}\n          ref={mobileNativeStartRef}\n        />\n        <NativeDateInput\n          value={endValue}\n          minDate={minDate}\n          maxDate={maxDate}\n          onValueChange={setEndValue}\n          disabled={endDisabled}\n          ref={mobileNativeEndRef}\n        />\n      </>\n    );\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => (\n          <ThemeContext.Provider value={getDateRangePickerTheme(theme)}>\n            <DateRangePickerContext.Provider value={dateRangePickerContextProps}>\n              <CommonWrapper {...props}>\n                <div\n                  className={cx(\n                    styles.root(theme),\n                    styles.inputWrapperWidth(theme),\n                    css`\n                      font-size: ${getFontSize(theme, props.size)};\n                    `,\n                  )}\n                  role=\"group\"\n                  aria-describedby={props['aria-describedby']}\n                  aria-label={props['aria-label']}\n                  aria-labelledby={props['aria-labelledby']}\n                  data-tid={DateRangePickerDataTids.root}\n                  ref={dateRangePickerRef}\n                  style={{ width: props.width }}\n                >\n                  {props.children}\n\n                  {props.useMobileNativeDatePicker && isMobile\n                    ? renderMobileNativeDateInput()\n                    : isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))}\n                </div>\n              </CommonWrapper>\n            </DateRangePickerContext.Provider>\n          </ThemeContext.Provider>\n        )}\n      </ThemeContext.Consumer>\n    );\n\n    // Use parent mousemove event instead each CalendarDay's mouseenter / mouseover\n    function handleCalendarRangeMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {\n      if (!startValue && !endValue) {\n        return;\n      }\n\n      const hoveredElement = e.target as HTMLElement;\n      if (!hoveredElement.hasAttribute(DayDateAttribute) && hoveredDay === null) {\n        return;\n      }\n\n      const date = String(hoveredElement?.getAttribute(DayDateAttribute)) || null;\n      setHoveredDay(date);\n    }\n\n    function renderCalendarRange(\n      props: CalendarDayProps,\n      t: Theme,\n      renderDayFn: ((props: CalendarDayProps) => React.ReactElement) | undefined,\n    ) {\n      const day = props.date;\n\n      const isDayFirst = startValue === day;\n      const isDayLast = endValue === day;\n      const isDayInPeriod = Boolean(startValue && endValue && isBetween(day, startValue, endValue));\n\n      const hasHoveredDay = hoveredDay !== null;\n      const isDayInHoveredPeriod =\n        hasHoveredDay &&\n        Boolean(\n          (focusInput === 'start' && endValue && isBetween(day, hoveredDay, endValue)) ||\n            (focusInput === 'end' && startValue && isBetween(day, startValue, hoveredDay)),\n        );\n\n      let hasLeftRoundings;\n      let hasRightRoundings;\n\n      if (hasHoveredDay) {\n        const isDayBeforeFirstInPeriod = startValue ? isLess(hoveredDay, startValue) : endValue;\n        const isDayAfterLastInPeriod = endValue ? isGreater(hoveredDay, endValue) : startValue;\n\n        if (isDayFirst && (isGreaterOrEqual(hoveredDay, startValue) || focusInput === 'end')) {\n          hasLeftRoundings = true;\n        }\n\n        if (isDayLast && (isLessOrEqual(hoveredDay, endValue) || focusInput === 'start')) {\n          hasRightRoundings = true;\n        }\n\n        const isDayHovered = hoveredDay === day;\n        if (isDayHovered) {\n          if (isDayBeforeFirstInPeriod) {\n            hasLeftRoundings = true;\n          }\n\n          if (isDayAfterLastInPeriod) {\n            hasRightRoundings = true;\n          }\n        }\n      } else {\n        if (isDayFirst) {\n          hasLeftRoundings = true;\n        }\n\n        if (isDayLast) {\n          hasRightRoundings = true;\n        }\n      }\n\n      const renderDayProps = {\n        ...props,\n        [DayDateAttribute]: props.date,\n      };\n\n      let dataTid = null;\n      if (isDayFirst) {\n        dataTid = DateRangePickerDataTids.rangeStart;\n      } else if (isDayLast) {\n        dataTid = DateRangePickerDataTids.rangeEnd;\n      }\n\n      return (\n        <div\n          className={cx(\n            styles.rangeCalendarDay(),\n            css`\n              background: ${isDayInPeriod && t.rangeCalendarCellBg};\n              border-top-left-radius: ${hasLeftRoundings && t.calendarCellBorderRadius};\n              border-bottom-left-radius: ${hasLeftRoundings && t.calendarCellBorderRadius};\n              border-top-right-radius: ${hasRightRoundings && t.calendarCellBorderRadius};\n              border-bottom-right-radius: ${hasRightRoundings && t.calendarCellBorderRadius};\n            `,\n            {\n              [styles.rangeCalendarDayEnd(t)]: isDayFirst || isDayLast,\n              [styles.rangeCalendarDayHoverInPeriod(t)]: isDayInPeriod,\n              [styles.rangeCalendarDayInHoveredPeriod(t)]: isDayInHoveredPeriod,\n            },\n          )}\n          data-tid={dataTid}\n        >\n          {renderDayFn ? renderDayFn(renderDayProps) : <CalendarDay {...renderDayProps} />}\n        </div>\n      );\n    }\n  }),\n);\n"]}

package/components/DateRangePicker/DateRangePicker.styles.d.ts

@@ -0,0 +1,16 @@
+import type { SizeProp } from '../../lib/types/props.js';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const styles: {
+    root(t: Theme): string;
+    inputWrapperWidth(t: Theme): string;
+    inputWrapperWidthFull(): string;
+    inputVisuallyFocus(t: Theme): string;
+    calendarWrapper(t: Theme): string;
+    calendarWidthAuto(): string;
+    rangeCalendarDay(): string;
+    rangeCalendarDayEnd(t: Theme): string;
+    rangeCalendarDayInHoveredPeriod(t: Theme): string;
+    rangeCalendarDayHoverInPeriod(t: Theme): string;
+    buttonWrap(): string;
+};
+export declare function getFontSize(t: Theme, size?: SizeProp): string;

package/components/DateRangePicker/DateRangePicker.styles.js

@@ -0,0 +1,54 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+import { CalendarDataTids } from '../Calendar/index.js';
+export var styles = memoizeStyle({
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      color: ", ";\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      color: ", ";\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    "])), t.textColorDefault);
+    },
+    inputWrapperWidth: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: ", "px;\n    "], ["\n      min-width: ", "px;\n    "])), parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2);
+    },
+    inputWrapperWidthFull: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+    },
+    inputVisuallyFocus: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.inputFocusShadow);
+    },
+    calendarWrapper: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: ", ";\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    "], ["\n      box-shadow: ", ";\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    "])), t.pickerShadow);
+    },
+    calendarWidthAuto: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: auto;\n    "], ["\n      width: auto;\n    "])));
+    },
+    rangeCalendarDay: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: 100%;\n      height: 100%;\n    "], ["\n      width: 100%;\n      height: 100%;\n    "])));
+    },
+    rangeCalendarDayEnd: function (t) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ", ";\n        border-radius: ", ";\n      }\n\n      [data-tid=", "] {\n        color: ", ";\n\n        @media (hover: hover) {\n          &:hover {\n            color: ", ";\n            background: none;\n          }\n        }\n      }\n    "], ["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ", ";\n        border-radius: ", ";\n      }\n\n      [data-tid=", "] {\n        color: ", ";\n\n        @media (hover: hover) {\n          &:hover {\n            color: ", ";\n            background: none;\n          }\n        }\n      }\n    "])), t.rangeCalendarCellEndBg, t.calendarCellBorderRadius, CalendarDataTids.dayCell, t.rangeCalendarCellEndColor, t.rangeCalendarCellEndColor);
+    },
+    rangeCalendarDayInHoveredPeriod: function (t) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.rangeCalendarCellBg);
+    },
+    rangeCalendarDayHoverInPeriod: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      @media (hover: hover) {\n        &:hover [data-tid=", "] {\n          background: ", ";\n        }\n      }\n    "], ["\n      @media (hover: hover) {\n        &:hover [data-tid=", "] {\n          background: ", ";\n        }\n      }\n    "])), CalendarDataTids.dayCell, t.rangeCalendarCellHoverBg);
+    },
+    buttonWrap: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    "], ["\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    "])));
+    },
+});
+export function getFontSize(t, size) {
+    switch (size) {
+        case 'large':
+            return t.fontSizeLarge;
+        case 'medium':
+            return t.fontSizeMedium;
+        case 'small':
+        default:
+            return t.fontSizeSmall;
+    }
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+//# sourceMappingURL=DateRangePicker.styles.js.map

package/components/DateRangePicker/DateRangePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.styles.js","sourceRoot":"","sources":["../../../components/DateRangePicker/DateRangePicker.styles.ts"],"names":[],"mappings":";;;;AACA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,CAAC,IAAM,MAAM,GAAG,YAAY,CAAC;IACjC,IAAI,YAAC,CAAQ;QACX,OAAO,GAAG,0MAAA,0EAGC,EAAkB,2DAK5B,KALU,CAAC,CAAC,gBAAgB,EAK3B;IACJ,CAAC;IACD,iBAAiB,YAAC,CAAQ;QACxB,OAAO,GAAG,qGAAA,qBACK,EAAoE,WAClF,KADc,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,EACjF;IACJ,CAAC;IACD,qBAAqB;QACnB,OAAO,GAAG,+FAAA,4BAET,KAAC;IACJ,CAAC;IACD,kBAAkB,YAAC,CAAQ;QACzB,OAAO,GAAG,oGAAA,sBACM,EAAkB,SACjC,KADe,CAAC,CAAC,gBAAgB,EAChC;IACJ,CAAC;IACD,eAAe,YAAC,CAAQ;QACtB,OAAO,GAAG,wMAAA,sBACM,EAAc,6GAK7B,KALe,CAAC,CAAC,YAAY,EAK5B;IACJ,CAAC;IACD,iBAAiB;QACf,OAAO,GAAG,+FAAA,4BAET,KAAC;IACJ,CAAC;IACD,gBAAgB;QACd,OAAO,GAAG,oHAAA,iDAGT,KAAC;IACJ,CAAC;IACD,mBAAmB,YAAC,CAAQ;QAC1B,OAAO,GAAG,kgBAAA,0MAUQ,EAAwB,4BACrB,EAA0B,gCAGjC,EAAwB,sBACzB,EAA2B,gFAIvB,EAA2B,yEAK3C,KAdiB,CAAC,CAAC,sBAAsB,EACrB,CAAC,CAAC,wBAAwB,EAGjC,gBAAgB,CAAC,OAAO,EACzB,CAAC,CAAC,yBAAyB,EAIvB,CAAC,CAAC,yBAAyB,EAK1C;IACJ,CAAC;IACD,+BAA+B,YAAC,CAAQ;QACtC,OAAO,GAAG,oGAAA,sBACM,EAAqB,SACpC,KADe,CAAC,CAAC,mBAAmB,EACnC;IACJ,CAAC;IACD,6BAA6B,YAAC,CAAQ;QACpC,OAAO,GAAG,gMAAA,6DAEc,EAAwB,6BAC5B,EAA0B,6BAG7C,KAJuB,gBAAgB,CAAC,OAAO,EAC5B,CAAC,CAAC,wBAAwB,EAG5C;IACJ,CAAC;IACD,UAAU;QACR,OAAO,GAAG,2OAAA,sKAWT,KAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,WAAW,CAAC,CAAQ,EAAE,IAAe;IACnD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,CAAC,CAAC,aAAa,CAAC;QACzB,KAAK,QAAQ;YACX,OAAO,CAAC,CAAC,cAAc,CAAC;QAC1B,KAAK,OAAO,CAAC;QACb;YACE,OAAO,CAAC,CAAC,aAAa,CAAC;IAC3B,CAAC;AACH,CAAC","sourcesContent":["import type { SizeProp } from '../../lib/types/props.js';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { CalendarDataTids } from '../Calendar/index.js';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      color: ${t.textColorDefault};\n\n      & > * {\n        flex: 1 1 50%;\n      }\n    `;\n  },\n  inputWrapperWidth(t: Theme) {\n    return css`\n      min-width: ${parseInt(t.calendarCellWidth) * 7 + parseInt(t.calendarPaddingX) * 2}px;\n    `;\n  },\n  inputWrapperWidthFull() {\n    return css`\n      width: 100%;\n    `;\n  },\n  inputVisuallyFocus(t: Theme) {\n    return css`\n      box-shadow: ${t.inputFocusShadow};\n    `;\n  },\n  calendarWrapper(t: Theme) {\n    return css`\n      box-shadow: ${t.pickerShadow};\n      display: inline-block;\n      font-size: 0;\n      z-index: 1000;\n      touch-action: none;\n    `;\n  },\n  calendarWidthAuto() {\n    return css`\n      width: auto;\n    `;\n  },\n  rangeCalendarDay() {\n    return css`\n      width: 100%;\n      height: 100%;\n    `;\n  },\n  rangeCalendarDayEnd(t: Theme) {\n    return css`\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: ${t.rangeCalendarCellEndBg};\n        border-radius: ${t.calendarCellBorderRadius};\n      }\n\n      [data-tid=${CalendarDataTids.dayCell}] {\n        color: ${t.rangeCalendarCellEndColor};\n\n        @media (hover: hover) {\n          &:hover {\n            color: ${t.rangeCalendarCellEndColor};\n            background: none;\n          }\n        }\n      }\n    `;\n  },\n  rangeCalendarDayInHoveredPeriod(t: Theme) {\n    return css`\n      background: ${t.rangeCalendarCellBg};\n    `;\n  },\n  rangeCalendarDayHoverInPeriod(t: Theme) {\n    return css`\n      @media (hover: hover) {\n        &:hover [data-tid=${CalendarDataTids.dayCell}] {\n          background: ${t.rangeCalendarCellHoverBg};\n        }\n      }\n    `;\n  },\n  buttonWrap() {\n    return css`\n      display: flex;\n      margin: 8px;\n\n      > * {\n        flex-grow: 1;\n      }\n\n      > *:not(:first-child) {\n        margin-left: 8px;\n      }\n    `;\n  },\n});\n\nexport function getFontSize(t: Theme, size?: SizeProp) {\n  switch (size) {\n    case 'large':\n      return t.fontSizeLarge;\n    case 'medium':\n      return t.fontSizeMedium;\n    case 'small':\n    default:\n      return t.fontSizeSmall;\n  }\n}\n"]}

package/components/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { RefObject } from 'react';
+import type { DateInput } from '../DateInput/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { DateRangePickerInputType } from './DateRangePickerInput.js';
+export interface DateRangePickerContextProps {
+    startValue?: string;
+    startOptional?: boolean;
+    startDisabled?: boolean;
+    endValue?: string;
+    endOptional?: boolean;
+    endDisabled?: boolean;
+    minDate?: string;
+    maxDate?: string;
+    size?: SizeProp;
+    setStartValue: (value: string) => void;
+    setStartOptional: (value: boolean) => void;
+    setStartDisabled: (value: boolean) => void;
+    setEndValue: (value: string) => void;
+    setEndOptional: (value: boolean) => void;
+    setEndDisabled: (value: boolean) => void;
+    setMinDate: (value: string) => void;
+    setMaxDate: (value: string) => void;
+    setFocusInput: (value: DateRangePickerInputType | null) => void;
+    open: (type: DateRangePickerInputType) => void;
+    close: () => void;
+    dateRangePickerRef: RefObject<HTMLDivElement>;
+    startRef: RefObject<DateInput>;
+    endRef: RefObject<DateInput>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextProps>;

package/components/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export var DateRangePickerContext = React.createContext({});
+DateRangePickerContext.displayName = 'DateRangePickerContext';
+//# sourceMappingURL=DateRangePickerContext.js.map

package/components/DateRangePicker/DateRangePickerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePickerContext.js","sourceRoot":"","sources":["../../../components/DateRangePicker/DateRangePickerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,MAAM,CAAC,IAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAAC,EAAiC,CAAC,CAAC;AAE7F,sBAAsB,CAAC,WAAW,GAAG,wBAAwB,CAAC","sourcesContent":["import React from 'react';\nimport type { RefObject } from 'react';\n\nimport type { DateInput } from '../DateInput/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\n\nimport type { DateRangePickerInputType } from './DateRangePickerInput.js';\n\nexport interface DateRangePickerContextProps {\n  startValue?: string;\n  startOptional?: boolean;\n  startDisabled?: boolean;\n  endValue?: string;\n  endOptional?: boolean;\n  endDisabled?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  size?: SizeProp;\n  setStartValue: (value: string) => void;\n  setStartOptional: (value: boolean) => void;\n  setStartDisabled: (value: boolean) => void;\n  setEndValue: (value: string) => void;\n  setEndOptional: (value: boolean) => void;\n  setEndDisabled: (value: boolean) => void;\n  setMinDate: (value: string) => void;\n  setMaxDate: (value: string) => void;\n  setFocusInput: (value: DateRangePickerInputType | null) => void;\n  open: (type: DateRangePickerInputType) => void;\n  close: () => void;\n  dateRangePickerRef: RefObject<HTMLDivElement>;\n  startRef: RefObject<DateInput>;\n  endRef: RefObject<DateInput>;\n}\n\nexport const DateRangePickerContext = React.createContext({} as DateRangePickerContextProps);\n\nDateRangePickerContext.displayName = 'DateRangePickerContext';\n"]}

package/components/DateRangePicker/DateRangePickerInput.d.ts

@@ -0,0 +1,12 @@
+import type { DateInputProps } from '../DateInput/index.js';
+import { DateInput } from '../DateInput/index.js';
+export type DateRangePickerInputType = 'start' | 'end';
+export interface DateRangePickerInputProps extends Omit<DateInputProps, 'value'> {
+    type: DateRangePickerInputType;
+    value?: string | null;
+    optional?: boolean;
+}
+type DateRangePickerInputWithoutType = Omit<DateRangePickerInputProps, 'type'>;
+export declare const DateRangePickerStart: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<DateInput, DateRangePickerInputWithoutType> & Record<never, never>;
+export declare const DateRangePickerEnd: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<DateInput, DateRangePickerInputWithoutType> & Record<never, never>;
+export {};

package/components/DateRangePicker/DateRangePickerInput.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { forwardRef, useContext, useEffect, useImperativeHandle } from 'react';
+import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
+import { DateInput } from '../DateInput/index.js';
+import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { isNonNullable } from '../../lib/utils.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+import { DateRangePickerDataTids } from './DateRangePicker.js';
+import { DateRangePickerLocaleHelper } from './locale/index.js';
+var DateRangePickerInput = forwardRef(function (props, ref) {
+    var _a = useContext(DateRangePickerContext), minDate = _a.minDate, maxDate = _a.maxDate, startValue = _a.startValue, endValue = _a.endValue, size = _a.size, setStartValue = _a.setStartValue, setStartOptional = _a.setStartOptional, setStartDisabled = _a.setStartDisabled, setEndValue = _a.setEndValue, setEndOptional = _a.setEndOptional, setEndDisabled = _a.setEndDisabled, setMinDate = _a.setMinDate, setMaxDate = _a.setMaxDate, setFocusInput = _a.setFocusInput, open = _a.open, close = _a.close, dateRangePickerRef = _a.dateRangePickerRef, startRef = _a.startRef, endRef = _a.endRef;
+    var isStart = props.type === 'start';
+    var isEnd = props.type === 'end';
+    var locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
+    var isMobile = useResponsiveLayout().isMobile;
+    useImperativeHandle(ref, function () { return (isStart ? startRef.current : endRef.current); }, []);
+    useEffect(function () {
+        if (isStart && startValue !== props.value) {
+            setStartValue(props.value || '');
+        }
+        else if (isEnd && endValue !== props.value) {
+            setEndValue(props.value || '');
+        }
+    }, [props.value]);
+    useEffect(function () {
+        if (isStart) {
+            setStartOptional(props.optional || false);
+            setStartDisabled(props.disabled || false);
+            setMinDate(props.minDate || '');
+        }
+        else if (isEnd) {
+            setEndOptional(props.optional || false);
+            setEndDisabled(props.disabled || false);
+            setMaxDate(props.maxDate || '');
+        }
+    }, [props.optional, props.disabled, props.minDate, props.maxDate]);
+    useEffect(function () {
+        var _a;
+        if (isStart && startValue !== props.value && isNonNullable(startValue)) {
+            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, startValue);
+        }
+    }, [startValue]);
+    useEffect(function () {
+        var _a;
+        if (isEnd && endValue !== props.value && isNonNullable(endValue)) {
+            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, endValue);
+        }
+    }, [endValue]);
+    var commonProps = __assign(__assign({ withIcon: true, size: size, minDate: minDate, maxDate: maxDate }, props), { onValueChange: function (value) {
+            if (isStart) {
+                setStartValue(value || '');
+            }
+            else if (isEnd) {
+                setEndValue(value || '');
+            }
+        }, onClick: function () {
+            if (props.disabled) {
+                return;
+            }
+            open(props.type);
+        }, onFocus: function (e) {
+            var _a;
+            open(props.type);
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, onBlur: function (e) {
+            var _a, _b;
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (isMobile) {
+                return;
+            }
+            var nextFocusedElement = e.relatedTarget;
+            if (!((_b = dateRangePickerRef.current) === null || _b === void 0 ? void 0 : _b.contains(nextFocusedElement))) {
+                close();
+            }
+            setFocusInput(null);
+        } });
+    switch (props.type) {
+        case 'start':
+            return (React.createElement(DateInput, __assign({}, commonProps, { value: props.value || '', "data-tid": DateRangePickerDataTids.start, "aria-label": props['aria-label'] || locale.startDateLabel, ref: startRef })));
+        case 'end':
+            return (React.createElement(DateInput, __assign({}, commonProps, { value: props.value || '', "data-tid": DateRangePickerDataTids.end, "aria-label": props['aria-label'] || locale.endDateLabel, ref: endRef })));
+    }
+});
+export var DateRangePickerStart = forwardRefAndName('DateRangePickerStart', function (props, ref) { return (React.createElement(DateRangePickerInput, __assign({ type: "start" }, props, { ref: ref }))); });
+export var DateRangePickerEnd = forwardRefAndName('DateRangePickerEnd', function (props, ref) { return (React.createElement(DateRangePickerInput, __assign({ type: "end" }, props, { ref: ref }))); });
+//# sourceMappingURL=DateRangePickerInput.js.map