@conveyorhq/arrow-ds 1.157.0 → 1.159.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.157.0",
+  "version": "1.159.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,24 +1,3 @@
 import { FC } from "react";
-export interface DateRangePickerValueWithDates {
-    startDate: Date;
-    endDate: Date;
-}
-export interface DateRangePickerPreset {
-    name: string;
-    startDate: Date;
-    endDate: Date;
-}
-export type DateRangePickerValue = DateRangePickerValueWithDates | null | DateRangePickerPreset;
-export interface DateRangePickerProps {
-    value: DateRangePickerPreset;
-    onChange: (newValue: DateRangePickerPreset) => void;
-    presets: DateRangePickerPreset[];
-    align?: "left" | "right";
-    minDate?: Date;
-    maxDate?: Date;
-    className?: string;
-    onCustomChange: () => void;
-    onSave: (newValue: DateRangePickerPreset) => void;
-    disabled?: boolean;
-}
+import { DateRangePickerProps } from "./types";
 export declare const DateRangePicker: FC<DateRangePickerProps>;

package/public/components/DateRangePicker/DateRangePicker.js

@@ -31,7 +31,6 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const date_fns_1 = require("date-fns");
 const Box_1 = require("../Box");
-const bem_1 = require("../../utilities/bem");
 const Button_1 = require("../Button");
 const MenuRenderer_1 = require("../MenuRenderer");
 const PopoverMenu_1 = require("../PopoverMenu");
@@ -42,19 +41,7 @@ const CustomDateRangeInput_1 = require("./CustomDateRangeInput");
 const utilities_1 = require("../../utilities");
 const DatePicker_1 = require("../DatePicker");
 const isValidDate_1 = require("../../utilities/isValidDate");
-const cn = (0, bem_1.bemHOF)("DateRangePicker");
-const RangePickerPreset = ({ isSelected, children, onClick, }) => {
-    const classes = (0, classnames_1.default)(cn({ e: "preset" }), isSelected && cn({ e: "preset", m: "isSelected" }));
-    return (react_1.default.createElement("button", { type: "button", className: classes, onClick: onClick }, children));
-};
-const CUSTOM_PRESET = "Custom";
-const focusInput = (ref) => {
-    const input = ref.current;
-    const { activeElement } = document;
-    if (input && input !== activeElement) {
-        input.focus();
-    }
-};
+const utils_1 = require("./utils");
 const DateRangePicker = ({ className, onChange, align = "left", presets, value, minDate, maxDate, onCustomChange, onSave, disabled, ...rest }) => {
     const placement = align === "left" ? "bottom-start" : "bottom-end";
     const [customStartDateInputVal, setCustomStartDateInputVal,] = (0, react_1.useState)("");
@@ -67,9 +54,10 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
     const handleClose = () => {
         setCustomStartDateError("");
     };
-    const [presetName, setPresetName] = (0, react_1.useState)(value.name);
+    const [selectedPresetName, setSelectedPresetName] = (0, react_1.useState)(value.name);
+    const [currentPresetName, setCurrentPresetName] = (0, react_1.useState)(value.name);
     (0, react_1.useEffect)(() => {
-        setPresetName(value.name);
+        setSelectedPresetName(value.name);
         setCustomStartDateInputVal(value.startDate ? (0, date_fns_1.format)(value.startDate, utilities_1.DATE_FORMAT) : "");
         setCustomEndDateInputVal(value.endDate ? (0, date_fns_1.format)(value.endDate, utilities_1.DATE_FORMAT) : "");
     }, [value]);
@@ -81,13 +69,13 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
     const displayText = (0, react_1.useMemo)(() => {
         if (!value)
             return "Select Date Range";
-        return presetName;
-    }, [presetName, value]);
+        return currentPresetName;
+    }, [currentPresetName, value]);
     (0, react_1.useEffect)(() => {
         if (customDateInputsValid)
             return;
         const inputToFocus = customSelectingWhichDate === "start" ? startInput : endInput;
-        focusInput(inputToFocus);
+        (0, utils_1.dateRangePickerFocusInput)(inputToFocus);
     }, [customSelectingWhichDate, customDateInputsValid]);
     const validDates = (0, react_1.useMemo)(() => {
         let start = null;
@@ -126,7 +114,7 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
     }, [customStartDateInputVal, customEndDateInputVal, minDate, maxDate]);
     const handleDatePickerChange = ([newStartDate, newEndDate]) => {
         if (!newEndDate)
-            focusInput(endInput);
+            (0, utils_1.dateRangePickerFocusInput)(endInput);
         const newStartString = newStartDate
             ? (0, date_fns_1.format)(newStartDate, utilities_1.DATE_FORMAT)
             : "";
@@ -143,36 +131,38 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
         !validDates.end ||
         !!customStartDateError ||
         !!customEndDateError;
-    return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)(cn(), className), placement: placement, onClose: handleClose, hasPortal: true, trigger: (triggerProps) => (react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, icon: Icon_1.ICON_TYPE.CARET_DOWN, iconPosition: Button_1.BUTTON_ICON_POSITION.RIGHT, className: cn({ e: "trigger" }), disabled: disabled, ...triggerProps },
-            react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "trigger-inner" }) },
-                react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CALENDAR, className: cn({ e: "trigger-icon" }) }),
+    return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)((0, utils_1.cn)(), className), placement: placement, onClose: handleClose, hasPortal: true, trigger: (triggerProps) => (react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, icon: Icon_1.ICON_TYPE.CARET_DOWN, iconPosition: Button_1.BUTTON_ICON_POSITION.RIGHT, className: (0, utils_1.cn)({ e: "custom-trigger" }), disabled: disabled, ...triggerProps },
+            react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "trigger-inner" }) },
+                react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CALENDAR, className: (0, utils_1.cn)({ e: "trigger-icon" }) }),
                 " ",
