@geotab/zenith 3.7.0 → 3.8.0-beta.1

package/dist/table/selectable/utils/checkRow.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkRow = void 0;
 const checkRow = (selectionSet, selectable, entities, id, checked) => {
-    const setValue = (rowId) => checked ? selectionSet.add(rowId) : selectionSet.delete(rowId);
+    const setValue = (rowId) => (checked ? selectionSet.add(rowId) : selectionSet.delete(rowId));
     if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested") {
         const entity = entities.find(e => e.id === id);
         if (entity && entity.children && entity.children.length > 0) {
             entity.children.forEach(child => {
-                const isChildVisible = selectable.checkboxVisible
-                    ? selectable.checkboxVisible(child, true)
-                    : true;
+                const isChildVisible = selectable.checkboxVisible ? selectable.checkboxVisible(child, true) : true;
                 const isChildEnabled = !selectable.checkboxDisabled || !selectable.checkboxDisabled(child, true);
                 if (isChildVisible && isChildEnabled) {
                     setValue(child.id);

package/dist/table/selectable/utils/getCurrentPageSelection.js

@@ -4,15 +4,11 @@ exports.getCurrentPageSelection = void 0;
 const getCurrentPageSelection = (entities, selectable) => {
     const newSelections = new Set();
     entities.forEach(entity => {
-        const isVisible = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible)
-            ? selectable.checkboxVisible(entity)
-            : true;
+        const isVisible = (selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible) ? selectable.checkboxVisible(entity) : true;
         const isEnabled = !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) || !selectable.checkboxDisabled(entity);
         if ((selectable === null || selectable === void 0 ? void 0 : selectable.strategy) === "nested") {
             (entity.children || []).forEach(child => {
-                const isChildVisible = selectable.checkboxVisible
-                    ? selectable.checkboxVisible(child, true)
-                    : true;
+                const isChildVisible = selectable.checkboxVisible ? selectable.checkboxVisible(child, true) : true;
                 const isChildEnabled = !selectable.checkboxDisabled || !selectable.checkboxDisabled(child, true);
                 if (isChildVisible && isChildEnabled) {
                     newSelections.add(child.id);

package/dist/table/sortable/mobileSortControl.d.ts

@@ -0,0 +1,15 @@
+import { ColumnSortDirection, ISortableValue } from "./interfaces";
+import "./mobileSortControl.less";
+export interface IMobileSortColumn {
+    id: string;
+    title: string;
+    initialSortDirection?: ColumnSortDirection;
+    isSortedBy: boolean;
+}
+export interface IMobileSortControlProps {
+    columns: IMobileSortColumn[];
+    currentSort: ISortableValue | undefined;
+    onSortChange: (state: ISortableValue) => void;
+}
+export declare const MobileSortControl: ({ columns, currentSort, onSortChange }: IMobileSortControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];

package/dist/table/sortable/mobileSortControl.js

@@ -0,0 +1,148 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRANSLATIONS = exports.MobileSortControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interfaces_1 = require("./interfaces");
+const iconFilter3Asc_1 = require("../../icons/iconFilter3Asc");
+const iconFilter3Desc_1 = require("../../icons/iconFilter3Desc");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+injectString("en", "Sort by Ascending", "Sort by Ascending");
+injectString("cs", "Selected", "Vybr\xE1no");
+injectString("da-DK", "Selected", "Valgt");
+injectString("de", "Selected", "Ausgew\xE4hlt");
+injectString("en", "Selected", "Selected");
+injectString("es", "Selected", "Seleccionado");
+injectString("fi-FI", "Selected", "Valittu");
+injectString("fr", "Selected", "S\xE9lectionn\xE9");
+injectString("fr-FR", "Selected", "S\xE9lectionn\xE9");
+injectString("hu-HU", "Selected", "Kiv\xE1lasztott");
+injectString("id", "Selected", "Dipilih");
+injectString("it", "Selected", "Selezionato");
+injectString("ja", "Selected", "\u9078\u629E\u8ECA\u4E21");
+injectString("ko-KR", "Selected", "\uC120\uD0DD\uB428");
+injectString("ms", "Selected", "Dipilih");
+injectString("nb-NO", "Selected", "Valgt");
+injectString("nl", "Selected", "Geselecteerd");
+injectString("pl", "Selected", "Wybrano");
+injectString("pt-BR", "Selected", "Selecionado");
+injectString("pt-PT", "Selected", "Selecionado");
+injectString("sk-SK", "Selected", "Vybran\xE9");
+injectString("sv", "Selected", "Valda");
+injectString("th", "Selected", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27");
+injectString("tr", "Selected", "Se\xE7ildi");
+injectString("zh-Hans", "Selected", "\u9009\u4E2D\u7684");
+injectString("zh-TW", "Selected", "\u5DF2\u9078\u53D6");
+injectString("ro-RO", "Selected", "Selec\u021Bie");
+injectString("ar-SA", "Selected", "\u0645\u062D\u062F\u062F");
+injectString("en", "Sort by Descending", "Sort by Descending");
+const button_1 = require("../../button/button");
+const buttonType_1 = require("../../button/buttonType");
+const menu_1 = require("../../menu/menu");
+const SORT_ASC = "sort-ascending";
+const SORT_DESC = "sort-descending";
+const MobileSortControl = ({
+  columns,
+  currentSort,
+  onSortChange
+}) => {
+  var _a;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const triggerRef = (0, react_1.useRef)(null);
+  const firstColumn = columns[0];
+  const currentColumn = (currentSort === null || currentSort === void 0 ? void 0 : currentSort.sortColumn) || firstColumn.id;
+  const currentDirection = (currentSort === null || currentSort === void 0 ? void 0 : currentSort.sortDirection) || firstColumn.initialSortDirection || interfaces_1.ColumnSortDirection.Ascending;
+  const currentColumTitle = (_a = columns.find(col => col.id === currentColumn)) === null || _a === void 0 ? void 0 : _a.title;
+  const mainItems = (0, react_1.useMemo)(() => [{
+    id: SORT_ASC,
+    name: translate("Sort by Ascending"),
+    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [translate("Sort by Ascending"), currentDirection === interfaces_1.ColumnSortDirection.Ascending && (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-mobile-sort-control__selected-label",
+        children: translate("Selected")
+      })]
+    })
+  }, {
+    id: SORT_DESC,
+    name: translate("Sort by Descending"),
+    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [translate("Sort by Descending"), currentDirection === interfaces_1.ColumnSortDirection.Descending && (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-mobile-sort-control__selected-label",
+        children: translate("Selected")
+      })]
+    })
+  }], [translate, currentDirection]);
+  const onSelectSort = (0, react_1.useCallback)(columnId => () => {
+    var _a;
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    if (columnId === SORT_ASC) {
+      onSortChange({
+        sortColumn: currentColumn,
+        sortDirection: interfaces_1.ColumnSortDirection.Ascending
+      });
+    } else if (columnId === SORT_DESC) {
+      onSortChange({
+        sortColumn: currentColumn,
+        sortDirection: interfaces_1.ColumnSortDirection.Descending
+      });
+    } else {
+      const column = columns.find(col => col.id === columnId) || firstColumn;
+      if (column.id === currentColumn) {
+        return;
+      }
+      onSortChange({
+        sortColumn: column.id,
+        sortDirection: interfaces_1.ColumnSortDirection.Ascending
+      });
+    }
+  }, [columns, currentColumn, onSortChange, firstColumn]);
+  const columnItems = (0, react_1.useMemo)(() => columns.map(col => ({
+    id: col.id,
+    name: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      children: [col.title, col.id === currentColumn && (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-mobile-sort-control__selected-label",
+        children: translate("Selected")
+      })]
+    })
+  })), [columns, currentColumn, translate]);
+  const DirectionIcon = currentDirection === interfaces_1.ColumnSortDirection.Ascending ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc;
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsxs)(button_1.Button, {
+      className: "zen-mobile-sort-control__trigger",
+      ref: triggerRef,
+      children: [(0, jsx_runtime_1.jsx)(DirectionIcon, {
+        size: "large"
+      }), currentColumTitle]
+    }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, {
+      title: "Sort by",
+      triggerRef: triggerRef,
+      children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
+        id: "sortByColumns",
+        name: currentColumTitle || "Sort by",
+        children: columnItems.map(item => (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: buttonType_1.ButtonType.TertiaryBlack,
+          className: "zen-mobile-sort-control__sort-by-btn",
+          id: item.id,
+          onClick: onSelectSort(item.id),
+          children: item.name
+        }, item.id))
+      }), mainItems.map(item => (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: buttonType_1.ButtonType.TertiaryBlack,
+        id: item.id,
+        onClick: onSelectSort(item.id),
+        className: "zen-mobile-sort-control__sort-by-btn",
+        children: item.children
+      }, item.id))]
+    })]
+  });
+};
+exports.MobileSortControl = MobileSortControl;
+exports.TRANSLATIONS = ["Sort", "Sort by", "Sort Options", "Sort by Ascending", "Sort by Descending", "Default", "Selected"];

