@geotab/zenith 3.10.0-beta.0 → 3.10.0-beta.2

package/dist/commonStyles/typography/components/typographyItem.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
+const useDrive_1 = require("../../../utils/theme/useDrive");
+const zen_1 = require("../../../utils/zen");
+const getFontWeightName = (value) => {
+    switch (value) {
+        case 300:
+            return "Light";
+        case 400:
+            return "Regular";
+        case 500:
+            return "Medium";
+        case 700:
+            return "Bold";
+        default:
+            return "Unknown";
+    }
+};
+const TypographyItem = ({ content = "The brown fox jumped over the lazy dog.", contentClassName = "", font = "Roboto", device = "", tag }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [fontWeightState, setFontWeight] = (0, react_1.useState)("Unknown");
+    const [fontSizeState, setFontSize] = (0, react_1.useState)("Unknown");
+    const [lineHeightState, setLineHeight] = (0, react_1.useState)("Unknown");
+    const [letterSpacingState, setLetterSpacing] = (0, react_1.useState)("Unknown");
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const bigScreenName = isDrive ? "Tablet" : "Desktop";
+    const deviceName = device || (isMobile ? "Mobile" : bigScreenName);
+    (0, react_1.useLayoutEffect)(() => {
+        if (ref.current && zen_1.zen.getComputedStyle) {
+            const { fontWeight, fontSize, lineHeight, letterSpacing } = zen_1.zen.getComputedStyle(ref.current);
+            setFontWeight(getFontWeightName(parseInt(fontWeight)));
+            setFontSize(fontSize);
+            setLineHeight(lineHeight);
+            setLetterSpacing(letterSpacing === "normal" ? "0px" : letterSpacing);
+        }
+    }, [isMobile]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "story-typography-item", children: (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-wrapper", children: [(0, jsx_runtime_1.jsx)("p", { ref: ref, className: (0, classNames_1.classNames)(["story-typography-item__content", contentClassName]), children: content }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Font" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: font })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Weight" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: fontWeightState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Size" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: fontSizeState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Line Height" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: lineHeightState })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Letter Spacing" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: letterSpacingState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Device" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: deviceName })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Tag" }), (0, jsx_runtime_1.jsxs)("span", { className: "story-typography-item__content-description-value heading-04", children: ["<", tag, ">"] })] })] })] })] }) }));
+};
+exports.TypographyItem = TypographyItem;

package/dist/controlledPopup/controlledPopup.d.ts

@@ -23,8 +23,9 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
+    closeOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/dist/controlledPopup/controlledPopup.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
-const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -24,6 +24,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/dropdown/dropdown.js

@@ -24,4 +24,4 @@ const Dropdown = (_a) => {
     return (0, jsx_runtime_1.jsx)(DropDownFormField, Object.assign({}, props));
 };
 exports.Dropdown = Dropdown;
-exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];

package/dist/dropdownRaw/dropdownList.d.ts

@@ -13,7 +13,9 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isAllSelected: boolean;
+    isAllSelected?: boolean;
+    isSelectAllActive?: boolean;
+    shouldBlockItems?: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -39,6 +41,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     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, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, 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/dist/dropdownRaw/dropdownList.js

