@geotab/zenith 1.15.4 → 1.17.0-beta.0

package/dist/selectRaw/selectRaw.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { IListState } from "../selectList/selectList";
+import { ISelectListItem } from "../selectList/selectListItem";
+import "./selectRaw.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ISelectRaw extends IZenComponentProps {
+    id?: string;
+    title: string;
+    pageSize?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    items: ISelectListItem[];
+    value?: string;
+    classNamePopup?: string;
+    /**
+    * @deprecated
+    * @param maxPopupHeight - will be removed in the next major release
+    */
+    maxPopupHeight?: number;
+    isError?: boolean;
+    onChange?: (id: string | undefined) => void;
+}
+export interface ISelectStateRaw extends IListState {
+    expanded: boolean;
+}
+export interface ISelectStatePropsRaw {
+    items: ISelectListItem[];
+    value?: string;
+}
+export declare const SelectRaw: React.ForwardRefExoticComponent<ISelectRaw & React.RefAttributes<HTMLDivElement>>;

package/dist/selectRaw/selectRaw.js

@@ -0,0 +1,151 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const checkboxState_1 = require("../checkbox/checkboxState");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const keyboard_1 = require("../commonHelpers/keyboard");
+const selectList_1 = require("../selectList/selectList");
+const selectList_actionTypes_1 = require("../selectList/selectList.actionTypes");
+const select_actionTypes_1 = require("./select.actionTypes");
+const select_reducer_1 = require("./select.reducer");
+const select_helpers_1 = require("./select.helpers");
+const isChildOf_1 = require("../utils/isChildOf");
+const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
+const absolute_1 = require("../absolute/absolute");
+// get default active item (based on items array)
+const getItemById = (items, id) => items.find(item => item.id === id);
+const closedListActionGetters = {
+    "ArrowDown": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "Alt+ArrowDown": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "ArrowUp": (items) => ({ type: select_actionTypes_1.SelectAction.FocusFirstAndExpand, payload: { items } }),
+    "Enter": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "Space": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "Home": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "End": (items) => ({ type: select_actionTypes_1.SelectAction.Expand, payload: { items } }),
+    "default": (items, e) => ({ type: select_actionTypes_1.SelectAction.SearchAndExpand, payload: { items, key: e.key } })
+};
+const openListActionGetters = {
+    "Enter": () => ({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Space": () => ({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Tab": () => ({ type: selectList_actionTypes_1.ListAction.Blur, payload: { multiselect: false } }),
+    "Escape": () => ({ type: select_actionTypes_1.SelectAction.Collapse, payload: {} }),
+    "ArrowDown": (items) => ({ type: selectList_actionTypes_1.ListAction.FocusNext, payload: { items } }),
+    "ArrowUp": (items) => ({ type: selectList_actionTypes_1.ListAction.FocusPrev, payload: { items } }),
+    "Alt+ArrowUp": () => ({ type: selectList_actionTypes_1.ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    "Home": (items) => ({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } }),
+    "End": (items) => ({ type: selectList_actionTypes_1.ListAction.FocusLast, payload: { items } }),
+    "PageUp": (items, _, pageSize) => ({ type: selectList_actionTypes_1.ListAction.FocusPrevPage, payload: { items, pageSize } }),
+    "PageDown": (items, _, pageSize) => ({ type: selectList_actionTypes_1.ListAction.FocusNextPage, payload: { items, pageSize } }),
+    "default": (items, e) => ({ type: selectList_actionTypes_1.ListAction.SearchItem, payload: { items, key: e.key } })
+};
+const PassiveSelectListComp = react_1.default.memo(selectList_1.PassiveSelectList);
+exports.SelectRaw = react_1.default.forwardRef((props, selectRef) => {
+    var _a;
+    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange } = props;
+    const items = react_1.default.useMemo(() => outerItems, [outerItems]);
+    const [state, dispatchState] = react_1.default.useReducer(select_reducer_1.selectReducer, { items, value: outerValue }, select_helpers_1.getSelectInitialState);
+    const value = (0, select_helpers_1.getSelectValue)(state.itemsState, items);
+    const innerTriggerRef = react_1.default.useRef(null);
+    const ref = react_1.default.useRef(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const onPopupVisibilityChange = (0, react_1.useCallback)(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const collapsePopup = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+    }, []);
+    react_1.default.useImperativeHandle(selectRef, () => innerTriggerRef.current, []);
+    const listId = react_1.default.useId();
+    const classes = (0, classNames_1.classNames)(["zen-select zen-text-input-layout", disabled ? "zen-select--disabled" : "", className || ""]);
+    const text = value ? (_a = getItemById(items, value)) === null || _a === void 0 ? void 0 : _a.children : placeholder;
+    // Reset state when value changed
+    react_1.default.useEffect(() => {
+        const itemsValue = (0, select_helpers_1.getSelectInitialState)({ items, value: outerValue }).itemsState;
+        dispatchState({ type: selectList_actionTypes_1.ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
+    }, [outerValue, items]);
+    react_1.default.useEffect(() => {
+        if (state.activeIndex >= 0 && document.activeElement && ref.current && (0, isChildOf_1.isChildOf)(document.activeElement, ref.current)) {
+            const itemEl = ref.current.querySelector(`.zen-list__item:nth-child(${state.activeIndex + 1})`);
+            itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+        }
+    }, [state.activeIndex]);
+    function onBlur(e) {
+        if (!innerTriggerRef.current || !state.expanded || disabled) {
+            return;
+        }
+        if (!e.relatedTarget || !(0, isChildOf_1.isChildOf)(e.relatedTarget, innerTriggerRef.current.parentElement)) {
+            dispatchState({ type: select_actionTypes_1.SelectAction.CollapseAndSelect, payload: { items: items } });
+            return;
+        }
+        innerTriggerRef.current.focus();
+        return;
+    }
+    const onChangeItem = react_1.default.useCallback((updatedId, updatedState) => {
+        if (disabled) {
+            return;
+        }
+        onPopupVisibilityChange();
+        dispatchState({ type: selectList_actionTypes_1.ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect: false } });
+    }, [disabled, onPopupVisibilityChange]);
+    const onTriggerKeyDown = (e) => {
+        if (disabled) {
+            return;
+        }
+        const handlerName = (0, keyboard_1.getKeysPressed)(e);
+        const getAction = !state.expanded
+            ? closedListActionGetters[handlerName] || ((0, keyboard_1.isKeyForSearch)(e.code) && closedListActionGetters["default"])
+            : openListActionGetters[handlerName] || ((0, keyboard_1.isKeyForSearch)(e.code) && openListActionGetters["default"]);
+        if (getAction) {
+            dispatchState(getAction(items, e, pageSize));
+            if (e.code !== "Tab") {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.code === "Enter" || e.code === "Space") {
+                onPopupVisibilityChange();
+            }
+            if (e.code === "Escape") {
+                collapsePopup();
+            }
+        }
+    };
+    const popupId = (0, react_1.useId)();
+    react_1.default.useEffect(() => {
+        if (disabled || !state.isItemsStateChanged || !onChange) {
+            return;
+        }
+        onChange(value);
+    }, [state.isItemsStateChanged, value, disabled, onChange]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: classes, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { "aria-controls": listId, "aria-expanded": state.expanded, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: (0, classNames_1.classNames)([
+                    "zen-select__trigger",
+                    "zen-text-input",
+                    isError ? "zen-text-input--error" : "",
+                    "zen-caption zen-caption--full-width"
+                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": state.activeIndex > -1 ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlur, ref: innerTriggerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { className: (0, classNames_1.classNames)(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: (0, jsx_runtime_1.jsx)(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem }) })] });
+});
+exports.SelectRaw.displayName = "SelectRaw";

package/dist/sortControl/sortControl.js

@@ -49,7 +49,7 @@ const SortControl = ({ buttonText = "Sort by", id = "", sortBy, onChange, sortDi
     return (0, jsx_runtime_1.jsxs)("div", { id: id, className: (0, classNames_1.classNames)(["zen-sort-container", driveComponentClassName || ""]), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-sort-container__button", isSingleItem ? "" : "zen-sort-container__button--left-item"]), onClick: () => onSortDirectionToggle(), disabled: disabled, title: translate("Change sort direction"), "aria-label": translate("Change sort direction"), children: [directionIcon
                         ? sortDirection === SortDirections.Ascending
                             ? (0, jsx_runtime_1.jsx)(iconFilter3Asc_1.IconFilter3Asc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" })
-                            : (0, jsx_runtime_1.jsx)(iconFilter3Desc_1.IconFilter3Desc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsxs)("span", { className: "zen-sort-container__text-block", children: [(0, jsx_runtime_1.jsxs)("span", { children: [translate(buttonText), ": "] }), (0, jsx_runtime_1.jsx)("span", { children: (items.find((item) => item.id === sortBy) || items[0]).children })] })] }), isSingleItem
+                            : (0, jsx_runtime_1.jsx)(iconFilter3Desc_1.IconFilter3Desc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsxs)("span", { className: "zen-sort-container__text-block", children: [buttonText && (0, jsx_runtime_1.jsxs)("span", { children: [buttonText, ": "] }), (0, jsx_runtime_1.jsx)("span", { children: (items.find((item) => item.id === sortBy) || items[0]).children })] })] }), isSingleItem
                 ? ""
                 : (0, jsx_runtime_1.jsx)(popup_1.Popup, { trigger: ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-sort-container__button zen-sort-container__button--small zen-sort-container__button--right-item", disabled: disabled, title: translate("Sort by"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpen ? "zen-sort-container__arrow-icon--up" : "zen-sort-container__arrow-icon--down", size: isDrive ? "huge" : "large" }) })), alignment: MENU_POSITION, onOpenChange: (isCurrentlyOpen) => onOptionsToggle(isCurrentlyOpen), children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: "sortControlSelectList", title: translate("Sort Options"), onChange: (itemMap) => onOptionChange(itemMap), items: [...items.reduce((acc, obj) => acc.set(obj.id, Object.assign(Object.assign({}, obj), { state: obj.id === sortBy ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off })), new Map()).values()] }) }, popupKey)] });
 };

package/dist/table/loading/useLoading.js

@@ -7,7 +7,7 @@ const generateId_1 = require("../../commonHelpers/generateId");
 const defaultColumnComponent_1 = require("../../dataGrid/extensions/defaultColumnComponent");
 const skeleton_1 = require("../../skeleton/skeleton");
 exports.DEFAULT_LOADING_ROWS = 50;
-const LoadingCell = () => (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "zen-table__cell-loading" });
+const LoadingCell = ({ width, className }) => (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: width, className: className });
 const useLoading = (columns, entities, isLoading, loading) => {
     const sampleEntity = (0, react_1.useMemo)(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
     const generateLoadingEntities = (0, react_1.useCallback)(() => (new Array((loading === null || loading === void 0 ? void 0 : loading.rows) || exports.DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: (0, generateId_1.generateId)() }))), [loading === null || loading === void 0 ? void 0 : loading.rows, sampleEntity]);
@@ -19,16 +19,17 @@ const useLoading = (columns, entities, isLoading, loading) => {
                 columnComponent.renderHeader.call(columnComponent, title),
                 columnComponent.render.call(columnComponent, entity)
             ]);
-        return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { renderPlaceholder: () => (0, jsx_runtime_1.jsx)(LoadingCell, {}), renderFeedPlaceholder: (_) => [
-                    (0, jsx_runtime_1.jsx)(LoadingCell, {}, `${column.id}_label`),
-                    (0, jsx_runtime_1.jsx)(LoadingCell, {}, `${column.id}_value`)
+        const loadingClassName = "zen-table__cell-loading";
+        return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { renderPlaceholder: () => (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }), renderFeedPlaceholder: (_) => [
+                    (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }, `${column.id}_label`),
+                    (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }, `${column.id}_value`)
                 ] }), columnComponent: {
-                render: (entity) => entity.isLoading ? (0, jsx_runtime_1.jsx)(LoadingCell, {}) : columnComponent.render(entity),
+                render: (entity) => entity.isLoading ? (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }) : columnComponent.render(entity),
                 renderHeader: (title) => columnComponent.renderHeader(title),
                 renderFeed: (title, entity) => entity.isLoading
                     ? [
-                        (0, jsx_runtime_1.jsx)(LoadingCell, {}, `${column.id}_${entity.id}_label`),
-                        (0, jsx_runtime_1.jsx)(LoadingCell, {}, `${column.id}_${entity.id}_value`)
+                        (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }, `${column.id}_${entity.id}_label`),
+                        (0, jsx_runtime_1.jsx)(LoadingCell, { className: loadingClassName }, `${column.id}_${entity.id}_value`)
                     ]
                     : renderFeed(title, entity)
             } });

