@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/react-chartjs/dateFns/dateFns.js

@@ -99,7 +99,7 @@ export function addYears(date, amount) {
 }
 const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const quarterNames = ["Q1", "Q2", "Q3", "Q4"];
-const formatHours = (date) => date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
+const formatHours = (date) => (date.getHours() > 12 ? date.getHours() - 12 : date.getHours());
 function getWeekRange(date) {
     const startDate = new Date(date);
     const endDate = new Date(date);
@@ -118,23 +118,23 @@ export function format(date, formatString) {
         result = new Date(date);
     }
     const options = {
-        "yyyy": result.getFullYear(),
-        "MM": String(result.getMonth() + 1).padStart(2, "0"),
-        "d": result.getDate(),
-        "h": formatHours(result),
-        "ha": formatHours(result) + " " + (result.getHours() >= 12 ? "PM" : "AM"),
-        "mm": String(result.getMinutes()).padStart(2, "0"),
-        "ss": String(result.getSeconds()).padStart(2, "0"),
-        "SSS": String(result.getMilliseconds()).padStart(3, "0"),
-        "aaaa": result.getHours() >= 12 ? "PM" : "AM",
-        "MMM": monthNames[result.getMonth()],
-        "PP": getWeekRange(result),
-        "qqq": quarterNames[Math.floor(result.getMonth() / 3)],
+        yyyy: result.getFullYear(),
+        MM: String(result.getMonth() + 1).padStart(2, "0"),
+        d: result.getDate(),
+        h: formatHours(result),
+        ha: formatHours(result) + " " + (result.getHours() >= 12 ? "PM" : "AM"),
+        mm: String(result.getMinutes()).padStart(2, "0"),
+        ss: String(result.getSeconds()).padStart(2, "0"),
+        SSS: String(result.getMilliseconds()).padStart(3, "0"),
+        aaaa: result.getHours() >= 12 ? "PM" : "AM",
+        MMM: monthNames[result.getMonth()],
+        PP: getWeekRange(result),
+        qqq: quarterNames[Math.floor(result.getMonth() / 3)],
         "qqq - yyyy": quarterNames[Math.floor(result.getMonth() / 3)] + " - " + result.getFullYear()
     };
     let formattedDate = formatString;
     const keys = Object.keys(options).sort((a, b) => b.length - a.length);
-    keys.forEach((key) => {
+    keys.forEach(key => {
         if (options.hasOwnProperty(key)) {
             formattedDate = formattedDate.replace(key, options[key]);
         }

package/esm/react-chartjs/types.d.ts

@@ -3,47 +3,47 @@ import type { Chart, ChartType, ChartData, ChartOptions, DefaultDataPoint, Plugi
 export type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
 export interface IChartProps<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> extends CanvasHTMLAttributes<HTMLCanvasElement> {
     /**
-   * Chart.js chart type
-   */
+     * Chart.js chart type
+     */
     type: TType;
     /**
-   * The data object that is passed into the Chart.js chart
-   * @see https://www.chartjs.org/docs/latest/getting-started/
-   */
+     * The data object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/getting-started/
+     */
     data: ChartData<TType, TData, TLabel>;
     /**
-   * The options object that is passed into the Chart.js chart
-   * @see https://www.chartjs.org/docs/latest/general/options.html
-   * @default {}
-   */
+     * The options object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/general/options.html
+     * @default {}
+     */
     options?: ChartOptions<TType>;
     /**
-   * The plugins array that is passed into the Chart.js chart
-   * @see https://www.chartjs.org/docs/latest/developers/plugins.html
-   * @default []
-   */
+     * The plugins array that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/developers/plugins.html
+     * @default []
+     */
     plugins?: Plugin<TType>[];
     /**
-   * Teardown and redraw chart on every update
-   * @default false
-   */
+     * Teardown and redraw chart on every update
+     * @default false
+     */
     redraw?: boolean;
     /**
-   * Key name to identificate dataset
-   * @default 'label'
-   */
+     * Key name to identificate dataset
+     * @default 'label'
+     */
     datasetIdKey?: string;
     /**
-   * A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions
-   * @see https://www.chartjs.org/docs/latest/general/accessibility.html
-   * @default null
-   * @todo Replace with `children` prop.
-   */
+     * A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions
+     * @see https://www.chartjs.org/docs/latest/general/accessibility.html
+     * @default null
+     * @todo Replace with `children` prop.
+     */
     fallbackContent?: ReactNode;
     /**
-   * A mode string to indicate transition configuration should be used.
-   * @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
-   */
+     * A mode string to indicate transition configuration should be used.
+     * @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
+     */
     updateMode?: UpdateMode;
 }
 /**

package/esm/react-chartjs/utils.js

@@ -22,9 +22,7 @@ export function setDatasets(currentData, nextDatasets, datasetIdKey = defaultDat
         // given the new set, find it's current match
         const currentDataset = currentData.datasets.find((dataset) => dataset[datasetIdKey] === nextDataset[datasetIdKey]);
         // There is no original to update, so simply add new one
-        if (!currentDataset ||
-            !nextDataset.data ||
-            addedDatasets.includes(currentDataset)) {
+        if (!currentDataset || !nextDataset.data || addedDatasets.includes(currentDataset)) {
             return Object.assign({}, nextDataset);
         }
         addedDatasets.push(currentDataset);

package/esm/searchInput/searchInput.js

@@ -6,8 +6,6 @@ const FormInput = FormField(SearchInputRaw);
 export const SearchInput = (props) => {
     const { maxLength, name, value = "" } = useFormFieldValues(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return _jsx(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
-            : undefined }));
+    return (_jsx(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}` : undefined })));
 };
 SearchInput.displayName = "SearchInput";

package/esm/searchInputRaw/searchInputRaw.js

@@ -39,6 +39,7 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
+injectString("ar-SA", "Search", "\u0628\u062D\u062B");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -65,6 +66,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
+injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
 export const SearchInputRaw = props => {
   const {
     className = "",

package/esm/selectList/selectList.js

@@ -30,7 +30,7 @@ const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, tit
     const driveComponentClass = useDriveClassName("zen-select-list");
     const state = getInitialState({ items, value, multiselect });
     state.activeIndex = activeIndex;
-    return _jsx("ul", { id: id, ref: listRef, className: classNames(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? (getItemIdByIndex(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id)) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => _createElement(MemoizedSelectListItem, Object.assign({}, item, { className: classNames(["zen-select-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children)) });
+    return (_jsx("ul", { id: id, ref: listRef, className: classNames(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? getItemIdByIndex(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => (_createElement(MemoizedSelectListItem, Object.assign({}, item, { className: classNames(["zen-select-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children))) }));
 };
 SelectListInnerComp.displayName = "SelectListInnerComp";
 const SelectListInner = memo(SelectListInnerComp);
@@ -58,7 +58,10 @@ export const SelectList = (_a) => {
     }, [multiselect]);
     useEffect(() => {
         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)) {
+        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" });
         }
@@ -72,9 +75,13 @@ export const SelectList = (_a) => {
     }, [onClick, state.level]);
     const onKeyDown = (e) => {
         const handlers = {
-            "ArrowUp": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
-            "ArrowDown": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusNext, payload: { items } }) : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
-            "Enter": () => {
+            ArrowUp: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: ListAction.FocusPrev, payload: { items } })
+                : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
+            ArrowDown: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: ListAction.FocusNext, payload: { items } })
+                : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
+            Enter: () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (!item || item.disabled) {
@@ -84,16 +91,23 @@ export const SelectList = (_a) => {
                     dispatchState({ type: ListAction.SetLevel, payload: { items } });
                 }
                 else {
-                    dispatchState({ type: ListAction.ChangeItemState, payload: {
+                    dispatchState({
+                        type: ListAction.ChangeItemState,
+                        payload: {
                             updatedId: item.id,
                             updatedState: item.state === CheckboxState.On ? CheckboxState.Off : CheckboxState.On,
                             multiselect: multiselect
-                        } });
+                        }
+                    });
                 }
             },
-            "Home": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusFirst, payload: { items } }) : dispatchState({ type: ListAction.SelectFirst, payload: { items, multiselect } }),
-            "End": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusLast, payload: { items } }) : dispatchState({ type: ListAction.SelectLast, payload: { items, multiselect } }),
-            "Space": () => {
+            Home: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: ListAction.FocusFirst, payload: { items } })
+                : dispatchState({ type: ListAction.SelectFirst, payload: { items, multiselect } }),
+            End: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: ListAction.FocusLast, payload: { items } })
+                : dispatchState({ type: ListAction.SelectLast, payload: { items, multiselect } }),
+            Space: () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (item === null || item === void 0 ? void 0 : item.disabled) {
@@ -106,7 +120,7 @@ export const SelectList = (_a) => {
             "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),
             "Ctrl+Shift+End": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheEnd, payload: { items, multiselect } }),
             "Ctrl+KeyA": () => multiselect && dispatchState({ type: ListAction.ToggleAll, payload: { items, multiselect } }),
-            "default": () => dispatchState({ type: ListAction.SearchItem, payload: { items, key: e.key } })
+            default: () => dispatchState({ type: ListAction.SearchItem, payload: { items, key: e.key } })
         };
         const handlerName = getKeysPressed(e);
         const handler = handlers[handlerName] || (isKeyForSearch(e.code) && handlers["default"]);
@@ -126,6 +140,6 @@ export const SelectList = (_a) => {
         multiselect && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
         !multiselect && forceSelection && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
     };
-    return _jsx(SelectListInner, Object.assign({}, rest, { ref: listRef, value: state.itemsState, items: items, activeIndex: state.activeIndex, multiselect: multiselect, standalone: true, disabled: disabled, onChangeItem: onChangeItem, onClickItem: onClick, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }));
+    return (_jsx(SelectListInner, Object.assign({}, rest, { ref: listRef, value: state.itemsState, items: items, activeIndex: state.activeIndex, multiselect: multiselect, standalone: true, disabled: disabled, onChangeItem: onChangeItem, onClickItem: onClick, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur })));
 };
-export const PassiveSelectList = (props) => _jsx(SelectListInnerComp, Object.assign({}, props, { standalone: false }));
+export const PassiveSelectList = props => _jsx(SelectListInnerComp, Object.assign({}, props, { standalone: false }));

package/esm/selectList/selectList.reducer.js

@@ -43,16 +43,20 @@ export const selectListReducer = (state, action) => {
         }
         case ListAction.ToggleCurrent: {
             const currentItemId = getItemIdByIndex(state.itemsState, state.activeIndex);
-            const currentState = currentItemId && state.itemsState.get(currentItemId) || CheckboxState.Off;
+            const currentState = (currentItemId && state.itemsState.get(currentItemId)) || CheckboxState.Off;
             const [newItemsState, isUpdated] = currentItemId
                 ? updateItemState(state.itemsState, payload.multiselect, currentItemId, currentState === CheckboxState.On ? CheckboxState.Off : CheckboxState.On)
                 : [state.itemsState, false];
             return Object.assign(Object.assign({}, state), { itemsState: newItemsState, isItemsStateChanged: isUpdated, searchStr: "" });
         }
-        case ListAction.FocusFirst: return Object.assign(Object.assign({}, state), { activeIndex: getFirstIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
-        case ListAction.FocusLast: return Object.assign(Object.assign({}, state), { activeIndex: getLastIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
-        case ListAction.FocusNext: return Object.assign(Object.assign({}, state), { activeIndex: getNextIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
-        case ListAction.FocusPrev: return Object.assign(Object.assign({}, state), { activeIndex: getPrevIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusFirst:
+            return Object.assign(Object.assign({}, state), { activeIndex: getFirstIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusLast:
+            return Object.assign(Object.assign({}, state), { activeIndex: getLastIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusNext:
+            return Object.assign(Object.assign({}, state), { activeIndex: getNextIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusPrev:
+            return Object.assign(Object.assign({}, state), { activeIndex: getPrevIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
         case ListAction.SelectFirst: {
             const index = getFirstIndex(payload.items);
             return selectItem(state, index, payload.multiselect, (_a = payload.items[index]) === null || _a === void 0 ? void 0 : _a.disabled);
@@ -69,9 +73,12 @@ export const selectListReducer = (state, action) => {
             const index = getPrevIndex(state.activeIndex, payload.items);
             return selectItem(state, index, payload.multiselect, (_d = payload.items[index]) === null || _d === void 0 ? void 0 : _d.disabled);
         }
-        case ListAction.SelectAllToTheBeginning: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Up, payload.multiselect, CheckboxState.On);
-        case ListAction.SelectAllToTheEnd: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Down, payload.multiselect, CheckboxState.On);
-        case ListAction.ToggleAll: return toggleItems(payload.items, state, 0, SelectDirection.Down, payload.multiselect);
+        case ListAction.SelectAllToTheBeginning:
+            return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Up, payload.multiselect, CheckboxState.On);
+        case ListAction.SelectAllToTheEnd:
+            return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Down, payload.multiselect, CheckboxState.On);
+        case ListAction.ToggleAll:
+            return toggleItems(payload.items, state, 0, SelectDirection.Down, payload.multiselect);
         case ListAction.SearchItem: {
             const isSymbol = payload.key.length === 1;
             const isBackSpace = payload.key === "Backspace";
@@ -119,6 +126,7 @@ export const selectListReducer = (state, action) => {
             const newLevel = item && item.multiLevel ? item.id : "";
             return Object.assign(Object.assign({}, state), { level: newLevel });
         }
-        default: throw new Error("Unknown action");
+        default:
+            throw new Error("Unknown action");
     }
 };

package/esm/selectList/selectListItem.js

@@ -16,7 +16,7 @@ export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off
         }
         onChange && onChange(id, newState);
     };
-    return _jsx("li", { "data-id": id, className: classNames([
+    return (_jsx("li", { "data-id": id, className: classNames([
             "zen-select-item",
             showCheckbox ? "zen-select-item--with-checkbox" : "",
             focused ? "zen-select-item--focused" : "",
@@ -27,7 +27,5 @@ export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ?
-                    _jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })
-                    : children, multiLevel && !showCheckbox ? _jsx(IconChevronRight, { size: "large" }) : null] }) });
+            ]), children: [showCheckbox ? (_jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? _jsx(IconChevronRight, { size: "large" }) : null] }) }));
 };

package/esm/selectRaw/select.helpers.js

@@ -37,7 +37,7 @@ export const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight
     const cuttingParentRect = getElementInnerRect(cuttingParentDomRect, cuttingParentBorders);
     const spaceToTop = triggerRect.top - cuttingParentRect.top;
     const spaceToBottom = cuttingParentRect.bottom - triggerRect.bottom;
-    const alignment = (spaceToBottom < acceptableMinPopupHeight && spaceToTop > spaceToBottom) ? "top" : "bottom";
+    const alignment = spaceToBottom < acceptableMinPopupHeight && spaceToTop > spaceToBottom ? "top" : "bottom";
     const childrenHeight = popupEl.scrollHeight;
     const position = alignment === "bottom"
         ? {
@@ -50,7 +50,7 @@ export const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight
             bottom: parentRect.bottom - triggerRect.bottom + triggerRect.height,
             height: Math.min(maxPopupHeight, spaceToTop, childrenHeight)
         };
-    Object.keys(position).forEach((prop) => {
+    Object.keys(position).forEach(prop => {
         const propValue = position[prop];
         popupEl.style[prop] = propValue === undefined ? "auto" : `${propValue}px`;
     });

package/esm/selectRaw/selectRaw.js

@@ -18,28 +18,28 @@ 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 = {
-    "ArrowDown": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "Alt+ArrowDown": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "ArrowUp": (items) => ({ type: SelectAction.FocusFirstAndExpand, payload: { items } }),
-    "Enter": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "Space": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "Home": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "End": (items) => ({ type: SelectAction.Expand, payload: { items } }),
-    "default": (items, e) => ({ type: SelectAction.SearchAndExpand, payload: { items, key: e.key } })
+    ArrowDown: items => ({ type: SelectAction.Expand, payload: { items } }),
+    "Alt+ArrowDown": items => ({ type: SelectAction.Expand, payload: { items } }),
+    ArrowUp: items => ({ type: SelectAction.FocusFirstAndExpand, payload: { items } }),
+    Enter: items => ({ type: SelectAction.Expand, payload: { items } }),
+    Space: items => ({ type: SelectAction.Expand, payload: { items } }),
+    Home: items => ({ type: SelectAction.Expand, payload: { items } }),
+    End: items => ({ type: SelectAction.Expand, payload: { items } }),
+    default: (items, e) => ({ type: SelectAction.SearchAndExpand, payload: { items, key: e.key } })
 };
 const openListActionGetters = {
-    "Enter": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
-    "Space": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
-    "Tab": () => ({ type: ListAction.Blur, payload: { multiselect: false } }),
-    "Escape": () => ({ type: SelectAction.Collapse, payload: {} }),
-    "ArrowDown": (items) => ({ type: ListAction.FocusNext, payload: { items } }),
-    "ArrowUp": (items) => ({ type: ListAction.FocusPrev, payload: { items } }),
+    Enter: () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    Space: () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
+    Tab: () => ({ type: ListAction.Blur, payload: { multiselect: false } }),
+    Escape: () => ({ type: SelectAction.Collapse, payload: {} }),
+    ArrowDown: items => ({ type: ListAction.FocusNext, payload: { items } }),
+    ArrowUp: items => ({ type: ListAction.FocusPrev, payload: { items } }),
     "Alt+ArrowUp": () => ({ type: ListAction.ToggleCurrent, payload: { multiselect: false } }),
-    "Home": (items) => ({ type: ListAction.FocusFirst, payload: { items } }),
-    "End": (items) => ({ type: ListAction.FocusLast, payload: { items } }),
-    "PageUp": (items, _, pageSize) => ({ type: ListAction.FocusPrevPage, payload: { items, pageSize } }),
-    "PageDown": (items, _, pageSize) => ({ type: ListAction.FocusNextPage, payload: { items, pageSize } }),
-    "default": (items, e) => ({ type: ListAction.SearchItem, payload: { items, key: e.key } })
+    Home: items => ({ type: ListAction.FocusFirst, payload: { items } }),
+    End: items => ({ type: ListAction.FocusLast, payload: { items } }),
+    PageUp: (items, _, pageSize) => ({ type: ListAction.FocusPrevPage, payload: { items, pageSize } }),
+    PageDown: (items, _, pageSize) => ({ type: ListAction.FocusNextPage, payload: { items, pageSize } }),
+    default: (items, e) => ({ type: ListAction.SearchItem, payload: { items, key: e.key } })
 };
 const PassiveSelectListComp = React.memo(PassiveSelectList);
 export const SelectRaw = (props) => {
@@ -69,7 +69,10 @@ export const SelectRaw = (props) => {
     }, [value, items]);
     React.useEffect(() => {
         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)) {
+        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" });
         }
@@ -100,7 +103,7 @@ export const SelectRaw = (props) => {
         }
         dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect: false } });
     }, [disabled, onPopupVisibilityChange, forceSelection]);
-    const onTriggerKeyDown = (e) => {
+    const onTriggerKeyDown = e => {
         if (disabled) {
             return;
         }
@@ -134,11 +137,16 @@ export const SelectRaw = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-base-to-string
         return _jsx(ReviewTextControl, { value: String((_b = items.find(item => item.id === selectValue)) === null || _b === void 0 ? void 0 : _b.children) });
     }
-    return _jsxs("div", { className: classes, ref: ref, children: [_jsxs("div", { "aria-controls": listId, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: classNames([
+    return (_jsxs("div", { className: classes, ref: ref, children: [_jsxs("div", { "aria-controls": listId, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: classNames([
                     "zen-select__trigger",
                     "zen-text-input",
                     isError ? "zen-text-input--error" : "",
                     "zen-caption zen-caption--full-width"
-                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlurHandler, ref: innerTriggerRef, children: [_jsx("div", { className: classNames(["zen-select__text", "zen-ellipsis", "zen-caption__content", !selectValue ? "zen-select__text--placeholder" : ""]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, selectValue === item.id ? CheckboxState.On : CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
+                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": isOpen && state.activeIndex > -1 ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlurHandler, ref: innerTriggerRef, children: [_jsx("div", { className: classNames([
+                            "zen-select__text",
+                            "zen-ellipsis",
+                            "zen-caption__content",
+                            !selectValue ? "zen-select__text--placeholder" : ""
+                        ]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => [item.id, selectValue === item.id ? CheckboxState.On : CheckboxState.Off])), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] }));
 };
 SelectRaw.displayName = "SelectRaw";

package/esm/selectRaw/types.d.ts

@@ -11,9 +11,9 @@ export interface ISelectRawBase extends IZenComponentProps {
     classNamePopup?: string;
     forceSelection?: boolean;
     /**
-    * @deprecated
-    * @param maxPopupHeight - will be removed in the next major release
-    */
+     * @deprecated
+     * @param maxPopupHeight - will be removed in the next major release
+     */
     maxPopupHeight?: number;
     isReadOnly?: boolean;
     isError?: boolean;

package/esm/selectRaw/utils/getValidWidth.js

@@ -1,2 +1,2 @@
 import { POPUP_MIN_WIDTH } from "./constants";
-export const getValidWidth = (width) => width < POPUP_MIN_WIDTH ? POPUP_MIN_WIDTH : width;
+export const getValidWidth = (width) => (width < POPUP_MIN_WIDTH ? POPUP_MIN_WIDTH : width);

package/esm/shield/shield.js

@@ -11,7 +11,7 @@ export const Shield = ({ className, dataShieldId, isVisible }) => {
         setIsOpen(isVisible || false);
     }, [isVisible, setIsOpen]);
     if (!renderComponent && !isVisible) {
-        return isVisible === undefined ? _jsx("div", { className: classNames(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }) : null;
+        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 || "" }), ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body));
 };

package/esm/sidePanel/sidePanel.d.ts

@@ -24,6 +24,7 @@ export interface ISidePanel extends IZenComponentProps {
     onTransitionEnd?: (isCurrentOpen: boolean) => void;
     onHidePanel: (reason: SidePanelCloseReason, dataShieldId?: string) => void;
     width?: number | string;
+    role?: string | false;
 }
 export declare const SidePanel: React.FC<ISidePanel> & ISidePanelComponents;
 export {};

package/esm/sidePanel/sidePanel.js

@@ -14,10 +14,13 @@ import { useFadeComponent } from "../utils/useFadeComponent";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { isAlertTarget } from "../alert/utils/isAlertTarget";
 import { isToastTarget } from "../toast/utils/isToastTarget";
+import { isModalTarget } from "../modal/utils/isModalTarget";
+import { isBannerTarget } from "../banner/utils/isBannerTarget";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 import { createPortal } from "react-dom";
 /* eslint-enable @typescript-eslint/naming-convention */
+const OVERLAY_TARGET_CHECKS = [isAlertTarget, isToastTarget, isModalTarget, isBannerTarget];
 export const isChildPopup = (target, stopElement) => {
     var _a;
     const parentPopup = getParentByClass(target, "zen-absolute");
@@ -49,7 +52,7 @@ export var SidePanelCloseReason;
     SidePanelCloseReason["ClickOutside"] = "ClickOutside";
 })(SidePanelCloseReason || (SidePanelCloseReason = {}));
 export const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
-export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd }) => {
+export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd, role = "dialog" }) => {
     var _a, _b;
     const { renderComponent, showContent, readyForFocus, setIsOpen, handleTransitionEnd } = useFadeComponent(isOpen, onTransitionEnd);
     const { dark } = useContext(themeContext);
@@ -111,12 +114,16 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
                 (isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)) ||
                 (isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)) ||
                 (isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)) ||