@@ -174,33 +174,6 @@ 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");
-injectString("en", "Deselect all", "Deselect all");
-injectString("es", "Deselect all", "Deseleccionar todo");
-injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
-injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
-injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
-injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
-injectString("id", "Deselect all", "Batalkan pilih semua");
-injectString("it", "Deselect all", "Deselezionare tutto");
-injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
-injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
-injectString("ms", "Deselect all", "Nyahpilih semua");
-injectString("nb-NO", "Deselect all", "Fjern alle valg");
-injectString("nl", "Deselect all", "Alles deselecteren");
-injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
-injectString("pt-BR", "Deselect all", "Desmarcar tudo");
-injectString("pt-PT", "Deselect all", "Desmarcar tudo");
-injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
-injectString("sv", "Deselect all", "Avmarkera alla");
-injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
-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");
@@ -359,7 +332,8 @@ const DropdownList = ({
   onSelect,
   onSingleSelect,
   listData,
-  isAllSelected,
+  isSelectAllActive,
+  shouldBlockItems,
   backButtonName,
   width,
   minWidth,
@@ -388,7 +362,7 @@ const DropdownList = ({
   const internalListId = (0, react_1.useId)();
   const selectListId = listId || internalListId;
   const handleSelectAllClick = () => {
-    onSelectAllClick(isAllSelected);
+    onSelectAllClick(isSelectAllActive === true);
   };
   const handleBackButtonKeyDown = (0, react_1.useCallback)(event => {
     if (event.key === "ArrowLeft") {
@@ -416,13 +390,14 @@ const DropdownList = ({
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
   }, [activeValue, forceSelection, onSingleSelect]);
-  const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
-  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => (0, jsx_runtime_1.jsx)("button", {
+  const selectButtonLabel = translate("Select all");
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown, isSelected) => (0, jsx_runtime_1.jsx)("button", {
     type: "button",
     disabled: isDisabled,
     onClick: clickHandler,
     onKeyDown: onKeyDown,
-    className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
+    "aria-pressed": isSelected,
+    className: (0, classNames_1.classNames)(["zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", isSelected ? "zen-dropdown-list__action-button--selected" : ""]),
     title: title,
     children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
       children: [react_1.default.createElement(icon, {
@@ -458,11 +433,15 @@ const DropdownList = ({
       });
       return values;
     };
+    const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
+      blocked: true,
+      checked: false
+    })) : listData;
     return (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__elements",
       ref: listElementRef,
       children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, {
-        options: listData,
+        options: multiselectOptions,
         label: "",
         onChange: handleChange,
         onClick: handleClick
@@ -478,7 +457,7 @@ const DropdownList = ({
         value: createValue(listData, activeValue)
       })
     });
-  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
+  }, [listElementRef, isMultiselect, shouldBlockItems, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {
@@ -496,7 +475,7 @@ const DropdownList = ({
     }) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", {
       className: "zen-dropdown-list__item-wrapper",
       children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
-    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
+    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge", undefined, isSelectAllActive) : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
       className: "zen-dropdown-list__footer",
       children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
         onClick: isMultiselect ? onClearClick : handleClearClick,
@@ -525,4 +504,4 @@ const DropdownList = ({
   }));
 };
 exports.DropdownList = DropdownList;
-exports.TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];
+exports.TRANSLATIONS = ["Select all", "Clear", "Back", "No data"];

package/dist/dropdownRaw/dropdownRaw.js

@@ -399,23 +399,6 @@ const DropdownRaw = props => {
       payload: state.currentId || state.rootId
     });
   }, [isFullSelectionMode, state.currentId, state.rootId]);
-  const handleSelectAllInSearch = (0, react_1.useCallback)(isAllSelect => {
-    if (isFullSelectionMode && state.isAllSelected) {
-      dispatchState({
-        type: stateActionType_1.StateActionType.DeselectItemsFromAllSelected,
-        payload: undefined
-      });
-      return;
-    }
-    const dataForChange = (0, dropdownHelper_1.getDataForChange)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds, isAllSelect);
-    dispatchState({
-      type: stateActionType_1.StateActionType.ChangeBulkSelection,
-      payload: {
-        itemsIds: dataForChange,
-        value: !isAllSelect
-      }
-    });
-  }, [isFullSelectionMode, state.isAllSelected, state.listData, state.isNestedList, state.selectedIds]);
   const handleClearClick = (0, react_1.useCallback)(() => {
     var _a, _b;
     dispatchState({
@@ -862,13 +845,14 @@ const DropdownRaw = props => {
       });
     }
     if (state.showList) {
-      const isSearchMode = state.inputValue && !state.currentId;
+      const isSearchMode = Boolean(state.inputValue) && !state.currentId;
       const currentListData = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       (0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
+      const selectAllActiveForCurrentLevel = state.selectAllActiveForId === (state.currentId || state.rootId);
       return (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, {
         onBackButtonClick: handleBackButtonClick,
-        onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
+        onSelectAllClick: handleSelectAllClick,
         onClearClick: handleClearClick,
         onCancelClick: handleCancelClick,
         onApplyClick: handleApplyClick,
@@ -879,15 +863,17 @@ const DropdownRaw = props => {
         backButtonName: state.currentId && state.groupsMap[state.currentId] ? (0, groupsHelper_1.getGroupDescription)(state.groupsMap[state.currentId], translate) : undefined,
         filterName: isMobile ? undefined : filterName,
         isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? (0, dropdownHelper_1.isAllChildrenSelected)(state, state.currentId || state.rootId) : false,
+        isSelectAllActive: isFullSelectionMode ? currentAllSelected : selectAllActiveForCurrentLevel,
+        shouldBlockItems: !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
         isMultiselect: multiselect,
         forceSelection: forceSelection,
         listData: currentListData,
         width: width || currentWidth === 180 ? undefined : currentWidth,
         minWidth: currentWidth,
-        hasSelectAllButton: selectAllButton && multiselect,
+        hasSelectAllButton: selectAllButton && multiselect && !state.inputValue,
         hasApplyButton: hasApplyButton,
         isApplyDisabled: memoizedIsApplyButtonDisabled,
-        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && (0, dropdownHelper_1.isAllItemsHasOneParent)(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
+        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && (0, dropdownHelper_1.isAllItemsHasOneParent)(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
         isClearButtonDisabled: memoizedIsClearButtonDisabled,
         isWithFooter: memoizedWithFooter && !isMobile,
         isMobile: isMobile,
@@ -899,7 +885,7 @@ const DropdownRaw = props => {
       });
     }
     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, selectListId]);
+  }, [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, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId, isFullSelectionMode]);
   const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate, state.rootId) : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
   const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
   const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
@@ -997,4 +983,4 @@ const DropdownRaw = props => {
 };
 exports.DropdownRaw = DropdownRaw;
 exports.DropdownRaw.displayName = "DropdownRaw";
-exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];

package/dist/dropdownRaw/stateReducer/stateReducer.d.ts

@@ -25,6 +25,7 @@ export interface IDropdownState {
     listLimit: number;
     resultsExceedListLimit?: boolean;
     isAllSelected?: boolean;
+    selectAllActiveForId?: string;
     globalIsAllSelected?: boolean;
     defaultValueIsAllSelected?: boolean;
     isChecked?: boolean;

package/dist/dropdownRaw/stateReducer/stateReducer.js

@@ -77,10 +77,12 @@ function stateReducer(state, action) {
             }
             const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
                 (updatedGroupsMap[exports.ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
-            state.groupsMap = updatedGroupsMap;
-            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, state.selectedIds.length - newNamelessIds.size);
+            const groupsMapLength = Object.keys(updatedGroupsMap).length - 1;
+            const newResultsExceedListLimit = groupsMapLength >= state.listLimit;
+            const selectedInNewMap = state.selectedIds.filter(id => id in updatedGroupsMap).length;
+            const newIsAllSelected = (0, stateReducerHelper_1.computeIsAllSelected)(state.isAllSelected, state.isFullSelectionMode, newResultsExceedListLimit, groupsMapLength, selectedInNewMap);
             const rootId = (0, stateReducerHelper_1.getRootId)(updatedGroupsMap, exports.ROOT_GROUP_ID, state.firstParentNodeIsVisible);
-            return Object.assign(Object.assign(Object.assign({}, state), { rootId: rootId || exports.ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
+            return Object.assign(Object.assign({}, state), { groupsMap: updatedGroupsMap, rootId: rootId || exports.ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: newResultsExceedListLimit, isAllSelected: newIsAllSelected });
         }
         case stateActionType_1.StateActionType.SetListData: {
             state.selectedIds.forEach(id => {
@@ -105,9 +107,9 @@ function stateReducer(state, action) {
         case stateActionType_1.StateActionType.SetIsOpenCombo:
             return Object.assign(Object.assign({}, state), { isOpenCombo: payload });
         case stateActionType_1.StateActionType.ResetSelection:
-            return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined, selectAllActiveForId: undefined });
         case stateActionType_1.StateActionType.ResetStateToGlobal:
-            return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked });
+            return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked, selectAllActiveForId: undefined });
         case stateActionType_1.StateActionType.NothingToShow:
             return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: false });
         case stateActionType_1.StateActionType.Show:
@@ -223,8 +225,7 @@ function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
-            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: state.isAllSelected });
         }
         case stateActionType_1.StateActionType.ChangeBulkSelection: {
             const { itemsIds, value } = payload;
@@ -257,8 +258,7 @@ function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
-            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined });
         }
         case stateActionType_1.StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