package/dist/textareaRaw/textareaRaw.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "../textInputRaw/textInputRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import "./textareaRaw.less";
 export interface ITextareaRaw extends IZenComponentProps {
     id?: string;
     value: string;

package/dist/timePicker/timePicker.d.ts

@@ -12,6 +12,7 @@ export interface ITimePicker extends IZenComponentProps {
     */
     translate?: (key: string) => string;
     isMobileView?: boolean;
+    dataTimeId?: string;
 }
 export declare const TimePicker: React.FC<ITimePicker>;
 export declare const TRANSLATIONS: string[];

package/dist/timePicker/timePicker.js

@@ -13,7 +13,7 @@ const timePickerUtils_1 = require("./timePickerUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const hours = (0, timePickerUtils_1.getSelectItemsForTimePicker)(23);
 const minutes = (0, timePickerUtils_1.getSelectItemsForTimePicker)(59);
-const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileView }) => {
+const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileView, dataTimeId }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const classes = (0, classNames_1.classNames)(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
     const innerTriggerRef = (0, react_1.useRef)(null);
@@ -42,13 +42,13 @@ const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileV
             setTimeValue({ hour: hourValue, minutes: minutesValue });
         }
     }, [hourValue, isOpen, minutesValue]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, { ref: innerTriggerRef, className: className, onClick: () => {
+    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: innerTriggerRef, className: className, onClick: () => {
                     setIsOpen(!isOpen);
-                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth, children: `${hourValue || "24"}:${minutesValue || "00"}` }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobileView ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
+                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), { children: `${hourValue || "24"}:${minutesValue || "00"}` })), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobileView ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
                                         setTimeValue(Object.assign(Object.assign({}, timeValue), { hour: newHourValue }));
                                     } }), (0, jsx_runtime_1.jsx)("div", { className: "zen-time-picker-select__separator" }), (0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select minutes"), selected: timeValue.minutes, items: minutes, onSelect: (newMinutesValue) => {
                                         setTimeValue(Object.assign(Object.assign({}, timeValue), { minutes: newMinutesValue }));
-                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, onClick: onCancelHandler, title: translate("Cancel changes"), className: "zen-time-picker-select__footer-button", children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") })] })] }) })] });
+                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__footer", children: [isMobileView ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, onClick: onCancelHandler, title: translate("Cancel changes"), className: "zen-time-picker-select__footer-button", children: translate("Cancel") }), isMobileView ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") })] })] }) })] });
 };
 exports.TimePicker = TimePicker;
 exports.TRANSLATIONS = [

package/dist/utils/dateInputUtils/useTodayButton.d.ts

@@ -0,0 +1,5 @@
+export declare const useTodayButton: (dateRangeMode?: boolean, disableFutureDates?: boolean, disablePastDates?: boolean, disableDatesBefore?: string, disableDatesAfter?: string) => {
+    isTodayDisabled: boolean;
+    todayFrom: string;
+    todayTo: string;
+};

package/dist/utils/dateInputUtils/useTodayButton.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTodayButton = void 0;
+const react_1 = require("react");
+const dateRangeUtils_1 = require("../../dateRange/dateRangeUtils");
+const userFormatContext_1 = require("../userFormat/userFormatContext");
+const normalizeDates_1 = require("../../filtersBar/components/filtersBarPeriodPicker/normalizeDates");
+const useTodayButton = (dateRangeMode, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter) => {
+    const { toLocalDateTime, toReverseOffsetDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const today = (0, dateRangeUtils_1.GET_TODAY_OPTION)(toLocalDateTime, (s) => s, toReverseOffsetDateTime).getRange();
+    const normalizedDates = (0, normalizeDates_1.normalizeDates)(today.from.toISOString(), today.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+    const isTodayDisabled = (0, react_1.useMemo)(() => dateRangeMode ? today.from.toISOString() !== normalizedDates.from && today.to.toISOString() !== normalizedDates.to
+        : !(new Date(normalizedDates.from).getTime() >= today.from.getTime() && new Date(normalizedDates.from).getTime() <= today.to.getTime()), [dateRangeMode, normalizedDates.from, normalizedDates.to, today.from, today.to]);
+    return { isTodayDisabled, todayFrom: normalizedDates.from, todayTo: normalizedDates.to };
+};
+exports.useTodayButton = useTodayButton;

package/dist/utils/localization/translations/cs-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/cs-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Je třeba nastavit datum.",
     "The time must be set": "Je třeba nastavit čas.",
     "Reset column settings": "Obnovit nastavení sloupce",
-    "Filters": "Filtry"
+    "Filters": "Filtry",
+    "Ma": "Kvě"
 };

package/dist/utils/localization/translations/de-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/de-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Das Datum muss festgelegt werden.",
     "The time must be set": "Die Uhrzeit muss festgelegt werden.",
     "Reset column settings": "Spalteneinstellungen zurücksetzen",
-    "Filters": "Filter"
+    "Filters": "Filter",
+    "Ma": "Mai"
 };

package/dist/utils/localization/translations/en-json.d.ts

@@ -204,4 +204,23 @@ export declare const translations: {
     "Selecting...": string;
     "Reset column settings": string;
     Filters: string;
+    "Start date has been adjusted.": string;
+    "End date has been adjusted.": string;
+    "Start time has been adjusted.": string;
+    "End time has been adjusted.": string;
+    Jan: string;
+    Feb: string;
+    Mar: string;
+    Apr: string;
+    Jun: string;
+    Jul: string;
+    Aug: string;
+    Sep: string;
+    Oct: string;
+    Nov: string;
+    Dec: string;
+    "This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements.": string;
+    "Send feedback": string;
+    "Manage beta option": string;
+    Ma: string;
 };

package/dist/utils/localization/translations/en-json.js

@@ -206,5 +206,24 @@ exports.translations = {
     "The time must be set": "The time must be set.",
     "Selecting...": "Selecting...",
     "Reset column settings": "Reset column settings",
-    "Filters": "Filters"
+    "Filters": "Filters",
+    "Start date has been adjusted.": "Start date has been adjusted.",
+    "End date has been adjusted.": "End date has been adjusted.",
+    "Start time has been adjusted.": "Start time has been adjusted.",
+    "End time has been adjusted.": "End time has been adjusted.",
+    "Jan": "Jan",
+    "Feb": "Feb",
+    "Mar": "Mar",
+    "Apr": "Apr",
+    "Jun": "Jun",
+    "Jul": "Jul",
+    "Aug": "Aug",
+    "Sep": "Sep",
+    "Oct": "Oct",
+    "Nov": "Nov",
+    "Dec": "Dec",
+    "This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements.": "This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements.",
+    "Send feedback": "Send feedback",
+    "Manage beta option": "Manage beta option",
+    "Ma": "May"
 };

package/dist/utils/localization/translations/es-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/es-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Se debe establecer la fecha.",
     "The time must be set": "Se debe establecer la hora.",
     "Reset column settings": "Restablecer configuración de columna",
-    "Filters": "Filtros"
+    "Filters": "Filtros",
+    "Ma": "May"
 };

