@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/dateInput/dateInput.js

@@ -1,121 +1,28 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.DateInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const textIconButton_1 = require("../textIconButton/textIconButton");
-const button_1 = require("../button/button");
-const iconCalendar_1 = require("../icons/iconCalendar");
-const react_1 = require("react");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const buttonType_1 = require("../button/buttonType");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
-const useUniqueId_1 = require("../commonHelpers/useUniqueId");
-const formatDate_1 = require("../utils/formatDate");
-const controlledPopup_1 = require("../controlledPopup/controlledPopup");
-const dateInputInner_1 = require("../dateInputInner/dateInputInner");
-const cutSeconds_1 = require("./cutSeconds");
-const getLabel_1 = require("./getLabel");
-const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const formFieldError_1 = require("../formFieldError/formFieldError");
-const footerButtons_1 = require("../footerButtons/footerButtons");
-const mobileSheet_1 = require("../mobileSheet/mobileSheet");
-const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const chip_1 = require("../chip/chip");
-const chipStatusProvider_1 = require("../chip/chipStatusProvider");
-const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, id, disabled, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, error, requireSelection = false, chip, chipIcon, chipId, chipName, buttonLabel }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
-    const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup");
-    const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup-wrapper");
-    const { dateFormat, timeFormat, weekStartsOnSunday, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const dateFormatter = (0, react_1.useCallback)((d) => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate), [dateFormat, toLocalDateTime, translate]);
-    const dateDeformatter = (0, react_1.useCallback)((d) => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date(""), [dateFormat, translate]);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [renderContent, setRenderContent] = (0, react_1.useState)(false);
-    const prevIsOpenRef = (0, react_1.useRef)(false);
-    const [customDate, setCustomDate] = (0, react_1.useState)(value);
-    const triggerRef = (0, react_1.useRef)(null);
-    const [prevValue, setPrevValue] = (0, react_1.useState)(value);
-    const isDefaultState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(defaultValue) === (0, cutSeconds_1.cutSeconds)(customDate), [defaultValue, customDate]);
-    const isValueState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(value) === (0, cutSeconds_1.cutSeconds)(customDate), [value, customDate]);
-    const componentId = (0, useUniqueId_1.useUniqueId)();
-    const cssClass = (0, classNames_1.classNames)([
-        "zen-date-input",
-        error ? "zen-date-input--error" : "",
-        className !== null && className !== void 0 ? className : "",
-        !value || (0, cutSeconds_1.cutSeconds)(defaultValue) === (0, cutSeconds_1.cutSeconds)(value) ? "" : "zen-date-input--active"
-    ]);
-    const title = (0, react_1.useMemo)(() => dropDownTitle || translate("Pick a date"), [dropDownTitle, translate]);
-    const toggleVisibility = (0, react_1.useCallback)(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
-    const getButtonLabel = (0, react_1.useCallback)((getTitle) => (0, getLabel_1.getLabel)(value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, getTitle), [value, dateFormat, timeFormat, timeSelect, translate, toLocalDateTime, buttonLabel]);
-    (0, react_1.useEffect)(() => {
-        if (prevValue !== value) {
-            setPrevValue(value);
-        }
-    }, [prevValue, value]);
-    const onCalendarChange = (0, react_1.useCallback)((val) => {
-        setCustomDate(val.from);
-    }, []);
-    const handleRangeSelection = (0, react_1.useCallback)(() => {
-        const newState = customDate;
-        setPrevValue(newState);
-        onChange(newState);
-        setCustomDate(newState);
-        setIsOpen(false);
-    }, [customDate, onChange]);
-    const handleApplyClick = (0, react_1.useCallback)(() => {
-        setIsOpen(false);
-        handleRangeSelection();
-    }, [handleRangeSelection]);
-    const handleClearClick = (0, react_1.useCallback)(() => {
-        setCustomDate(defaultValue);
-    }, [defaultValue]);
-    const handleClearAndApply = (0, react_1.useCallback)(() => {
-        setCustomDate(defaultValue);
-        setIsOpen(false);
-        onChange(defaultValue);
-    }, [defaultValue, onChange]);
-    (0, react_1.useEffect)(() => {
-        setCustomDate(value);
-    }, [value]);
-    const memoizedHandleClose = (0, react_1.useCallback)(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-    const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
-        if (!isMobile) {
-            return;
-        }
-        if (isCurrentOpen) {
-            setRenderContent(true);
-            return;
-        }
-        setRenderContent(false);
-        prevIsOpenRef.current = isCurrentOpen;
-    }, [isMobile]);
-    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: id || componentId, value: { from: customDate, to: undefined }, onChange: onCalendarChange, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, dateRangeMode: false, selectTime: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesAfter: disableDatesAfter, disableDatesBefore: disableDatesBefore, title: "", isMobileView: isMobile, requireSelection: requireSelection }) }), [componentId, customDate, dateDeformatter, dateFormat, dateFormatter, disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, id, isMobile, onCalendarChange, requireSelection, timeSelect, weekStartsOnSunday]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-input-popup-wrapper", driveWrapperClassName || ""]), ariaLabel: translate("Pick a date"), useTrapFocusWithTrigger: "on", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate, drivePopupClassName, driveWrapperClassName, handleApplyClick, handleClearClick, isDefaultState, isOpen, isValueState, requireSelection, title, translate]);
-    const memoizedMobileFooter = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") })] }), [customDate, handleApplyClick, handleClearClick, isDefaultState, isValueState, requireSelection, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-input-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Pick a date"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderContent ? component : null }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
-    (0, react_1.useEffect)(() => {
-        if (!isMobile && !isOpen && prevIsOpenRef.current) {
-            setTimeout(() => {
-                var _a;
-                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-        prevIsOpenRef.current = isOpen;
-    }, [isOpen, isMobile]);
-    const buttonCurrentLabel = getButtonLabel();
-    const buttonCurrentTitle = getButtonLabel(true);
-    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonCurrentTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearAndApply, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonCurrentLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chip ? chipTriggerComponent : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+const formField_1 = require("../formField/formField");
+const dateInputRaw_1 = require("../dateInputRaw/dateInputRaw");
+const dateInputRaw_2 = require("../dateInputRaw/dateInputRaw");
+const DateInputFormField = (0, formField_1.FormField)(dateInputRaw_1.DateInputRaw);
+// TODO: add tests
+const DateInput = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(DateInputFormField, Object.assign({}, props));
 };
 exports.DateInput = DateInput;
 exports.TRANSLATIONS = [
-    "Pick a date",
-    "Clear",
-    "Apply",
-    "Today"
+    ...dateInputRaw_2.TRANSLATIONS
 ];

package/dist/dateInputInner/dateInputInnerControlBlock.js

@@ -18,7 +18,10 @@ const DateInputInnerControlBlock = (props) => {
     const memoizedDateInput = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]), id: id, value: dateText, onChange: handleSetDateText, onBlur: onBlurDateChangeHandler, placeholder: placeholder, autocomplete: "off", isError: isHasDateError, ref: ref }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
     const memoizedTimeSelect = (0, react_1.useMemo)(() => selectTime
         ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, { className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : "",
-                        isHasTimeError ? "zen-date-input-inner__text-input--error" : ""]), value: timePickerValue, onChange: timeChangeHandler, isMobileView: isMobileView, fullWidth: true, dataTimeId: id }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The time must be set") }) : null] })
+                        isHasTimeError ? "zen-date-input-inner__text-input--error" : ""]), value: timePickerValue, onChange: timeChangeHandler, isMobileView: isMobileView, fullWidth: true, 
+                    // eslint-disable-next-line
+                    // @ts-ignore
+                    dataTimeId: id }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The time must be set") }) : null] })
         : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner__control-block", className || ""]), children: [title
                 ? (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "zen-date-input-inner__label", children: title })