-                react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "trigger-text" }) }, displayText)))), ...rest }, ({ listProps, onClose }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { ...listProps },
-        react_1.default.createElement(Flex_1.Flex, { className: cn({
+                react_1.default.createElement(Text_1.Text, { as: "span", className: (0, utils_1.cn)({ e: "custom-trigger-text" }) }, displayText)))), ...rest }, ({ listProps, onClose }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { ...listProps },
+        react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({
                 e: "popover-inner-wrapper",
                 m: `${align}Aligned`,
             }) },
-            react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "presets-wrapper" }) },
-                presets.map((p) => (react_1.default.createElement(RangePickerPreset, { key: p.name, onClick: () => {
+            react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "presets-wrapper" }) },
+                presets.map((p) => (react_1.default.createElement(utils_1.RangePickerPreset, { key: p.name, onClick: () => {
                         onChange(p);
-                        setPresetName(p.name);
+                        setSelectedPresetName(p.name);
                         setCustomStartDateInputVal((0, date_fns_1.format)(p.startDate, utilities_1.DATE_FORMAT));
                         setCustomEndDateInputVal((0, date_fns_1.format)(p.endDate, utilities_1.DATE_FORMAT));
-                    }, isSelected: p.name === presetName }, p.name))),
-                react_1.default.createElement(RangePickerPreset, { onClick: () => {
+                    }, isSelected: p.name === selectedPresetName }, p.name))),
+                react_1.default.createElement(utils_1.RangePickerPreset, { onClick: () => {
                         onCustomChange();
-                        setPresetName(CUSTOM_PRESET);
+                        setSelectedPresetName(utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET);
                         setCustomStartDateInputVal("");
                         setCustomEndDateInputVal("");
-                    }, isSelected: presetName === CUSTOM_PRESET }, "Custom")),
-            react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)(cn({ e: "custom-wrapper" }), cn({ e: "custom-wrapper", m: `${align}Aligned` })) },
-                react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "custom-date-inputs-wrapper" }) },
+                    }, isSelected: selectedPresetName === utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET }, "Custom")),
+            react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, utils_1.cn)({ e: "custom-wrapper" }), (0, utils_1.cn)({ e: "custom-wrapper", m: `${align}Aligned` })) },
+                react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "custom-date-inputs-wrapper" }) },
                     react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: startInput, value: customStartDateInputVal, setValue: setCustomStartDateInputVal, error: customStartDateError, setError: setCustomStartDateError, ariaLabel: "Start Date", onFocus: () => setCustomSelectingWhichDate("start") }),