package/dist/utils/localization/translations/fr-FR-json.d.ts

@@ -211,4 +211,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/fr-FR-json.js

@@ -213,5 +213,6 @@ exports.translations = {
     "The date must be set": "La date doit être définie.",
     "The time must be set": "L'heure doit être définie.",
     "Reset column settings": "Réinitialiser les paramètres des colonnes",
-    "Filters": "Filtres"
+    "Filters": "Filtres",
+    "Ma": "Mai"
 };

package/dist/utils/localization/translations/fr-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/fr-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "La date doit être programmée.",
     "The time must be set": "L'heure doit être programmée.",
     "Reset column settings": "Réinitialiser les paramètres de la colonne",
-    "Filters": "Filtres"
+    "Filters": "Filtres",
+    "Ma": "mai"
 };

package/dist/utils/localization/translations/id-json.d.ts

@@ -213,4 +213,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/id-json.js

@@ -215,5 +215,6 @@ exports.translations = {
     "The date must be set": "Tanggal harus diatur.",
     "The time must be set": "Waktu harus diatur.",
     "Reset column settings": "Reset pengaturan kolom",
-    "Filters": "Filter"
+    "Filters": "Filter",
+    "Ma": "Mei"
 };

package/dist/utils/localization/translations/it-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/it-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Impostare la data.",
     "The time must be set": "Impostare l'ora.",
     "Reset column settings": "Ripristinare impostazioni colonna",
