@geotab/zenith 3.6.3 → 3.7.0-beta.0

package/README.md

@@ -54,6 +54,20 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 3.7.0
+
+- Improve `GroupsFilter` keyboard navigation: return focus to currently selected button after back navigation
+- Add loading state to `SummaryTile` component
+- Update `ToggleButton` accessibility role
+- Update React `Nav` component to emit event on Edit mode toggle
+- Improve Storybook documentation for `PillBox`, `FavoriteButton`, and `LineChartMini` components
+- Make `PillExpandable` less restrictive
+- Improve focused state in `Menu`
+- Add `PageHeader` documentation for new `Filters` component
+- Ensure keyboard accessibility for `Tooltip` in `SummaryCard` component
+- Fix drag & drop in the `Nav` component
+- Fix `NavEditSection` component issues
+
 ### 3.6.3
 
 Patch for the `Nav` component.

package/dist/absolute/absolute.d.ts

@@ -23,5 +23,7 @@ export interface IAbsolute extends IZenComponentProps {
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
     recalculateTrigger?: boolean;
+    /** Whether to focus the first focusable element when popup opens. Default: true */
+    focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -38,7 +38,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     const renderPopup = () => {
         var _a, _b;
         if (isOpen) {
-            const result = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children })));
+            const result = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, tabIndex: -1, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children })));
             if (inline) {
                 return result;
             }
@@ -94,7 +94,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             if (useTrapFocusWithTrigger === "none") {
                 return undefined;
             }
-            if (useTrapFocusWithTrigger !== "withTrigger") {
+            if (useTrapFocusWithTrigger !== "withTrigger" && focusOnOpen) {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
@@ -108,7 +108,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             };
         }
         return () => { };
-    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds]);
+    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds, focusOnOpen]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (isOpen) {

package/dist/controlledPopup/controlledPopup.d.ts

@@ -27,5 +27,7 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabelledby?: string;
     recalculateOnScroll?: 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 }: 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, preventAttributesAutoSet, focusOnOpen }: 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 }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }) => {
     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, { 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: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, { 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: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children }));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/groupsFilterRaw/groupsFilterCurrentlySelectedState.js