@@ -295,7 +295,7 @@ function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), selectAllActiveForId: payload });
         }
         case stateActionType_1.StateActionType.DeselectItemsFromAllSelected: {
             const currentEl = state.groupsMap[state.rootId];
@@ -319,7 +319,7 @@ function stateReducer(state, action) {
                         state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined, selectAllActiveForId: undefined });
         }
         case stateActionType_1.StateActionType.ToggleValueForAllSelected: {
             const currentEl = state.groupsMap[state.rootId];
@@ -338,8 +338,7 @@ function stateReducer(state, action) {
                 }
             });
             const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
-            const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, newSelected.size);
-            return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
+            return Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue });
         }
         case stateActionType_1.StateActionType.DeselectAllChildren: {
             const childrenForDeselect = [];
@@ -351,7 +350,7 @@ function stateReducer(state, action) {
             });
             const newSelected = new Set(state.selectedIds);
             childrenForDeselect.forEach(childId => newSelected.delete(childId));
-            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
+            return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), selectAllActiveForId: undefined });
         }
         case stateActionType_1.StateActionType.SetFirstParentNodeIsVisible: {
             if (state.firstParentNodeIsVisible === payload) {

package/dist/dropdownRaw/stateReducer/stateReducerHelper.d.ts

@@ -1,6 +1,5 @@
-import { IDropdownState } from "./stateReducer";
 import { IDropdownRawItem } from "../types";
 import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
 export declare function getChildList(childArr: IDropdownRawItem[] | undefined): IDropdownRawItem[];
-export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;
+export declare const computeIsAllSelected: (currentIsAllSelected: boolean | undefined, isFullSelectionMode: boolean, resultsExceedListLimit: boolean | undefined, groupsMapLength: number, selectedCount: number) => boolean | undefined;
 export declare const getRootId: (groupsMap: ITypedHash<IGroupTree>, rootIdKey: string, firstParentNodeIsVisible?: boolean) => string | undefined;

package/dist/dropdownRaw/stateReducer/stateReducerHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRootId = exports.updateAllSelectedStateValueBasedOnTotalSelected = exports.getChildList = void 0;
+exports.getRootId = exports.computeIsAllSelected = exports.getChildList = void 0;
 const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
 function getChildList(childArr) {
     const list = [];
@@ -17,17 +17,10 @@ function getChildList(childArr) {
     return list;
 }
 exports.getChildList = getChildList;
-const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSelected) => {
-    const additionalStateUpdates = {};
-    const groupsMapLength = Object.keys(state.groupsMap).length - 1;
-    if (!state.resultsExceedListLimit && !state.isAllSelected && state.isFullSelectionMode && groupsMapLength > 0) {
-        if (totalSelected >= groupsMapLength) {
-            additionalStateUpdates.isAllSelected = true;
-        }
-    }
-    return additionalStateUpdates;
-};
-exports.updateAllSelectedStateValueBasedOnTotalSelected = updateAllSelectedStateValueBasedOnTotalSelected;
+const computeIsAllSelected = (currentIsAllSelected, isFullSelectionMode, resultsExceedListLimit, groupsMapLength, selectedCount) => !resultsExceedListLimit && currentIsAllSelected === false && isFullSelectionMode && groupsMapLength > 0 && selectedCount >= groupsMapLength
+    ? true
+    : currentIsAllSelected;
+exports.computeIsAllSelected = computeIsAllSelected;
 const getRootId = (groupsMap, rootIdKey, firstParentNodeIsVisible) => {
     var _a;
     if (Object.keys(groupsMap).length === 0) {

package/dist/headerTitle/headerTitle.d.ts

@@ -3,6 +3,14 @@ import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IBetaPillActions } from "../betaPill/betaPill";
 export declare const HeaderTitleDisplayName = "PageHeader";
+/**
+ * @internal - temporary escape hatch
+ * @deprecated DO NOT USE in external consumers
+ */
+export interface IHeaderTitleInternal {
+    betaPillName?: string;
+    betaPillDescription?: string;
+}
 export interface IHeaderTitle extends IZenComponentProps {
     id?: string;
     pageName: string;
@@ -18,7 +26,7 @@ export interface IHeaderTitle extends IZenComponentProps {
     betaOptionAction?: IBetaPillActions;
 }
 export declare const HeaderTitle: {
-    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    (props: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/dist/headerTitle/headerTitle.js

@@ -10,7 +10,8 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const headerBack_1 = require("../header/headerBack");
 const bookmark_1 = require("../bookmark/bookmark");
 exports.HeaderTitleDisplayName = "PageHeader";
-const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction }) => {
+const HeaderTitle = (props) => {
+    const { id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription } = props;
     const isMobile = (0, useMobile_1.useMobile)();
     const driveMainLineClassName = (0, useDriveClassName_1.useDriveClassName)("zen-page-header__main-line");
     const drivePageNameClassName = (0, useDriveClassName_1.useDriveClassName)("zen-page-header__page-name");
@@ -33,7 +34,7 @@ const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMob
         });
         return [b, b.length && !allowBookmarkWithBack ? o.filter(el => el.type !== bookmark_1.Bookmark) : o];
     }, [children, allowBookmarkWithBack]);
-    return ((0, jsx_runtime_1.jsxs)("header", { id: id, className: clsNames, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? (0, jsx_runtime_1.jsx)("h1", { className: (0, classNames_1.classNames)(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? (0, jsx_runtime_1.jsx)(betaPill_1.BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }) : null, other.length ? other : null] }), subline || ""] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { id: id, className: clsNames, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? (0, jsx_runtime_1.jsx)("h1", { className: (0, classNames_1.classNames)(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? ((0, jsx_runtime_1.jsx)(betaPill_1.BetaPill, Object.assign({ feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }, { name: betaPillName, description: betaPillDescription }))) : null, other.length ? other : null] }), subline || ""] }));
 };
 exports.HeaderTitle = HeaderTitle;
 exports.HeaderTitle.displayName = exports.HeaderTitleDisplayName;