-                    react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "custom-dates-to" }) }, "to"),
+                    react_1.default.createElement(Text_1.Text, { as: "span", className: (0, utils_1.cn)({ e: "custom-dates-to" }) }, "to"),
                     react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: endInput, value: customEndDateInputVal, setValue: setCustomEndDateInputVal, error: customEndDateError, setError: setCustomEndDateError, ariaLabel: "End Date", onFocus: () => setCustomSelectingWhichDate("end") })),
-                react_1.default.createElement(Box_1.Box, { className: cn({ e: "custom-date-calendars-wrapper" }) },
-                    react_1.default.createElement(DatePicker_1.DatePicker, { monthsShown: 2, inline: true, onChange: handleDatePickerChange, onSelect: handleDatePickerSelect, selectsRange: true, selected: validDates.start, startDate: validDates.start, endDate: validDates.end, minDate: minDate, maxDate: maxDate, openToDate: presetName === CUSTOM_PRESET ? new Date() : undefined })),
-                react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "custom-date-footer" }) },
+                react_1.default.createElement(Box_1.Box, { className: (0, utils_1.cn)({ e: "custom-date-calendars-wrapper" }) },
+                    react_1.default.createElement(DatePicker_1.DatePicker, { monthsShown: 2, inline: true, onChange: handleDatePickerChange, onSelect: handleDatePickerSelect, selectsRange: true, selected: validDates.start, startDate: validDates.start, endDate: validDates.end, minDate: minDate, maxDate: maxDate, openToDate: selectedPresetName === utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET
+                            ? new Date()
+                            : undefined })),
+                react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "custom-date-footer" }) },
                     react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: () => {
                             if (onClose) {
                                 onClose();
@@ -185,7 +175,8 @@ const DateRangePicker = ({ className, onChange, align = "left", presets, value,
                             const startDate = (0, utilities_1.parseDate)(customStartDateInputVal);
                             const endDate = (0, utilities_1.parseDate)(customEndDateInputVal);
                             if (startDate && endDate) {
-                                onSave({ name: presetName, startDate, endDate });
+                                setCurrentPresetName(selectedPresetName);
+                                onSave({ name: selectedPresetName, startDate, endDate });
                             }
                         } }, "Apply"))))))));
 };

package/public/components/DateRangePicker/DateRangePickerLegacy.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { DateRangePickerLegacyProps } from "./types";
+export declare const DateRangePickerLegacy: FC<DateRangePickerLegacyProps>;

package/public/components/DateRangePicker/DateRangePickerLegacy.js