@@ -134,9 +134,15 @@ const GroupsFilterCurrentlySelectedState = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const togglerId = (0, react_1.useId)();
-  const getActionButton = (label, title, icon, handleClick) => (0, jsx_runtime_1.jsx)("button", {
+  const handleBackButtonKeyDown = (0, react_1.useCallback)(event => {
+    if (event.key === "ArrowLeft") {
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const getActionButton = (label, title, icon, handleClick, handleKeyDown) => (0, jsx_runtime_1.jsx)("button", {
     type: "button",
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__action-button-back",
     title: title,
     children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
@@ -156,7 +162,7 @@ const GroupsFilterCurrentlySelectedState = ({
   };
   return (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-groups-filter-menu__content-selected",
-    children: [getActionButton(translate("Back"), translate("Back"), iconBackArrow_1.IconBackArrow, onBackButtonClick), (0, jsx_runtime_1.jsx)("div", {
+    children: [getActionButton(translate("Back"), translate("Back"), iconBackArrow_1.IconBackArrow, onBackButtonClick, handleBackButtonKeyDown), (0, jsx_runtime_1.jsx)("div", {
       className: "zen-groups-filter-menu__item-wrapper",
       children: (0, jsx_runtime_1.jsx)(toggleButtonRaw_1.ToggleButtonRaw, {
         onChange: handleTogglerChange,

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -298,6 +298,7 @@ const GroupsFilterRaw = props => {
   const inputRef = (0, react_1.useRef)(null);
   const emptyInputRef = (0, react_1.useRef)(null);
   const triggerRef = (0, react_1.useRef)(null);
+  const nextFocusableItemRef = (0, react_1.useRef)(false);
   const menuRef = (0, react_1.useRef)(null);
   const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
   const prevSearchField = (0, react_1.useRef)("");
@@ -320,6 +321,7 @@ const GroupsFilterRaw = props => {
       type: uiStateActionType_1.UiStateActionType.SetStep,
       payload: newStep
     });
+    nextFocusableItemRef.current = true;
     if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && newStep !== groupsFilterInterfaces_1.FilterMenuStep.Initial) {
       inputRef.current.value = "";
       dispatchUiState({
@@ -461,6 +463,7 @@ const GroupsFilterRaw = props => {
       payload: id
     });
     handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    nextFocusableItemRef.current = true;
   }, [dispatchUiState, handleSetStep]);
   const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)(value => {
     if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
@@ -493,6 +496,7 @@ const GroupsFilterRaw = props => {
   }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
   const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    nextFocusableItemRef.current = "button.zen-groups-filter-menu__currently-selected-button";
   }, [handleSetStep]);
   const handleBackButtonClick = (0, react_1.useCallback)(() => {
     const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
@@ -506,6 +510,11 @@ const GroupsFilterRaw = props => {
       payload: isNotRoot ? currentEl.parent.id : undefined
     });
     handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
+    if (!isNotRoot) {
+      nextFocusableItemRef.current = `button[data-btn=${uiState.currentAdjustmentId}]`;
+      return;
+    }
+    nextFocusableItemRef.current = true;
   }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
   const handleHomeButtonClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
@@ -513,6 +522,7 @@ const GroupsFilterRaw = props => {
       type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId,
       payload: undefined
     });
+    nextFocusableItemRef.current = true;
   }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
   const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
     handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
@@ -714,6 +724,23 @@ const GroupsFilterRaw = props => {
     }
     (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
   }, [inputRef]);
+  const handleFocusOnPopup = (0, react_1.useCallback)(() => {
+    var _a;
+    const firstFocusable = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [menuRef]);
+  (0, react_1.useEffect)(() => {
+    var _a, _b, _c;
+    if (nextFocusableItemRef.current) {
+      const firstFocusable = chip || isMobile ? (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(nextFocusableItemRef.current) : firstFocusable;
+      if (nextFocusable) {
+        nextFocusable.focus();
+        nextFocusableItemRef.current = false;
+        return;
+      }
+    }
+  }, [uiState.currentAdjustmentId, chip, menuRef, nextFocusableItemRef, isMobile]);
   (0, react_1.useEffect)(() => {
     var _a, _b, _c, _d;
     if (!uiState.isOpen) {
@@ -723,13 +750,18 @@ const GroupsFilterRaw = props => {
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       prevSearchField.current = uiState.searchValue;
     } else {
-      const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      const firstFocusable = chip || isMobile ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
       prevSearchField.current = "";
-      if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
-        firstFocusable.focus();
+      if (nextFocusableItemRef.current) {
+        const nextFocusable = typeof nextFocusableItemRef.current === "string" ? (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(nextFocusableItemRef.current) : firstFocusable;
+        if (nextFocusable) {
+          nextFocusable.focus();
+          nextFocusableItemRef.current = false;
+          return;
+        }
       }
     }
-  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip]);
+  }, [uiState.searchValue, uiState.isOpen, uiState.step, handleSetStep, chip, isMobile]);
   (0, react_1.useEffect)(() => {
     var _a;
     uiState.isOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
@@ -763,6 +795,7 @@ const GroupsFilterRaw = props => {
   const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
   const isStateHasData = Object.keys(state.groupsMap).length > 0;
   const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
+  const isDataEmpty = dataItems.length === 0;
   const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]),
     ref: menuRef,
@@ -776,7 +809,7 @@ const GroupsFilterRaw = props => {
         id: groupsFilterId,
         placeholder: translate("Filter by group")
       })
-    }) : null, isStateHasData && !uiState.hasError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
+    }) : null, isStateHasData && !uiState.hasError && !(uiState.isLoading && isDataEmpty) && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, {
       onCancelClick: handleCancel,
       onApplyClick: handleApply,
       onResetClick: handleReset,
@@ -806,10 +839,10 @@ const GroupsFilterRaw = props => {
         onRelationChange: onRelationChange,
         children: getGroupsBox()
       })]
-    }), !uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, {
+    }), (!uiState.hasError && !isStateHasData && !Object.keys(state.groupsMap).length || uiState.isLoading && isDataEmpty) && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, {
       className: "zen-groups-filter__waiting"
     })]
-  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+  }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.hasError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate, isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult, getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick, uiState.isLoading, isDataEmpty]);
   const memoizedFooterButtons = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
     children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
       onClick: handleApply,
@@ -887,7 +920,7 @@ const GroupsFilterRaw = props => {
     isOpen: uiState.isOpen,
     className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", classNamePopup || ""]),
     onOpenChange: onOptionsToggle,
-    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger",
+    useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "none",
     shouldHoldScroll: true,
     triggerRef: triggerRef,
     ariaLabel: translate("Organization groups filter"),
@@ -928,7 +961,8 @@ const GroupsFilterRaw = props => {
       ref: triggerRef,
       fullSize: fullSize,
       placeholder: groupPlaceHolder,
-      popupId: popupId
+      popupId: popupId,
+      handleFocusOnPopup: handleFocusOnPopup
     }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog]
   });
 };

package/dist/groupsFilterRaw/groupsFilterTrigger.d.ts

