@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/esm/table/sortable/sortableHeader.js

@@ -33,7 +33,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("ar", "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");
@@ -60,7 +60,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");
+injectString("ar", "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 === ColumnSortDirection.Descending ? translate("Sort by {COLUMN_NAME} descending") : translate("Sort by {COLUMN_NAME} ascending");
   return titleTemplate.replace("{COLUMN_NAME}", title);

package/esm/table/table.js

@@ -64,7 +64,7 @@ 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("ar", "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");
@@ -91,7 +91,7 @@ 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");
+injectString("ar", "Bulk select", "\u062A\u062D\u062F\u064A\u062F \u062C\u0645\u0627\u0639\u064A");
 const TableInner = ({
   entities,
   columns,
@@ -177,12 +177,6 @@ const TableInner = ({
       selected: []
     });
   }, [selectable]);
-  const selectAll = useCallback(() => {
-    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
-      all: true,
-      selected: []
-    });
-  }, [selectable]);
   const [activeIdInternal, setActiveInternal] = useState(undefined);
   const activeId = active !== undefined ? active : activeIdInternal;
   const onClickInternal = useCallback(id => setActiveInternal(id === activeIdInternal ? undefined : id), [activeIdInternal, setActiveInternal]);
@@ -199,7 +193,7 @@ const TableInner = ({
     detailPanel,
     footer,
     other
-  } = useTableChildren(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, selectAll, selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll, activeId, gridRef, onCloseDetailPanel);
+  } = useTableChildren(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, activeId, gridRef, onCloseDetailPanel);
   const hasDetailPanel = !!detailPanel;
   const shouldEnableRowClick = hasDetailPanel || !!onClick;
   const activeIdForRow = shouldEnableRowClick ? activeId : undefined;

package/esm/tabs/tabItem/tabItem.d.ts

@@ -10,5 +10,6 @@ export interface ITabItem extends IZenComponentProps {
     ariaControl?: string;
     handleButtonClick: (e: React.MouseEvent<HTMLElement>) => void;
     dataAnalyticsId?: string;
+    disabled?: boolean;
 }
-export declare const TabItem: ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId }: ITabItem) => import("react/jsx-runtime").JSX.Element;
+export declare const TabItem: ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId, disabled }: ITabItem) => import("react/jsx-runtime").JSX.Element;

package/esm/tabs/tabItem/tabItem.js

@@ -3,9 +3,14 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
 import { toKebabCase } from "../../utils/toKebabCase";
-export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId }) => {
+export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId, disabled }) => {
     const driveClassname = useDriveClassName("zen-tab-item");
     const mobileClassname = useMobileClassName("zen-tab-item");
     const analyticsId = dataAnalyticsId || `tab-${toKebabCase(tabName)}`;
-    return (_jsx("button", { id: tabId, type: "button", className: 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, "data-analytics-id": analyticsId, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && (_jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon })), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) }));
+    return (_jsx("button", { id: tabId, type: "button", className: classNames([
+            "zen-tab-item",
+            driveClassname || mobileClassname || "",
+            active ? "zen-tab-item--active" : "",
+            disabled ? "zen-tab-item--disabled" : ""
+        ]), role: "tab", "aria-controls": disabled ? undefined : ariaControl, "aria-selected": active ? "true" : "false", "aria-disabled": disabled ? "true" : undefined, "aria-label": tabName, title: tabName, tabIndex: disabled && !active ? -1 : undefined, onClick: disabled ? undefined : handleButtonClick, "data-analytics-id": analyticsId, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && (_jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon })), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) }));
 };

package/esm/tabs/tabs.d.ts

@@ -14,9 +14,10 @@ export interface ITabs extends IZenComponentProps {
     tabs: ITabElement[];
     activeTabId: string;
     onTabChange: (newTabId: string) => void;
+    disabled?: boolean;
 }
 export declare const TabsDisplayName = "Tabs";
 export declare const Tabs: {
-    ({ className, tabs, activeTabId, onTabChange }: ITabs): import("react/jsx-runtime").JSX.Element;
+    ({ className, tabs, activeTabId, onTabChange, disabled }: ITabs): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/tabs/tabs.js

@@ -6,65 +6,65 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { TabItem } from "./tabItem/tabItem";
 import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconChevronLeft } from "../icons/iconChevronLeft";