package/dist/dateInputRaw/dateInputRaw.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./dateInputRaw.less";
+import { IFormFieldComponent } from "../formField/formField";
+import { IDateInputRawDefault, TDateInputRaw } from "./types";
+import { IChipsParent } from "../chip/chip";
+export interface IDateInputRaw extends IDateInputRawDefault, IChipsParent {
+}
+export declare const DateInputRaw: React.FC<TDateInputRaw & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];

package/dist/dateInputRaw/dateInputRaw.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSLATIONS = exports.DateInputRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const textIconButton_1 = require("../textIconButton/textIconButton");
+const button_1 = require("../button/button");
+const iconCalendar_1 = require("../icons/iconCalendar");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const buttonType_1 = require("../button/buttonType");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+const formatDate_1 = require("../utils/formatDate");
+const controlledPopup_1 = require("../controlledPopup/controlledPopup");
+const dateInputInner_1 = require("../dateInputInner/dateInputInner");
+const cutSeconds_1 = require("./utils/cutSeconds");
+const getLabel_1 = require("./utils/getLabel");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const footerButtons_1 = require("../footerButtons/footerButtons");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const isFormItem_1 = require("../commonHelpers/isFormItem");
+const chip_1 = require("../chip/chip");
+const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const DateInputRaw = (props) => {
+    var _a;
+    const { className, classNamePopup, defaultValue, id, dropDownTitle, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, isReadOnly, requireSelection = false, chip, chipIcon, chipId, chipName, buttonLabel, error } = props;
+    const { name, disabled, value, onChange, onBlur } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    const isFormItemVal = (0, isFormItem_1.isFormItem)(props);
+    const accessibilityProps = (0, getAriaAttributes_1.getAriaAttributes)(props);
+    const defaultValueInner = isFormItemVal ? (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue : defaultValue;
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
+    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+    const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup");
+    const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-input-popup-wrapper");
+    const { dateFormat, timeFormat, weekStartsOnSunday, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const dateFormatter = (0, react_1.useCallback)((d) => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate), [dateFormat, toLocalDateTime, translate]);
+    const dateDeformatter = (0, react_1.useCallback)((d) => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date(""), [dateFormat, translate]);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [renderContent, setRenderContent] = (0, react_1.useState)(false);
+    const prevIsOpenRef = (0, react_1.useRef)(false);
+    const [customDate, setCustomDate] = (0, react_1.useState)(value);
+    const triggerRef = (0, react_1.useRef)(null);
+    const [prevValue, setPrevValue] = (0, react_1.useState)(value);
+    const isDefaultState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(defaultValueInner) === (0, cutSeconds_1.cutSeconds)(customDate), [defaultValueInner, customDate]);
+    const isValueState = (0, react_1.useMemo)(() => (0, cutSeconds_1.cutSeconds)(value) === (0, cutSeconds_1.cutSeconds)(customDate), [value, customDate]);
+    const componentId = (0, useUniqueId_1.useUniqueId)();
+    const cssClass = (0, classNames_1.classNames)([
+        "zen-date-input",
+        className !== null && className !== void 0 ? className : "",
+        error ? "zen-date-input--error" : "",
+        !value || (0, cutSeconds_1.cutSeconds)(defaultValueInner) === (0, cutSeconds_1.cutSeconds)(value) ? "" : "zen-date-input--active"
+    ]);
+    const title = (0, react_1.useMemo)(() => dropDownTitle || translate("Pick a date"), [dropDownTitle, translate]);
+    const toggleVisibility = (0, react_1.useCallback)(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
+    const getButtonLabel = (0, react_1.useCallback)((getTitle) => (0, getLabel_1.getLabel)(value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, getTitle), [value, dateFormat, timeFormat, translate, toLocalDateTime, buttonLabel, timeSelect]);
+    (0, react_1.useEffect)(() => {
+        if (prevValue !== value) {
+            setPrevValue(value);
+        }
+    }, [prevValue, value]);
+    const onCalendarChange = (0, react_1.useCallback)((val) => {
+        setCustomDate(val.from);
+    }, []);
+    const handleRangeSelection = (0, react_1.useCallback)(() => {
+        const newState = customDate;
+        setPrevValue(newState);
+        onChange(newState);
+        setCustomDate(newState);
+        setIsOpen(false);
+    }, [customDate, onChange]);
+    const handleApplyClick = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        handleRangeSelection();
+    }, [handleRangeSelection]);
+    const handleClearClick = (0, react_1.useCallback)(() => {
+        setCustomDate(defaultValueInner);
+    }, [defaultValueInner]);
+    const handleClearAndApply = (0, react_1.useCallback)(() => {
+        setCustomDate(defaultValueInner);
+        setIsOpen(false);
+        onChange(defaultValue);
+    }, [defaultValue, defaultValueInner, onChange]);
+    (0, react_1.useEffect)(() => {
+        setCustomDate(value);
+    }, [value]);
+    const memoizedHandleClose = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const onReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
+        if (!isMobile) {
+            return;
+        }
+        if (isCurrentOpen) {
+            setRenderContent(true);
+            return;
+        }
+        setRenderContent(false);
+        prevIsOpenRef.current = isCurrentOpen;
+    }, [isMobile]);
+    const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: id || componentId, value: { from: customDate, to: undefined }, onChange: onCalendarChange, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, dateRangeMode: false, selectTime: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesAfter: disableDatesAfter, disableDatesBefore: disableDatesBefore, title: "", isMobileView: isMobile, requireSelection: requireSelection }) }), [componentId, customDate, dateDeformatter, dateFormat, dateFormatter, disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, id, isMobile, onCalendarChange, requireSelection, timeSelect, weekStartsOnSunday]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { className: (0, classNames_1.classNames)(["zen-date-input-popup-wrapper", driveWrapperClassName || ""]), ariaLabel: translate("Pick a date"), useTrapFocusWithTrigger: "on", triggerRef: triggerRef, onOpenChange: setIsOpen, shouldHoldScroll: true, isOpen: isOpen, recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-date-input-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-date-input-popup__header", children: title }), component, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-popup__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-clear", type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-date-input-popup__button-apply", type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") })] })] }) }), [classNamePopup, component, customDate, drivePopupClassName, driveWrapperClassName, handleApplyClick, handleClearClick, isDefaultState, isOpen, isValueState, requireSelection, title, translate]);
+    const memoizedMobileFooter = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") })] }), [customDate, handleApplyClick, handleClearClick, isDefaultState, isValueState, requireSelection, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { className: (0, classNames_1.classNames)(["zen-date-input-mobile-sheet", classNamePopup ? `${classNamePopup}--mobile-sheet` : ""]), label: translate("Pick a date"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: memoizedHandleClose, onCloseClick: memoizedHandleClose, useTrapFocusWithTrigger: true, onReadyForFocus: onReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderContent ? component : null }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
+    (0, react_1.useEffect)(() => {
+        if (!isMobile && !isOpen && prevIsOpenRef.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, isMobile]);
+    const buttonCurrentLabel = getButtonLabel();
+    const buttonCurrentTitle = getButtonLabel(true);
+    const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: isDefaultState ? undefined : chipStatus || "active", title: isDefaultState ? chipName : buttonCurrentTitle, isOpen: isOpen, disabled: disabled, onClick: toggleVisibility, onClose: isDefaultState ? undefined : handleClearAndApply, triggerRef: triggerRef, icon: chipIcon || iconCalendar_1.IconCalendar, id: chipId, children: isDefaultState ? chipName : buttonCurrentLabel }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
+    if (isReadOnly) {
+        const readOnlyValue = getButtonLabel() === translate("Pick a date") ? " " : getButtonLabel();
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: readOnlyValue });
+    }
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chip ? chipTriggerComponent : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id || undefined, name: name, onBlur: onBlur, htmlType: "button", title: buttonCurrentTitle, icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef }, accessibilityProps, { children: buttonCurrentLabel })), isMobile ? memoizedMobileView : memoizedDesktopView] });
+};
+exports.DateInputRaw = DateInputRaw;
+exports.TRANSLATIONS = [
+    "Pick a date",
+    "Clear",
+    "Apply",
+    "Today"
+];

