@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/icons/iconWrite.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWrite = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconYen.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconYen = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconZone.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconZone = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconZoom.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconZoom = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconZoom2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconZoom2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/images/imageNothingFound.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const ImageNothingFound = ({ className, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-svg-image",
         className !== null && className !== void 0 ? className : ""

package/esm/index.d.ts

@@ -4,7 +4,7 @@ export { type IAccordionItem, AccordionItem } from "./accordion/accordionItem/ac
 export { type IAlert, Alert } from "./alert/alert";
 export { type IShowAlert, useAlert } from "./alert/hooks/useAlert";
 export { Anchor } from "./anchor/anchor";
-export { type IBannerAction, type BannerType, type IBanner, Banner } from "./banner/banner";
+export { BannerDisplayName, type IBannerAction, type BannerType, type IBanner, Banner } from "./banner/banner";
 export { BannerUpsell } from "./banner/bannerUpsell";
 export { type TBannerSize, DEFAULT_BANNER_UPSELL_SIZE, options, getBannerOptions } from "./banner/bannerUtils";
 export { type IBetaPillActions, type IBetaPill, BetaPill } from "./betaPill/betaPill";
@@ -48,6 +48,7 @@ export { classNames } from "./commonHelpers/classNames/classNames";
 export { hexToRGBA } from "./commonHelpers/colorUtils";
 export { type IEntityWithId } from "./commonHelpers/entity";
 export { generateId } from "./commonHelpers/generateId";
+export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
@@ -79,16 +80,16 @@ export { type IFiltersDateInputProps, type TFiltersDateInputState, type IFilters
 export { type IFiltersDateRangeState, type IFiltersDateRangeCompleteState, type IFiltersDateRangeDefaultState, type TFiltersDateRangeState, type TFiltersDateRangeCompleteState, type TFiltersDateRangeStateOptional, type TFiltersDateRangeStateRequired, type IFiltersDateRangeItem, type IFiltersDateRange, FiltersDateRange } from "./filters/components/filtersDateRange";
 export { type TFiltersDropdownState, type IFiltersDropdownFullSelectionState, type IFiltersDropdownWithCheckboxState, type IFiltersDropdownFullSelectionWithCheckboxState, type TFiltersDropdownComplexState, type TInferOnChangeType, type IFiltersDropdown, FiltersDropdown } from "./filters/components/filtersDropdown";
 export { type IFiltersGroupsItem, type IFiltersGroups, FiltersGroups } from "./filters/components/filtersGroups";
-export { type IFiltersItem, type TFiltersComponentsItemState } from "./filters/components/filtersItem";
+export { type IFiltersItem, type TFiltersChild, type IFilterMetaData, type IFilterComponentWithMetaData, type TFiltersComponentsItemState } from "./filters/components/filtersItem";
 export { type IFiltersRangeState, type IFiltersRange, FiltersRange } from "./filters/components/filtersRange";
 export { NO_TYPED_SEARCH_ITEM, KEYWORD_ID, KEYWORD_TYPE, type ISearchItem, type IRecentSearchItem, type IRecentSearchItemWithoutId, NOT_POPULATED_NAME } from "./filters/components/filtersSearchList";
 export { ALL_SELECT_OPTION_ID, type IFiltersSearchType, getFiltersSearchTypeAllOption, getAllOption } from "./filters/components/filtersSelect";
-export { type ISavedFilters, type ISaveFilter, type IFetchState, type IFiltersSearchTypesSubItem, type IFiltersSearchTypesItem, type IFiltersBase, type IFiltersWithRecentSearches, type IFiltersWithSearchSelection, type IFiltersWithPin, type IFiltersWithSavedFilters, type IFiltersWithExternalState, type IFilters, type IFiltersBasic, type IFiltersWithModal, type IFiltersWithPinning, type IFiltersWithRecent, type IFiltersWithSaved, type TFiltersWithSearchSelection, type IFiltersWithModalAndPin, type IFiltersWithRecentAndSaved, type IFiltersComplete, FiltersDisplayName, Filters } from "./filters/filters";
+export { type ISavedFilters, type ISaveFilter, type IFetchState, type IFiltersSearchTypesSubItem, type IFiltersSearchTypesItem, type IFiltersBase, type IFiltersWithKeyword, type IFiltersWithSearchType, type IFiltersWithRecentSearches, type IFiltersWithSearchSelection, type IFiltersWithPin, type IFiltersWithSavedFilters, type IFiltersWithExternalState, type IFilters, type IFiltersBasic, type IFiltersWithModal, type IFiltersWithPinning, type IFiltersWithRecent, type IFiltersWithSaved, type TFiltersWithSearchSelection, type IFiltersWithModalAndPin, type IFiltersWithRecentAndSaved, type IFiltersComplete, FiltersDisplayName, Filters } from "./filters/filters";
 export { useFiltersSearch, usePinnedFilters, useFiltersSelection, useSearchData } from "./filters/filtersHooks";
 export { type IFiltersBarDateInputProps, type IFiltersBarDateInput, FiltersBarDateInputDisplayName, FiltersBarDateInput } from "./filtersBar/components/filtersBarDateInput/filtersBarDateInput";
 export { type IFiltersBarDropdownFullSelectionState } from "./filtersBar/components/filtersBarDropdown/filtersBarDropdown";
 export { type IFiltersBarDropdownWithCheckboxProps, type IFiltersBarDropdownFullSelectionWithCheckboxProps, type IFiltersBarDropdownWithCheckbox, type IFiltersBarDropdownWithCheckboxFullSelectionMode, type IFiltersBarDropdownWithCheckboxOnChange, type IFiltersBarDropdownWithCheckboxFullSelectionOnChange, FiltersBarDropdownWithCheckbox } from "./filtersBar/components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
-export { type IDateRangeOptionId, type TDateRangeName, getRangeOption, PERIOD_ONE_DAY_STEP_OPTION, PERIOD_SEVEN_DAYS_STEP_OPTION, PERIOD_THIRTY_DAYS_STEP_OPTION } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+export { type IDateRangeOptionId, type TDateRangeName, getRangeOption, isValidDateFn, PERIOD_ONE_DAY_STEP_OPTION, PERIOD_SEVEN_DAYS_STEP_OPTION, PERIOD_THIRTY_DAYS_STEP_OPTION } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
 export { type IFiltersBarItemCommonProps, type IFiltersBarItem, type ICustomFiltersBarItem } from "./filtersBar/components/interfaces";
 export { type IResetButton, ResetButton } from "./filtersBar/components/resetComponentButton";
 export { type IFiltersBar, FiltersBarDisplayName, FiltersBar } from "./filtersBar/filtersBar";
@@ -697,6 +698,7 @@ export { type IItemData, ItemData } from "./list/itemData/itemData";
 export { type IList, List } from "./list/list";
 export { type IListItem, ListItem } from "./list/listItem/listItem";
 export { changeOrder } from "./list/utils/changeOrder";
+export { isDragNotClick } from "./list/utils/isDragNotClick";
 export { type IControlledMenu, ControlledMenu } from "./menu/controlledMenu";
 export { type IMenu, Menu } from "./menu/menu";
 export { findFirstFocusable } from "./menu/utils/findFirstFocusable";

package/esm/index.js

@@ -5,7 +5,7 @@ export { AccordionItem } from "./accordion/accordionItem/accordionItem";
 export { Alert } from "./alert/alert";
 export { useAlert } from "./alert/hooks/useAlert";
 export { Anchor } from "./anchor/anchor";
-export { Banner } from "./banner/banner";
+export { BannerDisplayName, Banner } from "./banner/banner";
 export { BannerUpsell } from "./banner/bannerUpsell";
 export { DEFAULT_BANNER_UPSELL_SIZE, options, getBannerOptions } from "./banner/bannerUtils";
 export { BetaPill } from "./betaPill/betaPill";
@@ -48,6 +48,7 @@ export { getCheckboxState } from "./checkbox/checkboxUtils";
 export { classNames } from "./commonHelpers/classNames/classNames";
 export { hexToRGBA } from "./commonHelpers/colorUtils";
 export { generateId } from "./commonHelpers/generateId";
+export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
@@ -85,7 +86,7 @@ export { FiltersDisplayName, Filters } from "./filters/filters";
 export { useFiltersSearch, usePinnedFilters, useFiltersSelection, useSearchData } from "./filters/filtersHooks";
 export { FiltersBarDateInputDisplayName, FiltersBarDateInput } from "./filtersBar/components/filtersBarDateInput/filtersBarDateInput";
 export { FiltersBarDropdownWithCheckbox } from "./filtersBar/components/filtersBarDropdownWithCheckbox/filtersBarDropdownWithCheckbox";
-export { getRangeOption, PERIOD_ONE_DAY_STEP_OPTION, PERIOD_SEVEN_DAYS_STEP_OPTION, PERIOD_THIRTY_DAYS_STEP_OPTION } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
+export { getRangeOption, isValidDateFn, PERIOD_ONE_DAY_STEP_OPTION, PERIOD_SEVEN_DAYS_STEP_OPTION, PERIOD_THIRTY_DAYS_STEP_OPTION } from "./filtersBar/components/filtersBarPeriodPicker/getRangeOption";
 export { ResetButton } from "./filtersBar/components/resetComponentButton";
 export { FiltersBarDisplayName, FiltersBar } from "./filtersBar/filtersBar";
 export { FiltersBarActions } from "./filtersBar/filtersBarActions/filtersBarActions";
@@ -684,6 +685,7 @@ export { ItemData } from "./list/itemData/itemData";
 export { List } from "./list/list";
 export { ListItem } from "./list/listItem/listItem";
 export { changeOrder } from "./list/utils/changeOrder";
+export { isDragNotClick } from "./list/utils/isDragNotClick";
 export { ControlledMenu } from "./menu/controlledMenu";
 export { Menu } from "./menu/menu";
 export { findFirstFocusable } from "./menu/utils/findFirstFocusable";

package/esm/inputAdornments/inputAdornments.d.ts

@@ -21,8 +21,13 @@ export interface IInputAdornments {
     name?: string;
     ariaLabel?: string;
     ariaDescribedby?: string;
+    role?: string;
+    ariaAutocomplete?: "list" | "none" | "inline" | "both";
+    ariaControls?: string;
+    ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    ariaExpanded?: boolean | "true" | "false";
 }
 export declare const InputAdornments: {
-    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
+    ({ id, value, className, disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType, autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded }: IInputAdornments): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/inputAdornments/inputAdornments.js

@@ -3,21 +3,20 @@ import { useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby }) => {
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+export const InputAdornments = ({ id, value, className = "", disabled, isError, maxLength, onChange, onKeyDown, onFocus, startAdornment, endAdornment, placeholder, inputType = "text", autoFocus, name, onBlur, ref, ariaLabel, ariaDescribedby, role, ariaAutocomplete, ariaControls, ariaHaspopup, ariaExpanded }) => {
     const disabledClassName = disabled ? "zen-input-adornments--disabled" : "";
     const driveComponentClass = useDriveClassName("zen-input-adornments");
+    const mobileComponentClass = useMobileClassName("zen-input-adornments");
     const classes = useMemo(() => classNames([
         "zen-input-adornments",
         startAdornment ? "zen-input-adornments--has-start" : "",
         endAdornment ? "zen-input-adornments--has-end" : "",
-        driveComponentClass || "",
-        className, disabledClassName
-    ]), [className, disabledClassName, driveComponentClass, endAdornment, startAdornment]);
-    const wrapperClasses = useMemo(() => classNames(["zen-input-adornments__wrapper",
-        endAdornment ? "zen-input-adornments__wrapper--has-end" : "",
-        !value ? "zen-input-adornments__wrapper--empty" : "",
-        className
-    ]), [className, endAdornment, value]);
-    return (_jsxs("div", { className: classes, children: [!!startAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment })), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && (_jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment }))] }));
+        mobileComponentClass || driveComponentClass || "",
+        className,
+        disabledClassName
+    ]), [className, disabledClassName, driveComponentClass, endAdornment, mobileComponentClass, startAdornment]);
+    const wrapperClasses = useMemo(() => classNames(["zen-input-adornments__wrapper", endAdornment ? "zen-input-adornments__wrapper--has-end" : "", !value ? "zen-input-adornments__wrapper--empty" : "", className]), [className, endAdornment, value]);
+    return (_jsxs("div", { className: classes, children: [!!startAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--start", children: startAdornment }), _jsx("div", { className: wrapperClasses, children: _jsx(TextInputRaw, { name: name, onBlur: onBlur, ref: ref, id: id, value: value, maxLength: maxLength, isError: isError, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, disabled: disabled, type: inputType, autoFocus: autoFocus, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, role: role, ariaAutocomplete: ariaAutocomplete, ariaControls: ariaControls, ariaHaspopup: ariaHaspopup, ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true, className: "zen-input-adornments__input zen-input-adornments__input--border-none" }) }), !!endAdornment && _jsx("div", { className: "zen-input-adornments__adornment zen-input-adornments__adornment--end", children: endAdornment })] }));
 };
 InputAdornments.displayName = "InputAdornments";

package/esm/layout/layout.d.ts

@@ -5,6 +5,7 @@ import { ILayoutHeader } from "./layoutHeader";
 import { ILayoutContent } from "./layoutContent";
 import { ILayoutSummaryTiles } from "./layoutSummaryTiles";
 import { ReactElement } from "react";
+import { ILayoutBanner } from "./layoutBanner";
 import { ILayoutFullScreen } from "./layoutFullScreen";
 import { IFullScreenButton } from "../dataGrid/entitiesListActions/actions/fullscreenButton";
 export interface ILayout extends IZenComponentProps {
@@ -14,11 +15,12 @@ export interface ILayout extends IZenComponentProps {
 }
 interface ILayoutComponents {
     Header: React.FC<ILayoutHeader>;
+    Banner: React.FC<ILayoutBanner>;
     SummaryTiles: React.FC<ILayoutSummaryTiles>;
     Content: React.FC<ILayoutContent>;
     FullScreen: React.FC<ILayoutFullScreen>;
     FullScreenButton: React.FC<IFullScreenButton>;
 }
 export declare const getContentPaddings: (isMobile: boolean, startWithToolbar: boolean) => number;
-export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element) & ILayoutComponents;
+export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null) & ILayoutComponents;
 export {};

package/esm/layout/layout.js

@@ -13,11 +13,15 @@ import { LayoutFullScreenProvider } from "./layoutFullScreenProvider";
 import { getArrayOfChildren } from "../header/headerHelpers";
 import { HeaderDisplayName } from "../header/header";
 import { SummaryTileBarDisplayName } from "../summaryTileBar/summaryTileBar";
+import { BannerDisplayName } from "../banner/banner";
+import { LayoutBanner } from "./layoutBanner";
 import { LayoutFullScreen } from "./layoutFullScreen";
 import { SummaryTileDisplayName } from "../summaryTile/summaryTile";
 import { FullScreenButton } from "../dataGrid/entitiesListActions/actions/fullscreenButton";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { PageHeaderDisplayName } from "../pageHeader/pageHeader";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
+import { zen } from "../utils/zen";
 export const getContentPaddings = (isMobile, startWithToolbar) => {
     const paddingsCount = startWithToolbar ? 1 : 2;
     return isMobile ? paddingsCount * 8 : paddingsCount * 24;
@@ -29,18 +33,21 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     const isMobile = useMobile();
     const [middleElBottom, setMiddleElBottom] = useState(undefined);
     const [fullScreenElement, setFullScreenElement] = useState(undefined);
-    const [minHeight, setMinHeight] = useState(window.innerHeight);
+    const [minHeight, setMinHeight] = useState(zen.innerHeight || 0);
     const [startWithToolbar, setStartWithToolbar] = useState(false);
     const isFullScreen = useCallback(() => fullScreenElement !== undefined, [fullScreenElement]);
-    const [header, summaryTileBar, content] = useMemo(() => {
+    const isClientReady = useClientReady();
+    const [header, banners, summaryTileBar, content] = useMemo(() => {
         const h = [];
+        const b = [];
         const s = [];
         const c = [];
+        const bc = [];
         const sc = [];
         const cc = [];
-        const childrenArray = getArrayOfChildren(children).filter((child) => child !== null && child !== undefined);
+        const childrenArray = getArrayOfChildren(children).filter(child => child !== null && child !== undefined);
         // eslint-disable-next-line complexity
-        childrenArray.forEach((child) => {
+        childrenArray.forEach(child => {
             const isValidElement = React.isValidElement(child);
             if (!h.length && child.type === LayoutHeader && isValidElement) {
                 h.push(child);
@@ -54,6 +61,14 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
                 h.push(_jsx(LayoutHeader, { children: child }, "header-key"));
                 return;
             }
+            if (!b.length && child.type === LayoutBanner && isValidElement) {
+                b.push(child);
+                return;
+            }
+            if (isValidElement && child.type.displayName === BannerDisplayName) {
+                bc.push(child);
+                return;
+            }
             if (!s.length && child.type === LayoutSummaryTiles && React.isValidElement(child)) {
                 s.push(child);
                 return;
@@ -81,9 +96,21 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
         if (sc.length && !s.length) {
             s.push(_jsx(LayoutSummaryTiles, { children: sc }, "summary-tiles-key"));
         }
-        return [h, s, c];
+        if (bc.length) {
+            if (b.length) {
+                // Add bc elements as children to the existing LayoutBanner
+                const existingBanner = b[0];
+                const existingChildren = getArrayOfChildren(existingBanner.props.children);
+                b[0] = cloneElement(existingBanner, {}, [...existingChildren, ...bc]);
+            }
+            else {
+                b.push(_jsx(LayoutBanner, { children: bc }, "banner-key"));
+            }
+        }
+        return [h, b, s, c];
     }, [children]);
     const calculateLayoutParams = useCallback((elem, middleEl) => {
+        var _a, _b;
         if (!elem) {
             return;
         }
@@ -93,12 +120,12 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
             absoluteTop += current.offsetTop;
             current = current.offsetParent;
         }
-        const visibleTopOffset = Math.max(0, absoluteTop - window.scrollY);
+        const visibleTopOffset = Math.max(0, absoluteTop - (((_a = zen.window) === null || _a === void 0 ? void 0 : _a.scrollY) || 0));
         if (middleEl) {
             const middleElBottomPosition = middleEl.offsetTop + middleEl.offsetHeight;
             setMiddleElBottom(middleElBottomPosition);
         }
-        const vh = window.innerHeight;
+        const vh = ((_b = zen.window) === null || _b === void 0 ? void 0 : _b.innerHeight) || 0;
         const finalMinHeight = vh - visibleTopOffset;
         setMinHeight(finalMinHeight);
     }, []);
@@ -108,8 +135,7 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
         if (!contentEl) {
             return false;
         }
-        const selector = fullScreen ? ".zen-layout__full-screen-element--visible .zen-data-grid-actions"
-            : ".zen-data-grid-actions";
+        const selector = fullScreen ? ".zen-layout__full-screen-element--visible .zen-data-grid-actions" : ".zen-data-grid-actions";
         const container = fullScreen ? contentEl : contentEl.firstElementChild;
         const result = container === null || container === void 0 ? void 0 : container.querySelector(selector);
         if (result) {
@@ -123,22 +149,30 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     useResize(resizeCallBack, true);
     const isFullScreenCurrent = isFullScreen();
     useEffect(() => {
+        if (!isClientReady) {
+            return;
+        }
         calculateLayoutParams(layoutRef.current, middleRef.current);
-    }, [calculateLayoutParams, layoutRef, middleRef]);
+    }, [calculateLayoutParams, isClientReady, layoutRef, middleRef]);
     useEffect(() => {
-        setTimeout(() => {
+        var _a;
+        if (!isClientReady) {
+            return undefined;
+        }
+        const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             const isStartWithToolbar = checkIsStartWithToolbar(isFullScreenCurrent);
             setStartWithToolbar(isStartWithToolbar);
         }, 0);
-    }, [isFullScreenCurrent, checkIsStartWithToolbar]);
+        return () => { var _a; return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutId); };
+    }, [isFullScreenCurrent, checkIsStartWithToolbar, isClientReady]);
     const memoizedHeader = useMemo(() => header, [header]);
+    const memoizedBanners = useMemo(() => banners, [banners]);
     const memoizedContent = useMemo(() => content, [content]);
-    const memoizedSummaryTileBar = useMemo(() => summaryTileBar[0] ? cloneElement(summaryTileBar[0], { ref: middleRef })
-        : _jsx("div", { className: "zen-layout__middle-element", ref: middleRef }), [middleRef, summaryTileBar]);
+    const memoizedSummaryTileBar = useMemo(() => (summaryTileBar[0] ? cloneElement(summaryTileBar[0], { ref: middleRef }) : _jsx("div", { className: "zen-layout__middle-element", ref: middleRef })), [middleRef, summaryTileBar]);
     const handleSetFullScreenElement = useCallback((dataId) => {
         setFullScreenElement(dataId);
     }, []);
-    const memoizedOuterContentHeight = useMemo(() => isFullScreenCurrent ? minHeight : minHeight - (middleElBottom || 0), [isFullScreenCurrent, middleElBottom, minHeight]);
+    const memoizedOuterContentHeight = useMemo(() => (isFullScreenCurrent ? minHeight : minHeight - (middleElBottom || 0)), [isFullScreenCurrent, middleElBottom, minHeight]);
     const memoizedContentHeight = useMemo(() => {
         const contentPaddings = getContentPaddings(isMobile, startWithToolbar);
         return memoizedOuterContentHeight - contentPaddings;
@@ -154,6 +188,9 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     }, [isFullScreenCurrent, minHeight, pageScrolling]);
     useEffect(() => {
         var _a, _b;
+        if (!isClientReady) {
+            return;
+        }
         if (isFullScreenCurrent) {
             const fullscreenEl = (_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-layout__full-screen-element--visible");
             if (fullscreenEl) {
@@ -167,16 +204,20 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
         else {
             const previousFullscreenParent = (_b = layoutRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("[data-full-screen-parent='true']");
             if (previousFullscreenParent && previousFullscreenParent.length) {
-                previousFullscreenParent.forEach((el) => {
+                previousFullscreenParent.forEach(el => {
                     el.removeAttribute("data-full-screen-parent");
                 });
             }
         }
-    }, [isFullScreenCurrent, layoutRef]);
-    return _jsx("section", Object.assign({ id: id || layoutId, ref: layoutRef, className: classNames(["zen-layout", !pageScrolling ? "zen-layout--no-scroll" : "", className || ""]) }, heightStyle, { children: _jsx(LayoutFullScreenProvider, { isFullScreen: isFullScreen, setFullScreenElement: handleSetFullScreenElement, fullScreenElement: fullScreenElement, children: _jsxs(LayoutSizeProvider, { contentHeight: memoizedContentHeight, outerContentHeight: memoizedOuterContentHeight, isSetHeight: !pageScrolling, children: [isFullScreenCurrent ? null : memoizedHeader, isFullScreenCurrent ? null : memoizedSummaryTileBar, memoizedContent] }) }) }));
+    }, [isClientReady, isFullScreenCurrent, layoutRef]);
+    if (!isClientReady) {
+        return null;
+    }
+    return (_jsx("section", Object.assign({ id: id || layoutId, ref: layoutRef, className: classNames(["zen-layout", !pageScrolling ? "zen-layout--no-scroll" : "", className || ""]) }, heightStyle, { children: _jsx(LayoutFullScreenProvider, { isFullScreen: isFullScreen, setFullScreenElement: handleSetFullScreenElement, fullScreenElement: fullScreenElement, children: _jsxs(LayoutSizeProvider, { contentHeight: memoizedContentHeight, outerContentHeight: memoizedOuterContentHeight, isSetHeight: !pageScrolling, children: [isFullScreenCurrent ? null : memoizedHeader, isFullScreenCurrent ? null : memoizedBanners, isFullScreenCurrent ? null : memoizedSummaryTileBar, memoizedContent] }) }) })));
 };
 export const Layout = memo(LayoutInner);
 Layout.Header = LayoutHeader;
+Layout.Banner = LayoutBanner;
 Layout.Content = LayoutContent;
 Layout.SummaryTiles = LayoutSummaryTiles;
 Layout.FullScreen = LayoutFullScreen;

package/esm/layout/layoutBanner.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ILayoutBanner extends IZenComponentProps {
+    children: React.ReactNode;
+}
+export declare const LayoutBanner: ({ className, children }: ILayoutBanner) => import("react/jsx-runtime").JSX.Element;

package/esm/layout/layoutBanner.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const LayoutBanner = ({ className = "", children }) => (_jsx("div", { className: classNames(["zen-layout__banner", className]), children: children }));

package/esm/layout/layoutFullScreen.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { useCallback, useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useLayoutFullScreen } from "./layoutFullScreenProvider";
 import { LayoutFullScreenElementProvider } from "./layoutFullScreenElementProvider";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const LayoutFullScreen = ({ className = "", children }) => {
-    const dataId = useUniqueId();
+    const dataId = useId();
     const { setFullScreenElement, fullScreenElement } = useLayoutFullScreen();
     const fullScreenElContent = useMemo(() => _jsx("div", { className: classNames(["zen-layout__full-screen-element",
             fullScreenElement === dataId ? "zen-layout__full-screen-element--visible" : "", className]), "data-id": dataId, children: children }), [children, className, dataId, fullScreenElement]);

package/esm/lineChart/plugins/htmlLegend.js

@@ -1,16 +1,19 @@
+import { zen } from "../../utils/zen";
 const getOrCreateLegendList = (id, isDrive) => {
-    const legendContainer = document.getElementById(id);
+    var _a, _b;
+    const legendContainer = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(id);
     let listContainer = legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.querySelector("ul");
     if (!listContainer) {
-        listContainer = document.createElement("ul");
-        listContainer.classList.add("zen-legend-list", "zen-legend-list--flexible");
-        isDrive ? listContainer.classList.add("zen-legend-list--drive") : listContainer.classList.remove("zen-legend-list--drive");
-        legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.appendChild(listContainer);
+        listContainer = (_b = zen.document) === null || _b === void 0 ? void 0 : _b.createElement("ul");
+        listContainer === null || listContainer === void 0 ? void 0 : listContainer.classList.add("zen-legend-list", "zen-legend-list--flexible");
+        isDrive ? listContainer === null || listContainer === void 0 ? void 0 : listContainer.classList.add("zen-legend-list--drive") : listContainer === null || listContainer === void 0 ? void 0 : listContainer.classList.remove("zen-legend-list--drive");
+        listContainer && (legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.appendChild(listContainer));
     }
     return listContainer;
 };
 const clearList = (containerId) => {
-    const legendContainer = document.getElementById(containerId);
+    var _a;
+    const legendContainer = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(containerId);
     const ul = legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.querySelector("ul");
     if (!ul) {
         return;
@@ -48,29 +51,36 @@ export const htmlLegendPlugin = () => ({
             items = generateLabelsFn(chart);
         }
         items.forEach(item => {
-            const li = document.createElement("li");
-            li.classList.add("zen-legend-list__item");
-            li.onclick = () => {
-                if (item.datasetIndex !== undefined) {
-                    chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
-                }
-                chart.update();
-            };
+            var _a, _b, _c;
+            const li = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.createElement("li");
+            li === null || li === void 0 ? void 0 : li.classList.add("zen-legend-list__item");
+            if (li) {
+                li.onclick = () => {
+                    if (item.datasetIndex !== undefined) {
+                        chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+                    }
+                    chart.update();
+                };
+            }
             // Color box
-            const boxSpan = document.createElement("span");
-            boxSpan.classList.add("zen-legend-list__item-color");
+            const boxSpan = (_b = zen.document) === null || _b === void 0 ? void 0 : _b.createElement("span");
+            boxSpan && boxSpan.classList.add("zen-legend-list__item-color");
             if (item.strokeStyle) {
-                boxSpan.style.background = item.strokeStyle.toString();
+                boxSpan && (boxSpan.style.background = item.strokeStyle.toString());
             }
             // Text
-            const textContainer = document.createElement("p");
-            textContainer.classList.add("zen-legend-list__item-text");
-            textContainer.style.textDecoration = item.hidden ? "line-through" : "";
+            const textContainer = (_c = zen.document) === null || _c === void 0 ? void 0 : _c.createElement("p");
+            textContainer && textContainer.classList.add("zen-legend-list__item-text");
+            if (textContainer) {
+                textContainer.style.textDecoration = item.hidden ? "line-through" : "";
+            }
             const renderer = renderers[item.text] || renderers.default;
             const dataset = chart.data.datasets[item.datasetIndex];
-            textContainer.innerHTML = renderer(item, dataset);
-            li.appendChild(boxSpan);
-            li.appendChild(textContainer);
+            if (textContainer) {
+                textContainer.innerHTML = renderer(item, dataset);
+            }
+            boxSpan && (li === null || li === void 0 ? void 0 : li.appendChild(boxSpan));
+            textContainer && (li === null || li === void 0 ? void 0 : li.appendChild(textContainer));
             (uls[item.text] || uls.default).appendChild(li);
         });
     }

package/esm/list/hooks/useContainerScroll.js

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from "react";
+import { zen } from "../../utils/zen";
 export const useContainerScroll = () => {
     const scrollTimeoutRef = useRef(null);
     const moveScrollFunc = (container, dndElement) => {
@@ -14,19 +15,21 @@ export const useContainerScroll = () => {
         }
     };
     const moveScroll = useCallback((container, dndElement, callback) => {
+        var _a;
         if (scrollTimeoutRef.current) {
             return;
         }
         moveScrollFunc(container, dndElement);
         callback();
-        scrollTimeoutRef.current = setTimeout(() => {
+        scrollTimeoutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             scrollTimeoutRef.current = null;
             moveScroll(container, dndElement, callback);
         }, 50);
     }, [scrollTimeoutRef]);
     const cancelMoveScroll = useCallback(() => {
+        var _a;
         if (scrollTimeoutRef.current) {
-            clearTimeout(scrollTimeoutRef.current);
+            (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, scrollTimeoutRef.current);
             scrollTimeoutRef.current = null;
         }
     }, [scrollTimeoutRef]);

package/esm/list/hooks/useDragAndDrop.d.ts

@@ -1,4 +1,22 @@
 import { RefObject } from "react";
-export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void) => {
+interface IMarkerClasses {
+    general: string;
+    placeholder: string;
+    dragging: string;
+    dragged?: string;
+}
+/**
+ * A custom React hook that provides drag-and-drop functionality for reorderable list items.
+ * @param containerRef - A React ref pointing to the container element that holds the draggable items
+ * @param onChangeOrder - Callback function invoked when an item is dropped at a new position.
+ *                        Receives the start position and end position of the dragged item
+ * @param marksClassNames - Optional custom CSS class names for marking different states of list items.
+ *                          If not provided, defaults to 'zen-list-item' based classes
+ * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
+ *                       Receives the target position and should return false to prevent the drag operation.
+ * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
+ */
+export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean) => {
     onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
 };
+export {};