+import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { tabsKeyboardHandler, tabsKeyboardTabHandler } from "../commonHelpers/tabsKeyboard";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
 import "../utils/globalThisPolyfill";
 import { zen } from "../utils/zen";
-injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
-injectString("da-DK", "Scroll left", "Rul til venstre");
-injectString("de", "Scroll left", "Nach links scrollen");
-injectString("en", "Scroll left", "Scroll left");
-injectString("es", "Scroll left", "Desplazarse a la izquierda");
-injectString("fi-FI", "Scroll left", "Selaa vasemmalle");
-injectString("fr", "Scroll left", "D\xE9filer vers la gauche");
-injectString("fr-FR", "Scroll left", "Faire d\xE9filer vers la gauche");
-injectString("hu-HU", "Scroll left", "Lapozz balra.");
-injectString("id", "Scroll left", "Gulir ke kiri");
-injectString("it", "Scroll left", "Scorrere verso sinistra");
-injectString("ja", "Scroll left", "\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
-injectString("ko-KR", "Scroll left", "\uC67C\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
-injectString("ms", "Scroll left", "Skrol ke kiri");
-injectString("nb-NO", "Scroll left", "Rull til venstre");
-injectString("nl", "Scroll left", "Blader naar links");
-injectString("pl", "Scroll left", "Przewi\u0144 w lewo");
-injectString("pt-BR", "Scroll left", "Rolar para a esquerda");
-injectString("pt-PT", "Scroll left", "Deslizar para a esquerda");
-injectString("sk-SK", "Scroll left", "Posu\u0148 do\u013Eava");
-injectString("sv", "Scroll left", "Bl\xE4ddra \xE5t v\xE4nster");
-injectString("th", "Scroll left", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E0B\u0E49\u0E32\u0E22");
-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");
-injectString("en", "Scroll right", "Scroll right");
-injectString("es", "Scroll right", "Desplazarse a la derecha");
-injectString("fi-FI", "Scroll right", "Selaa oikealle");
-injectString("fr", "Scroll right", "D\xE9filer vers la droite");
-injectString("fr-FR", "Scroll right", "Faire d\xE9filer vers la droite");
-injectString("hu-HU", "Scroll right", "Lapozz jobbra.");
-injectString("id", "Scroll right", "Gulir ke kanan");
-injectString("it", "Scroll right", "Scorrere verso destra");
-injectString("ja", "Scroll right", "\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
-injectString("ko-KR", "Scroll right", "\uC624\uB978\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
-injectString("ms", "Scroll right", "Skrol ke kanan");
-injectString("nb-NO", "Scroll right", "Rull til h\xF8yre");
-injectString("nl", "Scroll right", "Blader naar rechts");
-injectString("pl", "Scroll right", "Przewi\u0144 w prawo");
-injectString("pt-BR", "Scroll right", "Rolar para a direita");
-injectString("pt-PT", "Scroll right", "Deslizar para a direita");
-injectString("sk-SK", "Scroll right", "Posu\u0148 doprava");
-injectString("sv", "Scroll right", "Bl\xE4ddra \xE5t h\xF6ger");
-injectString("th", "Scroll right", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E02\u0E27\u0E32");
-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");
+injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
+injectString("da-DK", "Scroll to start", "Rul til start");
+injectString("de", "Scroll to start", "Zum Start scrollen");
+injectString("en", "Scroll to start", "Scroll to start");
+injectString("es", "Scroll to start", "Desplazarse al inicio");
+injectString("fi-FI", "Scroll to start", "Vierit\xE4 alkuun");
+injectString("fr", "Scroll to start", "D\xE9filement au d\xE9but");
+injectString("fr-FR", "Scroll to start", "Faites d\xE9filer pour d\xE9marrer");
+injectString("hu-HU", "Scroll to start", "G\xF6rget\xE9s az elej\xE9re");
+injectString("id", "Scroll to start", "Gulirkan untuk memulai");
+injectString("it", "Scroll to start", "Scorrere fino all'inizio");
+injectString("ja", "Scroll to start", "\u4E00\u756A\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll to start", "\uC2DC\uC791 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll to start", "Tatal ke permulaan");
+injectString("nb-NO", "Scroll to start", "Rull til start");
+injectString("nl", "Scroll to start", "Scroll to start");
+injectString("pl", "Scroll to start", "Przewi\u0144 do pocz\u0105tku");
+injectString("pt-BR", "Scroll to start", "Scroll to start");
+injectString("pt-PT", "Scroll to start", "Scroll to start");
+injectString("sk-SK", "Scroll to start", "Posun\xFA\u0165 na za\u010Diatok");
+injectString("sv", "Scroll to start", "Scroll to start");
+injectString("th", "Scroll to start", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19");
+injectString("tr", "Scroll to start", "Ba\u015Flang\u0131ca kayd\u0131r");
+injectString("zh-Hans", "Scroll to start", "\u6EDA\u52A8\u81F3\u5F00\u5934");
+injectString("zh-TW", "Scroll to start", "\u6372\u52D5\u81F3\u958B\u59CB\u8655");
+injectString("ro-RO", "Scroll to start", "Derulare la \xEEnceput");
+injectString("cs", "Scroll to end", "P\u0159ej\xEDt na konec");
+injectString("da-DK", "Scroll to end", "Rul til slutning");
+injectString("de", "Scroll to end", "Zum Ende scrollen");
+injectString("en", "Scroll to end", "Scroll to end");
+injectString("es", "Scroll to end", "Desplazarse al final");
+injectString("fi-FI", "Scroll to end", "Vierit\xE4 loppuun");
+injectString("fr", "Scroll to end", "D\xE9filement \xE0 la fin");
+injectString("fr-FR", "Scroll to end", "Faites d\xE9filer jusqu\u2019\xE0 la fin");
+injectString("hu-HU", "Scroll to end", "G\xF6rget\xE9s a v\xE9g\xE9re");
+injectString("id", "Scroll to end", "Gulirkan ke akhir");
+injectString("it", "Scroll to end", "Scorrere fino alla fine");
+injectString("ja", "Scroll to end", "\u4E00\u756A\u4E0B\u307E\u3067\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll to end", "\uB9C8\uC9C0\uB9C9 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll to end", "Tatal ke penghujung");
+injectString("nb-NO", "Scroll to end", "Rull til slutt");
+injectString("nl", "Scroll to end", "Scroll to end");
+injectString("pl", "Scroll to end", "Przewi\u0144 do ko\u0144ca");
+injectString("pt-BR", "Scroll to end", "Scroll to end");
+injectString("pt-PT", "Scroll to end", "Scroll to end");
+injectString("sk-SK", "Scroll to end", "Posun\xFA\u0165 na koniec");
+injectString("sv", "Scroll to end", "Scroll to end");
+injectString("th", "Scroll to end", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14");
+injectString("tr", "Scroll to end", "Sona kayd\u0131r");
+injectString("zh-Hans", "Scroll to end", "\u6EDA\u52A8\u81F3\u672B\u5C3E");
+injectString("zh-TW", "Scroll to end", "\u6372\u52D5\u81F3\u7D50\u5C3E\u8655");
+injectString("ro-RO", "Scroll to end", "Derulare la sf\xE2r\u0219it");
 export const TabsDisplayName = "Tabs";
 const getScrollButtonType = element => {
   const scrollLeft = element.scrollLeft;
@@ -85,7 +85,8 @@ export const Tabs = ({
   className,
   tabs = [],
   activeTabId,
-  onTabChange
+  onTabChange,
+  disabled
 }) => {
   const driveClassname = useDriveClassName("zen-tabs");
   const mobileClassname = useMobileClassName("zen-tabs");
@@ -93,6 +94,8 @@ export const Tabs = ({
   const {
     translate
   } = useLanguage();
+  const ScrollStartIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
+  const ScrollEndIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const driveClassNameScroller = useDriveClassName("zen-tabs__scroller");
   const mobileClassNameScroller = useMobileClassName("zen-tabs__scroller");
   const driveClassNameGradient = useDriveClassName("zen-tabs__gradient");
@@ -102,6 +105,9 @@ export const Tabs = ({
   const scrollRef = useRef(0);
   const focusableTabIdRef = useRef("");
   const handleButtonClick = e => {
+    if (disabled) {
+      return;
+    }
     const newState = e.currentTarget.id;
     focusableTabIdRef.current = newState;
     if (newState !== activeTabId) {
@@ -114,6 +120,9 @@ export const Tabs = ({
       return;
     }
     if (e.key === "Enter" || e.key === " ") {
+      if (disabled) {
+        return;
+      }
       const target = e.target;
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (target && target.id && tabs.some(tab => tab.id === target.id)) {
@@ -134,7 +143,7 @@ export const Tabs = ({
     focusableTabIdRef.current = newActiveTabId;
     const focusableTab = (_b = scrollableRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
     focusableTab === null || focusableTab === void 0 ? void 0 : focusableTab.focus();
-  }, [tabs, activeTabId, onTabChange]);
+  }, [tabs, activeTabId, onTabChange, disabled]);
   useEffect(() => {
     var _a;
     if (!scrollableRef.current) {
@@ -210,9 +219,9 @@ export const Tabs = ({
         children: [_jsx("div", {
           className: classNames(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--left"])
         }), _jsx(TextIconButton, {
-          title: translate("Scroll left"),
+          title: translate("Scroll to start"),
           className: classNames(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__start"]),
-          icon: IconChevronRight,
+          icon: ScrollStartIcon,
           type: "tertiary",
           iconPosition: ButtonIconPosition.Start,
           onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep),
@@ -236,16 +245,17 @@ export const Tabs = ({
             active: activeTabId === tab.id,
             ariaControl: `panel-${tab.id}`,
             handleButtonClick: handleButtonClick,
-            dataAnalyticsId: tab.dataAnalyticsId
+            dataAnalyticsId: tab.dataAnalyticsId,
+            disabled: disabled
           }, tab.id))
         })
       }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, {
         children: [_jsx("div", {
           className: classNames(["zen-tabs__gradient", driveClassNameGradient || mobileClassNameGradient || "", "zen-tabs__gradient--right"])
         }), _jsx(TextIconButton, {
-          title: translate("Scroll right"),
+          title: translate("Scroll to end"),
           className: classNames(["zen-tabs__scroller", driveClassNameScroller || mobileClassNameScroller || "", "zen-tabs__end"]),
-          icon: IconChevronRight,
+          icon: ScrollEndIcon,
           type: "tertiary",
           onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),
           iconPosition: ButtonIconPosition.End

package/esm/tabs/tabsTestHelper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const getLeftArrowElement = (el) => el.querySelector(".zen-tabs__scroller[aria-label='Scroll left']");
-export const getRightArrowElement = (el) => el.querySelector(".zen-tabs__scroller[aria-label='Scroll right']");
+export const getLeftArrowElement = (el) => el.querySelector(".zen-tabs__scroller[aria-label='Scroll to start']");
+export const getRightArrowElement = (el) => el.querySelector(".zen-tabs__scroller[aria-label='Scroll to end']");
 export const tabsData = [
     { id: "id1", name: "Tab Text 1", content: _jsx("div", { children: "Tab content1" }) },
     { id: "id2", name: "Tab Text 2", content: _jsx("div", { children: "Tab content2" }) },

package/esm/testHelpers/mockAbsoluteAlignment.d.ts

@@ -0,0 +1 @@
+export declare const mockAbsoluteAlignment: () => void;

package/esm/testHelpers/mockAbsoluteAlignment.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AbsoluteModule from "../absolute/absolute";
+export const mockAbsoluteAlignment = () => {
+    beforeEach(() => {
+        jest.spyOn(AbsoluteModule, "Absolute").mockImplementation(({ alignment }) => (_jsx("div", { "data-testid": "absolute", "data-alignment": alignment })));
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+};

package/esm/timePickerRaw/timePickerRaw.js

@@ -40,7 +40,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("ar", "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");
@@ -67,7 +67,7 @@ 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("ar", "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");
@@ -94,7 +94,7 @@ 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("ar", "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");
@@ -121,7 +121,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("ar", "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");
@@ -148,7 +148,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("ar", "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");
@@ -175,7 +175,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("ar", "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");
@@ -202,7 +202,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");
+injectString("ar", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 const hours = getSelectItemsForTimePicker(23);
 const minutes = getSelectItemsForTimePicker(59);
 export const TimePickerRaw = props => {
@@ -211,7 +211,8 @@ export const TimePickerRaw = props => {
     fullWidth,
     dataTimeId,
     isReadOnly,
-    isError
+    isError,
+    id
   } = props;
   const ariaAttributes = getAriaAttributes(props);
   const {
@@ -267,7 +268,7 @@ export const TimePickerRaw = props => {
     }
   }, [hourValue, isOpen, minutesValue]);
   const triggerClassName = classNames(["zen-time-picker__trigger", fullWidth ? "zen-time-picker__trigger--full-width" : "", isError ? "zen-time-picker__trigger--error" : "", className || ""]);
-  const shownValue = `${hourValue || "24"}:${minutesValue || "00"}`;
+  const shownValue = `${hourValue || "00"}:${minutesValue || "00"}`;
   if (isReadOnly) {
     return _jsx(ReviewTextControl, {
       value: shownValue
@@ -276,6 +277,7 @@ export const TimePickerRaw = props => {
   return _jsxs("div", {
     className: classes,
     children: [_jsx(FilterButton, Object.assign({
+      id: id,
       onBlur: onBlur,
       name: name,
       ref: innerTriggerRef,

package/esm/timePickerRaw/types.d.ts

@@ -1,6 +1,7 @@
 import { Exclusive } from "../commonHelpers/types/exclusive";
 import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface ITimePickerRawBase extends IZenComponentProps {
+    id?: string;
     fullWidth?: boolean;
     /**
      * @deprecated

package/esm/toastRaw/toastRaw.js

@@ -39,7 +39,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide");
-injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
+injectString("ar", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const typedIcons = {
   success: IconCheckRadio,
   info: IconInfoCircle

package/esm/toggleButtonRaw/toggleButtonRaw.js

@@ -34,7 +34,7 @@ injectString("tr", "On", "A\xE7\u0131k");
 injectString("zh-Hans", "On", "\u5F00\u542F");
 injectString("zh-TW", "On", "\u958B\u555F");
 injectString("ro-RO", "On", "Pe");
-injectString("ar-SA", "On", "\u062A\u0634\u063A\u064A\u0644");
+injectString("ar", "On", "\u062A\u0634\u063A\u064A\u0644");
 injectString("cs", "Off", "Vypnuto");
 injectString("da-DK", "Off", "Slukket");
 injectString("de", "Off", "Aus");
@@ -61,7 +61,7 @@ injectString("tr", "Off", "Kapal\u0131");
 injectString("zh-Hans", "Off", "\u5173\u95ED");
 injectString("zh-TW", "Off", "\u95DC\u9589");
 injectString("ro-RO", "Off", "Off");
-injectString("ar-SA", "Off", "\u0625\u064A\u0642\u0627\u0641");
+injectString("ar", "Off", "\u0625\u064A\u0642\u0627\u0641");
 export const ToggleButtonRaw = props => {
   const {
     id,
@@ -102,6 +102,8 @@ export const ToggleButtonRaw = props => {
   }
   return _jsxs("div", {
     className: classNames(["zen-toggler", driveClassesToggler || "", className || ""]),
+    role: "group",
+    "aria-label": title,
     "data-analytics-id": dataAnalyticsId,
     children: [_jsx(TriStateCheckbox, {
       name: name,
@@ -110,14 +112,15 @@ export const ToggleButtonRaw = props => {
       onChange: onChangeHandler,
       checked: value,
       disabled: disabled,
-      role: "switch"
+      role: "switch",
+      "aria-label": title
     }), _jsxs("label", {
       className: classNames(["zen-toggler__label", isReverted ? "zen-toggler__label--reverted" : ""]),
       htmlFor: checkBoxId,
       title: title,
-      "aria-label": title,
       children: [_jsxs("div", {
         className: classNames(["zen-toggler-component", driveClassesComponent || ""]),
+        "aria-hidden": "true",
         children: [_jsx("div", {
           className: "zen-toggler-component__focus"
         }), _jsx("div", {

package/esm/tooltip/tooltip.js

@@ -13,6 +13,7 @@ import { tooltipAlignments } from "../utils/positioningUtils/tooltipAlignments";
 import { IconClose } from "../icons/iconClose";
 import { Button } from "../button/button";
 import { useLanguage } from "../utils/localization/useLanguage";
+import { useDirection } from "../utils/localization/useDirection";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
 import { useDrive } from "../utils/theme/useDrive";
 import { Shield } from "../shield/shield";
@@ -43,7 +44,7 @@ injectString("tr", "Information", "Bilgi");
 injectString("zh-Hans", "Information", "\u4FE1\u606F");
 injectString("zh-TW", "Information", "\u8CC7\u8A0A");
 injectString("ro-RO", "Information", "Informa\u021Bii");
-injectString("ar-SA", "Information", "\u0645\u0639\u0644\u0648\u0645\u0627\u062A");
+injectString("ar", "Information", "\u0645\u0639\u0644\u0648\u0645\u0627\u062A");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -70,7 +71,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide");
-injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
+injectString("ar", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const TOOLTIP_VISIBILITY_DELAY = 100;
 const arrowClasses = {
   top: "zen-tooltip__arrow--top",
@@ -175,6 +176,7 @@ export const Tooltip = ({
   const {
     translate
   } = useLanguage();
+  const direction = useDirection();
   const {
     dark
   } = useContext(themeContext);
@@ -242,7 +244,7 @@ export const Tooltip = ({
     }, triggerCloneProps))
   });
   // Initial arrow class - will be updated by calculatePosition
-  const arrowClass = useMemo(() => arrowClasses[tooltipAlignment], [tooltipAlignment]);
+  const arrowClass = useMemo(() => arrowClasses[tooltipAlignment] || "", [tooltipAlignment]);
   const getOppositeAlignment = main => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (main) {
@@ -307,12 +309,18 @@ export const Tooltip = ({
     const [mainAlignment, subAlignment] = preferredAlignment.split("-");
     const oppositeMain = getOppositeAlignment(mainAlignment);
     const preferredFn = tooltipAlignments[preferredAlignment];
+    if (!preferredFn) {
+      return preferredAlignment;
+    }
     const rawPreferredPos = preferredFn(triggerRect, popupRect, parentRect, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP);
     if (checkNaturalFit(rawPreferredPos, popupRect)) {
       return preferredAlignment;
     }
     const fallbackAlignment = subAlignment ? `${oppositeMain}-${subAlignment}` : oppositeMain;
     const fallbackFn = tooltipAlignments[fallbackAlignment];
+    if (!fallbackFn) {
+      return preferredAlignment;
+    }
     const rawFallbackPos = fallbackFn(triggerRect, popupRect, parentRect, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP);
     if (checkNaturalFit(rawFallbackPos, popupRect)) {
       return fallbackAlignment;
@@ -369,7 +377,7 @@ export const Tooltip = ({
   }) : null, container, tooltipId);
   const calculatePosition = useCallback(() => {
     const eAlignment = getEffectiveAlignment(tooltipAlignmentRef.current);
-    calculatePos(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments, undefined, isMobile);
+    calculatePos(triggerRef, tooltipRef, TOOLTIP_ARROW_HEIGHT + GAP, TOOLTIP_ARROW_HEIGHT + GAP, false, eAlignment, tooltipAlignments, undefined, isMobile, direction);
     calculateArrowPosition(triggerRef, tooltipRef, arrowRef, eAlignment);
     // Update arrow class directly in DOM to avoid triggering re-renders
     if (arrowRef.current) {
@@ -379,7 +387,7 @@ export const Tooltip = ({
         arrowRef.current.classList.add(newArrowClass.replace("zen-tooltip__arrow ", ""));
       }
     }
-  }, [TOOLTIP_ARROW_HEIGHT, triggerRef, tooltipRef, arrowRef, getEffectiveAlignment, isMobile]);
+  }, [TOOLTIP_ARROW_HEIGHT, triggerRef, tooltipRef, arrowRef, getEffectiveAlignment, isMobile, direction]);
   useResize(calculatePosition, isTooltipVisible);
   useLayoutEffect(calculatePosition, [isTooltipVisible, calculatePosition]);
   useEffect(() => {