@geotab/zenith 3.7.0 → 3.8.0-beta.1

package/esm/dropdown/dropdownTrigger.d.ts

@@ -1 +1 @@
-export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;

package/esm/dropdownRaw/dropdownHelper.d.ts

@@ -31,3 +31,13 @@ export declare const checkIsDataProblem: (selectedIds: string[], groupsMap: IDro
 export declare const getStringFromSelected: (selectedIds: string[], groupsMapSelected: IDropdownState["groupsMapSelected"], translate: (s: string) => string, rootId: string) => string;
 export declare const getStringFromAllSelected: (groupsMap: IDropdownState["groupsMap"], translate: (s: string) => string, rootId: string) => string;
 export declare const getSelectedCount: (selectedIds: string[]) => number;
+export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog") => {
+    readonly role: "combobox";
+    readonly "aria-haspopup": "listbox";
+} | {
+    readonly role: "combobox";
+    readonly "aria-haspopup": "dialog";
+} | {
+    readonly role: "button";
+    readonly "aria-haspopup": "dialog";
+};

package/esm/dropdownRaw/dropdownHelper.js

@@ -11,7 +11,9 @@ export const isAllChildrenSelected = (stateObj, currentId) => {
     }
     const selectedIds = new Set(stateObj.selectedIds);
     const currentEl = getGroupsTreeItem(stateObj, currentId);
