@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/pageHeader/pageHeaderHelpers.js

@@ -8,12 +8,12 @@ import { PageHeaderButton } from "./pageHeaderButton";
 import { PageHeaderMenu } from "./pageHeaderMenu";
 export const getItemsFromFragments = (items) => {
     const itemsArr = [];
-    React.Children.forEach(items, (child) => {
+    React.Children.forEach(items, child => {
         if (React.isValidElement(child) && child.type === React.Fragment) {
             const fragmentProps = child.props;
             if (fragmentProps && fragmentProps.children) {
                 const fragmentArr = getArrayOfChildren(fragmentProps.children);
-                itemsArr.push(...fragmentArr.filter((el) => React.isValidElement(el)));
+                itemsArr.push(...fragmentArr.filter(el => React.isValidElement(el)));
             }
         }
         else if (React.isValidElement(child)) {
@@ -26,11 +26,11 @@ export const regulatePageHeaderChildren = (children) => {
     const filters = [];
     const actions = [];
     const wrappedActions = [];
-    const childrenArray = getArrayOfChildren(children).filter((child) => child !== null && child !== undefined);
+    const childrenArray = getArrayOfChildren(children).filter(child => child !== null && child !== undefined);
     const preparedChildrenArr = getItemsFromFragments(childrenArray);
-    preparedChildrenArr.forEach((child) => {
+    preparedChildrenArr.forEach(child => {
         const isValidElement = React.isValidElement(child);
-        if (!filters.length && isValidElement && (child.type === PageHeaderFilters)) {
+        if (!filters.length && isValidElement && child.type === PageHeaderFilters) {
             filters.push(child);
             return;
         }
@@ -38,7 +38,7 @@ export const regulatePageHeaderChildren = (children) => {
             filters.push(_jsx(PageHeaderFilters, { children: child }, "page-header-filters-key"));
             return;
         }
-        if (!wrappedActions.length && isValidElement && (child.type === PageHeaderActions)) {
+        if (!wrappedActions.length && isValidElement && child.type === PageHeaderActions) {
             wrappedActions.push(child);
             return;
         }

package/esm/pagination/paginationText/paginationText.js

@@ -37,6 +37,8 @@ export const PaginationText = ({
   } = useLanguage();
   const children = translate("Showing {from} - {to} of {total}").replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{total}", amount.toString());
   return _jsx("span", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
     className: "zen-pagination__text",
     children: children
   });

package/esm/pill/components/pillActionable/pillActionable.js

@@ -34,7 +34,7 @@ export const ActionablePill = ({ onChange, disabled, readonly, className, childr
     }, [disabled, readonly, active, onChange]);
     const onKeyUpHandler = useCallback((e) => {
         var _a;
-        if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+        if (e.key === "Tab" || e.key === "Enter" || e.key === " " || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown") {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-pill-actionable--keyboard-nav");
         }
     }, [ref]);

package/esm/pill/pill.js

@@ -15,15 +15,18 @@ import { NonActionablePill, TRANSLATIONS as NON_ACTIONABLE_PILL_TRANSLATIONS } f
 import { ActionablePill } from "./components/pillActionable/pillActionable";
 import { getPillSizeClassName } from "./utils/getPillSizeClassName";
 import { useDrive } from "../utils/theme/useDrive";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 export const Pill = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     const isActionable = !!props.onChange && props.active !== undefined;
     const isFixedSize = props.size && props.size !== "default" && props.size !== "fullWidth";
     const isEmptyContent = !props.children;
     const isDrive = useDrive();
+    const isMobile = useMobile();
     const pillClassNames = classNames([
         "zen-pill-new",
         isDrive ? "zen-pill-new--drive" : "",
+        isMobile && !isDrive ? "zen-pill-new--mobile" : "",
         !isFixedSize ? getPillSizeClassName(props.size || "default") : "",
         isEmptyContent ? "zen-pill-new--empty" : "",
         className !== null && className !== void 0 ? className : ""

package/esm/pillAction/pillAction.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { generateId } from "../commonHelpers/utils";
+import { useId } from "react";
 import { IconCheckmark } from "../icons/deprecated/iconCheckmark";
 /**
  * @deprecated - will be removed in the next releases.
  */
 export const PillAction = ({ onChange, disabled, children }) => {
-    const id = generateId();
+    const id = useId();
     return _jsxs("div", { className: "zen-pill-actionable", children: [_jsx("input", { onChange: onChange, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled }), _jsxs("label", { className: "zen-pill-actionable__block zen-pill-actionable__block--actionable", htmlFor: id, children: [_jsx(IconCheckmark, { size: "big", className: "zen-pill-actionable__icon" }), children] })] });
 };

package/esm/pillExpandable/pillContent.js

@@ -15,8 +15,8 @@ export const PillContent = ({ date, count, descriptionText, mainAction, secondar
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
-    const renderMainButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
-    const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderMainButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text })), [mainActionClick]);
+    const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "tertiary", children: data.text })), [secondaryActionClick]);
     const renderDescription = useCallback(data => _jsx("div", { id: descriptionId, className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);

package/esm/pillExpandable/pillExpandable.js

@@ -11,6 +11,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { getButtonMoreProps } from "./getProps";
 import { Skeleton } from "../skeleton/skeleton";
 import { isFunction } from "../commonHelpers/reactHelpers/reactHelpers";
+import { Divider } from "../divider/divider";
 injectString("cs", "Expand", "Rozbalit");
 injectString("da-DK", "Expand", "Udvid");
 injectString("de", "Expand", "Erweitern");
@@ -386,7 +387,7 @@ const PillExpandableBase = ({
               errorHandler: errorHandler,
               descriptionId: descriptionId
             }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && _jsxs(_Fragment, {
-              children: [_jsx("div", {
+              children: [_jsx(Divider, {
                 className: "zen-status-pill-popup__divider"
               }), _jsxs(Button, Object.assign({}, buttonMoreProps, {
                 type: "tertiary",

package/esm/radio/radio.js

@@ -13,10 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
 export const Radio = (_a) => {
     var { fullWidth, id, reverse, checked, title, className = "", name, value, children, wrappedInLabel, disabled, ref } = _a, rest = __rest(_a, ["fullWidth", "id", "reverse", "checked", "title", "className", "name", "value", "children", "wrappedInLabel", "disabled", "ref"]);
     const generatedId = React.useId();
     const intId = generatedId;
+    const isMobile = useMobile();
     const driveClassess = useDriveClassName("zen-radio");
-    return _jsx("div", { className: classNames(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: _jsxs("div", { className: classNames(["zen-radio__wrapper", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), _jsxs("label", { className: classNames(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? _jsx("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
+    return _jsx("div", { className: classNames(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: _jsxs("div", { className: classNames(["zen-radio__wrapper", isMobile && !driveClassess ? "zen-radio__wrapper--mobile" : "", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), _jsxs("label", { className: classNames(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? _jsx("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
 };

package/esm/rangeRaw/components/rangeField.js

@@ -3,14 +3,18 @@ import { useId } from "react";
 import { TextInput } from "../../textInput/textInput";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { IconException } from "../../icons/iconException";
+import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
     const inputId = useId();
     const labelId = useId();
     const unitId = useId();
+    const mobileLabelClass = useMobileClassName("zen-range-field__label");
+    const mobileSenseClass = useMobileClassName("zen-range-field__sense");
+    const mobileInputClass = useMobileClassName("zen-range-field__input");
     const handleChange = (e) => {
         const newValue = e.target.value ? Number(e.target.value) : null;
         onChange(id, newValue);
     };
     return _jsxs("div", { className: classNames(["zen-range-field", direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
-            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [_jsxs("div", { className: "zen-range-field__content", children: [_jsx("label", { className: "zen-range-field__label zen-ellipsis", id: labelId, htmlFor: inputId, children: label }), _jsx("div", { className: "zen-range-field__input-container", children: _jsx(TextInput, { inputClassName: classNames(["zen-range-field__input", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? _jsx("div", { id: unitId, className: "zen-range-field__sense zen-ellipsis", children: _jsx("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? _jsxs("div", { className: "zen-range-field__error", children: [_jsx(IconException, { className: "zen-range-field__error-icon", size: "bigger" }), _jsx("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
+            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [_jsxs("div", { className: "zen-range-field__content", children: [_jsx("label", { className: classNames(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), _jsx("div", { className: "zen-range-field__input-container", children: _jsx(TextInput, { inputClassName: classNames(["zen-range-field__input", mobileInputClass || "", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? _jsx("div", { id: unitId, className: classNames(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: _jsx("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? _jsxs("div", { className: "zen-range-field__error", children: [_jsx(IconException, { className: "zen-range-field__error-icon", size: "bigger" }), _jsx("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
 };

package/esm/rangeRaw/rangeRaw.js

@@ -20,6 +20,7 @@ import { FooterButtons } from "../footerButtons/footerButtons";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { zen } from "../utils/zen";
 // eslint-disable-next-line complexity
 injectString("cs", "Min", "Min.");
 injectString("da-DK", "Min", "Min");
@@ -286,8 +287,9 @@ export const RangeRaw = props => {
     isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
   }, [isOpen]);
   const handleClearClick = useCallback(() => {
+    var _a;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, blurTimeoutRef.current);
     }
     defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({
       min: null,
@@ -297,20 +299,20 @@ export const RangeRaw = props => {
     setErrorType(isHasError);
   }, [allowEqualMinMax, defaultValueInner, fullBounded, max, min]);
   const handleCancelClick = useCallback(() => {
-    var _a;
+    var _a, _b;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, blurTimeoutRef.current);
     }
     setCurrentValue(value);
     const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
     setErrorType(isHasError);
     setIsOpen(false);
-    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
   }, [allowEqualMinMax, fullBounded, max, min, value]);
   const handleApplyClick = useCallback(() => {
-    var _a;
+    var _a, _b;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, blurTimeoutRef.current);
     }
     const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
     setErrorType(isHasError);
@@ -319,7 +321,7 @@ export const RangeRaw = props => {
     }
     onChange(currentValue);
     setIsOpen(false);
-    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
   }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
   const handleClearChipClick = useCallback(() => {
     handleClearClick();
@@ -336,8 +338,9 @@ export const RangeRaw = props => {
   const isClearDisabled = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
   const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
   const handleBlur = useCallback(e => {
+    var _a;
     if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
-      blurTimeoutRef.current = setTimeout(() => {
+      blurTimeoutRef.current = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
         const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
         setErrorType(isHasError);
       }, 200);
@@ -493,12 +496,14 @@ export const RangeRaw = props => {
     className: classNames(["zen-range", isError ? "zen-range--error" : "", className || ""]),
     children: [chip ? _jsx(Chip, {
       id: chipId,
+      className: className,
       status: isClearDisabled() ? undefined : chipStatus || "active",
       isOpen: isOpen,
       disabled: disabled,
       onClick: handleTriggerClick,
       onClose: isClearDisabled() ? undefined : handleClearChipClick,
       triggerRef: triggerRef,
+      dataRole: "dialog",
       icon: chipIcon,
       children: selection ? selection : chipName
     }) : _jsx(FilterButton, Object.assign({

package/esm/react-chartjs/chart.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, forwardRef, useCallback } from "react";
 import { Chart as ChartJS } from "chart.js/auto";
 import { reforwardRef, cloneData, setOptions, setLabels, setDatasets } from "./utils";
+import { zen } from "../utils/zen";
 const ChartComponent = function (props, ref) {
     const _a = props, { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode } = _a, canvasProps = __rest(_a, ["height", "width", "redraw", "datasetIdKey", "type", "data", "options", "plugins", "fallbackContent", "updateMode"]);
     const canvasRef = useRef(null);
@@ -52,23 +53,25 @@ const ChartComponent = function (props, ref) {
         }
     }, [redraw, data.datasets, datasetIdKey]);
     useEffect(() => {
+        var _a;
         if (!chartRef.current) {
             return;
         }
         if (redraw) {
             destroyChart();
-            setTimeout(renderChart);
+            (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, renderChart);
         }
         else {
             chartRef.current.update(updateMode);
         }
     }, [redraw, options, data.labels, data.datasets, updateMode, destroyChart, renderChart]);
     useEffect(() => {
+        var _a;
         if (!chartRef.current) {
             return;
         }
         destroyChart();
-        setTimeout(renderChart);
+        (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, renderChart);
     }, [destroyChart, renderChart, type]);
     useEffect(() => {
         renderChart();

package/esm/searchInputRaw/searchInputRaw.js

@@ -11,6 +11,8 @@ import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+// eslint-disable-next-line complexity
 injectString("cs", "Search", "Hledat");
 injectString("da-DK", "Search", "S\xF8g");
 injectString("de", "Search", "Suche");
@@ -77,7 +79,12 @@ export const SearchInputRaw = props => {
     autoFocus,
     id,
     onFocus,
-    ref
+    ref,
+    role,
+    ariaAutocomplete,
+    ariaControls,
+    ariaHaspopup,
+    ariaExpanded
   } = props;
   const {
     name,
@@ -94,10 +101,11 @@ export const SearchInputRaw = props => {
   const ariaLabelValue = ariaLabel || translate("Search");
   const disabledClassName = disabled ? "zen-search-input__input--disabled" : "";
   const isDrive = useDrive();
+  const isMobile = useMobile();
   const driveCloseButtonClassName = useDriveClassName("zen-search-input__close-button");
   const searchIconProps = {
     className: "zen-search-input__pre-icon",
-    size: isDrive ? "huge" : "large"
+    size: isDrive || isMobile ? "huge" : "large"
   };
   const searchIcon = _jsx(IconSearch, Object.assign({}, searchIconProps));
   const handleChange = event => {
@@ -105,19 +113,19 @@ export const SearchInputRaw = props => {
   };
   let closeButton = null;
   if (!withDefaultCloseIcon) {
-    const closeButtonClassName = `zen-search-input__close-button ${value.length ? "zen-search-input__close-button--visible" : ""} ${driveCloseButtonClassName || ""}`;
+    const closeButtonClassName = ["zen-search-input__close-button", value.length ? "zen-search-input__close-button--visible" : "", isMobile && !isDrive ? "zen-search-input__close-button--mobile" : "", driveCloseButtonClassName || ""];
     const onClick = () => {
       onChange === null || onChange === void 0 ? void 0 : onChange("");
     };
     closeButton = _jsx("button", {
       type: "button",
       tabIndex: value.length ? 0 : -1,
-      className: closeButtonClassName,
+      className: classNames(closeButtonClassName),
       onClick: onClick,
       title: closeButtonTitleValue,
       children: _jsx(IconClose, {
         className: "zen-search-input__close-icon",
-        size: isDrive ? "huge" : "large"
+        size: isDrive || isMobile ? "huge" : "large"
       })
     });
   }
@@ -135,9 +143,12 @@ export const SearchInputRaw = props => {
       value: String(value)
     });
   }
-  return _jsx("div", {
-    onClick: onClickHandler,
-    role: "search",
+  const wrapperAttributes = props.role !== undefined ? {} : {
+    role: "search"
+  };
+  return _jsx("div", Object.assign({
+    onClick: onClickHandler
+  }, wrapperAttributes, {
     className: classNames(["zen-search-input", className]),
     children: _jsx(InputAdornments, {
       name: name,
@@ -158,9 +169,13 @@ export const SearchInputRaw = props => {
       autoFocus: autoFocus,
       onFocus: onFocus,
       ariaLabel: ariaLabelValue,
-      ariaDescribedby: props.ariaDescribedby
+      role: role,
+      ariaAutocomplete: ariaAutocomplete,
+      ariaControls: ariaControls,
+      ariaHaspopup: ariaHaspopup,
+      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true
     })
-  });
+  }));
 };
 SearchInputRaw.displayName = "SearchInputRaw";
 export const TRANSLATIONS = ["Search", "Search field", "Clear"];

package/esm/searchInputRaw/types.d.ts

@@ -14,13 +14,18 @@ export interface ISearchInputRawBase {
     withDefaultCloseIcon?: boolean;
     id?: string;
     /**
-    * @deprecated
-    * @param withNewSearchIcon - will be removed in the next major release
-    */
+     * @deprecated
+     * @param withNewSearchIcon - will be removed in the next major release
+     */
     withNewSearchIcon?: boolean;
     autoFocus?: boolean;
     ariaDescribedby?: string;
     ref?: React.RefObject<HTMLInputElement | null>;
+    role?: string | undefined;
+    ariaAutocomplete?: "list" | "none" | "inline" | "both";
+    ariaControls?: string;
+    ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    ariaExpanded?: boolean | "true" | "false";
 }
 export interface ISearchInputRawDefault extends ISearchInputRawBase {
     value: string;

package/esm/selectList/selectList.js

@@ -22,6 +22,7 @@ import { isChildOf } from "../utils/isChildOf";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { getScrollableParent } from "../utils/getScrollableParent";
+import { zen } from "../utils/zen";
 export const defaultListItemHeight = 40;
 const MemoizedSelectListItem = memo(SelectListItem);
 const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {}, ref: listRef }) => {
@@ -56,8 +57,8 @@ export const SelectList = (_a) => {
         dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
     }, [multiselect]);
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (state.activeIndex >= 0 && document.activeElement && listRef && listRef.current && isChildOf(document.activeElement, listRef.current)) {
+        var _a;
+        if (state.activeIndex >= 0 && ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && listRef.current && isChildOf(zen.document.activeElement, listRef.current)) {
             const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }

package/esm/selectRaw/select.helpers.js

@@ -3,6 +3,7 @@ import { CheckboxState } from "../checkbox/checkboxState";
 import { getFirstActiveIndex, getInitialState } from "../selectList/selectList.helpers";
 import { getParentWithHiddenOverflow } from "../utils/getParentWithHiddenOverflow";
 import { getRelativeParent } from "../utils/getRelativeParent";
+import { zen } from "../utils/zen";
 export const getSelectValue = (state, items) => {
     var _a;
     const newValIndex = getFirstActiveIndex(state, items, false);
@@ -23,11 +24,14 @@ const getElementInnerRect = (elRect, bordersRect) => ({
 export const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight = 0, maxPopupHeight = Number.POSITIVE_INFINITY) => {
     popupEl.style.height = "auto";
     const triggerRect = triggerElement.getBoundingClientRect();
-    const relativeParent = getRelativeParent(triggerElement) || document.body;
+    if (!zen.document) {
+        return;
+    }
+    const relativeParent = getRelativeParent(triggerElement) || zen.document.body;
     const parentDomRect = relativeParent.getBoundingClientRect();
     const parentBorders = getBorders(relativeParent);
     const parentRect = getElementInnerRect(parentDomRect, parentBorders);
-    const cuttingParent = getParentWithHiddenOverflow(triggerElement) || document.body;
+    const cuttingParent = getParentWithHiddenOverflow(triggerElement) || zen.document.body;
     const cuttingParentDomRect = cuttingParent.getBoundingClientRect();
     const cuttingParentBorders = getBorders(relativeParent);
     const cuttingParentRect = getElementInnerRect(cuttingParentDomRect, cuttingParentBorders);

package/esm/selectRaw/selectRaw.js

@@ -14,6 +14,7 @@ import { Absolute } from "../absolute/absolute";
 import { usePopupWidth } from "./hooks/usePopupWidth";
 import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { zen } from "../utils/zen";
 // get default active item (based on items array)
 const getItemById = (items, id) => items.find(item => item.id === id);
 const closedListActionGetters = {
@@ -67,7 +68,8 @@ export const SelectRaw = (props) => {
         dispatchState({ type: ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
     }, [value, items]);
     React.useEffect(() => {
-        if (state.activeIndex >= 0 && document.activeElement && ref.current && isChildOf(document.activeElement, ref.current)) {
+        var _a;
+        if (state.activeIndex >= 0 && ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && ref.current && isChildOf(zen.document.activeElement, ref.current)) {
             const itemEl = ref.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }

package/esm/shield/shield.js

@@ -3,7 +3,9 @@ import { useEffect } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useFadeComponent } from "../utils/useFadeComponent";
 import { createPortal } from "react-dom";
+import { zen } from "../utils/zen";
 export const Shield = ({ className, dataShieldId, isVisible }) => {
+    var _a, _b;
     const { renderComponent, showContent, setIsOpen, handleTransitionEnd } = useFadeComponent(isVisible || false);
     useEffect(() => {
         setIsOpen(isVisible || false);
@@ -11,5 +13,5 @@ export const Shield = ({ className, dataShieldId, isVisible }) => {
     if (!renderComponent && !isVisible) {
         return isVisible === undefined ? _jsx("div", { className: classNames(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }) : null;
     }
-    return createPortal(_jsx("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), document.fullscreenElement || document.body);
+    return createPortal(_jsx("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body));
 };