@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/dataGrid/listColumn.d.ts

@@ -41,10 +41,14 @@ export interface IListColumnStrict<T, N> {
     render: (entity: T | N, isNested?: boolean) => TRenderResult;
     renderFeed: (title: string, entity: T | N, isNested?: boolean) => TFeedResult;
 }
+export interface IHeaderCellProps {
+    ariaSort?: "ascending" | "descending" | "none";
+}
 interface IListColumnWrapperBasic<T, N> {
     renderHeader: (title: ReactNode) => ReactNode;
     render: (result: ReactNode, entity: T | N, isNested?: boolean) => ReactNode;
     name?: string;
+    getHeaderProps?: () => IHeaderCellProps;
 }
 export type IListColumnWrapper<T, N = T> = IListColumnWrapperBasic<T, N>;
 export {};

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsReorder.js

@@ -3,20 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexibleColumnReorder = void 0;
 const simpleEventHandler_1 = require("../../commonHelpers/simpleEventHandler");
 const dataGrid_1 = require("../dataGrid");
+const zen_1 = require("../../utils/zen");
 class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
     createColumnToDrag() {
+        var _a, _b;
         if (this.dragElt === undefined) {
-            this.dragElt = document.createElement("table");
-            this.dragElt.classList.add("zen-table-column");
+            this.dragElt = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.createElement("table");
+            (_b = this.dragElt) === null || _b === void 0 ? void 0 : _b.classList.add("zen-table-column");
         }
-        this.list.append(this.dragElt);
+        this.dragElt && this.list.append(this.dragElt);
         return this.dragElt;
     }
     cloneCell(columnCell) {
         let cell = columnCell;
         const cellPart = columnCell.querySelector("[data-column]");
-        if (cellPart !== null) {
-            cell = document.createElement("td");
+        if (cellPart !== null && zen_1.zen.document) {
+            cell = zen_1.zen.document.createElement("td");
             cell.classList.add("zen-data-grid__row-cell");
             cell.append(cellPart.cloneNode(true));
             return cell;
@@ -24,13 +26,17 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
         return cell.cloneNode(true);
     }
     cloneCellContent(cell, parent) {
+        var _a;
         const clone = this.cloneCell(cell);
         // we should prevent id duplication
         const eltsWithIds = clone.querySelectorAll("[id]");
         eltsWithIds.forEach(elt => {
             elt.id = "";
         });
-        const p = document.createElement("tr");
+        const p = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.createElement("tr");
+        if (!p) {
+            return;
+        }
         p.classList.add("zen-table-column__row");
         p.append(clone);
         parent.append(p);
@@ -181,14 +187,15 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
+                var _a, _b, _c;
                 this.pageX = 0;
                 this.pageY = 0;
                 this.columnIndex = 0;
                 this.pointerOffset = 0;
                 this.closest = -1;
-                document.removeEventListener("pointermove", this.moveColumn);
-                document.removeEventListener("pointerup", this.endColumn);
-                document.removeEventListener("pointercancel", this.stopMoving);
+                (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.moveColumn);
+                (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
+                (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopMoving);
                 this.list.classList.remove(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 this.list.classList.remove(dataGrid_1.DRAGGING_MODIFIER);
                 if (this.dragElt === undefined) {
@@ -247,11 +254,13 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
                     return undefined;
                 }
                 const dragElt = this.createColumnToDrag();
-                dragElt.style.left = `${this.offsetLeft}px`;
-                dragElt.style.top = `${this.offsetTop}px`;
-                dragElt.style.width = `${this.targetCellElt.offsetWidth}px`;
+                if (dragElt) {
+                    dragElt.style.left = `${this.offsetLeft}px`;
+                    dragElt.style.top = `${this.offsetTop}px`;
+                    dragElt.style.width = `${this.targetCellElt.offsetWidth}px`;
+                }
                 this.resizer.showResizerForColumn(this.closest - 1);
-                this.cloneCellContent(this.targetCellElt, dragElt);
+                dragElt && this.cloneCellContent(this.targetCellElt, dragElt);
                 this.list.classList.add(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 this.list.classList.add(dataGrid_1.DRAGGING_MODIFIER);
                 const columns = ((_a = this.targetCellElt.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th")) || [];
@@ -264,13 +273,13 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a;
+                var _a, _b, _c, _d, _e;
                 if (e.button !== 0) {
                     return;
                 }
                 this.pageX = e.pageX;
                 this.pageY = e.pageY;
-                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                (_b = (_a = zen_1.zen.getSelection) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen)) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
                 const th = e.target.closest("th");
                 if (th === null) {
                     return;
@@ -280,9 +289,9 @@ class FlexibleColumnReorder extends simpleEventHandler_1.SimpleEventHandler {
                 this.offsetTop = th.offsetTop;
                 this.columnIndex = Math.max(th.cellIndex, 0);
                 this.pointerOffset = (e.offsetX || (th.clientWidth / 2));
-                document.addEventListener("pointermove", this.moveColumn);
-                document.addEventListener("pointerup", this.endColumn);
-                document.addEventListener("pointercancel", this.stopMoving);
+                (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointermove", this.moveColumn);
+                (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointerup", this.endColumn);
+                (_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.addEventListener("pointercancel", this.stopMoving);
                 this.closest = this.columnIndex;
             }
         });

package/dist/dataGrid/withFlexibleColumns/flexibleColumnsResizer.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexibleColumnResizer = void 0;
 const simpleEventHandler_1 = require("../../commonHelpers/simpleEventHandler");
 const dataGrid_1 = require("../dataGrid");
+const zen_1 = require("../../utils/zen");
 const MIN_COLUMN_WIDTH = 100;
 class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
     createResizer() {
+        var _a;
         if (this.resizer === undefined) {
-            const resizer = document.createElement("DIV");
-            resizer.classList.add("zen-resizer", "zen-resizer--active", "zen-resizer--vertical");
+            const resizer = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.createElement("DIV");
+            resizer === null || resizer === void 0 ? void 0 : resizer.classList.add("zen-resizer", "zen-resizer--active", "zen-resizer--vertical");
             this.resizer = resizer;
         }
         this.listRef.append(this.resizer);
@@ -78,12 +80,13 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: () => {
+                var _a, _b, _c;
                 this.pageX = 0;
                 this.currentWidth = 0;
                 this.columnIndex = 0;
-                document.removeEventListener("pointermove", this.resizeColumn);
-                document.removeEventListener("pointerup", this.endColumn);
-                document.removeEventListener("pointercancel", this.stopResizing);
+                (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointermove", this.resizeColumn);
+                (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("pointerup", this.endColumn);
+                (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.removeEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.remove(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 this.hideResizer();
             }
@@ -117,7 +120,7 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
             configurable: true,
             writable: true,
             value: (e) => {
-                var _a;
+                var _a, _b, _c, _d;
                 if (e.button !== 0) {
                     return;
                 }
@@ -135,12 +138,15 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
                     return;
                 }
                 this.currentWidth = headerEl.offsetWidth || 0;
-                document.addEventListener("pointermove", this.resizeColumn);
-                document.addEventListener("pointerup", this.endColumn);
-                document.addEventListener("pointercancel", this.stopResizing);
+                (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.addEventListener("pointermove", this.resizeColumn);
+                (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("pointerup", this.endColumn);
+                (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("pointercancel", this.stopResizing);
                 this.listRef.classList.add(dataGrid_1.NOT_INTERACTIVE_MODIFIER);
                 const scrollTop = this.listRef.scrollTop;
                 const resizer = this.createResizer();
+                if (resizer === undefined) {
+                    return;
+                }
                 resizer.style.left = `${this.offsetLeft}px`;
                 resizer.style.top = `${scrollTop}px`;
                 resizer.style.height = `${height}px`;
@@ -157,6 +163,9 @@ class FlexibleColumnResizer extends simpleEventHandler_1.SimpleEventHandler {
         const height = this.listRef.clientHeight;
         const scrollTop = this.listRef.scrollTop;
         const resizer = this.createResizer();
+        if (resizer === undefined) {
+            return;
+        }
         resizer.style.left = `${this.offsetLeft}px`;
         resizer.style.top = `${scrollTop}px`;
         resizer.style.height = `${height}px`;

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -13,6 +13,7 @@ const flexibleColumnWrapper_1 = require("./columns/flexibleColumnWrapper");
 const columnSettings_1 = require("./components/columnSettings");
 const columnSettingsList_1 = require("./components/columnSettingsList");
 const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel");
+const zen_1 = require("../../utils/zen");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -48,7 +49,8 @@ const withFlexibleColumns = (DataGridComponent) => {
         const saveSettingsToTheStore = (0, react_1.useCallback)((newSettings) => 
         // not to block main thread this operation can be postponed
         new Promise((resolve, reject) => {
-            setTimeout(() => {
+            var _a;
+            (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
                 try {
                     settingsStore.setItem(newSettings);
                     resolve();

package/dist/dataGrid/withSortableColumns/withSortableColumns.js

@@ -8,6 +8,7 @@ const toBasicColumn_1 = require("../extensions/toBasicColumn");
 const actionsColumn_1 = require("../columns/actionsColumn/actionsColumn");
 const sortableColumnWrapper_1 = require("./columns/sortableColumnWrapper");
 const columnSortDirection_1 = require("./columns/columnSortDirection");
+const zen_1 = require("../../utils/zen");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -25,7 +26,8 @@ function InnerColumnsList(props) {
     const saveSettingsToTheStore = (0, react_1.useCallback)((newSettings) => 
     // not to block main thread this operation can be postponed
     new Promise((resolve, reject) => {
-        setTimeout(() => {
+        var _a;
+        (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
             try {
                 settingsStore.setItem(newSettings);
                 resolve();

package/dist/dateInputRaw/dateInputRaw.js

@@ -110,6 +110,7 @@ const chip_1 = require("../chip/chip");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const zen_1 = require("../utils/zen");
 const DateInputRaw = props => {
   var _a;
   const {
@@ -198,6 +199,7 @@ const DateInputRaw = props => {
     onChange(defaultValue);
   }, [defaultValue, defaultValueInner, onChange]);
   (0, react_1.useEffect)(() => {
+    // required to sync custom date in toolbar and sidebar
     setCustomDate(value);
   }, [value]);
   const memoizedHandleClose = (0, react_1.useCallback)(() => {
@@ -301,8 +303,9 @@ const DateInputRaw = props => {
     })]
   }), [classNamePopup, component, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, renderContent, title, translate]);
   (0, react_1.useEffect)(() => {
+    var _a;
     if (!isMobile && !isOpen && prevIsOpenRef.current) {
-      setTimeout(() => {
+      (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
         var _a;
         (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 0);
@@ -312,7 +315,9 @@ const DateInputRaw = props => {
   const buttonCurrentLabel = getButtonLabel();
   const buttonCurrentTitle = getButtonLabel(true);
   const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, {
+    className: className,
     status: isDefaultState ? undefined : chipStatus || "active",
+    dataRole: "dialog",
     title: isDefaultState ? chipName : buttonCurrentTitle,
     isOpen: isOpen,
     disabled: disabled,
@@ -322,7 +327,7 @@ const DateInputRaw = props => {
     icon: chipIcon || iconCalendar_1.IconCalendar,
     id: chipId,
     children: isDefaultState ? chipName : buttonCurrentLabel
-  }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, chipName, buttonCurrentLabel, buttonCurrentTitle]);
+  }), [className, isDefaultState, chipStatus, chipName, buttonCurrentTitle, isOpen, disabled, toggleVisibility, handleClearAndApply, chipIcon, chipId, buttonCurrentLabel]);
   if (isReadOnly) {
     const readOnlyValue = getButtonLabel() === translate("Pick a date") ? " " : getButtonLabel();
     return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, {

package/dist/dateRangeRaw/dateRangeRaw.js

@@ -220,6 +220,8 @@ const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const focusableSelector_1 = require("../utils/focusableSelector");
 const parseLabel_1 = require("./utils/parseLabel");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
+const zen_1 = require("../utils/zen");
 // eslint-disable-next-line complexity
 const DateRangeRaw = props => {
   var _a;
@@ -265,6 +267,7 @@ const DateRangeRaw = props => {
   const isDrive = (0, useDrive_1.useDrive)();
   const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
   const driveWrapperTriggerClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-wrapper");
+  const mobileWrapperTriggerClassName = (0, useMobileClassName_1.useMobileClassName)("zen-date-range-wrapper");
   const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
   const driveWrapperPopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
   const [showMobileCalendar, setShowMobileCalendar] = (0, react_1.useState)(false);
@@ -281,7 +284,9 @@ const DateRangeRaw = props => {
   const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
   const [isOpen, setIsOpen] = (0, react_1.useState)(false);
   const prevIsOpenRef = (0, react_1.useRef)(false);
-  const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
+  const datesValidation = (0, react_1.useCallback)(val => (0, getRangeOption_1.isValidDateFn)(allowUnsetValue)(val), [allowUnsetValue]);
+  const isDatesValid = (0, react_1.useRef)(datesValidation(value));
+  const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)((0, getRangeOption_1.isDateValid)(value === null || value === void 0 ? void 0 : value.from) ? value.from.toISOString() : undefined, (0, getRangeOption_1.isDateValid)(value === null || value === void 0 ? void 0 : value.to) ? value.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
   const isDefaultState = !defaultValue && !selectedRange || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== dateRangeInner_1.CUSTOM_CALENDAR_ID || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === dateRangeInner_1.CUSTOM_CALENDAR_ID && customDate.from && customDate.to && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();
   const triggerRef = (0, react_1.useRef)(null);
   const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
@@ -313,13 +318,19 @@ const DateRangeRaw = props => {
   }, [dateFormat, options, translate, toLocalDateTime]);
   (0, react_1.useEffect)(() => {
     const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value);
+    isDatesValid.current = datesValidation(value);
+    if (!isDatesValid.current) {
+      console.error("Invalid Date objects provided to DateRange", value);
+      return;
+    }
     if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from.getTime()) || (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to.getTime()) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to.getTime())) {
       setSelectedRange(currentValue);
       setPrevSelection(currentValue);
     }
-  }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+  }, [datesValidation, optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to, value]);
+  const handleDateRangeSelection = (0, react_1.useCallback)(
   // eslint-disable-next-line complexity
-  const handleDateRangeSelection = (0, react_1.useCallback)(newVal => {
+  newVal => {
     var _a, _b;
     const selection = options.find(option => option.id === newVal);
     newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID && setShowMobileCalendar(true);
@@ -341,9 +352,19 @@ const DateRangeRaw = props => {
       }, newRange)));
       previousStepOption.current = "";
     } else {
-      const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from.toISOString() : value === null || value === void 0 ? void 0 : value.from.toISOString();
-      const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to.toISOString() : value === null || value === void 0 ? void 0 : value.to.toISOString();
-      const normalizedDates = (0, normalizeDates_1.normalizeDates)(startDateForNormalize, endDateForNormalize, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
+      const startDateForNormalize = ((_a = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _a === void 0 ? void 0 : _a.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().from : value === null || value === void 0 ? void 0 : value.from;
+      const endDateForNormalize = ((_b = selection === null || selection === void 0 ? void 0 : selection.getRange) === null || _b === void 0 ? void 0 : _b.call(selection)) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) !== newVal ? selection.getRange().to : value === null || value === void 0 ? void 0 : value.to;
+      if (!datesValidation(startDateForNormalize === undefined && endDateForNormalize === undefined ? undefined : {
+        from: startDateForNormalize,
+        to: endDateForNormalize
+      })) {
+        console.error("Invalid Date objects provided to DateRange", {
+          from: startDateForNormalize,
+          to: endDateForNormalize
+        });
+        return;
+      }
+      const normalizedDates = (0, normalizeDates_1.normalizeDates)(startDateForNormalize === null || startDateForNormalize === void 0 ? void 0 : startDateForNormalize.toISOString(), endDateForNormalize === null || endDateForNormalize === void 0 ? void 0 : endDateForNormalize.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
       const newRange = newVal === dateRangeInner_1.CUSTOM_CALENDAR_ID ? {
         from: new Date(normalizedDates.from),
         to: new Date(normalizedDates.to)
@@ -363,7 +384,7 @@ const DateRangeRaw = props => {
       }));
     }
     !hasApplyButton && newVal !== dateRangeInner_1.CUSTOM_CALENDAR_ID && setIsOpen(false);
-  }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to]);
+  }, [options, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to, datesValidation]);
   const handleRangeSelection = (0, react_1.useCallback)(() => {
     if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) {
       const newState = {
@@ -425,13 +446,19 @@ const DateRangeRaw = props => {
     labeledValue && (onChange === null || onChange === void 0 ? void 0 : onChange(labeledValue));
   }, [onChange, optionsMap, toLocalDateTime, toReverseOffsetDateTime, translate]);
   (0, react_1.useEffect)(() => {
+    // required to sync custom date in toolbar and sidebar
+    isDatesValid.current = datesValidation(value);
+    if (!isDatesValid.current) {
+      console.error("Invalid Date objects provided to DateRange", value);
+      return;
+    }
     setCustomDate({
       from: value === null || value === void 0 ? void 0 : value.from.toISOString(),
       to: value === null || value === void 0 ? void 0 : value.to.toISOString()
     });
     const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMapRef.current, value);
     setPrevSelection(currentValue);
-  }, [value, isEqualMaps]);
+  }, [value, isEqualMaps, datesValidation]);
   const range = (0, react_1.useMemo)(() => ({
     from: customDate.from,
     to: customDate.to
@@ -564,7 +591,10 @@ const DateRangeRaw = props => {
     })]
   }), [calendarLabel, classNamePopup, component, handleMobileBackClick, isOpen, memoizedHandleClose, memoizedMobileFooter, onReadyForFocus, showMobileCalendar, title, translate, mobileContentRef]);
   const checkIsRangeDisable = (0, react_1.useCallback)(isIncrease => {
-    if (!selectedRange) {
+    if (!selectedRange || !datesValidation({
+      from: selectedRange.from,
+      to: selectedRange.to
+    })) {
       return true;
     }
     const step = previousStepOption.current ? previousStepOption.current : (0, getRangeOption_1.getDateRangeAdjustedStep)(translate, selectedRange.label);
@@ -575,7 +605,7 @@ const DateRangeRaw = props => {
     }, isIncrease, toLocalDateTime, toReverseOffsetDateTime);
     const normalizeNewValue = (0, normalizeDates_1.normalizeDates)(newValue.from.toISOString(), newValue.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
     return newValue.from.getTime() !== new Date(normalizeNewValue.from).getTime() || newValue.to.getTime() !== new Date(normalizeNewValue.to).getTime();
-  }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate]);
+  }, [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates, selectedRange, toLocalDateTime, toReverseOffsetDateTime, translate, datesValidation]);
   const increaseRange = (0, react_1.useCallback)(() => {
     selectedRange && handleStepperClick(selectedRange, true);
   }, [handleStepperClick, selectedRange]);
@@ -583,8 +613,9 @@ const DateRangeRaw = props => {
     selectedRange && handleStepperClick(selectedRange, false);
   }, [handleStepperClick, selectedRange]);
   (0, react_1.useEffect)(() => {
+    var _a;
     if (!isMobile && !isOpen && prevIsOpenRef.current) {
-      setTimeout(() => {
+      (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
         var _a;
         (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 0);
@@ -612,7 +643,9 @@ const DateRangeRaw = props => {
     children: buttonLabel
   }), [onBlur, name, buttonTitle, cssClass, type, disabled, toggleVisibility, buttonLabel]);
   const chipTriggerComponent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(chip_1.Chip, {
+    className: (0, classNames_1.classNames)([className || ""]),
     status: isDefaultState ? undefined : chipStatus || "active",
+    dataRole: "dialog",
     title: isDefaultState ? chipName : buttonTitle,
     isOpen: isOpen,
     disabled: disabled,
@@ -622,7 +655,7 @@ const DateRangeRaw = props => {
     icon: chipIcon || iconCalendar_1.IconCalendar,
     id: chipId,
     children: isDefaultState ? chipName : buttonLabel
-  }), [isDefaultState, chipStatus, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, chipName, buttonLabel, buttonTitle]);
+  }), [className, isDefaultState, chipStatus, chipName, buttonTitle, isOpen, disabled, toggleVisibility, handleClearClick, chipIcon, chipId, buttonLabel]);
   if (isReadOnly) {
     return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, {
       value: buttonLabel
@@ -630,7 +663,7 @@ const DateRangeRaw = props => {
   }
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
     children: [stepper ? (0, jsx_runtime_1.jsxs)("div", {
-      className: (0, classNames_1.classNames)(["zen-date-range-wrapper", driveWrapperTriggerClassName || "", classNameWrapper || ""]),
+      className: (0, classNames_1.classNames)(["zen-date-range-wrapper", mobileWrapperTriggerClassName || driveWrapperTriggerClassName || "", classNameWrapper || ""]),
       children: [(0, jsx_runtime_1.jsx)("button", {
         type: "button",
         disabled: checkIsRangeDisable(false),
@@ -638,7 +671,7 @@ const DateRangeRaw = props => {
         className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--left"]),
         title: translate("Previous"),
         children: (0, jsx_runtime_1.jsx)(iconChevronLeftSmall_1.IconChevronLeftSmall, {
-          size: isDrive ? "huge" : "large"
+          size: isDrive || isMobile ? "huge" : "large"
         })
       }), popupTriggerComponent, (0, jsx_runtime_1.jsx)("button", {
         type: "button",
@@ -647,7 +680,7 @@ const DateRangeRaw = props => {
         className: (0, classNames_1.classNames)(["zen-date-range__stepper", "zen-date-range__stepper--right"]),
         title: translate("Next"),
         children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, {
-          size: isDrive ? "huge" : "large"
+          size: isDrive || isMobile ? "huge" : "large"
         })
       })]
     }) : chip ? chipTriggerComponent : popupTriggerComponent, isMobile ? memoizedMobileView : memoizedDesktopView]

package/dist/dialog/dialog.d.ts

@@ -9,4 +9,4 @@ export interface IDialog {
 /**
  * @deprecated - use Modal instead
 */
-export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal;
+export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal | null;

package/dist/dialog/dialog.js

@@ -3,38 +3,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_dom_1 = require("react-dom");
 const dialogContent_1 = require("./dialogContent");
 const dialogHelpers_1 = require("./dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useBodyScroll_1 = require("../utils/useBodyScroll");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 /**
  * @deprecated - use Modal instead
 */
 const Dialog = ({ isOpen, children, isElementVisible }) => {
-    const lastActiveOutsideElement = (0, react_1.useRef)(document.activeElement);
-    const modalRoot = document.fullscreenElement || document.body;
+    var _a, _b, _c;
+    const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
+    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const { resetScroll } = (0, useBodyScroll_1.useBodyScroll)();
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.useEffect)(() => {
+        if (!isClientReady) {
+            return () => { };
+        }
         const copyActive = lastActiveOutsideElement.current;
         return () => {
             (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
         };
-    }, []);
+    }, [isClientReady]);
     (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isClientReady) {
+            return;
+        }
         if (isOpen) {
             return;
         }
-        const modalCont = document.body.querySelectorAll(".zen-dialog");
-        if (!modalCont.length) {
+        const modalCont = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.querySelectorAll(".zen-dialog");
+        if (!(modalCont === null || modalCont === void 0 ? void 0 : modalCont.length)) {
             resetScroll();
         }
-    }, [isOpen, resetScroll]);
+    }, [isClientReady, isOpen, resetScroll]);
     const labeledId = (0, react_1.useId)();
     const darkClass = dark ? "zen-dark" : "";
-    const createDialog = (id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${window.pageYOffset}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] });
-    return (0, react_dom_1.createPortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    const createDialog = (id) => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen_1.zen.pageYOffset || 0}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] });
+    const portal = (0, usePortal_1.usePortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    if (!isClientReady) {
+        return null;
+    }
+    return portal;
 };
 exports.Dialog = Dialog;

package/dist/dialog/dialogHelpers.js

@@ -2,14 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFocusableStartInd = exports.isFocusable = exports.isElementInsideContainer = void 0;
 const buttonType_1 = require("../button/buttonType");
+const zen_1 = require("../utils/zen");
 const isElementInsideContainer = (element, container) => {
+    var _a;
     let el = element;
     while (el) {
         if (el === container) {
             return true;
         }
         el = el.parentNode;
-        if (el === document.body && el !== container) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (el === ((_a = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) && el !== container) {
             return false;
         }
     }
@@ -17,6 +20,7 @@ const isElementInsideContainer = (element, container) => {
 };
 exports.isElementInsideContainer = isElementInsideContainer;
 const isFocusable = (element) => {
+    var _a;
     if (!element) {
         return false;
     }
@@ -26,8 +30,8 @@ const isFocusable = (element) => {
     if (element.tabIndex === -1) {
         return false;
     }
-    const style = window.getComputedStyle(element);
-    if (style.display === "none" || style.visibility === "hidden") {
+    const style = (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, element);
+    if ((style === null || style === void 0 ? void 0 : style.display) === "none" || (style === null || style === void 0 ? void 0 : style.visibility) === "hidden") {
         return false;
     }
     return true;

package/dist/dropdownRaw/dropdownHelper.js

@@ -75,7 +75,10 @@ const createOptions = (stateObj, translate, listItem, isAllSelected) => {
             actionListData.add(el.id);
         }
     });
-    const preparedOptions = prepareComboOptionsForList(actionListData, translate, listItem, () => stateObj.selectedIds, (id) => getSelectedChildren(stateObj, id), !stateObj.isNestedList, (id) => stateObj.groupsMap[id] ? (0, groupsHelper_1.getGroupDescription)(stateObj.groupsMap[id], translate) : "", isAllSelected);
+    const preparedOptions = prepareComboOptionsForList(actionListData, translate, listItem, () => stateObj.selectedIds, (id) => getSelectedChildren(stateObj, id), !stateObj.isNestedList, (id) => {
+        const group = stateObj.groupsMap[id];
+        return group ? (0, groupsHelper_1.getGroupDescription)(group, translate) : "";
+    }, isAllSelected);
     return preparedOptions;
 };
 exports.createOptions = createOptions;