@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/dist/nav/navItem/navItem.js

@@ -17,7 +17,9 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
 const iconBeta_1 = require("../../icons/iconBeta");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../../icons/iconChevronLeft");
 const iconOpen2_1 = require("../../icons/iconOpen2");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const tooltip_1 = require("../../tooltip/tooltip");
 const controlledMenu_1 = require("../../menu/controlledMenu");
 const nav_context_1 = require("../context/nav.context");
@@ -29,11 +31,12 @@ const defaultTooltipAlignment = "right";
 const isLinkNavItem = (item) => !!item.link;
 const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = (0, react_1.useRef)(null);
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     const primaryIconComponent = primaryIcon ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(ChevronIcon, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;

package/dist/nav/navMobileBar/navMobileBar.js

@@ -36,7 +36,7 @@ injectString("tr", "More", "Di\u011Fer");
 injectString("zh-Hans", "More", "\u66F4\u591A");
 injectString("zh-TW", "More", "\u66F4\u591A");
 injectString("ro-RO", "More", "Mai multe");
-injectString("ar-SA", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
+injectString("ar", "More", "\u0627\u0644\u0645\u0632\u064A\u062F");
 const navItem_1 = require("../navItem/navItem");
 const iconMenu_1 = require("../../icons/iconMenu");
 const iconClose_1 = require("../../icons/iconClose");

package/dist/notification/notification.js

@@ -40,7 +40,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 pushNotification_1 = __importDefault(require("./pushNotification/pushNotification"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconCrossThin_1 = require("../icons/deprecated/iconCrossThin");

package/dist/pagination/paginationArrow.js

@@ -8,14 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRANSLATIONS = exports.PaginationArrow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
 const svgIconSize_1 = require("../svgIcon/svgIconSize");
 const paginationType_1 = require("./paginationType");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const buttonType_1 = require("../button/buttonType");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
 const iconArrowRight_1 = require("../icons/iconArrowRight");
+const iconArrowLeft_1 = require("../icons/iconArrowLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 injectString("cs", "Previous page", "P\u0159edchoz\xED str\xE1nka");
 injectString("da-DK", "Previous page", "Forrige side");
 injectString("de", "Previous page", "Vorherige Seite");
@@ -42,7 +44,7 @@ injectString("tr", "Previous page", "\xD6nceki sayfa");
 injectString("zh-Hans", "Previous page", "\u4E0A\u4E00\u9875");
 injectString("zh-TW", "Previous page", "\u4E0A\u4E00\u9801");
 injectString("ro-RO", "Previous page", "Pagina anterioar\u0103");
-injectString("ar-SA", "Previous page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629");
+injectString("ar", "Previous page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629");
 injectString("cs", "Next page", "Dal\u0161\xED str\xE1nka");
 injectString("da-DK", "Next page", "N\xE6ste side");
 injectString("de", "Next page", "N\xE4chste Seite");
@@ -69,7 +71,7 @@ injectString("tr", "Next page", "Sonraki sayfa");
 injectString("zh-Hans", "Next page", "\u4E0B\u4E00\u9875");
 injectString("zh-TW", "Next page", "\u4E0B\u4E00\u9801");
 injectString("ro-RO", "Next page", "Pagina urm\u0103toare");
-injectString("ar-SA", "Next page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u0627\u0644\u064A\u0629");
+injectString("ar", "Next page", "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u0627\u0644\u064A\u0629");
 const PaginationArrow = ({
   value,
   disabled,
@@ -79,6 +81,11 @@ const PaginationArrow = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const isPrevious = value === "previous";
+  const [ltrCompact, rtlCompact] = isPrevious ? [iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight] : [iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft];
+  const [ltrNormal, rtlNormal] = isPrevious ? [iconArrowLeft_1.IconArrowLeft, iconArrowRight_1.IconArrowRight] : [iconArrowRight_1.IconArrowRight, iconArrowLeft_1.IconArrowLeft];
+  const CompactIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(ltrCompact, rtlCompact);
+  const NormalIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(ltrNormal, rtlNormal);
   const previousButtonTitle = translate("Previous page");
   const nextButtonTitle = translate("Next page");
   const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
@@ -90,10 +97,10 @@ const PaginationArrow = ({
     disabled: disabled,
     onClick: arrowButtonHandler,
     type: type === paginationType_1.PaginationType.Compact ? buttonType_1.ButtonType.TertiaryBlack : buttonType_1.ButtonType.Secondary,
-    icon: type === paginationType_1.PaginationType.Compact ? iconChevronRight_1.IconChevronRight : iconArrowRight_1.IconArrowRight,
+    icon: type === paginationType_1.PaginationType.Compact ? CompactIcon : NormalIcon,
     iconSize: type === paginationType_1.PaginationType.Compact ? svgIconSize_1.SvgIconSize.Big : svgIconSize_1.SvgIconSize.Large,
     iconPosition: textIconButton_1.ButtonIconPosition.Start,
-    iconClasses: (0, classNames_1.classNames)(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
+    iconClasses: "zen-pagination__arrow-navigation-button-icon"
   });
 };
 exports.PaginationArrow = PaginationArrow;

package/dist/pagination/paginationText/paginationText.js

@@ -35,7 +35,7 @@ injectString("tr", "Showing {from} - {to} of {total}", "{from} - {to} / {total}
 injectString("zh-Hans", "Showing {from} - {to} of {total}", "\u663E\u793A {from} - {to} \u9875\uFF0C\u5171 {total} \u9875");
 injectString("zh-TW", "Showing {from} - {to} of {total}", "\u986F\u793A {from} - {to} (\u5171 {total})");
 injectString("ro-RO", "Showing {from} - {to} of {total}", "Se afi\u0219eaz\u0103 {from}-{to} din {total}");
-injectString("ar-SA", "Showing {from} - {to} of {total}", "\u0639\u0631\u0636 {from} - {to} \u0645\u0646 {total}");
+injectString("ar", "Showing {from} - {to} of {total}", "\u0639\u0631\u0636 {from} - {to} \u0645\u0646 {total}");
 const PaginationText = ({
   amount,
   from,

package/dist/pill/components/pillNonActionable/pillNonActionable.js

@@ -41,7 +41,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 useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
 const NonActionablePill = ({
   icon,

package/dist/pillBox/components/pillBoxItem.js

@@ -36,7 +36,7 @@ injectString("tr", "Remove selection", "Se\xE7imi kald\u0131r");
 injectString("zh-Hans", "Remove selection", "\u5220\u9664\u6240\u9009\u5185\u5BB9");
 injectString("zh-TW", "Remove selection", "\u79FB\u9664\u9078\u53D6\u9805\u76EE");
 injectString("ro-RO", "Remove selection", "Elimina\u021Bi selec\u021Bia");
-injectString("ar-SA", "Remove selection", "\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
+injectString("ar", "Remove selection", "\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062A\u062D\u062F\u064A\u062F");
 const pill_1 = require("../../pill/pill");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 exports.PillBoxItem = (0, react_1.memo)(function innerPillItem({

package/dist/pillBox/pillBox.js

@@ -41,7 +41,7 @@ injectString("tr", "and {0} more", "ve {0} tane daha");
 injectString("zh-Hans", "and {0} more", "\u548C\u53E6\u5916 {0} \u9879");
 injectString("zh-TW", "and {0} more", "\u9084\u6709 {0} \u500B");
 injectString("ro-RO", "and {0} more", "\u0219i {0} \xEEn plus");
-injectString("ar-SA", "and {0} more", "\u0648 {0} \u0623\u062E\u0631\u0649");
+injectString("ar", "and {0} more", "\u0648 {0} \u0623\u062E\u0631\u0649");
 injectString("cs", "Selected:", "Vybr\xE1no:");
 injectString("da-DK", "Selected:", "Valgte:");
 injectString("de", "Selected:", "Ausgew\xE4hlte Fahrer");
@@ -68,7 +68,7 @@ injectString("tr", "Selected:", "Se\xE7ilen:");
 injectString("zh-Hans", "Selected:", "\u5DF2\u9009\uFF1A");
 injectString("zh-TW", "Selected:", "\u5DF2\u9078\u53D6\uFF1A");
 injectString("ro-RO", "Selected:", "Selec\u021Bie:");
-injectString("ar-SA", "Selected:", "\u0627\u0644\u0645\u062D\u062F\u062F:");
+injectString("ar", "Selected:", "\u0627\u0644\u0645\u062D\u062F\u062F:");
 injectString("cs", "All", "V\u0161e");
 injectString("da-DK", "All", "Alle");
 injectString("de", "All", "Alle");
@@ -95,7 +95,7 @@ injectString("tr", "All", "T\xFCm\xFC");
 injectString("zh-Hans", "All", "\u5168\u90E8");
 injectString("zh-TW", "All", "\u5168\u90E8");
 injectString("ro-RO", "All", "Toate");
-injectString("ar-SA", "All", "\u0627\u0644\u0643\u0644");
+injectString("ar", "All", "\u0627\u0644\u0643\u0644");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.DEFAULT_MAX_PILLS = 5;
 const PillBox = ({

package/dist/pillExpandable/pillContent.js

@@ -22,9 +22,18 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
-    const renderMainButton = (0, react_1.useCallback)(data => ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text }))), [mainActionClick]);
-    const renderSecondaryButton = (0, react_1.useCallback)(data => ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "secondary", children: data.text }))), [secondaryActionClick]);
-    const renderTertiaryButton = (0, react_1.useCallback)(data => ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", children: data.text }))), [tertiaryActionClick]);
+    const renderMainButton = (0, react_1.useCallback)(data => {
+        var _a, _b;
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", dataAnalyticsId: (_a = data.dataAnalyticsId) !== null && _a !== void 0 ? _a : (_b = data.linkOptions) === null || _b === void 0 ? void 0 : _b.dataAnalyticsId, children: data.text })));
+    }, [mainActionClick]);
+    const renderSecondaryButton = (0, react_1.useCallback)(data => {
+        var _a, _b;
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "secondary", dataAnalyticsId: (_a = data.dataAnalyticsId) !== null && _a !== void 0 ? _a : (_b = data.linkOptions) === null || _b === void 0 ? void 0 : _b.dataAnalyticsId, children: data.text })));
+    }, [secondaryActionClick]);
+    const renderTertiaryButton = (0, react_1.useCallback)(data => {
+        var _a, _b;
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", dataAnalyticsId: (_a = data.dataAnalyticsId) !== null && _a !== void 0 ? _a : (_b = data.linkOptions) === null || _b === void 0 ? void 0 : _b.dataAnalyticsId, children: data.text })));
+    }, [tertiaryActionClick]);
     const renderDescription = (0, react_1.useCallback)(data => ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data })), [descriptionDriveClassName, descriptionId]);
     const renderCount = (0, react_1.useCallback)(data => data ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
             "zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left",

package/dist/pillExpandable/pillExpandable.d.ts

@@ -14,6 +14,7 @@ export interface IPillExpandableAction {
     onClick?: () => void;
     link?: string;
     linkOptions?: ILinkOptions;
+    dataAnalyticsId?: string;
 }
 export interface IBaseData {
     description?: TLazyContent<ReactNode>;
@@ -57,6 +58,8 @@ export interface IPillExpandableBase extends IZenComponentProps {
     popoverSize?: TPopoverSize;
     /** Title displayed in the popover title bar. If provided, the title bar will be shown. */
     title?: string;
+    /** Analytics identifier applied as `data-analytics-id` on the pill trigger button. */
+    dataAnalyticsId?: string;
 }
 /** Props for standard PillExpandable (non-upsell) */
 interface IPillExpandableStandard extends IPillExpandableBase {
@@ -72,6 +75,6 @@ interface IPillExpandableUpsell extends IPillExpandableBase {
 /** Combined type using Exclusive to prevent mixing upsell with standard props */
 export type IPillExpandable = Exclusive<IPillExpandableStandard, IPillExpandableUpsell>;
 type TPillExpandable = IPillExpandable & TProps;
-export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, tertiaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren, popoverSize, title }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
+export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, tertiaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren, popoverSize, title, dataAnalyticsId }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/pillExpandable/pillExpandable.js

@@ -34,7 +34,7 @@ injectString("tr", "View all", "T\xFCm\xFCn\xFC g\xF6r\xFCnt\xFCle");
 injectString("zh-Hans", "View all", "\u67E5\u770B\u5168\u90E8");
 injectString("zh-TW", "View all", "\u6AA2\u8996\u5168\u90E8");
 injectString("ro-RO", "View all", "Vezi tot");
-injectString("ar-SA", "View all", "\u0639\u0631\u0636 \u0627\u0644\u0643\u0644");
+injectString("ar", "View all", "\u0639\u0631\u0636 \u0627\u0644\u0643\u0644");
 const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const focusableSelector_1 = require("../utils/focusableSelector");
@@ -404,7 +404,8 @@ const PillExpandableBase = ({
   hideCounterNumber,
   autoExpandChildren,
   popoverSize = "medium",
-  title
+  title,
+  dataAnalyticsId
 }) => {
   const popupId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
@@ -573,7 +574,8 @@ const PillExpandableBase = ({
           type: type,
           errorHandler: errorHandler,
           isBeta: isBeta,
-          isMobile: isMobile
+          isMobile: isMobile,
+          dataAnalyticsId: dataAnalyticsId
         }), uniqueChildren && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
           icon: secondaryIcon || effectiveIcon,
           text: hideCounterNumber ? "" : counterText,

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -13,7 +13,7 @@ interface IPillExpandableSimple extends IPillExpandableBase {
     type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId
+const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
@@ -21,13 +21,13 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
     const iconSize = isBeta ? "big" : isLargeIcon ? "large" : "big";
     const hasText = (text || "").trim().length > 0;
     const isTextCentered = icon === false && !includeExpandIcon;
-    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: (0, classNames_1.classNames)([
             "zen-status-pill__container",
             `zen-status-pill__container--${type}`,
             containerDriveClassName || "",
             className || "",
             "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-expanded": includeExpandIcon ? (expanded !== null && expanded !== void 0 ? expanded : false) : undefined, "aria-describedby": descriptionId, children: [icon !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-expanded": includeExpandIcon ? (expanded !== null && expanded !== void 0 ? expanded : false) : undefined, "aria-describedby": descriptionId }, (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {}), { children: [icon !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     isLargeIcon ? "zen-status-pill__icon--large" : "",
@@ -41,7 +41,7 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
                     isTextCentered ? "zen-status-pill__text--centered" : ""
                 ]), children: text })), includeExpandIcon && ((0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
                         size: iconSize
-                    }) }) }))] }));
+                    }) }) }))] })));
 };
 exports.PillExpandableSimple = PillExpandableSimple;
 exports.PillExpandableSimple.displayName = "PillExpandableSimple";