package/dist/index.css

@@ -3031,6 +3031,10 @@ html:lang(ar) .zen-title-text--drive {
   font-family: var(--arabic-font-family);
 }
 .zen-card-title {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -3443,7 +3447,7 @@ html:lang(ar) .zen-menu-button__action--drive-tablet {
   box-sizing: border-box;
   background-color: var(--backgrounds-main);
   padding: 4px 0;
-  max-height: 800px;
+  max-height: 90vh;
   border: 0px;
   min-height: 30px;
   min-width: 170px;
@@ -3523,6 +3527,9 @@ html:lang(ar) .zen-side-panel {
   visibility: visible;
   pointer-events: auto;
 }
+.zen-side-panel.zen-side-panel--shown {
+  transform: translateX(0);
+}
 .zen-side-panel--shown .zen-form-field--new-component {
   display: flex;
 }
@@ -4849,42 +4856,47 @@ html:lang(ar) .zen-checkbox__label-text {
 .zen-checkbox__icon--disabled {
   fill: var(--backgrounds-content-0);
 }
-.zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box,
-.zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box {
   border-color: var(--borders-form-field--active);
   background-color: var(--borders-form-field--active);
   fill: var(--text-reverse-primary);
   color: var(--text-reverse-primary);
   stroke: var(--text-reverse-primary);
 }
-.zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon,
-.zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon {
+.zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box .zen-checkbox__icon,
+.zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box .zen-checkbox__icon {
   display: block;
 }
-.zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
   outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
   outline-offset: var(--border-width-default);
 }
 /* This was added because safari just added support for :focus-visible. Can be removed after 3 versions of safari browser. */
 @supports selector(:focus-visible) {
-  .zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
+  .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
+  .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
     outline: none;
   }
-  .zen-checkbox__input:focus-visible + .zen-checkbox__label > .zen-checkbox__box {
+  .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__box,
+  .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__label {
     outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
     outline-offset: var(--border-width-default);
   }
 }
-.zen-checkbox__input:disabled + .zen-checkbox__label {
+.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
   fill: var(--text-reverse-primary);
   color: var(--text-button-disabled);
+  cursor: default;
 }
-.zen-checkbox__input:disabled + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--backgrounds-field-disabled);
+  cursor: default;
 }
-.zen-checkbox__input:disabled:checked + .zen-checkbox__label > .zen-checkbox__box,
-.zen-checkbox__input:disabled:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
+.zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
+.zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--borders-general);
 }