@@ -15,9 +15,10 @@ interface IGroupsFilterTrigger {
     ref?: React.RefObject<HTMLDivElement | null>;
     isError?: boolean;
     popupId?: string;
+    handleFocusOnPopup?: () => void;
 }
 export declare const GroupsFilterTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError, popupId, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, count, withGlobeIcon, inputRef, handleClick, fullSize, ref, isError, popupId, handleFocusOnPopup, ...otherProps }: IGroupsFilterTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/dist/groupsFilterRaw/groupsFilterTrigger.js

@@ -89,9 +89,10 @@ const GroupsFilterTrigger = _a => {
       fullSize,
       ref,
       isError,
-      popupId
+      popupId,
+      handleFocusOnPopup
     } = _a,
-    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError", "popupId"]);
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "count", "withGlobeIcon", "inputRef", "handleClick", "fullSize", "ref", "isError", "popupId", "handleFocusOnPopup"]);
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -101,6 +102,12 @@ const GroupsFilterTrigger = _a => {
     if (e.key === "Enter" && !isOpenPopup) {
       handleClick();
     }
+    if (e.key === "ArrowDown" && !isOpenPopup) {
+      handleClick();
+    }
+    if (e.key === "ArrowDown" && isOpenPopup) {
+      handleFocusOnPopup === null || handleFocusOnPopup === void 0 ? void 0 : handleFocusOnPopup();
+    }
     if (e.key === "Escape" && isOpenPopup && e.nativeEvent) {
       e.nativeEvent.stopImmediatePropagation();
       handleClick();

package/dist/index.css

@@ -1653,6 +1653,7 @@
   position: absolute;
   z-index: 11000;
   overflow-y: auto;
+  outline: none;
 }
 .zen-absolute * {
   box-sizing: border-box;
@@ -2813,7 +2814,7 @@
   padding: 12px 8px 12px 16px;
 }
 .zen-menu-button__action:focus,
-.zen-menu-button__action:focus-within,
+.zen-menu-button__action:focus-visible,
 .zen-menu-button__action:hover:not(.zen-menu-button__action--disabled):not(.zen-menu-button__action--selected):not(.zen-menu-button__action--active) {
   color: var(--text-primary);
   fill: var(--text-secondary);
@@ -3534,6 +3535,9 @@
     left: 0;
   }
 }
+.zen-action-list {
+  outline: none;
+}
 .zen-controlled-menu {
   z-index: 11002;
 }
@@ -5316,12 +5320,59 @@
 }
 .zen-summary-tile__trigger {
   cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+  position: relative;
+}
+.zen-summary-tile__trigger::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+}
+.zen-summary-tile__trigger:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.zen-summary-tile--action > .zen-summary-tile__trigger {
+  position: absolute;
+  top: 12px;
+  right: 12px;
 }
 .zen-summary-tile--action {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   text-align: start;
+  position: relative;
+}
+.zen-summary-tile__clickable-area {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  fill: inherit;
+  font: inherit;
+  border-radius: inherit;
+}
+.zen-summary-tile__clickable-area:focus-visible {
+  outline: none;
+}
+.zen-summary-tile--action:has(.zen-summary-tile__clickable-area:focus-visible) {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: -1px;
 }
 .zen-summary-tile__title-block {
   height: 16px;
@@ -8481,7 +8532,7 @@
 .zen-status-pill__pill-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   position: relative;
   cursor: pointer;
 }
@@ -8500,6 +8551,9 @@
 .zen-status-pill__pill-container:hover .zen-status-pill__container--error {
   border-color: var(--accents-error--detail);
 }