package/dist/radioGroupRaw/radioGroupRaw.js

@@ -89,7 +89,8 @@ const RadioGroupRaw = (props) => {
                         "zen-radio-group__item",
                         wrappedInLabel ? "zen-radio-group__item--no-paddings" : "",
                         type === "interactive" ? "zen-radio--interactive" : "",
-                        size === "small" ? "zen-radio-group__item--small" : ""
+                        size === "small" ? "zen-radio-group__item--small" : "",
+                        direction === "horizontal" ? "zen-radio--align-start" : ""
                     ]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChangeInner, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : ind === focusedIndex ? 0 : -1, ref: selectItemOnFocus ? undefined : ind === focusedIndex ? focusElementRef : undefined, role: itemRole }), item.children) }, `${ind}-li`))) })) }));
 };
 exports.RadioGroupRaw = RadioGroupRaw;

package/dist/rangeRaw/rangeRaw.js

@@ -47,7 +47,7 @@ injectString("tr", "Min", "Min.");
 injectString("zh-Hans", "Min", "\u6700\u5C0F");
 injectString("zh-TW", "Min", "\u6700\u5C0F");
 injectString("ro-RO", "Min", "Min.");
-injectString("ar-SA", "Min", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
+injectString("ar", "Min", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
 injectString("cs", "Max", "Max.");
 injectString("da-DK", "Max", "Maks");
 injectString("de", "Max", "Max");
@@ -74,7 +74,7 @@ injectString("tr", "Max", "Maks.");
 injectString("zh-Hans", "Max", "\u6700\u5927");
 injectString("zh-TW", "Max", "\u6700\u5927");
 injectString("ro-RO", "Max", "Max.");
-injectString("ar-SA", "Max", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
+injectString("ar", "Max", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
 injectString("cs", "Range Filter popup", "Vyskakovac\xED okno Filtr rozmez\xED");
 injectString("da-DK", "Range Filter popup", "Pop op-vindue med omr\xE5defilter");
 injectString("de", "Range Filter popup", "Bereichsfilter-Popup");
@@ -101,7 +101,7 @@ injectString("tr", "Range Filter popup", "Aral\u0131k Filtresi a\xE7\u0131l\u013
 injectString("zh-Hans", "Range Filter popup", "\u201C\u8303\u56F4\u7B5B\u9009\u6761\u4EF6\u201D\u5F39\u51FA\u7A97\u53E3");
 injectString("zh-TW", "Range Filter popup", "\u7BC4\u570D\u7BE9\u9078\u5F48\u51FA\u8996\u7A97");
 injectString("ro-RO", "Range Filter popup", "Pop-up filtru interval");
-injectString("ar-SA", "Range Filter popup", "\u0646\u0627\u0641\u0630\u0629 \u062A\u0635\u0641\u064A\u0629 \u0627\u0644\u0646\u0637\u0627\u0642");
+injectString("ar", "Range Filter popup", "\u0646\u0627\u0641\u0630\u0629 \u062A\u0635\u0641\u064A\u0629 \u0627\u0644\u0646\u0637\u0627\u0642");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -128,7 +128,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
-injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
+injectString("ar", "Clear", "\u0645\u0633\u062D");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -155,7 +155,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");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -182,7 +182,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", "{rangeName} values {values}", "{rangeName} v hodnot\u011B {values}");
 injectString("da-DK", "{rangeName} values {values}", "{rangeName} v\xE6rdier {values}");
 injectString("de", "{rangeName} values {values}", "{rangeName}-Werte {values}");
@@ -209,7 +209,7 @@ injectString("tr", "{rangeName} values {values}", "{rangeName} de\u011Ferleri {v
 injectString("zh-Hans", "{rangeName} values {values}", "{rangeName} \u503C {values}");
 injectString("zh-TW", "{rangeName} values {values}", "{rangeName} \u7684\u503C\u70BA {values}");
 injectString("ro-RO", "{rangeName} values {values}", "Valori {rangeName} {values}");
-injectString("ar-SA", "{rangeName} values {values}", "\u0642\u064A\u0645 {rangeName} {values}");
+injectString("ar", "{rangeName} values {values}", "\u0642\u064A\u0645 {rangeName} {values}");
 const chip_1 = require("../chip/chip");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
@@ -427,7 +427,6 @@ const RangeRaw = props => {
     className: (0, classNames_1.classNames)(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]),
     onOpenChange: handleTriggerClick,
     useTrapFocusWithTrigger: "on",
-    alignment: "bottom-left",
     shouldHoldScroll: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Range Filter popup"),

package/dist/rangeRaw/utils/rangeHelper.js

@@ -29,7 +29,7 @@ injectString("tr", "Must be in range {min} - {max}", "{min} - {max} aral\u0131\u
 injectString("zh-Hans", "Must be in range {min} - {max}", "\u5FC5\u987B\u5904\u4E8E {min} \u81F3 {max} \u8303\u56F4\u5185");
 injectString("zh-TW", "Must be in range {min} - {max}", "\u5FC5\u9808\u5728 {min} - {max} \u7BC4\u570D\u5167");
 injectString("ro-RO", "Must be in range {min} - {max}", "Trebuie s\u0103 fie \xEEn intervalul {min}-{max}");
-injectString("ar-SA", "Must be in range {min} - {max}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0641\u064A \u0627\u0644\u0646\u0637\u0627\u0642 {min} - {max}");
+injectString("ar", "Must be in range {min} - {max}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0641\u064A \u0627\u0644\u0646\u0637\u0627\u0642 {min} - {max}");
 injectString("cs", "Must be more than {value}", "Mus\xED b\xFDt v\u011Bt\u0161\xED ne\u017E {value}");
 injectString("da-DK", "Must be more than {value}", "Skal v\xE6re mere end {value}");
 injectString("de", "Must be more than {value}", "Muss gr\xF6\xDFer sein als {value}");
@@ -56,7 +56,7 @@ injectString("tr", "Must be more than {value}", "{value} de\u011Ferinden fazla o
 injectString("zh-Hans", "Must be more than {value}", "\u5FC5\u987B\u5927\u4E8E {value}");
 injectString("zh-TW", "Must be more than {value}", "\u5FC5\u9808\u5927\u65BC {value}");
 injectString("ro-RO", "Must be more than {value}", "Trebuie s\u0103 fie mai mult de {value}");
-injectString("ar-SA", "Must be more than {value}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0643\u062B\u0631 \u0645\u0646 {value}");
+injectString("ar", "Must be more than {value}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0643\u062B\u0631 \u0645\u0646 {value}");
 injectString("cs", "Must be less than {value}", "Mus\xED b\xFDt men\u0161\xED ne\u017E {value}");
 injectString("da-DK", "Must be less than {value}", "Skal v\xE6re mindre end {value}");
 injectString("de", "Must be less than {value}", "Muss kleiner sein als {value}");
@@ -83,7 +83,7 @@ injectString("tr", "Must be less than {value}", "{value} de\u011Ferinden az olma
 injectString("zh-Hans", "Must be less than {value}", "\u5FC5\u987B\u5C0F\u4E8E {value}");
 injectString("zh-TW", "Must be less than {value}", "\u5FC5\u9808\u5C0F\u65BC {value}");
 injectString("ro-RO", "Must be less than {value}", "Trebuie s\u0103 fie mai pu\u021Bin de {value}");
-injectString("ar-SA", "Must be less than {value}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0642\u0644 \u0645\u0646 {value}");
+injectString("ar", "Must be less than {value}", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0642\u0644 \u0645\u0646 {value}");
 injectString("cs", "The min value must be set", "Mus\xED b\xFDt nastavena minim\xE1ln\xED hodnota");
 injectString("da-DK", "The min value must be set", "Den mindste v\xE6rdi skal indstilles.");
 injectString("de", "The min value must be set", "Mindestwert muss angegeben werden");
@@ -110,7 +110,7 @@ injectString("tr", "The min value must be set", "Min. de\u011Fer ayarlanmal\u013
 injectString("zh-Hans", "The min value must be set", "\u5FC5\u987B\u8BBE\u7F6E\u6700\u5C0F\u503C");
 injectString("zh-TW", "The min value must be set", "\u5FC5\u9808\u8A2D\u5B9A\u6700\u5C0F\u503C");
 injectString("ro-RO", "The min value must be set", "Trebuie setat\u0103 valoarea min.");
-injectString("ar-SA", "The min value must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
+injectString("ar", "The min value must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
 injectString("cs", "The max value must be set", "Mus\xED b\xFDt nastavena maxim\xE1ln\xED hodnota");
 injectString("da-DK", "The max value must be set", "Den maksimale v\xE6rdi skal indstilles");
 injectString("de", "The max value must be set", "H\xF6chstwert muss angegeben werden");
@@ -137,7 +137,7 @@ injectString("tr", "The max value must be set", "Maks. de\u011Fer ayarlanmal\u01
 injectString("zh-Hans", "The max value must be set", "\u5FC5\u987B\u8BBE\u7F6E\u6700\u5927\u503C");
 injectString("zh-TW", "The max value must be set", "\u5FC5\u9808\u8A2D\u5B9A\u6700\u5927\u503C");
 injectString("ro-RO", "The max value must be set", "Trebuie setat\u0103 valoarea max.");
-injectString("ar-SA", "The max value must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
+injectString("ar", "The max value must be set", "\u064A\u062C\u0628 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
 injectString("cs", "Must be less than the max", "Mus\xED b\xFDt men\u0161\xED ne\u017E max.");
 injectString("da-DK", "Must be less than the max", "Skal v\xE6re mindre end maks.");
 injectString("de", "Must be less than the max", "Muss kleiner als Max. sein");
@@ -164,7 +164,7 @@ injectString("tr", "Must be less than the max", "Maks. de\u011Ferden az olmal\u0
 injectString("zh-Hans", "Must be less than the max", "\u5FC5\u987B\u5C0F\u4E8E\u6700\u5927\u503C");
 injectString("zh-TW", "Must be less than the max", "\u5FC5\u9808\u5C0F\u65BC\u6700\u5927\u503C");
 injectString("ro-RO", "Must be less than the max", "Trebuie s\u0103 fie sub max.");
-injectString("ar-SA", "Must be less than the max", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0642\u0644 \u0645\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
+injectString("ar", "Must be less than the max", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0642\u0644 \u0645\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
 injectString("cs", "Must be more than the min", "Mus\xED b\xFDt v\u011Bt\u0161\xED ne\u017E min.");
 injectString("da-DK", "Must be more than the min", "Skal v\xE6re mere end minimum.");
 injectString("de", "Must be more than the min", "Muss gr\xF6\xDFer als Min. sein");
@@ -191,7 +191,7 @@ injectString("tr", "Must be more than the min", "Min. de\u011Ferden fazla olmal\
 injectString("zh-Hans", "Must be more than the min", "\u5FC5\u987B\u5927\u4E8E\u6700\u5C0F\u503C");
 injectString("zh-TW", "Must be more than the min", "\u5FC5\u9808\u5927\u65BC\u6700\u5C0F\u503C");
 injectString("ro-RO", "Must be more than the min", "Trebuie s\u0103 fie peste min.");
-injectString("ar-SA", "Must be more than the min", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0643\u062B\u0631 \u0645\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
+injectString("ar", "Must be more than the min", "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0643\u0648\u0646 \u0623\u0643\u062B\u0631 \u0645\u0646 \u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/searchInputRaw/searchInputRaw.js

@@ -65,7 +65,7 @@ injectString("tr", "Search", "Ara");
 injectString("zh-Hans", "Search", "\u641C\u7D22");
 injectString("zh-TW", "Search", "\u641C\u5C0B");
 injectString("ro-RO", "Search", "C\u0103uta\u021Bi");
-injectString("ar-SA", "Search", "\u0628\u062D\u062B");
+injectString("ar", "Search", "\u0628\u062D\u062B");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -92,7 +92,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
-injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
+injectString("ar", "Clear", "\u0645\u0633\u062D");
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -152,11 +152,15 @@ const SearchInputRaw = props => {
   const handleChange = event => {
     onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value);
   };
+  const innerRef = React.useRef(null);
   let closeButton = null;
   if (!withDefaultCloseIcon) {
     const closeButtonClassName = ["zen-search-input__close-button", value.length ? "zen-search-input__close-button--visible" : "", isMobile && !isDrive ? "zen-search-input__close-button--mobile" : "", driveCloseButtonClassName || ""];
     const onClick = () => {
+      var _a;
       onChange === null || onChange === void 0 ? void 0 : onChange("");
+      // Return focus to the input after clearing so keyboard users don't lose their place (WCAG 2.1 SC 2.1.1)
+      (_a = ref ? ref.current : innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     closeButton = (0, jsx_runtime_1.jsx)("button", {
       type: "button",
@@ -170,7 +174,6 @@ const SearchInputRaw = props => {
       })
     });
   }
-  const innerRef = React.useRef(null);
   const onClickHandler = (0, react_1.useCallback)(() => {
     var _a, _b;
     if (ref) {

package/dist/selectList/selectList.js

@@ -48,7 +48,7 @@ injectString("tr", "Checked", "\u0130\u015Faretlendi");
 injectString("zh-Hans", "Checked", "\u5DF2\u9009\u4E2D");
 injectString("zh-TW", "Checked", "\u5DF2\u52FE\u9078");
 injectString("ro-RO", "Checked", "Bifat");
-injectString("ar-SA", "Checked", "\u0645\u062D\u062F\u062F");
+injectString("ar", "Checked", "\u0645\u062D\u062F\u062F");
 injectString("cs", "Unchecked", "Neza\u0161krtnuto");
 injectString("da-DK", "Unchecked", "Ikke markeret");
 injectString("de", "Unchecked", "Deaktiviert");
@@ -75,7 +75,7 @@ injectString("tr", "Unchecked", "\u0130\u015Faretlenmedi");
 injectString("zh-Hans", "Unchecked", "\u672A\u9009\u4E2D");
 injectString("zh-TW", "Unchecked", "\u672A\u52FE\u9078");
 injectString("ro-RO", "Unchecked", "Nebifat");
-injectString("ar-SA", "Unchecked", "\u063A\u064A\u0631 \u0645\u062D\u062F\u062F");
+injectString("ar", "Unchecked", "\u063A\u064A\u0631 \u0645\u062D\u062F\u062F");
 const selectList_reducer_1 = require("./selectList.reducer");
 const selectListItem_1 = require("./selectListItem");
 const isChildOf_1 = require("../utils/isChildOf");

package/dist/selectList/selectListItem.js

@@ -6,6 +6,8 @@ const checkboxState_1 = require("../checkbox/checkboxState");
 const checkboxNonInteractive_1 = require("../checkboxNonInteractive/checkboxNonInteractive");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const getAriaChecked = (showCheckbox, state) => {
     if (!showCheckbox) {
@@ -26,6 +28,7 @@ const getTabIndex = (showCheckbox, focused, disabled) => {
 };
 const SelectListItem = ({ id, disabled = false, state = checkboxState_1.CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, onFocusItem, multiLevel, className = "", children }) => {
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-select-item");
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
     const onClickFunc = () => {
         if (disabled) {
             return;
@@ -47,6 +50,6 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
-            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) : null] }) }));
+            ]), children: [showCheckbox ? ((0, jsx_runtime_1.jsx)(checkboxNonInteractive_1.CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === checkboxState_1.CheckboxState.On, indeterminate: state === checkboxState_1.CheckboxState.Indeterminate, disabled: disabled, children: children })) : (children), multiLevel && !showCheckbox ? (0, jsx_runtime_1.jsx)(ChevronIcon, { size: "large" }) : null] }) }));
 };
 exports.SelectListItem = SelectListItem;

package/dist/skeleton/skeleton.js

@@ -34,7 +34,7 @@ injectString("tr", "Loading", "Y\xFCkleniyor");
 injectString("zh-Hans", "Loading", "\u6B63\u5728\u52A0\u8F7D");
 injectString("zh-TW", "Loading", "\u8F09\u5165\u4E2D");
 injectString("ro-RO", "Loading", "Se \xEEncarc\u0103");
-injectString("ar-SA", "Loading", "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
+injectString("ar", "Loading", "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const Skeleton = ({

package/dist/sortControl/sortControl.js

@@ -38,7 +38,7 @@ injectString("tr", "Sort by", "S\u0131ralama \xF6l\xE7\xFCt\xFC");
 injectString("zh-Hans", "Sort by", "\u6392\u5E8F\u4F9D\u636E");
 injectString("zh-TW", "Sort by", "\u6392\u5E8F\u4F9D\u64DA");
 injectString("ro-RO", "Sort by", "Sorta\u021Bi dup\u0103");
-injectString("ar-SA", "Sort by", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628");
+injectString("ar", "Sort by", "\u062A\u0631\u062A\u064A\u0628 \u062D\u0633\u0628");
 injectString("cs", "Change sort direction", "Zm\u011Bnit sm\u011Br \u0159azen\xED");
 injectString("da-DK", "Change sort direction", "Skift sorteringsretning");
 injectString("de", "Change sort direction", "Sortierrichtung \xE4ndern");
@@ -65,7 +65,7 @@ injectString("tr", "Change sort direction", "S\u0131ralama y\xF6n\xFCn\xFC de\u0
 injectString("zh-Hans", "Change sort direction", "\u66F4\u6539\u6392\u5E8F");
 injectString("zh-TW", "Change sort direction", "\u8B8A\u66F4\u6392\u5E8F\u65B9\u5411");
 injectString("ro-RO", "Change sort direction", "Schimba\u021Bi direc\u021Bia sort\u0103rii");
-injectString("ar-SA", "Change sort direction", "\u062A\u063A\u064A\u064A\u0631 \u0627\u062A\u062C\u0627\u0647 \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
+injectString("ar", "Change sort direction", "\u062A\u063A\u064A\u064A\u0631 \u0627\u062A\u062C\u0627\u0647 \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
 injectString("cs", "Ascending", "Vzestupn\u011B");
 injectString("da-DK", "Ascending", "Stigende");
 injectString("de", "Ascending", "Aufsteigend");
@@ -92,7 +92,7 @@ injectString("tr", "Ascending", "Artan");
 injectString("zh-Hans", "Ascending", "\u5347\u5E8F");
 injectString("zh-TW", "Ascending", "\u905E\u589E");
 injectString("ro-RO", "Ascending", "Ascensiune");
-injectString("ar-SA", "Ascending", "\u062A\u0635\u0627\u0639\u062F\u064A");
+injectString("ar", "Ascending", "\u062A\u0635\u0627\u0639\u062F\u064A");
 injectString("cs", "Descending", "Sestupn\u011B");
 injectString("da-DK", "Descending", "Faldende");
 injectString("de", "Descending", "Absteigend");
@@ -119,7 +119,7 @@ injectString("tr", "Descending", "Azalan");
 injectString("zh-Hans", "Descending", "\u964D\u5E8F");
 injectString("zh-TW", "Descending", "\u905E\u6E1B");
 injectString("ro-RO", "Descending", "Cobor\xE2re");
-injectString("ar-SA", "Descending", "\u062A\u0646\u0627\u0632\u0644\u064A");
+injectString("ar", "Descending", "\u062A\u0646\u0627\u0632\u0644\u064A");
 injectString("cs", "Sort Options", "Sort Options");
 injectString("da-DK", "Sort Options", "Sorteringsmuligheder");
 injectString("de", "Sort Options", "Sort Options");
@@ -146,7 +146,7 @@ injectString("tr", "Sort Options", "Sort Options");
 injectString("zh-Hans", "Sort Options", "Sort Options");
 injectString("zh-TW", "Sort Options", "\u6392\u5E8F\u9078\u9805");
 injectString("ro-RO", "Sort Options", "Op\u021Biuni de sortare");
-injectString("ar-SA", "Sort Options", "\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
+injectString("ar", "Sort Options", "\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u062A\u0631\u062A\u064A\u0628");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
@@ -154,7 +154,6 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const iconFilter3Asc_1 = require("../icons/iconFilter3Asc");
 const iconFilter3Desc_1 = require("../icons/iconFilter3Desc");
-const MENU_POSITION = "bottom-left";
 const BUTTON_TEXT_DEFAULT = "Sort by";
 var SortDirections;
 (function (SortDirections) {
@@ -239,7 +238,7 @@ const SortControl = ({
           size: isDrive ? "huge" : "large"
         })
       }),
-      alignment: MENU_POSITION,
+      alignment: "bottom-left",
       onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
       children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
         id: "sortControlSelectList",