@@ -7603,6 +7615,11 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
   color: var(--text-hyperlink);
   fill: var(--text-hyperlink);
 }
+.zen-checkbox-list-with-action__label--action:disabled {
+  cursor: default;
+  color: var(--text-disabled);
+  fill: var(--text-disabled);
+}
 .zen-checkbox-list-with-action__label-text {
   display: flex;
   flex-grow: 1;
@@ -7818,8 +7835,8 @@ html:lang(ar) .zen-dropdown-list__label {
 .zen-dropdown-list__item--interactive:not(:disabled) {
   cursor: pointer;
 }
-.zen-dropdown-list__item--interactive:not(:disabled):hover,
-.zen-dropdown-list__item--interactive:not(:disabled):focus {
+.zen-dropdown-list__item--interactive:not(:disabled):hover:not(.zen-dropdown-list__action-button--selected),
+.zen-dropdown-list__item--interactive:not(:disabled):focus:not(.zen-dropdown-list__action-button--selected) {
   color: var(--text-primary);
   fill: var(--action-secondary--default);
   outline: none;
@@ -7889,6 +7906,27 @@ html:lang(ar) .zen-dropdown-list__action-label {
 .zen-dropdown-list__action-button:disabled svg {
   fill: var(--text-button-disabled);
 }
+.zen-dropdown-list__action-button--selected {
+  background-color: var(--action-primary--default);
+}
+.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):hover,
+.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):focus {
+  background-color: var(--action-primary--default);
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
+.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):focus-visible {
+  border-color: var(--backgrounds-content-1);
+  outline: 1px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+}
+.zen-dropdown-list__action-button--selected .zen-dropdown-list__icon {
+  color: var(--text-reverse-primary);
+  fill: var(--text-reverse-primary);
+}
+.zen-dropdown-list__action-button--selected .zen-dropdown-list__action-label {
+  color: var(--text-reverse-primary);
+}
 .zen-dropdown-list__footer {
   display: flex;
   justify-content: flex-start;