@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/dist/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/dist/react-chartjs/utils.js

@@ -28,9 +28,7 @@ function setDatasets(currentData, nextDatasets, datasetIdKey = defaultDatasetIdK
         // 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/dist/searchInput/searchInput.js

@@ -9,9 +9,7 @@ const FormInput = (0, formField_1.FormField)(searchInputRaw_1.SearchInputRaw);
 const SearchInput = (props) => {
     const { maxLength, name, value = "" } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
-            : undefined }));
+    return ((0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}` : undefined })));
 };
 exports.SearchInput = SearchInput;
 exports.SearchInput.displayName = "SearchInput";

package/dist/searchInputRaw/searchInputRaw.js

@@ -65,6 +65,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");
@@ -91,6 +92,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");
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");

package/dist/selectList/selectList.js

@@ -33,7 +33,7 @@ const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, tit
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-select-list");
     const state = (0, selectList_helpers_1.getInitialState)({ items, value, multiselect });
     state.activeIndex = activeIndex;
-    return (0, jsx_runtime_1.jsx)("ul", { id: id, ref: listRef, className: (0, classNames_1.classNames)(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? ((0, selectList_helpers_1.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) => (0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, { className: (0, classNames_1.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 ((0, jsx_runtime_1.jsx)("ul", { id: id, ref: listRef, className: (0, classNames_1.classNames)(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? (0, selectList_helpers_1.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) => ((0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, { className: (0, classNames_1.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 = (0, react_2.memo)(SelectListInnerComp);
@@ -61,7 +61,10 @@ const SelectList = (_a) => {
     }, [multiselect]);
     (0, react_2.useEffect)(() => {
         var _a;
-        if (state.activeIndex >= 0 && ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && listRef.current && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, listRef.current)) {
+        if (state.activeIndex >= 0 &&
+            ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) &&
+            listRef.current &&
+            (0, isChildOf_1.isChildOf)(zen_1.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" });
         }
@@ -75,9 +78,13 @@ const SelectList = (_a) => {
     }, [onClick, state.level]);
     const onKeyDown = (e) => {
         const handlers = {
-            "ArrowUp": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectPrev, payload: { items, multiselect } }),
-            "ArrowDown": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusNext, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectNext, payload: { items, multiselect } }),
-            "Enter": () => {
+            ArrowUp: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusPrev, payload: { items } })
+                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectPrev, payload: { items, multiselect } }),
+            ArrowDown: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusNext, payload: { items } })
+                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectNext, payload: { items, multiselect } }),
+            Enter: () => {
                 const item = items[state.activeIndex];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (!item || item.disabled) {
@@ -87,16 +94,23 @@ const SelectList = (_a) => {
                     dispatchState({ type: selectList_actionTypes_1.ListAction.SetLevel, payload: { items } });
                 }
                 else {
-                    dispatchState({ type: selectList_actionTypes_1.ListAction.ChangeItemState, payload: {
+                    dispatchState({
+                        type: selectList_actionTypes_1.ListAction.ChangeItemState,
+                        payload: {
                             updatedId: item.id,
                             updatedState: item.state === checkboxState_1.CheckboxState.On ? checkboxState_1.CheckboxState.Off : checkboxState_1.CheckboxState.On,
                             multiselect: multiselect
-                        } });
+                        }
+                    });
                 }
             },
-            "Home": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectFirst, payload: { items, multiselect } }),
-            "End": () => multiselect || !selectItemOnFocus ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusLast, payload: { items } }) : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectLast, payload: { items, multiselect } }),
-            "Space": () => {
+            Home: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusFirst, payload: { items } })
+                : dispatchState({ type: selectList_actionTypes_1.ListAction.SelectFirst, payload: { items, multiselect } }),
+            End: () => multiselect || !selectItemOnFocus
+                ? dispatchState({ type: selectList_actionTypes_1.ListAction.FocusLast, payload: { items } })
+                : dispatchState({ type: selectList_actionTypes_1.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) {
@@ -109,7 +123,7 @@ const SelectList = (_a) => {
             "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),
             "Ctrl+Shift+End": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.SelectAllToTheEnd, payload: { items, multiselect } }),
             "Ctrl+KeyA": () => multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.ToggleAll, payload: { items, multiselect } }),
-            "default": () => dispatchState({ type: selectList_actionTypes_1.ListAction.SearchItem, payload: { items, key: e.key } })
+            default: () => dispatchState({ type: selectList_actionTypes_1.ListAction.SearchItem, payload: { items, key: e.key } })
         };
         const handlerName = (0, keyboard_1.getKeysPressed)(e);
         const handler = handlers[handlerName] || ((0, keyboard_1.isKeyForSearch)(e.code) && handlers["default"]);
@@ -129,8 +143,8 @@ const SelectList = (_a) => {
         multiselect && dispatchState({ type: selectList_actionTypes_1.ListAction.Blur, payload: { multiselect } });
         !multiselect && forceSelection && dispatchState({ type: selectList_actionTypes_1.ListAction.Blur, payload: { multiselect } });
     };
-    return (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 })));
 };
 exports.SelectList = SelectList;
-const PassiveSelectList = (props) => (0, jsx_runtime_1.jsx)(SelectListInnerComp, Object.assign({}, props, { standalone: false }));
+const PassiveSelectList = props => (0, jsx_runtime_1.jsx)(SelectListInnerComp, Object.assign({}, props, { standalone: false }));
 exports.PassiveSelectList = PassiveSelectList;

package/dist/selectList/selectList.reducer.js

@@ -46,16 +46,20 @@ const selectListReducer = (state, action) => {
         }
         case selectList_actionTypes_1.ListAction.ToggleCurrent: {
             const currentItemId = (0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex);
-            const currentState = currentItemId && state.itemsState.get(currentItemId) || checkboxState_1.CheckboxState.Off;
+            const currentState = (currentItemId && state.itemsState.get(currentItemId)) || checkboxState_1.CheckboxState.Off;
             const [newItemsState, isUpdated] = currentItemId
                 ? (0, selectList_helpers_1.updateItemState)(state.itemsState, payload.multiselect, currentItemId, currentState === checkboxState_1.CheckboxState.On ? checkboxState_1.CheckboxState.Off : checkboxState_1.CheckboxState.On)
                 : [state.itemsState, false];
             return Object.assign(Object.assign({}, state), { itemsState: newItemsState, isItemsStateChanged: isUpdated, searchStr: "" });
         }
-        case selectList_actionTypes_1.ListAction.FocusFirst: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getFirstIndex)(payload.items), isItemsStateChanged: false, searchStr: "" });
-        case selectList_actionTypes_1.ListAction.FocusLast: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getLastIndex)(payload.items), isItemsStateChanged: false, searchStr: "" });
-        case selectList_actionTypes_1.ListAction.FocusNext: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
-        case selectList_actionTypes_1.ListAction.FocusPrev: return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case selectList_actionTypes_1.ListAction.FocusFirst:
+            return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getFirstIndex)(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case selectList_actionTypes_1.ListAction.FocusLast:
+            return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getLastIndex)(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case selectList_actionTypes_1.ListAction.FocusNext:
+            return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getNextIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case selectList_actionTypes_1.ListAction.FocusPrev:
+            return Object.assign(Object.assign({}, state), { activeIndex: (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
         case selectList_actionTypes_1.ListAction.SelectFirst: {
             const index = (0, selectList_helpers_1.getFirstIndex)(payload.items);
             return selectItem(state, index, payload.multiselect, (_a = payload.items[index]) === null || _a === void 0 ? void 0 : _a.disabled);
@@ -72,9 +76,12 @@ const selectListReducer = (state, action) => {
             const index = (0, selectList_helpers_1.getPrevIndex)(state.activeIndex, payload.items);
             return selectItem(state, index, payload.multiselect, (_d = payload.items[index]) === null || _d === void 0 ? void 0 : _d.disabled);
         }
-        case selectList_actionTypes_1.ListAction.SelectAllToTheBeginning: return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Up, payload.multiselect, checkboxState_1.CheckboxState.On);
-        case selectList_actionTypes_1.ListAction.SelectAllToTheEnd: return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect, checkboxState_1.CheckboxState.On);
-        case selectList_actionTypes_1.ListAction.ToggleAll: return toggleItems(payload.items, state, 0, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect);
+        case selectList_actionTypes_1.ListAction.SelectAllToTheBeginning:
+            return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Up, payload.multiselect, checkboxState_1.CheckboxState.On);
+        case selectList_actionTypes_1.ListAction.SelectAllToTheEnd:
+            return toggleItems(payload.items, state, state.activeIndex, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect, checkboxState_1.CheckboxState.On);
+        case selectList_actionTypes_1.ListAction.ToggleAll:
+            return toggleItems(payload.items, state, 0, selectList_actionTypes_1.SelectDirection.Down, payload.multiselect);
         case selectList_actionTypes_1.ListAction.SearchItem: {
             const isSymbol = payload.key.length === 1;
             const isBackSpace = payload.key === "Backspace";
@@ -122,7 +129,8 @@ 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");
     }
 };
 exports.selectListReducer = selectListReducer;

package/dist/selectList/selectListItem.js

@@ -19,7 +19,7 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
         }
         onChange && onChange(id, newState);
     };
-    return (0, jsx_runtime_1.jsx)("li", { "data-id": id, className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("li", { "data-id": id, className: (0, classNames_1.classNames)([
             "zen-select-item",
             showCheckbox ? "zen-select-item--with-checkbox" : "",
             focused ? "zen-select-item--focused" : "",
@@ -30,8 +30,6 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ?
-                    (0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })
-                    : children, multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) : null] }) });
+            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) : null] }) }));
 };
 exports.SelectListItem = SelectListItem;

package/dist/selectRaw/select.helpers.js

@@ -42,7 +42,7 @@ const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight = 0, ma
     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"
         ? {
@@ -55,7 +55,7 @@ const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight = 0, ma
             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/dist/selectRaw/selectRaw.js

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

package/dist/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/dist/selectRaw/utils/getValidWidth.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getValidWidth = void 0;
 const constants_1 = require("./constants");
-const getValidWidth = (width) => width < constants_1.POPUP_MIN_WIDTH ? constants_1.POPUP_MIN_WIDTH : width;
+const getValidWidth = (width) => (width < constants_1.POPUP_MIN_WIDTH ? constants_1.POPUP_MIN_WIDTH : width);
 exports.getValidWidth = getValidWidth;

package/dist/shield/shield.js

@@ -14,7 +14,7 @@ const Shield = ({ className, dataShieldId, isVisible }) => {
         setIsOpen(isVisible || false);
     }, [isVisible, setIsOpen]);
     if (!renderComponent && !isVisible) {
-        return isVisible === undefined ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }) : null;
+        return isVisible === undefined ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" })) : null;
     }
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body));
 };

package/dist/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/dist/sidePanel/sidePanel.js

@@ -17,10 +17,13 @@ const useFadeComponent_1 = require("../utils/useFadeComponent");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const isAlertTarget_1 = require("../alert/utils/isAlertTarget");
 const isToastTarget_1 = require("../toast/utils/isToastTarget");
+const isModalTarget_1 = require("../modal/utils/isModalTarget");
+const isBannerTarget_1 = require("../banner/utils/isBannerTarget");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 const react_dom_1 = require("react-dom");
 /* eslint-enable @typescript-eslint/naming-convention */
+const OVERLAY_TARGET_CHECKS = [isAlertTarget_1.isAlertTarget, isToastTarget_1.isToastTarget, isModalTarget_1.isModalTarget, isBannerTarget_1.isBannerTarget];
 const isChildPopup = (target, stopElement) => {
     var _a;
     const parentPopup = (0, getParentByClass_1.getParentByClass)(target, "zen-absolute");
@@ -54,7 +57,7 @@ var SidePanelCloseReason;
     SidePanelCloseReason["ClickOutside"] = "ClickOutside";
 })(SidePanelCloseReason || (exports.SidePanelCloseReason = SidePanelCloseReason = {}));
 exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-popup";
-const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, triggerRef, panelPosition = "right", useTrapFocusWithTrigger, preventFirstFocus, width, onTransitionEnd }) => {
+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 } = (0, useFadeComponent_1.useFadeComponent)(isOpen, onTransitionEnd);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -116,12 +119,16 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
                 (isOpenPeriodPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenPeriodPicker)) ||
                 (isOpenPeriodPicker && isOpenTimePicker && (0, isChildOf_1.isChildOf)(e.target, isOpenTimePicker)) ||
                 (isOpenPeriodPicker && isOpenYearPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenYearPicker)) ||
-                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el)));
+                ((openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) &&
+                    Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el)));
             const isClickInPopup = !isClickInChildPopup ? false : isClickInChildPopup;
-            const isClickOnTrigger = triggerRef ? (triggerRef.current ? e.target === triggerRef.current || (0, isChildOf_1.isChildOf)(e.target, triggerRef.current) : false) : false;
-            const isAlert = (0, isAlertTarget_1.isAlertTarget)(e);
-            const isToast = (0, isToastTarget_1.isToastTarget)(e);
-            if (isClickInPopup || isClickOnTrigger || isGroupsFilterBackButton || isOpenAdvancedDialog || isAlert || isToast) {
+            const isClickOnTrigger = triggerRef
+                ? triggerRef.current
+                    ? e.target === triggerRef.current || (0, isChildOf_1.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);
@@ -144,7 +151,11 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
     (0, react_1.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 = (0, react_1.useMemo)(() => (isOpen || renderComponent ? children : null), [children, isOpen, renderComponent]);
     const memoizedStyles = (0, react_1.useMemo)(() => {
         if (width && !isMobile && panelPosition !== "bottom") {
@@ -152,6 +163,19 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         }
         return {};
     }, [width, isMobile, panelPosition]);
+    const roleAttributes = (0, react_1.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;
     }
@@ -159,7 +183,14 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         return undefined;
     }
     const portalContainer = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)(["zen-side-panel", driveClassName || "", dark ? "zen-dark" : "", showContent ? "zen-side-panel--shown" : "", positioningClass, className !== null && className !== void 0 ? className : ""]), children: memoizedChildForRender })), portalContainer);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, roleAttributes, { onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
+            "zen-side-panel",
+            driveClassName || "",
+            dark ? "zen-dark" : "",
+            showContent ? "zen-side-panel--shown" : "",
+            positioningClass,
+            className !== null && className !== void 0 ? className : ""
+        ]), children: memoizedChildForRender })), portalContainer);
 };
 exports.SidePanel = SidePanel;
 exports.SidePanel.Cell = sidePanelCell_1.SidePanelCell;

package/dist/sidePanel/sidePanelCell/sidePanelCell.js

@@ -3,7 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidePanelCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const SidePanelCell = ({ className, children, footer, title, withoutSidePaddings, role, labelledBy, titleId }) => (0, jsx_runtime_1.jsxs)("div", { role: role, "aria-labelledby": labelledBy, className: (0, classNames_1.classNames)(["zen-side-panel-cell", withoutSidePaddings ? "zen-side-panel-cell--no-padding" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__title", id: titleId, children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__content", children: children }), footer
-            ? (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__footer", children: footer })
-            : null] });
+const SidePanelCell = ({ className, children, footer, title, withoutSidePaddings, role, labelledBy, titleId }) => ((0, jsx_runtime_1.jsxs)("div", { role: role, "aria-labelledby": labelledBy, className: (0, classNames_1.classNames)(["zen-side-panel-cell", withoutSidePaddings ? "zen-side-panel-cell--no-padding" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__title", id: titleId, children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__content", children: children }), footer ? (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-cell__footer", children: footer }) : null] }));
 exports.SidePanelCell = SidePanelCell;

package/dist/skeleton/lazyContent.js

@@ -15,17 +15,15 @@ const LazyContent = ({ content, width, height, type, render, errorHandler, error
         }
         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);
             })
@@ -51,6 +49,6 @@ const LazyContent = ({ content, width, height, type, render, errorHandler, error
     if (!isVisible) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { type: type, width: width, height: height })) : ((value && render) ? render(value) : value) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { type: type, width: width, height: height }) : value && render ? render(value) : value });
 };
 exports.LazyContent = LazyContent;

package/dist/skeleton/skeleton.js

@@ -34,6 +34,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");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const Skeleton = ({

package/dist/skeletonList/skeletonList.js

@@ -18,6 +18,6 @@ const SkeletonList = ({ className, width, size = "small", height }) => {
         return 4;
     };
     const count = getSizeCount(size);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-skeleton-list", className || ""]), children: Array.from({ length: count }, (_, index) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: itemWidth, height: itemHeight }, `skeleton-${index}`))) }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, styleWidth, { className: (0, classNames_1.classNames)(["zen-skeleton-list", className || ""]), children: Array.from({ length: count }, (_, index) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: itemWidth, height: itemHeight }, `skeleton-${index}`))) })));
 };
 exports.SkeletonList = SkeletonList;