+.zen-status-pill__pill-container:hover .zen-status-pill__container--upsell {
+  border-color: var(--action-secondary--hover);
+}
 .zen-status-pill__container {
   font-family: var(--main-font);
   font-size: 12px;
@@ -8583,8 +8637,15 @@
 .zen-status-pill__container--error:hover {
   border-color: var(--accents-error--detail);
 }
-.zen-status-pill__container:focus-visible,
-.zen-status-pill__container:focus-visible + .zen-status-pill__container {
+.zen-status-pill__container--upsell {
+  background-color: var(--action-secondary--default);
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
+.zen-status-pill__container--upsell:hover {
+  border-color: var(--action-secondary--hover);
+}
+.zen-status-pill__container:focus-visible {
   outline: none;
   border-color: var(--borders-form-field--active);
 }
@@ -8609,6 +8670,12 @@
 .zen-status-pill__text--error {
   color: var(--accents-error--detail);
 }
+.zen-status-pill__text--upsell {
+  color: var(--text-reverse-primary);
+}
+.zen-status-pill__text--centered {
+  margin-right: 0;
+}
 .zen-status-pill__expand-button {
   padding: 0;
   margin-left: auto;
@@ -8634,13 +8701,20 @@
   fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
 }
+.zen-status-pill__expand-button--upsell {
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
 .zen-status-pill__icon {
   display: flex;
   align-items: center;
-  height: 16px;
+  height: 12px;
   margin-right: 4px;
   flex-shrink: 0;
 }
+.zen-status-pill__icon--large {
+  height: 16px;
+}
 .zen-status-pill__icon--default {
   fill: var(--action-secondary--default);
   color: var(--action-secondary--default);
@@ -8661,25 +8735,71 @@
   fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
 }
+.zen-status-pill__icon--upsell {
+  fill: var(--text-reverse-primary);
+  color: var(--text-reverse-primary);
+}
 .zen-status-pill__icon--standalone {
   margin-right: 0;
 }
-.zen-status-pill-popup__main-pill {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.zen-absolute:has(.zen-status-pill-popup) {
+  overflow: visible;
+}
+.zen-status-pill-popup {
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background-color: white;
+  max-height: 560px;
+  overflow: hidden;
+  outline: none;
 }
 .zen-status-pill-popup__container {
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  border-radius: 8px;
-  padding: 16px 16px 16px 16px;
+  padding: 12px 8px;
   gap: 16px;
-  background-color: white;
-  width: 308px;
-  margin: 10px;
-  max-height: 420px;
+  overflow-y: auto;
+  max-height: 480px;
+}
+.zen-status-pill-popup__container--small {
+  width: 220px;
+}
+.zen-status-pill-popup__container--medium {
+  width: 320px;
+}
+.zen-status-pill-popup__container--large {
+  width: 420px;
+}
+.zen-status-pill-popup__title-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  gap: 16px;
+  border-bottom: 1px solid var(--borders-general);
+}
+.zen-status-pill-popup__title-item-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.16px;
+}
+.zen-status-pill-popup__footer {
+  display: flex;
+  flex-direction: column;
+}
+.zen-status-pill-popup__children {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 .zen-status-pill-popup__content-header {
   display: flex;
@@ -8749,10 +8869,61 @@
 .zen-status-pill-popup__actions {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 .zen-status-pill-popup__divider.zen-divider {
-  background-color: var(--borders-secondary);
+  background-color: var(--borders-general);
+}
+.zen-status-pill-popup--mobile .zen-mobile-sheet__title {
+  border-bottom: 1px solid var(--borders-general);
+}
+.zen-status-pill-popup--mobile .zen-mobile-sheet__content {
+  padding: 16px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+.zen-status-pill-popup__mobile-title {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  color: var(--text-primary);
+}
+.zen-status-pill-popup__mobile-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.zen-status-pill-popup__view-more-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 16px 8px 8px;
+}
+.zen-status-pill-popup__view-more-badge {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background-color: var(--action-primary--default);
+  color: var(--text-reverse-primary);
+  line-height: 1;
+  text-align: center;
+  box-sizing: border-box;
 }
 .zen-beta-pill--mobile {
   min-width: unset;
@@ -9400,6 +9571,25 @@ button.zen-summary__clickable {
   display: flex;
   fill: var(--text-secondary);
   justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+  position: relative;
+}
+.zen-summary__trigger::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+}
+.zen-summary__trigger:focus-visible {
+  outline: 2px solid var(--borders-form-field--active);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 .zen-summary__data {
   align-items: center;

package/dist/index.d.ts

@@ -720,7 +720,7 @@ export { PageLayout } from "./pageLayout/pageLayout";
 export { type IPagination, Pagination } from "./pagination/pagination";
 export { PaginationType } from "./pagination/paginationType";
 export { Pill } from "./pill/pill";
-export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
+export { type IPillExpandableAction, type IBaseData, type IPromisedBaseData, type TPopoverSize, type IPillExpandable, PillExpandable } from "./pillExpandable/pillExpandable";
 export { type IPopup, Popup } from "./popup/popup";
 export { type IPrimaryIcon, PrimaryIcon } from "./primaryIcon/primaryIcon";
 export { ProgressBarType, ProgreesBarSize, type TProgressBarSize, ProgressBar } from "./progressBar/progressBar";

package/dist/list/hooks/useDragAndDrop.d.ts

@@ -14,9 +14,11 @@ interface IMarkerClasses {
  *                          If not provided, defaults to 'zen-list-item' based classes
  * @param onBeforeDragOver - Optional callback function called before placing the placeholder at a new position.
  *                       Receives the target position and should return false to prevent the drag operation.
+ * @param itemsGap - Optional gap size in pixels between list items. Used to adjust placeholder positioning
+ *                   calculations during drag operations. Defaults to 0.
  * @returns An object containing the `onDragStart` event handler to be attached to draggable elements
  */
-export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean) => {
+export declare const useDragAndDrop: (containerRef: RefObject<HTMLElement | null>, onChangeOrder: (startPosition: number, endPosition: number) => void, marksClassNames?: IMarkerClasses, onBeforeDragOver?: (endPosition: number) => boolean, itemsGap?: number) => {
     onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
 };
 export {};