@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/dist/dateInputInner/dateInputInnerControlBlock.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DateInputInnerControlBlock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -8,27 +14,124 @@ const timePicker_1 = require("../timePicker/timePicker");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const formFieldError_1 = require("../formFieldError/formFieldError");
+injectString("cs", "The time must be set", "Je t\u0159eba nastavit \u010Das.");
+injectString("da-DK", "The time must be set", "Tiden skal indstilles.");
+injectString("de", "The time must be set", "Die Uhrzeit muss festgelegt werden.");
+injectString("en", "The time must be set", "The time must be set.");
+injectString("es", "The time must be set", "Se debe establecer la hora.");
+injectString("fi-FI", "The time must be set", "Aika on asetettava.");
+injectString("fr", "The time must be set", "L'heure doit \xEAtre programm\xE9e.");
+injectString("fr-FR", "The time must be set", "L'heure doit \xEAtre d\xE9finie.");
+injectString("hu-HU", "The time must be set", "Az id\u0151 be\xE1ll\xEDt\xE1sa k\xF6telez\u0151.");
+injectString("id", "The time must be set", "Waktu harus diatur.");
+injectString("it", "The time must be set", "Impostare l'ora.");
+injectString("ja", "The time must be set", "\u6642\u523B\u3092\u8A2D\u5B9A\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002");
+injectString("ko-KR", "The time must be set", "\uC2DC\uAC04\uC744 \uC124\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.");
+injectString("ms", "The time must be set", "Masa mesti ditetapkan.");
+injectString("nb-NO", "The time must be set", "Tiden m\xE5 settes.");
+injectString("nl", "The time must be set", "De tijd moet worden ingesteld.");
+injectString("pl", "The time must be set", "Godzina musi by\u0107 ustawiona.");
+injectString("pt-BR", "The time must be set", "\xC9 necess\xE1rio definir a hora.");
+injectString("sk-SK", "The time must be set", "Mus\xED\u0161 nastavi\u0165 \u010Das.");
+injectString("sv", "The time must be set", "Tiden m\xE5ste anges.");
+injectString("th", "The time must be set", "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E40\u0E27\u0E25\u0E32");
+injectString("tr", "The time must be set", "Saat ayarlanmal\u0131d\u0131r.");
+injectString("zh-Hans", "The time must be set", "\u5FC5\u987B\u8BBE\u5B9A\u65F6\u95F4\u3002");
+injectString("zh-TW", "The time must be set", "\u5FC5\u9808\u8A2D\u5B9A\u6642\u9593");
+injectString("cs", "The date must be set", "Je t\u0159eba nastavit datum.");
+injectString("da-DK", "The date must be set", "Datoen skal indstilles.");
+injectString("de", "The date must be set", "Das Datum muss festgelegt werden.");
+injectString("en", "The date must be set", "The date must be set.");
+injectString("es", "The date must be set", "Se debe establecer la fecha.");
+injectString("fi-FI", "The date must be set", "P\xE4iv\xE4m\xE4\xE4r\xE4 on asetettava.");
+injectString("fr", "The date must be set", "La date doit \xEAtre programm\xE9e.");
+injectString("fr-FR", "The date must be set", "La date doit \xEAtre d\xE9finie.");
+injectString("hu-HU", "The date must be set", "A d\xE1tum be\xE1ll\xEDt\xE1sa k\xF6telez\u0151.");
+injectString("id", "The date must be set", "Tanggal harus diatur.");
+injectString("it", "The date must be set", "Impostare la data.");
+injectString("ja", "The date must be set", "\u65E5\u4ED8\u3092\u8A2D\u5B9A\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002");
+injectString("ko-KR", "The date must be set", "\uB0A0\uC9DC\uB97C \uC124\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.");
+injectString("ms", "The date must be set", "Tarikh mesti ditetapkan.");
+injectString("nb-NO", "The date must be set", "Datoen m\xE5 settes.");
+injectString("nl", "The date must be set", "De datum moet worden ingesteld.");
+injectString("pl", "The date must be set", "Data musi by\u0107 ustawiona.");
+injectString("pt-BR", "The date must be set", "\xC9 necess\xE1rio definir a data.");
+injectString("sk-SK", "The date must be set", "Mus\xED\u0161 nastavi\u0165 d\xE1tum.");
+injectString("sv", "The date must be set", "Datumet m\xE5ste anges.");
+injectString("th", "The date must be set", "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "The date must be set", "Tarih ayarlanmal\u0131d\u0131r.");
+injectString("zh-Hans", "The date must be set", "\u5FC5\u987B\u8BBE\u5B9A\u65E5\u671F\u3002");
+injectString("zh-TW", "The date must be set", "\u5FC5\u9808\u8A2D\u5B9A\u65E5\u671F");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const DateInputInnerControlBlock = (props) => {
-    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText, ref } = props;
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
-    const isHasDateError = requireSelection && !dateText;
-    const isHasTimeError = requireSelection && !timePickerValue;
-    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, 
-                    // 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 })
-                : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-input-inner__inputs-block-item", children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: translate("The date must be set") }) : null] }), memoizedTimeSelect] }), assistiveText ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]), children: assistiveText }) : null] });
+const DateInputInnerControlBlock = props => {
+  const {
+    className,
+    title,
+    id,
+    dateText,
+    timePickerValue,
+    placeholder,
+    handleSetDateText,
+    onBlurDateChangeHandler,
+    requireSelection,
+    selectTime,
+    timeChangeHandler,
+    isMobileView,
+    isActiveField,
+    assistiveText,
+    ref
+  } = props;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
+  const isHasDateError = requireSelection && !dateText;
+  const isHasTimeError = requireSelection && !timePickerValue;
+  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,
+      // 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
+    }) : null, (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-date-input-inner__inputs-block",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-date-input-inner__inputs-block-item",
+        children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+          error: translate("The date must be set")
+        }) : null]
+      }), memoizedTimeSelect]
+    }), assistiveText ? (0, jsx_runtime_1.jsx)("div", {
+      className: (0, classNames_1.classNames)(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]),
+      children: assistiveText
+    }) : null]
+  });
 };
 exports.DateInputInnerControlBlock = DateInputInnerControlBlock;
