@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
@@ -6,25 +7,122 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { FormFieldError } from "../formFieldError/formFieldError";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const DateInputInnerControlBlock = (props) => {
-    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText, ref } = props;
-    const { translate } = useLanguage();
-    const driveAssistiveClass = useDriveClassName("zen-form-field__text");
-    const isHasDateError = requireSelection && !dateText;
-    const isHasTimeError = requireSelection && !timePickerValue;
-    const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, { className: 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 = useMemo(() => selectTime
-        ? _jsxs("div", { className: "zen-date-input-inner__inputs-block-item", children: [_jsx(TimePicker, { className: 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 ? _jsx(FormFieldError, { error: translate("The time must be set") }) : null] })
-        : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
-    return _jsxs("div", { className: classNames(["zen-date-input-inner__control-block", className || ""]), children: [title
-                ? _jsx("label", { htmlFor: id, className: "zen-date-input-inner__label", children: title })
-                : null, _jsxs("div", { className: "zen-date-input-inner__inputs-block", children: [_jsxs("div", { className: "zen-date-input-inner__inputs-block-item", children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, { error: translate("The date must be set") }) : null] }), memoizedTimeSelect] }), assistiveText ? _jsx("div", { className: classNames(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]), children: assistiveText }) : null] });
+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");
+export const DateInputInnerControlBlock = props => {
+  const {
+    className,
+    title,
+    id,
+    dateText,
+    timePickerValue,
+    placeholder,
+    handleSetDateText,
+    onBlurDateChangeHandler,
+    requireSelection,
+    selectTime,
+    timeChangeHandler,
+    isMobileView,
+    isActiveField,
+    assistiveText,
+    ref
+  } = props;
+  const {
+    translate
+  } = useLanguage();
+  const driveAssistiveClass = useDriveClassName("zen-form-field__text");
+  const isHasDateError = requireSelection && !dateText;
+  const isHasTimeError = requireSelection && !timePickerValue;
+  const memoizedDateInput = useMemo(() => _jsx(TextInputRaw, {
+    className: 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 = useMemo(() => selectTime ? _jsxs("div", {
+    className: "zen-date-input-inner__inputs-block-item",
+    children: [_jsx(TimePicker, {
+      className: 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 ? _jsx(FormFieldError, {
+      error: translate("The time must be set")
+    }) : null]
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
+  return _jsxs("div", {
+    className: classNames(["zen-date-input-inner__control-block", className || ""]),
+    children: [title ? _jsx("label", {
+      htmlFor: id,
+      className: "zen-date-input-inner__label",
+      children: title
+    }) : null, _jsxs("div", {
+      className: "zen-date-input-inner__inputs-block",
+      children: [_jsxs("div", {
+        className: "zen-date-input-inner__inputs-block-item",
+        children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, {
+          error: translate("The date must be set")
+        }) : null]
+      }), memoizedTimeSelect]
+    }), assistiveText ? _jsx("div", {
+      className: classNames(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]),
+      children: assistiveText
+    }) : null]
+  });
 };
-export const TRANSLATIONS = [
-    "The date must be set",
-    "The time must be set"
-];
+export const TRANSLATIONS = ["The date must be set", "The time must be set"];

package/esm/dateInputRaw/dateInputRaw.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { Button } from "../button/button";
@@ -23,108 +24,313 @@ import { Chip } from "../chip/chip";
 import { useChipStatus } from "../chip/chipStatusProvider";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
-export 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 } = useFormFieldValues(props.controller, props);
-    const isFormItemVal = isFormItem(props);
-    const accessibilityProps = getAriaAttributes(props);
-    const defaultValueInner = isFormItemVal ? (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue : defaultValue;
-    const { translate } = useLanguage();
-    const isMobile = useMobile();
-    const chipStatus = useChipStatus();
-    const drivePopupClassName = useDriveClassName("zen-date-input-popup");
-    const driveWrapperClassName = useDriveClassName("zen-date-input-popup-wrapper");
-    const { dateFormat, timeFormat, weekStartsOnSunday, toLocalDateTime } = useContext(userFormatContext);
-    const dateFormatter = useCallback((d) => formatDate(toLocalDateTime(d), dateFormat, translate), [dateFormat, toLocalDateTime, translate]);
-    const dateDeformatter = useCallback((d) => deformatDate(d, dateFormat, translate) || new Date(""), [dateFormat, translate]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [renderContent, setRenderContent] = useState(false);
-    const prevIsOpenRef = useRef(false);
-    const [customDate, setCustomDate] = useState(value);
-    const triggerRef = useRef(null);
-    const [prevValue, setPrevValue] = useState(value);
-    const isDefaultState = useMemo(() => cutSeconds(defaultValueInner) === cutSeconds(customDate), [defaultValueInner, customDate]);
-    const isValueState = useMemo(() => cutSeconds(value) === cutSeconds(customDate), [value, customDate]);
-    const componentId = useUniqueId();
-    const cssClass = classNames([
-        "zen-date-input",
-        className !== null && className !== void 0 ? className : "",
-        error ? "zen-date-input--error" : "",
-        !value || cutSeconds(defaultValueInner) === cutSeconds(value) ? "" : "zen-date-input--active"
-    ]);
-    const title = useMemo(() => dropDownTitle || translate("Pick a date"), [dropDownTitle, translate]);
-    const toggleVisibility = useCallback(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
-    const getButtonLabel = useCallback((getTitle) => getLabel(value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, getTitle), [value, dateFormat, timeFormat, translate, toLocalDateTime, buttonLabel, timeSelect]);
-    useEffect(() => {
-        if (prevValue !== value) {
-            setPrevValue(value);
-        }
-    }, [prevValue, value]);
-    const onCalendarChange = useCallback((val) => {
-        setCustomDate(val.from);
-    }, []);
-    const handleRangeSelection = useCallback(() => {
-        const newState = customDate;
-        setPrevValue(newState);
-        onChange(newState);
-        setCustomDate(newState);
-        setIsOpen(false);
-    }, [customDate, onChange]);
-    const handleApplyClick = useCallback(() => {
-        setIsOpen(false);
-        handleRangeSelection();
-    }, [handleRangeSelection]);
-    const handleClearClick = useCallback(() => {
-        setCustomDate(defaultValueInner);
-    }, [defaultValueInner]);
-    const handleClearAndApply = useCallback(() => {
-        setCustomDate(defaultValueInner);
-        setIsOpen(false);
-        onChange(defaultValue);
-    }, [defaultValue, defaultValueInner, onChange]);
-    useEffect(() => {
-        setCustomDate(value);
-    }, [value]);
-    const memoizedHandleClose = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-    const onReadyForFocus = useCallback((isCurrentOpen) => {
-        if (!isMobile) {
-            return;
-        }
-        if (isCurrentOpen) {
-            setRenderContent(true);
-            return;
-        }
-        setRenderContent(false);
-        prevIsOpenRef.current = isCurrentOpen;
-    }, [isMobile]);
-    const component = useMemo(() => _jsx("div", { className: "zen-date-input-inner__calendar-wrapper", children: _jsx(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 = useMemo(() => _jsx(ControlledPopup, { className: 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: _jsxs("div", { className: classNames(["zen-date-input-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]), children: [_jsx("div", { className: "zen-date-input-popup__header", children: title }), component, _jsxs("div", { className: "zen-date-input-popup__footer", children: [_jsx(Button, { className: "zen-date-input-popup__button-clear", type: ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") }), _jsx(Button, { className: "zen-date-input-popup__button-apply", type: 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 = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { type: ButtonType.Primary, disabled: isValueState || (requireSelection && !customDate), onClick: handleApplyClick, children: translate("Apply") }), _jsx(Button, { type: ButtonType.Tertiary, disabled: isDefaultState, onClick: handleClearClick, children: translate("Clear") })] }), [customDate, handleApplyClick, handleClearClick, isDefaultState, isValueState, requireSelection, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { className: 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: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderContent ? component : null }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
-    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 = useMemo(() => _jsx(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, 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 _jsx(ReviewTextControl, { value: readOnlyValue });
+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");
+export 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
+  } = useFormFieldValues(props.controller, props);
+  const isFormItemVal = isFormItem(props);
+  const accessibilityProps = getAriaAttributes(props);
+  const defaultValueInner = isFormItemVal ? (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue : defaultValue;
+  const {
+    translate
+  } = useLanguage();
+  const isMobile = useMobile();
+  const chipStatus = useChipStatus();
+  const drivePopupClassName = useDriveClassName("zen-date-input-popup");
+  const driveWrapperClassName = useDriveClassName("zen-date-input-popup-wrapper");
+  const {
+    dateFormat,
+    timeFormat,
+    weekStartsOnSunday,
+    toLocalDateTime
+  } = useContext(userFormatContext);
+  const dateFormatter = useCallback(d => formatDate(toLocalDateTime(d), dateFormat, translate), [dateFormat, toLocalDateTime, translate]);
+  const dateDeformatter = useCallback(d => deformatDate(d, dateFormat, translate) || new Date(""), [dateFormat, translate]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [renderContent, setRenderContent] = useState(false);
+  const prevIsOpenRef = useRef(false);
+  const [customDate, setCustomDate] = useState(value);
+  const triggerRef = useRef(null);
+  const [prevValue, setPrevValue] = useState(value);
+  const isDefaultState = useMemo(() => cutSeconds(defaultValueInner) === cutSeconds(customDate), [defaultValueInner, customDate]);
+  const isValueState = useMemo(() => cutSeconds(value) === cutSeconds(customDate), [value, customDate]);
+  const componentId = useUniqueId();
+  const cssClass = classNames(["zen-date-input", className !== null && className !== void 0 ? className : "", error ? "zen-date-input--error" : "", !value || cutSeconds(defaultValueInner) === cutSeconds(value) ? "" : "zen-date-input--active"]);
+  const title = useMemo(() => dropDownTitle || translate("Pick a date"), [dropDownTitle, translate]);
+  const toggleVisibility = useCallback(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
+  const getButtonLabel = useCallback(getTitle => getLabel(value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, getTitle), [value, dateFormat, timeFormat, translate, toLocalDateTime, buttonLabel, timeSelect]);
+  useEffect(() => {
+    if (prevValue !== value) {
+      setPrevValue(value);
     }
-    return _jsxs(_Fragment, { children: [chip ? chipTriggerComponent : _jsx(TextIconButton, Object.assign({ id: id || undefined, name: name, onBlur: onBlur, htmlType: "button", title: buttonCurrentTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef }, accessibilityProps, { children: buttonCurrentLabel })), isMobile ? memoizedMobileView : memoizedDesktopView] });
+  }, [prevValue, value]);
+  const onCalendarChange = useCallback(val => {
+    setCustomDate(val.from);
+  }, []);
+  const handleRangeSelection = useCallback(() => {
+    const newState = customDate;
+    setPrevValue(newState);
+    onChange(newState);
+    setCustomDate(newState);
+    setIsOpen(false);
+  }, [customDate, onChange]);
+  const handleApplyClick = useCallback(() => {
+    setIsOpen(false);
+    handleRangeSelection();
+  }, [handleRangeSelection]);
+  const handleClearClick = useCallback(() => {
+    setCustomDate(defaultValueInner);
+  }, [defaultValueInner]);
+  const handleClearAndApply = useCallback(() => {
+    setCustomDate(defaultValueInner);
+    setIsOpen(false);
+    onChange(defaultValue);
+  }, [defaultValue, defaultValueInner, onChange]);
+  useEffect(() => {
+    setCustomDate(value);
+  }, [value]);
+  const memoizedHandleClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const onReadyForFocus = useCallback(isCurrentOpen => {
+    if (!isMobile) {
+      return;
+    }
+    if (isCurrentOpen) {
+      setRenderContent(true);
+      return;
+    }
+    setRenderContent(false);
+    prevIsOpenRef.current = isCurrentOpen;
+  }, [isMobile]);
+  const component = useMemo(() => _jsx("div", {
+    className: "zen-date-input-inner__calendar-wrapper",
+    children: _jsx(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 = useMemo(() => _jsx(ControlledPopup, {
+    className: 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: _jsxs("div", {
+      className: classNames(["zen-date-input-popup", drivePopupClassName || "", classNamePopup !== null && classNamePopup !== void 0 ? classNamePopup : ""]),
+      children: [_jsx("div", {
+        className: "zen-date-input-popup__header",
+        children: title
+      }), component, _jsxs("div", {
+        className: "zen-date-input-popup__footer",
+        children: [_jsx(Button, {
+          className: "zen-date-input-popup__button-clear",
+          type: ButtonType.Tertiary,
+          disabled: isDefaultState,
+          onClick: handleClearClick,
+          children: translate("Clear")
+        }), _jsx(Button, {
+          className: "zen-date-input-popup__button-apply",
+          type: 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 = useMemo(() => _jsxs(FooterButtons, {
+    children: [_jsx(Button, {
+      type: ButtonType.Primary,
+      disabled: isValueState || requireSelection && !customDate,
+      onClick: handleApplyClick,
+      children: translate("Apply")
+    }), _jsx(Button, {
+      type: ButtonType.Tertiary,
+      disabled: isDefaultState,
+      onClick: handleClearClick,
+      children: translate("Clear")
+    })]
+  }), [customDate, handleApplyClick, handleClearClick, isDefaultState, isValueState, requireSelection, translate]);
+  const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
+    className: 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: [_jsx(MobileSheet.Title, {
+      children: title
+    }), _jsx(MobileSheet.Content, {
+      children: renderContent ? component : null
+    }), _jsx(MobileSheet.Footer, {
+      children: memoizedMobileFooter
+    })]
+  }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
+  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 = useMemo(() => _jsx(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,
+    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 _jsx(ReviewTextControl, {
+      value: readOnlyValue
+    });
+  }
+  return _jsxs(_Fragment, {
+    children: [chip ? chipTriggerComponent : _jsx(TextIconButton, Object.assign({
+      id: id || undefined,
+      name: name,
+      onBlur: onBlur,
+      htmlType: "button",
+      title: buttonCurrentTitle,
+      icon: IconCalendar,
+      iconPosition: ButtonIconPosition.Start,
+      className: cssClass,
+      disabled: disabled,
+      onClick: toggleVisibility,
+      ref: triggerRef
+    }, accessibilityProps, {
+      children: buttonCurrentLabel
+    })), isMobile ? memoizedMobileView : memoizedDesktopView]
+  });
 };
-export const TRANSLATIONS = [
-    "Pick a date",
-    "Clear",
-    "Apply",
-    "Today"
-];
+export const TRANSLATIONS = ["Pick a date", "Clear", "Apply", "Today"];

package/esm/dateInputRaw/utils/getLabel.js

@@ -1,8 +1,34 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { formatDate } from "../../utils/formatDate";
+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("en", "Date filter:", "Date filter:");
 export const getLabel = (value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, buttonTitle) => {
-    if (!value) {
-        return buttonLabel ? buttonLabel : translate("Pick a date");
-    }
-    const format = timeSelect ? `${dateFormat} ${timeFormat}` : dateFormat;
-    return buttonTitle ? `${translate("Date filter:")} ${formatDate(toLocalDateTime(value), format, translate)}` : formatDate(toLocalDateTime(value), format, translate);
-};
+  if (!value) {
+    return buttonLabel ? buttonLabel : translate("Pick a date");
+  }
+  const format = timeSelect ? `${dateFormat} ${timeFormat}` : dateFormat;
+  return buttonTitle ? `${translate("Date filter:")} ${formatDate(toLocalDateTime(value), format, translate)}` : formatDate(toLocalDateTime(value), format, translate);
+};