@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/esm/table/sortable/sortableHeader.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { ColumnSortDirection } from "./interfaces";
@@ -6,87 +7,159 @@ import { IconFilter3Asc } from "../../icons/iconFilter3Asc";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { IconFilter3Desc } from "../../icons/iconFilter3Desc";
 import { classNames } from "../../commonHelpers/classNames/classNames";
+injectString("cs", "Sort by {COLUMN_NAME} descending", "Se\u0159adit sestupn\u011B podle {COLUMN_NAME}");
+injectString("da-DK", "Sort by {COLUMN_NAME} descending", "Sorter efter {COLUMN_NAME} faldende");
+injectString("de", "Sort by {COLUMN_NAME} descending", "Absteigend nach {COLUMN_NAME} sortieren");
+injectString("en", "Sort by {COLUMN_NAME} descending", "Sort by {COLUMN_NAME} descending");
+injectString("es", "Sort by {COLUMN_NAME} descending", "Ordenar por {COLUMN_NAME} de manera descendente");
+injectString("fi-FI", "Sort by {COLUMN_NAME} descending", "J\xE4rjest\xE4 {COLUMN_NAME} laskevasti");
+injectString("fr", "Sort by {COLUMN_NAME} descending", "Trier par {COLUMN_NAME} en ordre d\xE9croissant");
+injectString("fr-FR", "Sort by {COLUMN_NAME} descending", "Trier par {COLUMN_NAME} d\xE9croissant");
+injectString("hu-HU", "Sort by {COLUMN_NAME} descending", "Rendezd cs\xF6kken\u0151 sorrendben a(z) {COLUMN_NAME} alapj\xE1n.");
+injectString("id", "Sort by {COLUMN_NAME} descending", "Urutkan menurut {COLUMN_NAME} ke bawah");
+injectString("it", "Sort by {COLUMN_NAME} descending", "Consente di ordinare per {COLUMN_NAME} in ordine decrescente");
+injectString("ja", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} \u3092\u964D\u9806\u3067\u30BD\u30FC\u30C8");
+injectString("ko-KR", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} \uC5F4\uC744 \uB0B4\uB9BC\uCC28\uC21C\uC73C\uB85C \uC815\uB82C");
+injectString("ms", "Sort by {COLUMN_NAME} descending", "Isih mengikut {COLUMN_NAME} secara menurun");
+injectString("nb-NO", "Sort by {COLUMN_NAME} descending", "Sorter etter {COLUMN_NAME} fallende");
+injectString("nl", "Sort by {COLUMN_NAME} descending", "Sorteren op {COLUMN_NAME}, aflopend");
+injectString("pl", "Sort by {COLUMN_NAME} descending", "Sortuj wed\u0142ug {COLUMN_NAME} malej\u0105co");
+injectString("pt-BR", "Sort by {COLUMN_NAME} descending", "Classificar por {COLUMN_NAME} em ordem descendente");
+injectString("sk-SK", "Sort by {COLUMN_NAME} descending", "Zoradi\u0165 pod\u013Ea {COLUMN_NAME} zostupne");
+injectString("sv", "Sort by {COLUMN_NAME} descending", "Sortera efter {COLUMN_NAME} i fallande ordning");
+injectString("th", "Sort by {COLUMN_NAME} descending", "\u0E40\u0E23\u0E35\u0E22\u0E07\u0E15\u0E32\u0E21 {COLUMN_NAME} \u0E08\u0E32\u0E01\u0E21\u0E32\u0E01\u0E44\u0E1B\u0E2B\u0E32\u0E19\u0E49\u0E2D\u0E22");
+injectString("tr", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} s\xFCtununa g\xF6re azalan s\u0131rada g\xF6ster");
+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("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");
+injectString("en", "Sort by {COLUMN_NAME} ascending", "Sort by {COLUMN_NAME} ascending");
+injectString("es", "Sort by {COLUMN_NAME} ascending", "Ordenar por {COLUMN_NAME} de manera ascendente");
+injectString("fi-FI", "Sort by {COLUMN_NAME} ascending", "J\xE4rjest\xE4 {COLUMN_NAME} nousevasti");
+injectString("fr", "Sort by {COLUMN_NAME} ascending", "Trier par {COLUMN_NAME} en ordre croissant");
+injectString("fr-FR", "Sort by {COLUMN_NAME} ascending", "Trier par {COLUMN_NAME} croissant");
+injectString("hu-HU", "Sort by {COLUMN_NAME} ascending", "Rendezd n\xF6vekv\u0151 sorrendben a(z) {COLUMN_NAME} szerint.");
+injectString("id", "Sort by {COLUMN_NAME} ascending", "Urutkan menurut {COLUMN_NAME} ke atas");
+injectString("it", "Sort by {COLUMN_NAME} ascending", "Consente di ordinare per {COLUMN_NAME} in ordine crescente");
+injectString("ja", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} \u3092\u6607\u9806\u3067\u30BD\u30FC\u30C8");
+injectString("ko-KR", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} \uC5F4\uC744 \uC624\uB984\uCC28\uC21C\uC73C\uB85C \uC815\uB82C");
+injectString("ms", "Sort by {COLUMN_NAME} ascending", "Isih mengikut {COLUMN_NAME} secara menaik");
+injectString("nb-NO", "Sort by {COLUMN_NAME} ascending", "Sorter etter {COLUMN_NAME} stigende");
+injectString("nl", "Sort by {COLUMN_NAME} ascending", "Sorteren op {COLUMN_NAME}, oplopend");
+injectString("pl", "Sort by {COLUMN_NAME} ascending", "Sortuj wed\u0142ug {COLUMN_NAME} rosn\u0105co");
+injectString("pt-BR", "Sort by {COLUMN_NAME} ascending", "Classificar por {COLUMN_NAME} em ordem ascendente");
+injectString("sk-SK", "Sort by {COLUMN_NAME} ascending", "Zoradi\u0165 pod\u013Ea {COLUMN_NAME} vzostupne");
+injectString("sv", "Sort by {COLUMN_NAME} ascending", "Sortera efter {COLUMN_NAME} i stigande ordning");
+injectString("th", "Sort by {COLUMN_NAME} ascending", "\u0E40\u0E23\u0E35\u0E22\u0E07\u0E15\u0E32\u0E21 {COLUMN_NAME} \u0E08\u0E32\u0E01\u0E19\u0E49\u0E2D\u0E22\u0E44\u0E1B\u0E2B\u0E32\u0E21\u0E32\u0E01");
+injectString("tr", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} s\xFCtununa g\xF6re artan s\u0131rada g\xF6ster");
+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");
 const getSortButtonTitle = (sortDirection, title, translate) => {
-    const titleTemplate = sortDirection === ColumnSortDirection.Descending ? "Sort by {COLUMN_NAME} descending" : "Sort by {COLUMN_NAME} ascending";
-    return translate(titleTemplate).replace("{COLUMN_NAME}", title);
+  const titleTemplate = sortDirection === ColumnSortDirection.Descending ? translate("Sort by {COLUMN_NAME} descending") : translate("Sort by {COLUMN_NAME} ascending");
+  return titleTemplate.replace("{COLUMN_NAME}", title);
 };
 const activeElementNames = new Set(["BUTTON", "A", "LABEL", "INPUT"]);