package/dist/table/sortable/sortableHeader.js

@@ -41,6 +41,7 @@ injectString("tr", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} s\xFCtunun
 injectString("zh-Hans", "Sort by {COLUMN_NAME} descending", "\u6309 {COLUMN_NAME} \u964D\u5E8F\u6392\u5E8F");
 injectString("zh-TW", "Sort by {COLUMN_NAME} descending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u6E1B\u6392\u5E8F");
 injectString("ro-RO", "Sort by {COLUMN_NAME} descending", "Sorta\u021Bi descendent dup\u0103 {COLUMN_NAME}");
+injectString("ar-SA", "Sort by {COLUMN_NAME} descending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0646\u0627\u0632\u0644\u064A\u0627\u064B");
 injectString("cs", "Sort by {COLUMN_NAME} ascending", "Se\u0159adit vzestupn\u011B podle {COLUMN_NAME}");
 injectString("da-DK", "Sort by {COLUMN_NAME} ascending", "Sorter efter {COLUMN_NAME} stigende");
 injectString("de", "Sort by {COLUMN_NAME} ascending", "Aufsteigend nach {COLUMN_NAME} sortieren");
@@ -67,6 +68,7 @@ injectString("tr", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} s\xFCtununa
 injectString("zh-Hans", "Sort by {COLUMN_NAME} ascending", "\u6309 {COLUMN_NAME} \u5347\u5E8F\u6392\u5E8F");
 injectString("zh-TW", "Sort by {COLUMN_NAME} ascending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u589E\u6392\u5E8F");
 injectString("ro-RO", "Sort by {COLUMN_NAME} ascending", "Sorta\u021Bi ascendent dup\u0103 {COLUMN_NAME}");