package/dist/dateInputRaw/types.d.ts

@@ -0,0 +1,32 @@
+import { IChipsParent } from "../chip/chip";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IDateInputRawBase extends IZenComponentProps, IChipsParent {
+    className?: string;
+    classNamePopup?: string;
+    /**
+        @deprecated - this prop is deprecated and will be removed in the next major version.
+    */
+    hasApplyButton?: boolean;
+    dropDownTitle?: string;
+    id?: string;
+    timeSelect?: boolean;
+    disableFutureDates?: boolean;
+    disablePastDates?: boolean;
+    disableDatesBefore?: string;
+    disableDatesAfter?: string;
+    requireSelection?: boolean;
+    error?: string;
+    buttonLabel?: string;
+}
+export interface IDateInputRawDefault extends IDateInputRawBase {
+    defaultValue?: string;
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    onBlur?: () => void;
+    name?: string;
+    disabled?: boolean;
+}
+export interface IDateInputRawForm extends IDateInputRawBase, IReactFormItemController {
+}
+export type TDateInputRaw = Exclusive<IDateInputRawDefault, IDateInputRawForm>;

package/dist/{dateInput → dateInputRaw/utils}/getLabel.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLabel = void 0;
-const formatDate_1 = require("../utils/formatDate");
+const formatDate_1 = require("../../utils/formatDate");
 const getLabel = (value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, buttonTitle) => {
     if (!value) {
         return buttonLabel ? buttonLabel : translate("Pick a date");

package/dist/dateRange/dateRange.d.ts

@@ -1,44 +1,13 @@
-/// <reference types="react" />
-import "./dateRange.less";
-import { IZenComponentProps } from "./../commonHelpers/zenComponent";
-import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from "./dateRangeUtils";
-import { TButton } from "../button/buttonType";
-import { IChipsParent } from "../chip/chip";
-interface IDateRangeBase extends IZenComponentProps, IChipsParent {
-    options: TDateRangeOption[];
-    triggerLabel?: string;
-    className?: string;
-    classNamePopup?: string;
-    classNameWrapper?: string;
-    hasApplyButton?: boolean;
-    type?: TButton;
-    disabled?: boolean;
-    dropDownTitle?: string;
-    withCalendar?: boolean;
-    timeSelect?: boolean;
-    disableFutureDates?: boolean;
-    disablePastDates?: boolean;
-    disableDatesBefore?: string;
-    disableDatesAfter?: string;
-    lockEndDate?: string;
-    lockStartDate?: string;
-    id?: string;
-    error?: string;
-    stepper?: boolean;
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IDateRangeRaw, IDateRangeRawUnsetValue } from "../dateRangeRaw/dateRangeRaw";
+import { TDateRangeRaw } from "../dateRangeRaw/types";
+export { parseLabel } from "../dateRangeRaw/utils/parseLabel";
+type TFormFieldDateRange = TFormFieldComponentProps<TDateRangeRaw>;
+export interface IDateRange extends IDateRangeRaw {
 }
-export interface IDateRange extends IDateRangeBase {
-    defaultValue: IDateRangeValue;
-    value: IDateRangeValueOptionalLabel;
-    onChange: (value: IDateRangeValue) => void;
-    allowUnsetValue?: false;
+export interface IDateRangeUnsetValue extends IDateRangeRawUnsetValue {
 }
-export interface IDateRangeUnsetValue extends IDateRangeBase {
-    defaultValue?: IDateRangeValue;
-    value: IDateRangeValueOptionalLabel | undefined;
-    onChange: (value: IDateRangeValue | undefined) => void;
-    allowUnsetValue: true;
-}
-export declare const parseLabel: (option: IDateRangeValue, dateFormat: string, translate: (str: string) => string, toLacalFn: (date: Date | string) => Date) => string;
-export declare const DateRange: React.FC<IDateRange | IDateRangeUnsetValue>;
+export type TDateRange = Omit<TFormFieldDateRange, "counter">;
+export declare const DateRange: FC<TDateRange>;
 export declare const TRANSLATIONS: string[];
-export {};