@@ -0,0 +1,186 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerLegacy = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const date_fns_1 = require("date-fns");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const MenuRenderer_1 = require("../MenuRenderer");
+const PopoverMenu_1 = require("../PopoverMenu");
+const Icon_1 = require("../Icon");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+const CustomDateRangeInput_1 = require("./CustomDateRangeInput");
+const utilities_1 = require("../../utilities");
+const DatePicker_1 = require("../DatePicker");
+const isValidDate_1 = require("../../utilities/isValidDate");
+const utils_1 = require("./utils");
+const DateRangePickerLegacy = ({ className, onChange, align = "left", presets, value, minDate, maxDate, ...rest }) => {
+    const placement = align === "left" ? "bottom-start" : "bottom-end";
+    const [selectingCustomDate, setSelectingCustomDate] = (0, react_1.useState)(!(0, utils_1.getMatchingDateRangePickerPreset)(value, presets) && value !== null);
+    const [customStartDateInputVal, setCustomStartDateInputVal,] = (0, react_1.useState)("");
+    const [customStartDateError, setCustomStartDateError] = (0, react_1.useState)("");
+    const [customEndDateInputVal, setCustomEndDateInputVal] = (0, react_1.useState)("");
+    const [customEndDateError, setCustomEndDateError] = (0, react_1.useState)("");
+    const [customSelectingWhichDate, setCustomSelectingWhichDate] = (0, react_1.useState)("start");
+    const startInput = (0, react_1.useRef)(null);
+    const endInput = (0, react_1.useRef)(null);
+    const handleClose = () => {
+        setCustomStartDateError("");
+        if (selectingCustomDate && value && "name" in value) {
+            setSelectingCustomDate(false);
+        }
+    };
+    const selectedPreset = (0, react_1.useMemo)(() => {
+        if (!value)
+            return null;
+        if (selectingCustomDate)
+            return utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET;
+        const matchingPreset = (0, utils_1.getMatchingDateRangePickerPreset)(value, presets);
+        return matchingPreset
+            ? matchingPreset.name
+            : utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET;
+    }, [presets, value, selectingCustomDate]);
+    const customDateInputsValid = (0, react_1.useMemo)(() => {
+        const parsedStart = (0, utilities_1.parseDate)(customStartDateInputVal);
+        const parsedEnd = (0, utilities_1.parseDate)(customEndDateInputVal);
+        return !!(parsedStart && parsedEnd);
+    }, [customStartDateInputVal, customEndDateInputVal]);
+    const displayText = (0, react_1.useMemo)(() => {
+        if (!value)
+            return "Select Date Range";
+        const matchingPreset = (0, utils_1.getMatchingDateRangePickerPreset)(value, presets);
+        if (selectingCustomDate && matchingPreset)
+            return utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET;
+        return selectedPreset === utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET
+            ? `${(0, date_fns_1.format)(value.startDate, utilities_1.DATE_FORMAT)} to ${(0, date_fns_1.format)(value.endDate, utilities_1.DATE_FORMAT)}`
+            : selectedPreset;
+    }, [selectedPreset, value, selectingCustomDate, presets]);
+    (0, react_1.useEffect)(() => {
+        if (!selectingCustomDate || customDateInputsValid)
+            return;
+        const inputToFocus = customSelectingWhichDate === "start" ? startInput : endInput;
+        (0, utils_1.dateRangePickerFocusInput)(inputToFocus);
+    }, [customSelectingWhichDate, selectingCustomDate, customDateInputsValid]);
+    const validDates = (0, react_1.useMemo)(() => {
+        let start = null;
+        let end = null;
+        if (customStartDateInputVal) {
+            const parsed = (0, date_fns_1.parse)(customStartDateInputVal, utilities_1.DATE_FORMAT, new Date());
+            start = (0, isValidDate_1.isValidDate)(parsed) ? parsed : null;
+        }
+        if (customEndDateInputVal) {
+            const parsed = (0, date_fns_1.parse)(customEndDateInputVal, utilities_1.DATE_FORMAT, new Date());
+            end = (0, isValidDate_1.isValidDate)(parsed) ? parsed : null;
+        }
+        if (start &&
+            ((minDate && (0, date_fns_1.isBefore)(start, minDate)) ||
+                (maxDate && (0, date_fns_1.isAfter)(start, maxDate)))) {
+            setCustomStartDateError("Outside allowed date range");
+            start = null;
+        }
+        if (end &&
+            ((minDate && (0, date_fns_1.isBefore)(end, minDate)) ||
+                (maxDate && (0, date_fns_1.isAfter)(end, maxDate)))) {
+            setCustomEndDateError("Outside allowed date range");
+            end = null;
+        }
+        if (start && end && (0, date_fns_1.isAfter)(start, end)) {
+            setCustomEndDateError("End date cannot be before start date");
+            end = null;
+        }
+        if (start) {
+            setCustomStartDateError("");
+        }
+        if (end) {
+            setCustomEndDateError("");
+        }
+        return { start, end };
+    }, [customStartDateInputVal, customEndDateInputVal, minDate, maxDate]);
+    const handleDatePickerChange = ([newStartDate, newEndDate]) => {
+        if (!newEndDate)
+            (0, utils_1.dateRangePickerFocusInput)(endInput);
+        const newStartString = newStartDate
+            ? (0, date_fns_1.format)(newStartDate, utilities_1.DATE_FORMAT)
+            : "";
+        const newEndString = newEndDate ? (0, date_fns_1.format)(newEndDate, utilities_1.DATE_FORMAT) : "";
+        setCustomStartDateInputVal(newStartString);
+        setCustomEndDateInputVal(newEndString);
+    };
+    const handleDatePickerSelect = (date) => {
+        if (!validDates.start && validDates.end) {
+            setCustomStartDateInputVal((0, date_fns_1.format)(date, utilities_1.DATE_FORMAT));
+        }
+    };
+    const customApplyBtnDisabled = !validDates.start ||
+        !validDates.end ||
+        !!customStartDateError ||
+        !!customEndDateError;
+    return (react_1.default.createElement(MenuRenderer_1.MenuRenderer, { className: (0, classnames_1.default)((0, utils_1.cn)(), className), placement: placement, onClose: handleClose, hasPortal: true, trigger: (triggerProps) => (react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, icon: Icon_1.ICON_TYPE.CARET_DOWN, iconPosition: Button_1.BUTTON_ICON_POSITION.RIGHT, className: (0, utils_1.cn)({ e: "trigger" }), ...triggerProps },
+            react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "trigger-inner" }) },
+                react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CALENDAR, className: (0, utils_1.cn)({ e: "trigger-icon" }) }),
+                " ",
+                react_1.default.createElement(Text_1.Text, { as: "span", className: (0, utils_1.cn)({ e: "trigger-text" }) }, displayText)))), ...rest }, ({ listProps, onClose }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { ...listProps },
+        react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({
+                e: "popover-inner-wrapper",
+                m: `${align}Aligned`,
+            }) },
+            react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "presets-wrapper" }) },
+                presets.map((p) => (react_1.default.createElement(utils_1.RangePickerPreset, { key: p.name, onClick: () => {
+                        onChange(p);
+                        if (onClose) {
+                            onClose();
+                        }
+                    }, isSelected: p.name === selectedPreset }, p.name))),
+                react_1.default.createElement(utils_1.RangePickerPreset, { onClick: () => {
+                        if (selectingCustomDate)
+                            return;
+                        setSelectingCustomDate(true);
+                    }, isSelected: selectedPreset === utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET }, "Custom")),
+            selectedPreset === utils_1.DATE_RANGE_PICKER_CUSTOM_PRESET ? (react_1.default.createElement(Box_1.Box, { className: (0, classnames_1.default)((0, utils_1.cn)({ e: "custom-wrapper" }), (0, utils_1.cn)({ e: "custom-wrapper", m: `${align}Aligned` })) },
+                react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "custom-date-inputs-wrapper" }) },
+                    react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: startInput, value: customStartDateInputVal, setValue: setCustomStartDateInputVal, error: customStartDateError, setError: setCustomStartDateError, ariaLabel: "Start Date", onFocus: () => setCustomSelectingWhichDate("start") }),
+                    react_1.default.createElement(Text_1.Text, { as: "span", className: (0, utils_1.cn)({ e: "custom-dates-to" }) }, "to"),
+                    react_1.default.createElement(CustomDateRangeInput_1.CustomDateRangeInput, { ref: endInput, value: customEndDateInputVal, setValue: setCustomEndDateInputVal, error: customEndDateError, setError: setCustomEndDateError, ariaLabel: "End Date", onFocus: () => setCustomSelectingWhichDate("end") })),
+                react_1.default.createElement(Box_1.Box, { className: (0, utils_1.cn)({ e: "custom-date-calendars-wrapper" }) },
+                    react_1.default.createElement(DatePicker_1.DatePicker, { monthsShown: 2, inline: true, onChange: handleDatePickerChange, onSelect: handleDatePickerSelect, selectsRange: true, selected: validDates.start, startDate: validDates.start, endDate: validDates.end, minDate: minDate, maxDate: maxDate })),
+                react_1.default.createElement(Flex_1.Flex, { className: (0, utils_1.cn)({ e: "custom-date-footer" }) },
+                    react_1.default.createElement(Button_1.Button, { disabled: customApplyBtnDisabled, onClick: () => {
+                            if (onClose) {
+                                onClose();
+                            }
+                            const startDate = (0, utilities_1.parseDate)(customStartDateInputVal);
+                            const endDate = (0, utilities_1.parseDate)(customEndDateInputVal);
+                            if (startDate && endDate) {
+                                onChange({ startDate, endDate });
+                            }
+                        } }, "Apply")))) : null)))));
+};
+exports.DateRangePickerLegacy = DateRangePickerLegacy;