+injectString("ar-SA", "Sort by {COLUMN_NAME} ascending", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628 {COLUMN_NAME} \u062A\u0635\u0627\u0639\u062F\u064A\u0627\u064B");
 const getSortButtonTitle = (sortDirection, title, translate) => {
   const titleTemplate = sortDirection === interfaces_1.ColumnSortDirection.Descending ? translate("Sort by {COLUMN_NAME} descending") : translate("Sort by {COLUMN_NAME} ascending");
   return titleTemplate.replace("{COLUMN_NAME}", title);

package/dist/table/sortable/useSortableColumns.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const interfaces_1 = require("./interfaces");
 const sortableStorage_1 = require("./sortableStorage");
 const sortableHeader_1 = require("./sortableHeader");
+const mobileSortControl_1 = require("./mobileSortControl");
 const actionsColumn_1 = require("../../dataGrid/columns/actionsColumn/actionsColumn");
 const zen_1 = require("../../utils/zen");
 const getAriaSortValue = (isSortedBy, sortDirection) => {
@@ -56,7 +57,7 @@ const useSortableColumns = (columns, sortable, isMobile) => {
                 name: SortableWrapperName,
                 renderHeader: (title) => {
                     var _a;
-                    return (0, jsx_runtime_1.jsx)(sortableHeader_1.SortableHeaderCell, { columnName: column.id, isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: title, tooltip: column.title, onSortChange: onSort, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection });
+                    return ((0, jsx_runtime_1.jsx)(sortableHeader_1.SortableHeaderCell, { columnName: column.id, isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: title, tooltip: column.title, onSortChange: onSort, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection }));
                 },
                 render: (value, _) => value,
                 getHeaderProps: () => ({
@@ -67,18 +68,28 @@ const useSortableColumns = (columns, sortable, isMobile) => {
             return Object.assign(Object.assign({}, column), { wrappers: [...columnWrappers, wrapper] });
         });
     }, [columns, onSort, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortDirection, sortable]);
-    const feedSortControl = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!sortable) {
-            return null;
-        }
+    const sortableColumnItems = (0, react_1.useMemo)(() => {
         if (!isMobile) {
+            return [];
+        }
+        return columns
+            .filter(column => column.sortable !== false && !(column.columnComponent instanceof actionsColumn_1.ActionsColumn))
+            .map(column => {
+            var _a;
+            return ({
+                id: column.id,
+                title: column.title,
+                initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection,
+                isSortedBy: (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id
+            });
+        });
+    }, [columns, isMobile, sortSettings]);
+    const feedSortControl = (0, react_1.useMemo)(() => {
+        if (!sortable || !isMobile || sortableColumnItems.length === 0) {
             return null;
         }
-        const column = columns[0];
-        const isSortedBy = (sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn) === column.id;
-        return (0, jsx_runtime_1.jsx)(sortableHeader_1.SortableHeaderCell, { columnName: column.id.toString(), isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortSettings.sortDirection : undefined, title: column.title, tooltip: column.title, onSortChange: onSort, isMobile: true, initialSortDirection: (_a = column.meta) === null || _a === void 0 ? void 0 : _a.initialSortDirection });
-    }, [columns, isMobile, onSort, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortColumn, sortSettings === null || sortSettings === void 0 ? void 0 : sortSettings.sortDirection, sortable]);
+        return (0, jsx_runtime_1.jsx)(mobileSortControl_1.MobileSortControl, { columns: sortableColumnItems, currentSort: sortSettings, onSortChange: onSort });
+    }, [isMobile, onSort, sortSettings, sortable, sortableColumnItems]);
     return { sortableColumns, feedSortControl };
 };
 exports.useSortableColumns = useSortableColumns;