-const isActiveElement = (element) => activeElementNames.has(element.nodeName);
+const isActiveElement = element => activeElementNames.has(element.nodeName);
 const findParent = (element, className) => {
-    if (element.classList.contains(className)) {
-        return element;
-    }
-    if (isActiveElement(element)) {
-        return element;
-    }
-    if (!element.parentElement) {
-        return element;
-    }
-    return findParent(element.parentElement, className);
+  if (element.classList.contains(className)) {
+    return element;
+  }
+  if (isActiveElement(element)) {
+    return element;
+  }
+  if (!element.parentElement) {
+    return element;
+  }
+  return findParent(element.parentElement, className);
 };
-const isClickOnSortableParent = (element) => {
-    const parent = findParent(element, "zen-sortable-column-button");
-    return parent.classList.contains("zen-sortable-column-button") || parent.classList.contains("zen-sortable-column-button__dir-icon");
+const isClickOnSortableParent = element => {
+  const parent = findParent(element, "zen-sortable-column-button");
+  return parent.classList.contains("zen-sortable-column-button") || parent.classList.contains("zen-sortable-column-button__dir-icon");
 };
-export const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false, initialSortDirection = ColumnSortDirection.Ascending }) => {
-    const { translate } = useLanguage();
-    const [isHovered, setIsHovered] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const isActive = isHovered || isFocused;
-    const iconTitleText = useMemo(() => {
-        switch (sortDirection) {
-            case ColumnSortDirection.Ascending: {
-                return ColumnSortDirection.Descending;
-            }
-            case ColumnSortDirection.Descending: {
-                return ColumnSortDirection.Ascending;
-            }
-            case undefined:
-            default:
-                return initialSortDirection;
+export const SortableHeaderCell = ({
+  columnName,
+  isSortedBy,
+  sortDirection,
+  title,
+  tooltip,
+  onSortChange,
+  isMobile = false,
+  initialSortDirection = ColumnSortDirection.Ascending
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const isActive = isHovered || isFocused;
+  const iconTitleText = useMemo(() => {
+    switch (sortDirection) {
+      case ColumnSortDirection.Ascending:
+        {
+          return ColumnSortDirection.Descending;
         }
-    }, [sortDirection, initialSortDirection]);
-    const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
-    const icon = useMemo(() => {
-        switch (sortDirection) {
-            case ColumnSortDirection.Ascending: {
-                return isActive ? IconFilter3Desc : IconFilter3Asc;
-            }
-            case ColumnSortDirection.Descending:
-                return isActive ? IconFilter3Asc : IconFilter3Desc;
-            case undefined:
-            default: {
-                return initialSortDirection === ColumnSortDirection.Ascending ? IconFilter3Asc : IconFilter3Desc;
-            }
+      case ColumnSortDirection.Descending:
+        {
+          return ColumnSortDirection.Ascending;
         }
-    }, [sortDirection, isActive, initialSortDirection]);
-    const iconButton = (_jsx(TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? ButtonIconPosition.Start : ButtonIconPosition.End, type: "tertiary-black", title: iconTitle }));
-    const onHeaderClick = useCallback((e) => {
-        const target = e && e.target;
-        if (!target) {
-            return;
+      case undefined:
+      default:
+        return initialSortDirection;
+    }
+  }, [sortDirection, initialSortDirection]);
+  const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
+  const icon = useMemo(() => {
+    switch (sortDirection) {
+      case ColumnSortDirection.Ascending:
+        {
+          return isActive ? IconFilter3Desc : IconFilter3Asc;
         }
-        if (isClickOnSortableParent(target)) {
-            onSortChange({
-                sortColumn: columnName,
-                sortDirection: sortDirection === undefined ? initialSortDirection :
-                    sortDirection === ColumnSortDirection.Ascending
-                        ? ColumnSortDirection.Descending
-                        : ColumnSortDirection.Ascending
-            });
+      case ColumnSortDirection.Descending:
+        return isActive ? IconFilter3Asc : IconFilter3Desc;
+      case undefined:
+      default:
+        {
+          return initialSortDirection === ColumnSortDirection.Ascending ? IconFilter3Asc : IconFilter3Desc;
         }
-    }, [onSortChange, columnName, sortDirection, initialSortDirection]);
-    return (_jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: classNames([
-            "zen-sortable-column",
-            isSortedBy ? `zen-sortable-column--active` : "",
-            isMobile ? `zen-sortable-column--mobile` : ""
-        ]), children: _jsx("div", { className: classNames([
-                "zen-caption",
-                "zen-sortable-column__button",
-                "zen-sortable-column-button",
-                isSortedBy ? `zen-sortable-column-button--active` : "",
-                sortDirection === ColumnSortDirection.Ascending
-                    ? "zen-sortable-column-button--dir-asc"
-                    : "zen-sortable-column-button--dir-desc"
-            ]), title: iconTitle, "aria-label": iconTitle, onClick: onHeaderClick, children: _jsxs(_Fragment, { children: [isMobile ? iconButton : null, _jsx("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
-};
+    }
+  }, [sortDirection, isActive, initialSortDirection]);
+  const iconButton = _jsx(TextIconButton, {
+    className: "zen-sortable-column-button__dir-icon zen-caption__post-icon",
+    icon: icon,
+    iconPosition: isMobile ? ButtonIconPosition.Start : ButtonIconPosition.End,
+    type: "tertiary-black",
+    title: iconTitle
+  });
+  const onHeaderClick = useCallback(e => {
+    const target = e && e.target;
+    if (!target) {
+      return;
+    }
+    if (isClickOnSortableParent(target)) {
+      onSortChange({
+        sortColumn: columnName,
+        sortDirection: sortDirection === undefined ? initialSortDirection : sortDirection === ColumnSortDirection.Ascending ? ColumnSortDirection.Descending : ColumnSortDirection.Ascending
+      });
+    }
+  }, [onSortChange, columnName, sortDirection, initialSortDirection]);
+  return _jsx("div", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    className: classNames(["zen-sortable-column", isSortedBy ? `zen-sortable-column--active` : "", isMobile ? `zen-sortable-column--mobile` : ""]),
+    children: _jsx("div", {
+      className: classNames(["zen-caption", "zen-sortable-column__button", "zen-sortable-column-button", isSortedBy ? `zen-sortable-column-button--active` : "", sortDirection === ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"]),
+      title: iconTitle,
+      "aria-label": iconTitle,
+      onClick: onHeaderClick,
+      children: _jsxs(_Fragment, {
+        children: [isMobile ? iconButton : null, _jsx("div", {
+          className: "zen-sortable-column-button__content zen-caption__content",
+          children: title
+        }), isMobile ? null : iconButton]
+      })
+    })
+  });
+};

package/esm/tabs/tabs.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useEffect, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -7,128 +8,231 @@ import { TabItem } from "./tabItem/tabItem";
 import { IconChevronRight } from "../icons/iconChevronRight";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { tabsKeyboardHandler, tabsKeyboardTabHandler } from "../commonHelpers/tabsKeyboard";
+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("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("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("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");
 export const TabsDisplayName = "Tabs";
-const getScrollButtonType = (element) => {
-    const scrollLeft = element.scrollLeft;
-    const scrollWidth = element.scrollWidth;
-    const clientWidth = element.clientWidth;
-    if (scrollLeft === 0 && scrollWidth === clientWidth) {
-        return "";
+const getScrollButtonType = element => {
+  const scrollLeft = element.scrollLeft;
+  const scrollWidth = element.scrollWidth;
+  const clientWidth = element.clientWidth;
+  if (scrollLeft === 0 && scrollWidth === clientWidth) {
+    return "";
+  }
+  if (scrollLeft > 0 && scrollWidth > clientWidth + scrollLeft + 1) {
+    return "both";
+  }
+  if (scrollLeft === 0) {
+    return "end";
+  }
+  return "start";
+};
+export const Tabs = ({
+  className,
+  tabs = [],
+  activeTabId,
+  onTabChange
+}) => {
+  const driveClassname = useDriveClassName("zen-tabs");
+  const scrollableStep = 200;
+  const {
+    translate
+  } = useLanguage();
+  const driveClassNameScroller = useDriveClassName("zen-tabs__scroller");
+  const driveClassNameGradient = useDriveClassName("zen-tabs__gradient");
+  const [scrollButtonType, setScrollButtonType] = useState("");
+  const scrollableRef = useRef(null);
+  const scrollRef = useRef(0);
+  const focusableTabIdRef = useRef("");
+  const handleButtonClick = e => {
+    const newState = e.currentTarget.id;
+    focusableTabIdRef.current = newState;
+    if (newState !== activeTabId) {
+      onTabChange(newState);
     }
-    if (scrollLeft > 0 && (scrollWidth > clientWidth + scrollLeft + 1)) {
-        return "both";
+  };
+  const keyDownHandler = useCallback(e => {
+    var _a;
+    if (e.key === "Shift") {
+      return;
     }
-    if (scrollLeft === 0) {
-        return "end";
+    if (e.key === "Enter" || e.key === " ") {
+      const target = e.target;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (target && target.id && tabs.some(tab => tab.id === target.id)) {
+        focusableTabIdRef.current = target.id;
+        onTabChange(target.id);
+      }
+      return;
     }
-    return "start";
-};
-export const Tabs = ({ className, tabs = [], activeTabId, onTabChange }) => {
-    const driveClassname = useDriveClassName("zen-tabs");
-    const scrollableStep = 200;
-    const { translate } = useLanguage();
-    const driveClassNameScroller = useDriveClassName("zen-tabs__scroller");
-    const driveClassNameGradient = useDriveClassName("zen-tabs__gradient");
-    const [scrollButtonType, setScrollButtonType] = useState("");
-    const scrollableRef = useRef(null);
-    const scrollRef = useRef(0);
-    const focusableTabIdRef = useRef("");
-    const handleButtonClick = (e) => {
-        const newState = e.currentTarget.id;
-        focusableTabIdRef.current = newState;
-        if (newState !== activeTabId) {
-            onTabChange(newState);
-        }
+    if (e.key === "Tab") {
+      const nextTabId = tabsKeyboardTabHandler(e, tabs, document.activeElement);
+      if (nextTabId) {
+        focusableTabIdRef.current = nextTabId;
+      }
+      return;
+    }
+    const newActiveTabId = tabsKeyboardHandler(e, tabs, focusableTabIdRef.current) || activeTabId;
+    focusableTabIdRef.current = newActiveTabId;
+    const focusableTab = (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
+    focusableTab === null || focusableTab === void 0 ? void 0 : focusableTab.focus();
+  }, [tabs, activeTabId, onTabChange]);
+  useEffect(() => {
+    if (!scrollableRef.current) {
+      return () => {};
+    }
+    let timer = undefined;
+    const resizeHandler = () => {
+      const scrollableElt = scrollableRef.current;
+      if (scrollableElt) {
+        timer && window.clearTimeout(timer);
+        timer = window.setTimeout(() => {
+          setScrollButtonType(getScrollButtonType(scrollableElt));
+        }, 200);
+      }
     };
-    const keyDownHandler = useCallback((e) => {
-        var _a;
-        if (e.key === "Shift") {
-            return;
-        }
-        if (e.key === "Enter" || e.key === " ") {
-            const target = e.target;
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (target && target.id && tabs.some(tab => tab.id === target.id)) {
-                focusableTabIdRef.current = target.id;
-                onTabChange(target.id);
-            }
-            return;
-        }
-        if (e.key === "Tab") {
-            const nextTabId = tabsKeyboardTabHandler(e, tabs, document.activeElement);
-            if (nextTabId) {
-                focusableTabIdRef.current = nextTabId;
-            }
-            return;
-        }
-        const newActiveTabId = tabsKeyboardHandler(e, tabs, focusableTabIdRef.current) || activeTabId;
-        focusableTabIdRef.current = newActiveTabId;
-        const focusableTab = (_a = scrollableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
-        focusableTab === null || focusableTab === void 0 ? void 0 : focusableTab.focus();
-    }, [tabs, activeTabId, onTabChange]);
-    useEffect(() => {
-        if (!scrollableRef.current) {
-            return () => { };
-        }
-        let timer = undefined;
-        const resizeHandler = () => {
-            const scrollableElt = scrollableRef.current;
-            if (scrollableElt) {
-                timer && window.clearTimeout(timer);
-                timer = window.setTimeout(() => {
-                    setScrollButtonType(getScrollButtonType(scrollableElt));
-                }, 200);
-            }
-        };
-        const scrollableElement = scrollableRef.current;
-        scrollableElement.addEventListener("scroll", resizeHandler);
-        window.addEventListener("resize", resizeHandler);
-        resizeHandler();
-        return () => {
-            timer && window.clearTimeout(timer);
-            scrollableElement.removeEventListener("scroll", resizeHandler);
-            window.removeEventListener("resize", resizeHandler);
-        };
-    }, [scrollableRef]);
-    useEffect(() => {
-        if (scrollableRef.current) {
-            setScrollButtonType(getScrollButtonType(scrollableRef.current));
-        }
-    }, [scrollableRef, tabs, activeTabId]);
-    const handleScrollButtonClick = useCallback((scrollableElt, delta) => () => {
-        if (scrollableElt) {
-            let iterations = 0;
-            const maxIterations = 100;
-            const start = scrollableElt.scrollLeft;
-            const end = start + delta;
-            const duration = 300;
-            const animateScroll = (timestamp) => {
-                if (!scrollRef.current) {
-                    scrollRef.current = timestamp;
-                }
-                const progress = Math.min((timestamp - scrollRef.current) / duration, 1);
-                scrollableElt.scrollLeft = start + (end - start) * progress;
-                if (progress < 1 && iterations < maxIterations) {
-                    iterations++;
-                    window.requestAnimationFrame(animateScroll);
-                }
-                else {
-                    scrollRef.current = 0;
-                }
-            };
-            window.requestAnimationFrame(animateScroll);
-        }
-    }, []);
-    useEffect(() => {
-        if (!scrollableRef.current || !activeTabId) {
-            return;
+    const scrollableElement = scrollableRef.current;
+    scrollableElement.addEventListener("scroll", resizeHandler);
+    window.addEventListener("resize", resizeHandler);
+    resizeHandler();
+    return () => {
+      timer && window.clearTimeout(timer);
+      scrollableElement.removeEventListener("scroll", resizeHandler);
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, [scrollableRef]);
+  useEffect(() => {
+    if (scrollableRef.current) {
+      setScrollButtonType(getScrollButtonType(scrollableRef.current));
+    }
+  }, [scrollableRef, tabs, activeTabId]);
+  const handleScrollButtonClick = useCallback((scrollableElt, delta) => () => {
+    if (scrollableElt) {
+      let iterations = 0;
+      const maxIterations = 100;
+      const start = scrollableElt.scrollLeft;
+      const end = start + delta;
+      const duration = 300;
+      const animateScroll = timestamp => {
+        if (!scrollRef.current) {
+          scrollRef.current = timestamp;
         }
-        const activeTab = scrollableRef.current.querySelector(`.zen-tab-item[id='${activeTabId}']`);
-        if (activeTab instanceof HTMLElement) {
-            focusableTabIdRef.current = activeTab.getAttribute("id") || "";
-            // activeTab.focus();
+        const progress = Math.min((timestamp - scrollRef.current) / duration, 1);
+        scrollableElt.scrollLeft = start + (end - start) * progress;
+        if (progress < 1 && iterations < maxIterations) {
+          iterations++;
+          window.requestAnimationFrame(animateScroll);
+        } else {
+          scrollRef.current = 0;
         }
-    }, [activeTabId]);
-    return _jsx("div", { className: classNames(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]), children: _jsxs("div", { className: classNames(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]), children: [scrollButtonType === "start" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"]) }), _jsx(TextIconButton, { title: translate("Scroll left"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]), icon: IconChevronRight, type: "tertiary", iconPosition: ButtonIconPosition.Start, onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep), iconClasses: "zen-tabs__start-icon" })] }) : null, _jsx("div", { ref: scrollableRef, onKeyDown: keyDownHandler, className: "zen-tabs__scrollable", children: _jsx("div", { className: "zen-tabs__tabs", role: "tablist", children: tabs.map(tab => (_jsx(TabItem, { className: "zen-tabs__tab-item", tabId: tab.id, tabName: tab.name, icon: typeof tab.icon === "function" ? createElement(tab.icon, { size: "large" }) : tab.icon, quantity: tab.quantity, active: activeTabId === tab.id, ariaControl: `panel-${tab.id}`, handleButtonClick: handleButtonClick }, tab.id))) }) }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, { children: [_jsx("div", { className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"]) }), _jsx(TextIconButton, { title: translate("Scroll right"), className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]), icon: IconChevronRight, type: "tertiary", onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep), iconPosition: ButtonIconPosition.End })] }) : null] }) });
+      };
+      window.requestAnimationFrame(animateScroll);
+    }
+  }, []);
+  useEffect(() => {
+    if (!scrollableRef.current || !activeTabId) {
+      return;
+    }
+    const activeTab = scrollableRef.current.querySelector(`.zen-tab-item[id='${activeTabId}']`);
+    if (activeTab instanceof HTMLElement) {
+      focusableTabIdRef.current = activeTab.getAttribute("id") || "";
+      // activeTab.focus();
+    }
+  }, [activeTabId]);
+  return _jsx("div", {
+    className: classNames(["zen-tabs", driveClassname || "", className !== null && className !== void 0 ? className : ""]),
+    children: _jsxs("div", {
+      className: classNames(["zen-tabs__tabs-container", className !== null && className !== void 0 ? className : "", scrollButtonType]),
+      children: [scrollButtonType === "start" || scrollButtonType === "both" ? _jsxs(_Fragment, {
+        children: [_jsx("div", {
+          className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--left"])
+        }), _jsx(TextIconButton, {
+          title: translate("Scroll left"),
+          className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__start"]),
+          icon: IconChevronRight,
+          type: "tertiary",
+          iconPosition: ButtonIconPosition.Start,
+          onClick: handleScrollButtonClick(scrollableRef.current, -scrollableStep),
+          iconClasses: "zen-tabs__start-icon"
+        })]
+      }) : null, _jsx("div", {
+        ref: scrollableRef,
+        onKeyDown: keyDownHandler,
+        className: "zen-tabs__scrollable",
+        children: _jsx("div", {
+          className: "zen-tabs__tabs",
+          role: "tablist",
+          children: tabs.map(tab => _jsx(TabItem, {
+            className: "zen-tabs__tab-item",
+            tabId: tab.id,
+            tabName: tab.name,
+            icon: typeof tab.icon === "function" ? createElement(tab.icon, {
+              size: "large"
+            }) : tab.icon,
+            quantity: tab.quantity,
+            active: activeTabId === tab.id,
+            ariaControl: `panel-${tab.id}`,
+            handleButtonClick: handleButtonClick
+          }, tab.id))
+        })
+      }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, {
+        children: [_jsx("div", {
+          className: classNames(["zen-tabs__gradient", driveClassNameGradient || "", "zen-tabs__gradient--right"])
+        }), _jsx(TextIconButton, {
+          title: translate("Scroll right"),
+          className: classNames(["zen-tabs__scroller", driveClassNameScroller || "", "zen-tabs__end"]),
+          icon: IconChevronRight,
+          type: "tertiary",
+          onClick: handleScrollButtonClick(scrollableRef.current, scrollableStep),
+          iconPosition: ButtonIconPosition.End
+        })]
+      }) : null]
+    })
+  });
 };
-Tabs.displayName = TabsDisplayName;
+Tabs.displayName = TabsDisplayName;