-                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el)));
+                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) &&
+                    Array.from(openedCustomComponents).some(el => isChildOf(e.target, el)));
             const isClickInPopup = !isClickInChildPopup ? false : isClickInChildPopup;
-            const isClickOnTrigger = triggerRef ? (triggerRef.current ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current) : false) : false;
-            const isAlert = isAlertTarget(e);
-            const isToast = isToastTarget(e);
-            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
+            const isClickOnTrigger = triggerRef
+                ? triggerRef.current
+                    ? e.target === triggerRef.current || isChildOf(e.target, triggerRef.current)
+                    : false
+                : false;
+            const isOverlayTarget = OVERLAY_TARGET_CHECKS.some(check => check(e));
+            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isOverlayTarget) {
                 return;
             }
             onHidePanel(SidePanelCloseReason.ClickOutside);
@@ -139,7 +146,11 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
     useEffect(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
-    const positioningClass = panelPosition === "left" ? "zen-side-panel--left-positioned" : panelPosition === "right" ? "zen-side-panel--right-positioned" : "zen-side-panel--bottom-positioned";
+    const positioningClass = panelPosition === "left"
+        ? "zen-side-panel--left-positioned"
+        : panelPosition === "right"
+            ? "zen-side-panel--right-positioned"
+            : "zen-side-panel--bottom-positioned";
     const memoizedChildForRender = useMemo(() => (isOpen || renderComponent ? children : null), [children, isOpen, renderComponent]);
     const memoizedStyles = useMemo(() => {
         if (width && !isMobile && panelPosition !== "bottom") {
@@ -147,6 +158,19 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         }
         return {};
     }, [width, isMobile, panelPosition]);
+    const roleAttributes = useMemo(() => {
+        if (role === false) {
+            return {};
+        }
+        const attributes = {};
+        if (typeof role === "string") {
+            attributes["role"] = role;
+        }
+        if (label) {
+            attributes["aria-label"] = label;
+        }
+        return attributes;
+    }, [role, label]);
     if (!renderComponent && !isOpen) {
         return null;
     }
@@ -154,6 +178,13 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         return undefined;
     }
     const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