-    "Filters": "Filtri"
+    "Filters": "Filtri",
+    "Ma": "Mag"
 };

package/dist/utils/localization/translations/ja-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/ja-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "日付を設定する必要があります。",
     "The time must be set": "時刻を設定する必要があります。",
     "Reset column settings": "列設定をリセット",
-    "Filters": "フィルター"
+    "Filters": "フィルター",
+    "Ma": "5月"
 };

package/dist/utils/localization/translations/ms-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/ms-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Tarikh mesti ditetapkan.",
     "The time must be set": "Masa mesti ditetapkan.",
     "Reset column settings": "Tetapkan semula tetapan lajur",
-    "Filters": "Penyaring"
+    "Filters": "Penyaring",
+    "Ma": "Mei"
 };

package/dist/utils/localization/translations/nl-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/nl-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "De datum moet worden ingesteld.",
     "The time must be set": "De tijd moet worden ingesteld.",
     "Reset column settings": "Reset kolominstellingen",
-    "Filters": "Filters"
+    "Filters": "Filters",
+    "Ma": "mei"
 };

package/dist/utils/localization/translations/pl-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/pl-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Data musi być ustawiona.",
     "The time must be set": "Godzina musi być ustawiona.",
     "Reset column settings": "Zresetuj ustawienia kolumny",
