@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/dateInput/dateInput.js

@@ -1,117 +1,24 @@
-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";
-import { IconCalendar } from "../icons/iconCalendar";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { ButtonType } from "../button/buttonType";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { userFormatContext } from "../utils/userFormat/userFormatContext";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
-import { deformatDate, formatDate } from "../utils/formatDate";
-import { ControlledPopup } from "../controlledPopup/controlledPopup";
-import { DateInputInner } from "../dateInputInner/dateInputInner";
-import { cutSeconds } from "./cutSeconds";
-import { getLabel } from "./getLabel";
-import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { FormFieldError } from "../formFieldError/formFieldError";
-import { FooterButtons } from "../footerButtons/footerButtons";
-import { MobileSheet } from "../mobileSheet/mobileSheet";
-import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { Chip } from "../chip/chip";
-import { useChipStatus } from "../chip/chipStatusProvider";
-export 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 } = 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(defaultValue) === cutSeconds(customDate), [defaultValue, customDate]);
-    const isValueState = useMemo(() => cutSeconds(value) === cutSeconds(customDate), [value, customDate]);
-    const componentId = useUniqueId();
-    const cssClass = classNames([
-        "zen-date-input",
-        error ? "zen-date-input--error" : "",
-        className !== null && className !== void 0 ? className : "",
-        !value || cutSeconds(defaultValue) === 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, timeSelect, translate, toLocalDateTime, buttonLabel]);
-    useEffect(() => {
-        if (prevValue !== value) {
-            setPrevValue(value);
+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]];
         }
-    }, [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(defaultValue);
-    }, [defaultValue]);
-    const handleClearAndApply = useCallback(() => {
-        setCustomDate(defaultValue);
-        setIsOpen(false);
-        onChange(defaultValue);
-    }, [defaultValue, 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]);
-    return _jsxs(_Fragment, { children: [chip ? chipTriggerComponent : _jsx(TextIconButton, { id: id || undefined, htmlType: "button", title: buttonCurrentTitle, icon: IconCalendar, iconPosition: ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: buttonCurrentLabel }), isMobile ? memoizedMobileView : memoizedDesktopView, _jsx(FormFieldError, { error: error })] });
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from "../formField/formField";
+import { DateInputRaw } from "../dateInputRaw/dateInputRaw";
+import { TRANSLATIONS as DateInputRawTranslations } from "../dateInputRaw/dateInputRaw";
+const DateInputFormField = FormField(DateInputRaw);
+// TODO: add tests
+export const DateInput = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(DateInputFormField, Object.assign({}, props));
 };
 export const TRANSLATIONS = [
-    "Pick a date",
-    "Clear",
-    "Apply",
-    "Today"
+    ...DateInputRawTranslations
 ];

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -15,7 +15,10 @@ export const DateInputInnerControlBlock = (props) => {
     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, dataTimeId: id }), isHasTimeError ? _jsx(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 ? _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 })

package/esm/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/esm/dateInputRaw/dateInputRaw.js

@@ -0,0 +1,130 @@
+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";
+import { IconCalendar } from "../icons/iconCalendar";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ButtonType } from "../button/buttonType";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { userFormatContext } from "../utils/userFormat/userFormatContext";
+import { useUniqueId } from "../commonHelpers/useUniqueId";
+import { deformatDate, formatDate } from "../utils/formatDate";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { DateInputInner } from "../dateInputInner/dateInputInner";
+import { cutSeconds } from "./utils/cutSeconds";
+import { getLabel } from "./utils/getLabel";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { isFormItem } from "../commonHelpers/isFormItem";
+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 });
+    }
+    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"
+];

package/esm/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/esm/{dateInput → dateInputRaw/utils}/getLabel.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../utils/formatDate";
+import { formatDate } from "../../utils/formatDate";
 export const getLabel = (value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, buttonTitle) => {
     if (!value) {
         return buttonLabel ? buttonLabel : translate("Pick a date");

package/esm/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 {};