-exports.TRANSLATIONS = [
-    "The date must be set",
-    "The time must be set"
-];
+exports.TRANSLATIONS = ["The date must be set", "The time must be set"];

package/dist/dateInputRaw/dateInputRaw.js

@@ -1,7 +1,85 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DateInputRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Pick a date", "Vyberte datum");
+injectString("da-DK", "Pick a date", "V\xE6lg en dato");
+injectString("de", "Pick a date", "Datum ausw\xE4hlen");
+injectString("en", "Pick a date", "Pick a date");
+injectString("es", "Pick a date", "Elegir una fecha");
+injectString("fi-FI", "Pick a date", "Valitse p\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "Pick a date", "Choisir une date");
+injectString("fr-FR", "Pick a date", "S\xE9lectionner une date");
+injectString("hu-HU", "Pick a date", "V\xE1lassz d\xE1tumot");
+injectString("id", "Pick a date", "Pilih tanggal");
+injectString("it", "Pick a date", "Scegliere una data");
+injectString("ja", "Pick a date", "\u65E5\u4ED8\u3092\u9078\u629E");
+injectString("ko-KR", "Pick a date", "\uB0A0\uC9DC \uC120\uD0DD");
+injectString("ms", "Pick a date", "Pilih tarikh");
+injectString("nb-NO", "Pick a date", "Velg en dato");
+injectString("nl", "Pick a date", "Kies een datum");
+injectString("pl", "Pick a date", "Wybierz dat\u0119");
+injectString("pt-BR", "Pick a date", "Escolha uma data");
+injectString("sk-SK", "Pick a date", "Vyber d\xE1tum");
+injectString("sv", "Pick a date", "V\xE4lj ett datum");
+injectString("th", "Pick a date", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "Pick a date", "Bir tarih se\xE7in");
+injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
+injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
 const iconCalendar_1 = require("../icons/iconCalendar");
@@ -26,109 +104,242 @@ 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 });
+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);
     }
-    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] });
+  }, [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"
-];
+exports.TRANSLATIONS = ["Pick a date", "Clear", "Apply", "Today"];