-    "Filters": "Filtry"
+    "Filters": "Filtry",
+    "Ma": "Maj"
 };

package/dist/utils/localization/translations/pt-BR-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/pt-BR-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "É necessário definir a data.",
     "The time must be set": "É necessário definir a hora.",
     "Reset column settings": "Redefinir configurações de coluna",
-    "Filters": "Filtros"
+    "Filters": "Filtros",
+    "Ma": "Mai"
 };

package/dist/utils/localization/translations/sv-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/sv-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Datumet måste anges.",
     "The time must be set": "Tiden måste anges.",
     "Reset column settings": "Återställ kolumninställningar",
-    "Filters": "Filter"
+    "Filters": "Filter",
+    "Ma": "Maj"
 };

package/dist/utils/localization/translations/th-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/th-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "ต้องกำหนดวันที่",
     "The time must be set": "ต้องกำหนดเวลา",
     "Reset column settings": "รีเซ็ตการตั้งค่าคอลัมน์",
-    "Filters": "ตัวกรอง"
+    "Filters": "ตัวกรอง",
+    "Ma": "พ.ค."
 };

package/dist/utils/localization/translations/tr-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };

package/dist/utils/localization/translations/tr-json.js

@@ -214,5 +214,6 @@ exports.translations = {
     "The date must be set": "Tarih ayarlanmalıdır.",
     "The time must be set": "Saat ayarlanmalıdır.",
     "Reset column settings": "Sütun ayarlarını sıfırla",
-    "Filters": "Filtreler"
+    "Filters": "Filtreler",
+    "Ma": "May"
 };

package/dist/utils/localization/translations/zh-Hans-json.d.ts

@@ -212,4 +212,5 @@ export declare const translations: {
     "The time must be set": string;
     "Reset column settings": string;
     Filters: string;
+    Ma: string;
 };