-    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames(["zen-side-panel", driveClassName || "", dark ? "zen-dark" : "", showContent ? "zen-side-panel--shown" : "", positioningClass, className !== null && className !== void 0 ? className : ""]), children: memoizedChildForRender })), portalContainer);
+    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, roleAttributes, { onTransitionEnd: handleTransitionEnd, className: classNames([
+            "zen-side-panel",
+            driveClassName || "",
+            dark ? "zen-dark" : "",
+            showContent ? "zen-side-panel--shown" : "",
+            positioningClass,
+            className !== null && className !== void 0 ? className : ""
+        ]), children: memoizedChildForRender })), portalContainer);
 };
 SidePanel.Cell = SidePanelCell;

package/esm/sidePanel/sidePanelCell/sidePanelCell.js

@@ -1,5 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const SidePanelCell = ({ className, children, footer, title, withoutSidePaddings, role, labelledBy, titleId }) => _jsxs("div", { role: role, "aria-labelledby": labelledBy, className: classNames(["zen-side-panel-cell", withoutSidePaddings ? "zen-side-panel-cell--no-padding" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-side-panel-cell__title", id: titleId, children: title }), _jsx("div", { className: "zen-side-panel-cell__content", children: children }), footer
-            ? _jsx("div", { className: "zen-side-panel-cell__footer", children: footer })
-            : null] });
+export const SidePanelCell = ({ className, children, footer, title, withoutSidePaddings, role, labelledBy, titleId }) => (_jsxs("div", { role: role, "aria-labelledby": labelledBy, className: classNames(["zen-side-panel-cell", withoutSidePaddings ? "zen-side-panel-cell--no-padding" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-side-panel-cell__title", id: titleId, children: title }), _jsx("div", { className: "zen-side-panel-cell__content", children: children }), footer ? _jsx("div", { className: "zen-side-panel-cell__footer", children: footer }) : null] }));

package/esm/skeleton/lazyContent.js

@@ -12,17 +12,15 @@ export const LazyContent = ({ content, width, height, type, render, errorHandler
         }
         if (content instanceof Function) {
             setIsLoading(true);
-            const promise = cache && cachedValue ?
-                Promise.resolve(cachedValue) :
-                content();
+            const promise = cache && cachedValue ? Promise.resolve(cachedValue) : content();
             promise
-                .then((result) => {
+                .then(result => {
                 setValue(result);
                 if (cache) {
                     setCachedValue(result);
                 }
             })
-                .catch((e) => {
+                .catch(e => {
                 const errorValue = errorHandler && errorHandler(e);
                 errorValue && setValue(errorValue);
             })
@@ -48,5 +46,5 @@ export const LazyContent = ({ content, width, height, type, render, errorHandler
     if (!isVisible) {
         return null;
     }
-    return _jsx(_Fragment, { children: isLoading ? (_jsx(Skeleton, { type: type, width: width, height: height })) : ((value && render) ? render(value) : value) });
+    return _jsx(_Fragment, { children: isLoading ? _jsx(Skeleton, { type: type, width: width, height: height }) : value && render ? render(value) : value });
 };

package/esm/skeleton/skeleton.js

@@ -28,6 +28,7 @@ injectString("tr", "Loading", "Y\xFCkleniyor");
 injectString("zh-Hans", "Loading", "\u6B63\u5728\u52A0\u8F7D");
 injectString("zh-TW", "Loading", "\u8F09\u5165\u4E2D");
 injectString("ro-RO", "Loading", "Se \xEEncarc\u0103");
+injectString("ar-SA", "Loading", "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
 export const Skeleton = ({
   type = "text",
   height,