package/dist/table/table.d.ts

@@ -32,6 +32,7 @@ export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId =
     readonly visibleOnHover?: boolean;
     readonly meta?: {
         defaultWidth?: number;
+        readonly multilineHeader?: boolean;
         readonly initialSortDirection?: ColumnSortDirection;
         readonly renderPlaceholder?: (entity: T | N) => ReactNode;
         readonly renderFeedPlaceholder?: (title: ReactNode, entity: T | N) => [ReactNode, ReactNode];
@@ -44,10 +45,7 @@ export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId =
     group?: string;
     visible?: boolean;
 }
-export type TFeedResult = Readonly<[
-    ReactNode,
-    ReactNode | PromiseLike<ReactNode | undefined> | undefined
-]>;
+export type TFeedResult = Readonly<[ReactNode, ReactNode | PromiseLike<ReactNode | undefined> | undefined]>;
 export interface IFeedExpandable {
     isExpanded?: boolean;
     visibleColumns?: number;

package/dist/table/table.js

@@ -27,12 +27,60 @@ const tableBulkActions_1 = require("./children/tableBulkActions");
 const tablePagination_1 = require("./children/tablePagination");
 const tableEmpty_1 = require("./children/tableEmpty");
 const tableFooter_1 = require("./children/tableFooter");
+injectString("cs", "Selection panel", "Selection panel");
+injectString("da-DK", "Selection panel", "Selection panel");
+injectString("de", "Selection panel", "Selection panel");
 injectString("en", "Selection panel", "Selection panel");
+injectString("es", "Selection panel", "Selection panel");
+injectString("fi-FI", "Selection panel", "Selection panel");
+injectString("fr", "Selection panel", "Selection panel");
+injectString("fr-FR", "Selection panel", "Selection panel");
+injectString("hu-HU", "Selection panel", "Selection panel");
+injectString("id", "Selection panel", "Selection panel");
+injectString("it", "Selection panel", "Selection panel");
+injectString("ja", "Selection panel", "Selection panel");
+injectString("ko-KR", "Selection panel", "Selection panel");
+injectString("ms", "Selection panel", "Selection panel");
+injectString("nb-NO", "Selection panel", "Selection panel");
+injectString("nl", "Selection panel", "Selection panel");
+injectString("pl", "Selection panel", "Selection panel");
+injectString("pt-BR", "Selection panel", "Selection panel");
 injectString("pt-PT", "Selection panel", "Painel de sele\xE7\xE3o");
+injectString("sk-SK", "Selection panel", "Selection panel");
+injectString("sv", "Selection panel", "Selection panel");
+injectString("th", "Selection panel", "Selection panel");
+injectString("tr", "Selection panel", "Selection panel");
+injectString("zh-Hans", "Selection panel", "Selection panel");
+injectString("zh-TW", "Selection panel", "Selection panel");
 injectString("ro-RO", "Selection panel", "Panou selec\u021Bie");
+injectString("ar-SA", "Selection panel", "\u0644\u0648\u062D\u0629 \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
+injectString("cs", "Bulk select", "Bulk select");
+injectString("da-DK", "Bulk select", "Bulk select");
+injectString("de", "Bulk select", "Bulk select");
 injectString("en", "Bulk select", "Bulk select");
+injectString("es", "Bulk select", "Bulk select");
+injectString("fi-FI", "Bulk select", "Bulk select");
+injectString("fr", "Bulk select", "Bulk select");
+injectString("fr-FR", "Bulk select", "Bulk select");
+injectString("hu-HU", "Bulk select", "Bulk select");
+injectString("id", "Bulk select", "Bulk select");
+injectString("it", "Bulk select", "Bulk select");
+injectString("ja", "Bulk select", "Bulk select");
+injectString("ko-KR", "Bulk select", "Bulk select");
+injectString("ms", "Bulk select", "Bulk select");
+injectString("nb-NO", "Bulk select", "Bulk select");
+injectString("nl", "Bulk select", "Bulk select");
+injectString("pl", "Bulk select", "Bulk select");
+injectString("pt-BR", "Bulk select", "Bulk select");
 injectString("pt-PT", "Bulk select", "Selecionar em massa");
+injectString("sk-SK", "Bulk select", "Bulk select");
+injectString("sv", "Bulk select", "Bulk select");
+injectString("th", "Bulk select", "Bulk select");
+injectString("tr", "Bulk select", "Bulk select");
+injectString("zh-Hans", "Bulk select", "Bulk select");
+injectString("zh-TW", "Bulk select", "Bulk select");
 injectString("ro-RO", "Bulk select", "Selecta\u021Bi \xEEn bloc");
+injectString("ar-SA", "Bulk select", "\u062A\u062D\u062F\u064A\u062F \u062C\u0645\u0627\u0639\u064A");
 const useSelectableRows_2 = require("./selectable/useSelectableRows");
 Object.defineProperty(exports, "getEmptySelection", {
   enumerable: true,

package/dist/tabs/tabItem/tabItem.js

@@ -8,6 +8,6 @@ const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }) => {
     const driveClassname = (0, useDriveClassName_1.useDriveClassName)("zen-tab-item");
     const mobileClassname = (0, useMobileClassName_1.useMobileClassName)("zen-tab-item");
-    return (0, jsx_runtime_1.jsx)("button", { id: tabId, type: "button", className: (0, classNames_1.classNames)(["zen-tab-item", driveClassname || mobileClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-tab-item__content", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && (0, jsx_runtime_1.jsx)("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) });
+    return ((0, jsx_runtime_1.jsx)("button", { id: tabId, type: "button", className: (0, classNames_1.classNames)(["zen-tab-item", driveClassname || mobileClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-tab-item__content", children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon })), (0, jsx_runtime_1.jsx)("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && (0, jsx_runtime_1.jsx)("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) }));
 };
 exports.TabItem = TabItem;

package/dist/tabs/tabs.js

@@ -35,6 +35,7 @@ injectString("tr", "Scroll left", "Sola kayd\u0131r");
 injectString("zh-Hans", "Scroll left", "\u5411\u5DE6\u6EDA\u52A8");
 injectString("zh-TW", "Scroll left", "\u5411\u5DE6\u6372\u52D5");
 injectString("ro-RO", "Scroll left", "Derula\u021Bi la st\xE2nga");
+injectString("ar-SA", "Scroll left", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0633\u0627\u0631");
 injectString("cs", "Scroll right", "P\u0159ej\xEDt doprava");
 injectString("da-DK", "Scroll right", "Rul til h\xF8jre");
 injectString("de", "Scroll right", "Nach rechts scrollen");
@@ -61,6 +62,7 @@ injectString("tr", "Scroll right", "Sa\u011Fa Kayd\u0131r");
 injectString("zh-Hans", "Scroll right", "\u5411\u53F3\u6EDA\u52A8");
 injectString("zh-TW", "Scroll right", "\u5411\u53F3\u6372\u52D5");
 injectString("ro-RO", "Scroll right", "Derula\u021Bi la dreapta");
+injectString("ar-SA", "Scroll right", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0645\u064A\u0646");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");

package/dist/textIconButton/textIconButton.d.ts

@@ -7,7 +7,7 @@ export declare const ButtonIconPosition: {
     readonly Start: "start";
     readonly End: "end";
 };
-export type TButtonIconPosition = typeof ButtonIconPosition[keyof typeof ButtonIconPosition];
+export type TButtonIconPosition = (typeof ButtonIconPosition)[keyof typeof ButtonIconPosition];
 export interface ITextIconButton extends IButton {
     icon: React.FC<IIcon>;
     iconPosition?: TButtonIconPosition;

package/dist/textIconButton/textIconButton.js

@@ -63,6 +63,6 @@ const TextIconButton = (_a) => {
         size: buttonIconSize
     }), [icon, buttonIconSize, svgIconClasses]);
     const isStartIconPosition = iconPosition === exports.ButtonIconPosition.Start;
-    return (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ ref: ref, className: buttonExtraClasses }, restProps, { children: [isStartIconPosition ? svgIcon : null, children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-caption__content", contentClasses !== null && contentClasses !== void 0 ? contentClasses : ""]), children: children }), !isStartIconPosition ? svgIcon : null] }));
+    return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ ref: ref, className: buttonExtraClasses }, restProps, { children: [isStartIconPosition ? svgIcon : null, children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-caption__content", contentClasses !== null && contentClasses !== void 0 ? contentClasses : ""]), children: children }), !isStartIconPosition ? svgIcon : null] })));
 };
 exports.TextIconButton = TextIconButton;

package/dist/textInput/textInput.js

@@ -9,9 +9,7 @@ const FormInput = (0, formField_1.FormField)(textInputRaw_1.TextInputRaw);
 const TextInput = (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, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
-            : undefined }));
+    return ((0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}` : undefined })));
 };
 exports.TextInput = TextInput;
 exports.TextInput.displayName = "TextInput";

package/dist/textInputRaw/textInputRaw.js

@@ -14,14 +14,14 @@ const TextInputRaw = (props) => {
     if (props.isReadOnly) {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value, password: props.type === "password" });
     }
-    return (0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
             "zen-text-input",
             mobileComponentClass || driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 
         // TODO: add tests
-        min: min, max: max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby });
+        min: min, max: max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
 };
 exports.TextInputRaw = TextInputRaw;
 exports.TextInputRaw.displayName = "TextInputRaw";

package/dist/textarea/textarea.js

@@ -21,9 +21,7 @@ const Textarea = (_a) => {
     var props = __rest(_a, []);
     const { value = "", maxLength, name } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
-            : undefined }));
+    return ((0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}` : undefined })));
 };
 exports.Textarea = Textarea;
 exports.Textarea.displayName = "Textarea";

package/dist/textareaRaw/textareaRaw.js

@@ -13,14 +13,14 @@ const TextareaRaw = (props) => {
     if (isReadOnly) {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value });
     }
-    return (0, jsx_runtime_1.jsx)("textarea", { ref: ref, id: id, rows: rows, minLength: minLength, maxLength: maxLength, className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: ref, id: id, rows: rows, minLength: minLength, maxLength: maxLength, className: (0, classNames_1.classNames)([
             "zen-textarea",
             resize ? "" : "zen-textarea--no-resize",
             driveComponentClass || "",
             "zen-text-input",
             isError ? "zen-text-input--error" : "",
             className
-        ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, readOnly: readonly, onBlur: onBlur, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": props.ariaDescribedby, name: name, required: required });
+        ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, readOnly: readonly, onBlur: onBlur, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": props.ariaDescribedby, name: name, required: required }));
 };
 exports.TextareaRaw = TextareaRaw;
 exports.TextareaRaw.displayName = "TextAreaInput";

package/dist/timePicker/timePicker.js

@@ -23,6 +23,4 @@ const TimePicker = (_a) => {
     return (0, jsx_runtime_1.jsx)(TimePickerFormField, Object.assign({}, props));
 };
 exports.TimePicker = TimePicker;
-exports.TRANSLATIONS = [
-    timePickerRaw_2.TRANSLATIONS
-];
+exports.TRANSLATIONS = [timePickerRaw_2.TRANSLATIONS];

package/dist/timePickerRaw/components/timeSelect/timeSelect.js

@@ -20,6 +20,6 @@ const TimeSelect = ({ className, selected, items, title, onSelect }) => {
         const selection = getSelected(state);
         selection && onSelect(selection);
     }, [onSelect]);
-    return (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: selectListId, title: title, onChange: handleSelection, multiselect: false, value: new Map([[selected, checkboxState_1.CheckboxState.On]]), items: items, className: (0, classNames_1.classNames)(["zen-time-select", className !== null && className !== void 0 ? className : ""]) });
+    return ((0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: selectListId, title: title, onChange: handleSelection, multiselect: false, value: new Map([[selected, checkboxState_1.CheckboxState.On]]), items: items, className: (0, classNames_1.classNames)(["zen-time-select", className !== null && className !== void 0 ? className : ""]) }));
 };
 exports.TimeSelect = TimeSelect;

package/dist/timePickerRaw/timePickerRaw.js

@@ -45,6 +45,7 @@ injectString("tr", "Time", "Zaman");
 injectString("zh-Hans", "Time", "\u65F6\u95F4");
 injectString("zh-TW", "Time", "\u6642\u9593");
 injectString("ro-RO", "Time", "Or\u0103");
+injectString("ar-SA", "Time", "\u0627\u0644\u0648\u0642\u062A");
 injectString("cs", "Select hour", "Vybrat hodiny");
 injectString("da-DK", "Select hour", "V\xE6lg time");
 injectString("de", "Select hour", "Stunde ausw\xE4hlen");
@@ -71,16 +72,34 @@ injectString("tr", "Select hour", "Saat se\xE7");
 injectString("zh-Hans", "Select hour", "\u9009\u62E9\u5C0F\u65F6");
 injectString("zh-TW", "Select hour", "\u9078\u53D6\u5C0F\u6642");
 injectString("ro-RO", "Select hour", "Selecta\u021Bi ora");
+injectString("ar-SA", "Select hour", "\u0627\u062E\u062A\u064A\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629");
+injectString("cs", "Select minutes", "Select minutes");
 injectString("da-DK", "Select minutes", "V\xE6lg minutter");
+injectString("de", "Select minutes", "Select minutes");
 injectString("en", "Select minutes", "Select minutes");
+injectString("es", "Select minutes", "Select minutes");
 injectString("fi-FI", "Select minutes", "Valitse minuutit");
+injectString("fr", "Select minutes", "Select minutes");
+injectString("fr-FR", "Select minutes", "Select minutes");
 injectString("hu-HU", "Select minutes", "V\xE1lassz perceket.");
+injectString("id", "Select minutes", "Select minutes");
+injectString("it", "Select minutes", "Select minutes");
+injectString("ja", "Select minutes", "Select minutes");
 injectString("ko-KR", "Select minutes", "\uBD84 \uC120\uD0DD");
+injectString("ms", "Select minutes", "Select minutes");
 injectString("nb-NO", "Select minutes", "Velg minutter");
+injectString("nl", "Select minutes", "Select minutes");
+injectString("pl", "Select minutes", "Select minutes");
+injectString("pt-BR", "Select minutes", "Select minutes");
 injectString("pt-PT", "Select minutes", "Selecionar minutos");
 injectString("sk-SK", "Select minutes", "Vyberte min\xFAty");
+injectString("sv", "Select minutes", "Select minutes");
+injectString("th", "Select minutes", "Select minutes");
+injectString("tr", "Select minutes", "Select minutes");
+injectString("zh-Hans", "Select minutes", "Select minutes");
 injectString("zh-TW", "Select minutes", "\u9078\u53D6\u5206\u9418");
 injectString("ro-RO", "Select minutes", "Selecta\u021Bi minutele");
+injectString("ar-SA", "Select minutes", "\u0627\u062E\u062A\u064A\u0627\u0631 \u0627\u0644\u062F\u0642\u0627\u0626\u0642");
 injectString("cs", "Apply changes", "Pou\u017E\xEDt zm\u011Bny");
 injectString("da-DK", "Apply changes", "Anvend \xE6ndringer");
 injectString("de", "Apply changes", "\xC4nderungen anwenden");
@@ -107,6 +126,7 @@ injectString("tr", "Apply changes", "De\u011Fi\u015Fiklikleri uygula");
 injectString("zh-Hans", "Apply changes", "\u5E94\u7528\u66F4\u6539");
 injectString("zh-TW", "Apply changes", "\u5957\u7528\u8B8A\u66F4");
 injectString("ro-RO", "Apply changes", "Aplica\u021Bi schimb\u0103rile");
+injectString("ar-SA", "Apply changes", "\u062A\u0637\u0628\u064A\u0642 \u0627\u0644\u062A\u063A\u064A\u064A\u0631\u0627\u062A");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -133,6 +153,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 injectString("cs", "Cancel changes", "Zru\u0161it zm\u011Bny");
 injectString("da-DK", "Cancel changes", "Annuller \xE6ndringer");
 injectString("de", "Cancel changes", "\xC4nderungen abbrechen");
@@ -159,6 +180,7 @@ injectString("tr", "Cancel changes", "De\u011Fi\u015Fiklikleri iptal et");
 injectString("zh-Hans", "Cancel changes", "\u53D6\u6D88\u66F4\u6539");
 injectString("zh-TW", "Cancel changes", "\u53D6\u6D88\u8B8A\u66F4");
 injectString("ro-RO", "Cancel changes", "Anula\u021Bi schimb\u0103rile");
+injectString("ar-SA", "Cancel changes", "\u0625\u0644\u063A\u0627\u0621 \u0627\u0644\u062A\u063A\u064A\u064A\u0631\u0627\u062A");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -185,6 +207,7 @@ injectString("tr", "Cancel", "\u0130ptal");
 injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
 injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 injectString("ro-RO", "Cancel", "Anula\u021Bi");
+injectString("ar-SA", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");

package/dist/timePickerRaw/types.d.ts

@@ -3,14 +3,14 @@ import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/z
 export interface ITimePickerRawBase extends IZenComponentProps {
     fullWidth?: boolean;
     /**
-        * @deprecated
-        * @param translate - will be removed in the next major release
-        */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (key: string) => string;
     /**
-        * @deprecated
-        * @param isMobileView - will be removed in the next major release
-    */
+     * @deprecated
+     * @param isMobileView - will be removed in the next major release
+     */
     isMobileView?: boolean;
 }
 export interface ITimePickerRawDefault extends ITimePickerRawBase {

package/dist/toast/hooks/useToast.js

@@ -14,16 +14,16 @@ const useToast = () => {
     const { toasts, setToasts, targetEvent } = (0, useToastState_1.useToastState)();
     const isAPIMode = mode === "api";
     const hideToast = (0, react_2.useCallback)(function (id) {
-        setToasts((prevToasts) => [...prevToasts.filter((el) => el.id !== id)]);
+        setToasts((prevToasts) => [...prevToasts.filter(el => el.id !== id)]);
         removeToast(id);
         if (isAPIMode) {
-            setApiToastActions((prev) => [...prev.filter((el) => el.id !== id)]);
+            setApiToastActions((prev) => [...prev.filter(el => el.id !== id)]);
         }
     }, [isAPIMode, removeToast, setApiToastActions, setToasts]);
     const showToast = (0, react_2.useCallback)((newItem) => {
         const generatedId = (0, generateId_1.generateId)();
         const alertItem = Object.assign(Object.assign({}, newItem), { id: generatedId });
-        setToasts((prev) => [...prev, alertItem]);
+        setToasts(prev => [...prev, alertItem]);
         return {
             id: generatedId,
             hideToast: () => {