-    return currentEl && currentEl.children && currentEl.children.length ? getListDataWithDisabled(currentEl.children, stateObj.isNestedList).every(el => selectedIds.has(el.id)) : false;
+    return currentEl && currentEl.children && currentEl.children.length
+        ? getListDataWithDisabled(currentEl.children, stateObj.isNestedList).every(el => selectedIds.has(el.id))
+        : false;
 };
 export const isEveryItemSelected = (listData, selectedItems) => {
     if (!selectedItems.length || !listData.length) {
@@ -40,10 +42,12 @@ export const isAllItemsHasOneParent = (listData, childrenArr) => {
 };
 export function prepareComboOptionsForList(actionListData, translate, options, getSelectedFn, getSelectedChildFn, isFlatList, getTitle, isAllSelected) {
     const selectedIds = new Set(getSelectedFn());
-    const preparedOptions = options && options.length ? options.map(option => {
-        const selectedChild = getSelectedChildFn(option.id);
-        return Object.assign({ label: getGroupDescription(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {}));
-    }) : [];
+    const preparedOptions = options && options.length
+        ? options.map(option => {
+            const selectedChild = getSelectedChildFn(option.id);
+            return Object.assign({ label: getGroupDescription(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {}));
+        })
+        : [];
     return preparedOptions;
 }
 const getSelectedChildren = (stateObj, currentId) => {
@@ -78,15 +82,19 @@ export const sortDropdownItemArray = (arr, sortFn) => {
     return arr;
 };
 export const createSingleListOptions = (stateObj, translate, listItem) => {
-    const preparedOptions = listItem && listItem.length ? listItem.map(option => ({
-        id: option.id,
-        children: getGroupDescription(stateObj.groupsMap[option.id] || option, translate),
-        disabled: option.disabled,
-        multiLevel: Object.keys(stateObj.groupsMap).length === 0 ? false : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined
-    })) : [];
+    const preparedOptions = listItem && listItem.length
+        ? listItem.map(option => ({
+            id: option.id,
+            children: getGroupDescription(stateObj.groupsMap[option.id] || option, translate),
+            disabled: option.disabled,
+            multiLevel: Object.keys(stateObj.groupsMap).length === 0
+                ? false
+                : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined
+        }))
+        : [];
     return preparedOptions;
 };
-export const createListDataOptions = (stateObj, translate, listItem, isMultiselect, isAllSelected) => isMultiselect ? createOptions(stateObj, translate, listItem, isAllSelected) : createSingleListOptions(stateObj, translate, listItem);
+export const createListDataOptions = (stateObj, translate, listItem, isMultiselect, isAllSelected) => (isMultiselect ? createOptions(stateObj, translate, listItem, isAllSelected) : createSingleListOptions(stateObj, translate, listItem));
 export const compareStringsArrays = (arr1, arr2) => {
     if (arr1.length !== arr2.length) {
         return false;
@@ -94,12 +102,15 @@ export const compareStringsArrays = (arr1, arr2) => {
     const set2 = new Set(arr2);
     return arr1.every(el => set2.has(el));
 };
-export const compareObjectsArrays = (arr1, arr2) => arr1.length === arr2.length && arr1.every((el, ind) => {
-    const el2 = arr2[ind];
-    const sameId = el.id === el2.id;
-    const sameDisabled = (el.disabled === el2.disabled) || (el.disabled === undefined && el2.disabled === false) || (el2.disabled === undefined && el.disabled === false);
-    return sameId && sameDisabled;
-});
+export const compareObjectsArrays = (arr1, arr2) => arr1.length === arr2.length &&
+    arr1.every((el, ind) => {
+        const el2 = arr2[ind];
+        const sameId = el.id === el2.id;
+        const sameDisabled = el.disabled === el2.disabled ||
+            (el.disabled === undefined && el2.disabled === false) ||
+            (el2.disabled === undefined && el.disabled === false);
+        return sameId && sameDisabled;
+    });
 export const prepareSelectedIdsToItems = (selectedIds, groupsMap, groupsMapSelected) => {
     const selectedItems = selectedIds.map(id => {
         if (groupsMapSelected.has(id)) {
@@ -118,7 +129,9 @@ export const getStringFromSelected = (selectedIds, groupsMapSelected, translate,
     if (!selectedIds.length || (selectedIds.length === 1 && selectedIds[0] === rootId)) {
         return "";
     }
-    const selectedItems = selectedIds.map(id => groupsMapSelected.has(id) ? getGroupDescription(groupsMapSelected.get(id), translate) : undefined).filter(el => el);
+    const selectedItems = selectedIds
+        .map(id => (groupsMapSelected.has(id) ? getGroupDescription(groupsMapSelected.get(id), translate) : undefined))
+        .filter(el => el);
     return selectedItems.join(", ");
 };
 export const getStringFromAllSelected = (groupsMap, translate, rootId) => {
@@ -126,8 +139,13 @@ export const getStringFromAllSelected = (groupsMap, translate, rootId) => {
     if (!((_a = groupsMap[rootId]) === null || _a === void 0 ? void 0 : _a.children) || ((_c = (_b = groupsMap[rootId]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) === 0) {
         return "";
     }
-    const selectedItems = (_e = (_d = groupsMap[rootId]) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e.map(el => groupsMap[el.id] ?
-        getGroupDescription(groupsMap[el.id], translate) : undefined).filter((el) => el !== undefined);
+    const selectedItems = (_e = (_d = groupsMap[rootId]) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e.map(el => (groupsMap[el.id] ? getGroupDescription(groupsMap[el.id], translate) : undefined)).filter((el) => el !== undefined);
     return (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.join(", ")) || "";
 };
 export const getSelectedCount = (selectedIds) => selectedIds.length;
+const ALLY_TRIGGER_PROPS = {
+    selectOnlyCombobox: { role: "combobox", "aria-haspopup": "listbox" },
+    comboboxWithDialog: { role: "combobox", "aria-haspopup": "dialog" },
+    buttonWithDialog: { role: "button", "aria-haspopup": "dialog" }
+};
+export const getAllyTriggerProps = (allyPattern) => ALLY_TRIGGER_PROPS[allyPattern];

package/esm/dropdownRaw/dropdownList.d.ts

@@ -33,11 +33,12 @@ export interface IDropdownList extends IZenComponentProps {
     checkboxLabel?: string;
     isChecked?: boolean;
     listElementRef?: React.RefObject<HTMLDivElement>;
+    listId?: string;
 }
 interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/dropdownRaw/dropdownList.js

@@ -13,14 +13,33 @@ import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { Checkbox } from "../checkbox/checkbox";
+injectString("cs", "Error Loading Items", "Error Loading Items");
 injectString("da-DK", "Error Loading Items", "Fejl ved indl\xE6sning af varer");
+injectString("de", "Error Loading Items", "Error Loading Items");
 injectString("en", "Error Loading Items", "Error Loading Items");
+injectString("es", "Error Loading Items", "Error Loading Items");
 injectString("fi-FI", "Error Loading Items", "Virhe ladattaessa kohteita");
+injectString("fr", "Error Loading Items", "Error Loading Items");
+injectString("fr-FR", "Error Loading Items", "Error Loading Items");
 injectString("hu-HU", "Error Loading Items", "Hiba t\xF6rt\xE9nt az elemek bet\xF6lt\xE9sekor");
+injectString("id", "Error Loading Items", "Error Loading Items");
+injectString("it", "Error Loading Items", "Error Loading Items");
+injectString("ja", "Error Loading Items", "Error Loading Items");
+injectString("ko-KR", "Error Loading Items", "Error Loading Items");
+injectString("ms", "Error Loading Items", "Error Loading Items");
 injectString("nb-NO", "Error Loading Items", "Feil ved lasting av elementer");
+injectString("nl", "Error Loading Items", "Error Loading Items");
+injectString("pl", "Error Loading Items", "Error Loading Items");
+injectString("pt-BR", "Error Loading Items", "Error Loading Items");
 injectString("pt-PT", "Error Loading Items", "Erro ao carregar itens");
 injectString("sk-SK", "Error Loading Items", "Chyba pri na\u010D\xEDtavan\xED polo\u017Eiek");
+injectString("sv", "Error Loading Items", "Error Loading Items");
+injectString("th", "Error Loading Items", "Error Loading Items");
+injectString("tr", "Error Loading Items", "Error Loading Items");
+injectString("zh-Hans", "Error Loading Items", "Error Loading Items");
+injectString("zh-TW", "Error Loading Items", "Error Loading Items");
 injectString("ro-RO", "Error Loading Items", "Eroare la \xEEnc\u0103rcarea articolelor");
+injectString("ar-SA", "Error Loading Items", "\u062E\u0637\u0623 \u0641\u064A \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631");
 injectString("cs", "No data", "\u017D\xE1dn\xE1 data");
 injectString("da-DK", "No data", "Ingen data");
 injectString("de", "No data", "Keine Daten");
@@ -47,6 +66,7 @@ injectString("tr", "No data", "Veri yok");
 injectString("zh-Hans", "No data", "\u65E0\u6570\u636E");
 injectString("zh-TW", "No data", "\u7121\u8CC7\u6599");
 injectString("ro-RO", "No data", "Nu exist\u0103 date");
+injectString("ar-SA", "No data", "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -73,6 +93,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("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -99,6 +120,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("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -125,6 +147,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
 injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
 injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
@@ -151,6 +174,7 @@ injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
 injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
 injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
 injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
+injectString("ar-SA", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -177,6 +201,7 @@ injectString("tr", "Select all", "T\xFCm\xFCn\xFC se\xE7");
 injectString("zh-Hans", "Select all", "\u5168\u9009");
 injectString("zh-TW", "Select all", "\u5168\u9078");
 injectString("ro-RO", "Select all", "Selecta\u021Bi tot");
+injectString("ar-SA", "Select all", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
 injectString("cs", "Select option", "Vybrat mo\u017Enost");
 injectString("da-DK", "Select option", "V\xE6lg mulighed");
 injectString("de", "Select option", "Option ausw\xE4hlen");
@@ -203,6 +228,7 @@ injectString("tr", "Select option", "Se\xE7enek belirleyin");
 injectString("zh-Hans", "Select option", "\u9009\u62E9\u9009\u9879");
 injectString("zh-TW", "Select option", "\u9078\u53D6\u9078\u9805");
 injectString("ro-RO", "Select option", "Selecta\u021Bi op\u021Biunea");
+injectString("ar-SA", "Select option", "\u0627\u062E\u062A\u064A\u0627\u0631 \u062E\u064A\u0627\u0631");
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -229,6 +255,7 @@ injectString("tr", "Back", "Geri");
 injectString("zh-Hans", "Back", "\u8FD4\u56DE");
 injectString("zh-TW", "Back", "\u8FD4\u56DE");
 injectString("ro-RO", "Back", "\xCEnapoi");
+injectString("ar-SA", "Back", "\u0631\u062C\u0648\u0639");
 export const EmptyList = ({
   className,
   width,
@@ -310,14 +337,16 @@ export const DropdownList = ({
   handleCheckboxChange,
   checkboxLabel,
   isChecked,
-  listElementRef
+  listElementRef,
+  listId
 }) => {
   const {
     translate
   } = useLanguage();
   const isDrive = useDrive();
   const driveComponentClass = useDriveClassName("zen-dropdown-list");
-  const listId = useId();
+  const internalListId = useId();
+  const selectListId = listId || internalListId;
   const handleSelectAllClick = () => {
     onSelectAllClick(isAllSelected);
   };
@@ -401,7 +430,7 @@ export const DropdownList = ({
         onChange: handleSingleChange,
         onClick: handleClick,
         title: translate("Select option"),
-        id: listId,
+        id: selectListId,
         multiselect: false,
         selectItemOnFocus: false,
         items: listData,
@@ -409,7 +438,7 @@ export const DropdownList = ({
         value: createValue(listData, activeValue)
       })
     });
-  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, listId, forceSelection, activeValue]);
+  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
   return _jsxs("div", Object.assign({
     className: classNames(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {

package/esm/dropdownRaw/dropdownPopup.d.ts

@@ -33,5 +33,6 @@ export interface IDropdownPopup extends IZenComponentProps {
     isSearchInPopup?: boolean;
     handleKeydown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     handleFocusOnSentinelItem?: () => void;
+    role?: string | false;
 }
-export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId, handleKeydown, handleFocusOnSentinelItem }: IDropdownPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownPopup: ({ alignment, triggerRef, classNamePopup, isMobile, inputValue, dialogAriaLabel, disabled, filterName, handleApplyClick, handleClearClick, handleTriggerClick, mobileSheetStackingClassName, onInputChange, hasApplyButton, inputId, isClearButtonDisabled, isWithFooter, placeholder, searchField, isSearchInPopup, isApplyButtonDisabled, isOpenCombo, inputRef, contentRef, children, onReadyForFocus, handleCheckboxChange, checkboxLabel, isChecked, popupId, handleKeydown, handleFocusOnSentinelItem, role }: IDropdownPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/dropdownRaw/dropdownPopup.js

@@ -38,6 +38,7 @@ injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
 injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
 injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
 injectString("ro-RO", "Filter by group", "Filtra\u021Bi dup\u0103 grup");
+injectString("ar-SA", "Filter by group", "\u062A\u0635\u0641\u064A\u0629 \u062D\u0633\u0628 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -64,6 +65,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -90,6 +92,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
+injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
 export const DropdownPopup = ({
   alignment,
   triggerRef,
@@ -122,7 +125,8 @@ export const DropdownPopup = ({
   isChecked,
   popupId,
   handleKeydown,
-  handleFocusOnSentinelItem
+  handleFocusOnSentinelItem,
+  role
 }) => {
   const {
     translate
@@ -218,6 +222,7 @@ export const DropdownPopup = ({
     useTrapFocusWithTrigger: true,
     onReadyForFocus: onReadyForFocus,
     id: popupId,
+    role: role,
     children: [_jsx(MobileSheet.Title, {
       className: "zen-dropdown-mobile-sheet__title",
       children: filterName || placeholder || ""
@@ -226,7 +231,7 @@ export const DropdownPopup = ({
     }), _jsx(MobileSheet.Footer, {
       children: memoizedMobileFooter
     })]
-  }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, popupId, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter]);
+  }), [classNamePopup, wrapperClass, mobileSheetStackingClassName, triggerRef, isOpenCombo, memoizedHandleHide, onReadyForFocus, popupId, filterName, placeholder, memoizedMobileContent, memoizedMobileFooter, role]);
   const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
     isOpen: isOpenCombo,
     className: classNames(["zen-dropdown-popup zen-shadow-dropdown-default", classNamePopup || ""]),
@@ -235,10 +240,11 @@ export const DropdownPopup = ({
     alignment: alignment,
     shouldHoldScroll: true,
     id: popupId,
-    preventAttributesAutoSet: searchField && !isSearchInPopup,
+    preventAttributesAutoSet: true,
     triggerRef: triggerRef,
     ariaLabel: dialogAriaLabel || placeholder || translate("Filter by group"),
     recalculateOnScroll: true,
+    role: role,
     children: _jsxs("div", {
       ref: contentRef,
       onKeyDown: handleKeydown,
@@ -259,6 +265,6 @@ export const DropdownPopup = ({
         className: "zen-dropdown-list__sentinel-item"
       })]
     })
-  }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleFocusOnSentinelItem, handleKeydown, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, popupId, searchField, translate, triggerId, triggerRef]);
+  }), [alignment, children, classNamePopup, contentRef, dialogAriaLabel, disabled, handleFocusOnSentinelItem, handleKeydown, handleTriggerClick, inputId, inputRef, inputValue, isOpenCombo, isSearchInPopup, onInputChange, placeholder, popupId, searchField, translate, triggerId, triggerRef, role]);
   return isMobile ? memoizedMobileView : memoizedDesktopView;
 };

package/esm/dropdownRaw/dropdownRaw.js

@@ -56,6 +56,7 @@ injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
 injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
 injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
 injectString("ro-RO", "Filter by group", "Filtra\u021Bi dup\u0103 grup");
+injectString("ar-SA", "Filter by group", "\u062A\u0635\u0641\u064A\u0629 \u062D\u0633\u0628 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629");
 export const DropdownRaw = props => {
   var _a, _b;
   const {
@@ -161,6 +162,7 @@ export const DropdownRaw = props => {
   const prevIsChecked = useRef(isCheckboxMode ? value.isChecked : undefined);
   const currentAllSelected = useMemo(() => state.isNestedList || !multiselect || !isFullSelectionMode ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
   const currentIsChecked = useMemo(() => isCheckboxMode ? value.isChecked : undefined, [isCheckboxMode, value]);
+  const selectListId = useId();
   useEffect(() => {
     var _a;
     const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
@@ -884,14 +886,24 @@ export const DropdownRaw = props => {
         handleCheckboxChange: isCheckboxMode && !isMobile ? handleCheckboxChange : undefined,
         checkboxLabel: checkboxLabel,
         isChecked: state.isChecked,
-        listElementRef: listElementRef
+        listElementRef: listElementRef,
+        listId: selectListId
       });
     }
     return null;
-  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel]);
+  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId]);
   const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate, state.rootId) : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
   const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
   const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
+  const memoizedAllyPattern = useMemo(() => {
+    if (!searchField && !multiselect) {
+      return "selectOnlyCombobox";
+    }
+    if (searchField) {
+      return "comboboxWithDialog";
+    }
+    return "buttonWithDialog";
+  }, [searchField, multiselect]);
   if (isReadOnly) {
     // TODO: how many items should we show?
     return _jsx(ReviewTextControl, {
@@ -910,7 +922,8 @@ export const DropdownRaw = props => {
       triggerRef: triggerRef,
       icon: chipIcon,
       id: chipId,
-      dataRole: "dialog",
+      dataRole: memoizedAllyPattern === "selectOnlyCombobox" ? "combobox" : "dialog",
+      ariaControls: memoizedAllyPattern === "selectOnlyCombobox" ? selectListId : popupId,
       children: currentStringFromSelected || chipName
     }) : _jsx(DropdownTrigger, Object.assign({
       name: name,
@@ -934,8 +947,9 @@ export const DropdownRaw = props => {
       triggerRef: triggerRef,
       inputRef: inputRef,
       buttonType: buttonType,
-      popupId: popupId,
-      handleFocusOnPopup: handleFocusOnPopup
+      handleFocusOnPopup: handleFocusOnPopup,
+      popupId: memoizedAllyPattern === "selectOnlyCombobox" ? selectListId : popupId,
+      allyPattern: memoizedAllyPattern
     }, accessibilityProps)), _jsx(DropdownPopup, {
       alignment: alignment,
       triggerRef: triggerRef,
@@ -968,6 +982,7 @@ export const DropdownRaw = props => {
       isSearchInPopup: chip,
       mobileSheetStackingClassName: mobileSheetStackingClassName,
       handleFocusOnSentinelItem: handleFocusOnSentinelItem,
+      role: memoizedAllyPattern === "selectOnlyCombobox" ? false : "dialog",
       children: getPopupContent
     })]
   });

package/esm/dropdownRaw/dropdownSearchableTrigger.js

@@ -43,6 +43,7 @@ injectString("tr", "Filter by group", "Gruba g\xF6re filtrele");
 injectString("zh-Hans", "Filter by group", "\u6309\u7EC4\u8FC7\u6EE4");
 injectString("zh-TW", "Filter by group", "\u4F9D\u7FA4\u7D44\u7BE9\u9078");
 injectString("ro-RO", "Filter by group", "Filtra\u021Bi dup\u0103 grup");
+injectString("ar-SA", "Filter by group", "\u062A\u0635\u0641\u064A\u0629 \u062D\u0633\u0628 \u0627\u0644\u0645\u062C\u0645\u0648\u0639\u0629");
 injectString("cs", "Clear search", "Vymazat vyhled\xE1v\xE1n\xED");
 injectString("da-DK", "Clear search", "Ryd s\xF8gning");
 injectString("de", "Clear search", "Suche l\xF6schen");
@@ -69,6 +70,7 @@ injectString("tr", "Clear search", "Aramay\u0131 temizle");
 injectString("zh-Hans", "Clear search", "\u6E05\u9664\u641C\u7D22");
 injectString("zh-TW", "Clear search", "\u6E05\u9664\u641C\u5C0B");
 injectString("ro-RO", "Clear search", "\u0218terge\u021Bi c\u0103utarea");
+injectString("ar-SA", "Clear search", "\u0645\u0633\u062D \u0627\u0644\u0628\u062D\u062B");
 injectString("cs", "Close filter", "Zav\u0159\xEDt filtr");
 injectString("da-DK", "Close filter", "Luk filter");
 injectString("de", "Close filter", "Filter schlie\xDFen");
@@ -95,6 +97,7 @@ injectString("tr", "Close filter", "Filtreyi kapat");
 injectString("zh-Hans", "Close filter", "\u5173\u95ED\u7B5B\u9009\u5668");
 injectString("zh-TW", "Close filter", "\u95DC\u9589\u7BE9\u9078\u5668");
 injectString("ro-RO", "Close filter", "\xCEnchide\u021Bi filtrul");
+injectString("ar-SA", "Close filter", "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u062A\u0635\u0641\u064A\u0629");
 injectString("cs", "Open filter", "Otev\u0159\xEDt filtr");
 injectString("da-DK", "Open filter", "\xC5bn filter");
 injectString("de", "Open filter", "Filter \xF6ffnen");
@@ -121,6 +124,7 @@ injectString("tr", "Open filter", "Filtreyi a\xE7");
 injectString("zh-Hans", "Open filter", "\u6253\u5F00\u7B5B\u9009\u5668");
 injectString("zh-TW", "Open filter", "\u958B\u555F\u7BE9\u9078\u689D\u4EF6");
 injectString("ro-RO", "Open filter", "Deschide\u021Bi filtrul");
+injectString("ar-SA", "Open filter", "\u0641\u062A\u062D \u0627\u0644\u062A\u0635\u0641\u064A\u0629");
 export const DropdownSearchableTrigger = _a => {
   var {
       value,