package/public/components/DateRangePicker/index.d.ts

@@ -1 +1,3 @@
+export * from "./types";
+export * from "./DateRangePickerLegacy";
 export * from "./DateRangePicker";

package/public/components/DateRangePicker/index.js

@@ -14,4 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./DateRangePickerLegacy"), exports);
 __exportStar(require("./DateRangePicker"), exports);

package/public/components/DateRangePicker/types.d.ts

@@ -0,0 +1,29 @@
+export interface DateRangePickerValueWithDates {
+    startDate: Date;
+    endDate: Date;
+}
+export interface DateRangePickerPreset {
+    name: string;
+    startDate: Date;
+    endDate: Date;
+}
+export type DateRangePickerValue = DateRangePickerValueWithDates | null | DateRangePickerPreset;
+interface SharedDateRangePickerProps {
+    presets: DateRangePickerPreset[];
+    align?: "left" | "right";
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+}
+export interface DateRangePickerLegacyProps extends SharedDateRangePickerProps {
+    value: DateRangePickerValue;
+    onChange: (newValue: DateRangePickerValue) => void;
+}
+export interface DateRangePickerProps extends SharedDateRangePickerProps {
+    value: DateRangePickerPreset;
+    onChange: (newValue: DateRangePickerPreset) => void;
+    onCustomChange: () => void;
+    onSave: (newValue: DateRangePickerPreset) => void;
+    disabled?: boolean;
+}
+export {};

package/public/components/DateRangePicker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/public/components/DateRangePicker/utils.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, RefObject } from "react";
+import { DateRangePickerPreset, DateRangePickerValue } from "./types";
+export declare const cn: (options?: import("../../utilities/bem").BemOptions | undefined) => string;
+interface DateRangePickerPresetProps {
+    isSelected: boolean;
+    children: ReactNode;
+    onClick: () => void;
+}
+export declare const RangePickerPreset: ({ isSelected, children, onClick, }: DateRangePickerPresetProps) => React.JSX.Element;
+export declare const DATE_RANGE_PICKER_CUSTOM_PRESET = "Custom";
+export declare const getMatchingDateRangePickerPreset: (value: DateRangePickerValue, presets: DateRangePickerPreset[]) => DateRangePickerPreset | null | undefined;
+export declare const dateRangePickerFocusInput: (ref: RefObject<HTMLInputElement>) => void;
+export {};

package/public/components/DateRangePicker/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateRangePickerFocusInput = exports.getMatchingDateRangePickerPreset = exports.DATE_RANGE_PICKER_CUSTOM_PRESET = exports.RangePickerPreset = exports.cn = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const bem_1 = require("../../utilities/bem");
+const Heading_1 = require("../Heading");
+exports.cn = (0, bem_1.bemHOF)("DateRangePicker");
+const RangePickerPreset = ({ isSelected, children, onClick, }) => {
+    const classes = (0, classnames_1.default)((0, exports.cn)({ e: "preset" }), isSelected && (0, exports.cn)({ e: "preset", m: "isSelected" }));
+    return (react_1.default.createElement("button", { type: "button", className: classes, onClick: onClick },
+        react_1.default.createElement(Heading_1.Heading.H4, null, children)));
+};
+exports.RangePickerPreset = RangePickerPreset;
+exports.DATE_RANGE_PICKER_CUSTOM_PRESET = "Custom";
+const getMatchingDateRangePickerPreset = (value, presets) => {
+    if (!value || !("name" in value))
+        return null;
+    return presets.find((p) => p.name === value.name);
+};
+exports.getMatchingDateRangePickerPreset = getMatchingDateRangePickerPreset;
+const dateRangePickerFocusInput = (ref) => {
+    const input = ref.current;
+    const { activeElement } = document;
+    if (input && input !== activeElement) {
+        input.focus();
+    }
+};
+exports.dateRangePickerFocusInput = dateRangePickerFocusInput;

package/public/css/styles.css

@@ -3699,6 +3699,10 @@ override built-in Image component classes */
 }
 
 .ads-DateRangePicker-trigger {
+  width: 224px;
+}
+
+.ads-DateRangePicker-custom-trigger {
   width: 144px;
 }
 
@@ -3711,6 +3715,11 @@ override built-in Image component classes */
 }
 
 .ads-DateRangePicker-trigger-text {
+  width: 160px;
+  text-align: left;
+}
+
+.ads-DateRangePicker-custom-trigger-text {
   width: 80px;
   text-align: left;
 }