@geotab/zenith 3.6.3 → 3.7.0

package/dist/pillExpandable/pillExpandable.js

@@ -8,32 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRANSLATIONS = exports.PillExpandable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-injectString("cs", "Expand", "Rozbalit");
-injectString("da-DK", "Expand", "Udvid");
-injectString("de", "Expand", "Erweitern");
-injectString("en", "Expand", "Expand");
-injectString("es", "Expand", "Expandir");
-injectString("fi-FI", "Expand", "Laajenna");
-injectString("fr", "Expand", "D\xE9velopper");
-injectString("fr-FR", "Expand", "D\xE9velopper");
-injectString("hu-HU", "Expand", "B\u0151v\xEDtsd ki");
-injectString("id", "Expand", "Perluas");
-injectString("it", "Expand", "Espandere");
-injectString("ja", "Expand", "\u5C55\u958B");
-injectString("ko-KR", "Expand", "\uD655\uC7A5");
-injectString("ms", "Expand", "Kembangkan");
-injectString("nb-NO", "Expand", "Utvide");
-injectString("nl", "Expand", "Uitvouwen");
-injectString("pl", "Expand", "Rozwi\u0144");
-injectString("pt-BR", "Expand", "Expandir");
-injectString("pt-PT", "Expand", "Expandir");
-injectString("sk-SK", "Expand", "Roz\u0161\xEDr.");
-injectString("sv", "Expand", "Expandera");
-injectString("th", "Expand", "\u0E02\u0E22\u0E32\u0E22");
-injectString("tr", "Expand", "Geni\u015Flet");
-injectString("zh-Hans", "Expand", "\u5C55\u5F00");
-injectString("zh-TW", "Expand", "\u5C55\u958B");
-injectString("ro-RO", "Expand", "Extinde\u021Bi");
 injectString("cs", "View all", "Zobrazit v\u0161e");
 injectString("da-DK", "View all", "Se alle");
 injectString("de", "View all", "Alle anzeigen");
@@ -60,18 +34,51 @@ injectString("tr", "View all", "T\xFCm\xFCn\xFC g\xF6r\xFCnt\xFCle");
 injectString("zh-Hans", "View all", "\u67E5\u770B\u5168\u90E8");
 injectString("zh-TW", "View all", "\u6AA2\u8996\u5168\u90E8");
 injectString("ro-RO", "View all", "Afi\u0219a\u021Bi tot");
+injectString("cs", "Expand", "Rozbalit");
+injectString("da-DK", "Expand", "Udvid");
+injectString("de", "Expand", "Erweitern");
+injectString("en", "Expand", "Expand");
+injectString("es", "Expand", "Expandir");
+injectString("fi-FI", "Expand", "Laajenna");
+injectString("fr", "Expand", "D\xE9velopper");
+injectString("fr-FR", "Expand", "D\xE9velopper");
+injectString("hu-HU", "Expand", "B\u0151v\xEDtsd ki");
+injectString("id", "Expand", "Perluas");
+injectString("it", "Expand", "Espandere");
+injectString("ja", "Expand", "\u5C55\u958B");
+injectString("ko-KR", "Expand", "\uD655\uC7A5");
+injectString("ms", "Expand", "Kembangkan");
+injectString("nb-NO", "Expand", "Utvide");
+injectString("nl", "Expand", "Uitvouwen");
+injectString("pl", "Expand", "Rozwi\u0144");
+injectString("pt-BR", "Expand", "Expandir");
+injectString("pt-PT", "Expand", "Expandir");
+injectString("sk-SK", "Expand", "Roz\u0161\xEDr.");
+injectString("sv", "Expand", "Expandera");
+injectString("th", "Expand", "\u0E02\u0E22\u0E32\u0E22");
+injectString("tr", "Expand", "Geni\u015Flet");
+injectString("zh-Hans", "Expand", "\u5C55\u5F00");
+injectString("zh-TW", "Expand", "\u5C55\u958B");
+injectString("ro-RO", "Expand", "Extinde\u021Bi");
 const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
+const focusableSelector_1 = require("../utils/focusableSelector");
 const button_1 = require("../button/button");
+const divider_1 = require("../divider/divider");
 const pillContent_1 = require("./pillContent");
 const pillExpandableSimple_1 = require("./pillExpandableSimple");
+const pillExpandablePopoverContent_1 = require("./pillExpandablePopoverContent");
 const pillExpandableAlignments_1 = require("./pillExpandableAlignments");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const getProps_1 = require("./getProps");
+const iconUnlocked_1 = require("../icons/iconUnlocked");
 const skeleton_1 = require("../skeleton/skeleton");
 const reactHelpers_1 = require("../commonHelpers/reactHelpers/reactHelpers");
-const divider_1 = require("../divider/divider");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const useDrive_1 = require("../utils/theme/useDrive");
+const deviceType_1 = require("../commonHelpers/hooks/deviceType");
+const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = (0, react_1.createContext)({
   level: 0,
@@ -80,13 +87,197 @@ const PillContext = (0, react_1.createContext)({
   expandedChildPillIds: new Set(),
   autoExpand: false
 });
-const paddingX = 26;
-const paddingY = 52;
+const PillExpandablePopover = ({
+  useMobileSheet,
+  isOpen,
+  popupId,
+  popupClassName,
+  text,
+  triggerRef,
+  onClose,
+  onToggle,
+  onChange,
+  isPopupContentReady,
+  setContainerNode,
+  popoverSize,
+  popoverContentProps,
+  showFooter,
+  moreCounter,
+  buttonMoreProps,
+  title
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const popoverRef = (0, react_1.useRef)(null);
+  const handlePopoverRef = (0, react_1.useCallback)(node => {
+    popoverRef.current = node;
+    setContainerNode(node);
+  }, [setContainerNode]);
+  // Focus first focusable element in desktop popover when content is ready.
+  // Mobile MobileSheet handles its own first-focus (close button).
+  (0, react_1.useEffect)(() => {
+    if (!useMobileSheet && isPopupContentReady && popoverRef.current) {
+      const firstFocusable = popoverRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [useMobileSheet, isPopupContentReady]);
+  const titleItem = title && (0, jsx_runtime_1.jsx)("div", {
+    className: "zen-status-pill-popup__title-item",
+    children: (0, jsx_runtime_1.jsx)("span", {
+      className: "zen-status-pill-popup__title-item-text",
+      children: title
+    })
+  });
+  const footer = showFooter && (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-status-pill-popup__footer",
+    children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      className: "zen-status-pill-popup__divider"
+    }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonMoreProps, {
+      type: "tertiary",
+      className: "zen-status-pill-popup__view-more-button",
+      children: [(0, jsx_runtime_1.jsx)("span", {
+        children: translate("View all")
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-status-pill-popup__view-more-badge",
+        children: moreCounter
+      })]
+    }))]
+  });
+  if (useMobileSheet) {
+    return (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+      className: (0, classNames_1.classNames)(["zen-status-pill-popup--mobile", popupClassName || ""]),
+      label: text,
+      triggerRef: triggerRef,
+      isOpen: isOpen,
+      onHidePanel: onClose,
+      onCloseClick: onClose,
+      id: popupId,
+      children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+        className: "zen-status-pill-popup__mobile-title",
+        children: title || text
+      }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+        children: (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-status-pill-popup__mobile-content",
+          children: [(0, jsx_runtime_1.jsx)(pillExpandablePopoverContent_1.PillExpandablePopoverContent, Object.assign({}, popoverContentProps, {
+            onActionClick: onClose
+          })), footer]
+        })
+      })]
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(absolute_1.Absolute, {
+    recalculateTrigger: isPopupContentReady,
+    recalculateOnScroll: true,
+    useTrapFocusWithTrigger: "on",
+    className: popupClassName,
+    id: popupId,
+    onOpenChange: onChange,
+    isOpen: isOpen,
+    triggerRef: triggerRef,
+    alignmentsFn: pillExpandableAlignments_1.alignments,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      ref: handlePopoverRef,
+      className: "zen-status-pill-popup",
+      tabIndex: -1,
+      children: [titleItem, (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-status-pill-popup__container", `zen-status-pill-popup__container--${popoverSize}`]),
+        children: (0, jsx_runtime_1.jsx)(pillExpandablePopoverContent_1.PillExpandablePopoverContent, Object.assign({}, popoverContentProps, {
+          onActionClick: onToggle
+        }))
+      }), footer]
+    })
+  });
+};
+const PillExpandableChild = ({
+  icon,
+  text,
+  type,
+  errorHandler,
+  content,
+  autoExpandChildren
+}) => {
+  const pillId = (0, react_1.useId)();
+  const descriptionId = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const {
+    level,
+    expandedChildPillIds,
+    onChildPillExpand,
+    onChildPillCollapse,
+    autoExpand
+  } = (0, react_1.useContext)(PillContext);
+  const [currentExpandedPills, setCurrentExpandedPills] = (0, react_1.useState)(new Set());
+  const isExpanded = expandedChildPillIds.has(pillId);
+  (0, react_1.useEffect)(() => {
+    if (autoExpand) {
+      onChildPillExpand(pillId);
+    }
+  }, [autoExpand, onChildPillExpand, pillId]);
+  const handleChildToggle = (0, react_1.useCallback)(e => {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    if (isExpanded) {
+      onChildPillCollapse(pillId);
+    } else {
+      if (!autoExpand) {
+        expandedChildPillIds.forEach(pill => onChildPillCollapse(pill));
+      }
+      onChildPillExpand(pillId);
+    }
+  }, [isExpanded, expandedChildPillIds, pillId, autoExpand, onChildPillCollapse, onChildPillExpand]);
+  const addExpandedChild = (0, react_1.useCallback)(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+  }, []);
+  const removeExpandedChild = (0, react_1.useCallback)(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  return (0, jsx_runtime_1.jsxs)(PillContext.Provider, {
+    value: {
+      level: level + 1,
+      onChildPillExpand: addExpandedChild,
+      onChildPillCollapse: removeExpandedChild,
+      expandedChildPillIds: currentExpandedPills,
+      autoExpand: autoExpandChildren || false
+    },
+    children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+      icon: icon,
+      text: text,
+      expanded: isExpanded,
+      onExpand: handleChildToggle,
+      expandAriaText: translate("Expand"),
+      type: type,
+      errorHandler: errorHandler,
+      descriptionId: descriptionId
+    }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
+      onActionClick: handleChildToggle,
+      descriptionText: content.description,
+      date: content.date,
+      count: content.count,
+      mainAction: content.mainAction,
+      secondaryAction: content.secondaryAction,
+      tertiaryAction: content.tertiaryAction,
+      isVisible: isExpanded,
+      errorHandler: errorHandler,
+      descriptionId: descriptionId
+    })]
+  });
+};
 const getDefaultContent = ({
   description,
   date,
   count,
   secondaryAction,
+  tertiaryAction,
   mainAction,
   getData
 }) => {
@@ -110,6 +301,12 @@ const getDefaultContent = ({
           text: ""
         }
       },
+      tertiaryAction: {
+        isLoading: true,
+        data: {
+          text: ""
+        }
+      },
       mainAction: {
         isLoading: true,
         data: {
@@ -124,6 +321,7 @@ const getDefaultContent = ({
     date,
     count,
     secondaryAction,
+    tertiaryAction,
     mainAction,
     getData: undefined
   };
@@ -139,47 +337,56 @@ const getValue = (parameter, setContent, paramName, errorHandler) => {
     });
   }
 };
-const PillExpandableBase = ({
-  children,
-  errorHandler,
-  getData,
-  text,
+const usePillContentState = ({
   description,
   date,
   count,
   mainAction,
   secondaryAction,
-  viewMoreAction,
-  uniquePills,
-  type,
-  className,
-  popupClassName,
-  isLoading,
-  isFlat,
-  icon,
-  secondaryIcon,
-  isBeta,
-  loadingWidth = 200,
-  hideCounterNumber,
-  autoExpandChildren
+  tertiaryAction,
+  getData,
+  isPopupOpen,
+  errorHandler
 }) => {
-  const popupId = (0, react_1.useId)();
-  const pillId = (0, react_1.useId)();
-  const descriptionId = (0, react_1.useId)();
-  const {
-    translate
-  } = (0, useLanguage_1.useLanguage)();
   const [content, setContent] = (0, react_1.useState)(getDefaultContent({
     description,
     date,
     count,
     secondaryAction,
+    tertiaryAction,
     mainAction,
     getData
   }));
-  const [isPopupOpen, setIsPopupOpen] = (0, react_1.useState)(false);
+  (0, react_1.useEffect)(() => {
+    if (!isPopupOpen || !(0, reactHelpers_1.isFunction)(getData)) {
+      return;
+    }
+    void getData().then(result => {
+      setContent(result);
+    }).catch(e => {
+      if (errorHandler) {
+        void errorHandler(e);
+      }
+    });
+  }, [getData, isPopupOpen, errorHandler]);
+  (0, react_1.useEffect)(() => {
+    if (!isPopupOpen) {
+      return;
+    }
+    getValue(description, setContent, "description", errorHandler);
+    getValue(date, setContent, "date", errorHandler);
+    getValue(count, setContent, "count", errorHandler);
+    getValue(secondaryAction, setContent, "secondaryAction", errorHandler);
+    getValue(tertiaryAction, setContent, "tertiaryAction", errorHandler);
+    getValue(mainAction, setContent, "mainAction", errorHandler);
+  }, [content, isPopupOpen, description, date, count, secondaryAction, tertiaryAction, mainAction, errorHandler]);
+  return content;
+};
+const usePopupContentReady = ({
+  isPopupOpen,
+  containerNode
+}) => {
   const [isPopupContentReady, setIsPopupContentReady] = (0, react_1.useState)(false);
-  const [containerNode, setContainerNode] = (0, react_1.useState)(null);
   (0, react_1.useEffect)(() => {
     if (!isPopupOpen) {
       setIsPopupContentReady(false);
@@ -199,67 +406,76 @@ const PillExpandableBase = ({
       observer.unobserve(containerNode);
     };
   }, [isPopupOpen, containerNode]);
-  (0, react_1.useEffect)(() => {
-    const fetchData = function () {
-      if (!isPopupOpen) {
-        return;
-      }
-      if ((0, reactHelpers_1.isFunction)(getData)) {
-        void getData().then(result => {
-          setContent(result);
-        }).catch(e => {
-          if (errorHandler) {
-            void errorHandler(e);
-          }
-        });
-      }
-    };
-    fetchData();
-  }, [getData, isPopupOpen, errorHandler]);
-  (0, react_1.useEffect)(() => {
-    if (!isPopupOpen) {
-      return;
-    }
-    getValue(description, setContent, "description", errorHandler);
-    getValue(date, setContent, "date", errorHandler);
-    getValue(count, setContent, "count", errorHandler);
-    getValue(secondaryAction, setContent, "secondaryAction", errorHandler);
-    getValue(mainAction, setContent, "mainAction", errorHandler);
-  }, [content, isPopupOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
+  return isPopupContentReady;
+};
+const PillExpandableBase = ({
+  children,
+  errorHandler,
+  getData,
+  text,
+  description,
+  date,
+  count,
+  mainAction,
+  secondaryAction,
+  tertiaryAction,
+  viewMoreAction,
+  uniquePills,
+  type,
+  className,
+  popupClassName,
+  isLoading,
+  isFlat,
+  icon,
+  secondaryIcon,
+  isBeta,
+  loadingWidth = 200,
+  hideCounterNumber,
+  autoExpandChildren,
+  popoverSize = "medium",
+  title
+}) => {
+  const popupId = (0, react_1.useId)();
+  const descriptionId = (0, react_1.useId)();
   const {
-    level,
-    expandedChildPillIds,
-    onChildPillExpand,
-    onChildPillCollapse,
-    autoExpand
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+  const handleDeviceTypeChange = (0, react_1.useCallback)(deviceType => {
+    setIsMobile(deviceType === deviceType_1.DeviceType.Mobile);
+  }, []);
+  (0, useDeviceType_1.useDeviceType)(handleDeviceTypeChange);
+  const useMobileSheet = isMobile || isDrive;
+  const [isPopupOpen, setIsPopupOpen] = (0, react_1.useState)(false);
+  const [containerNode, setContainerNode] = (0, react_1.useState)(null);
+  const content = usePillContentState({
+    description,
+    date,
+    count,
+    mainAction,
+    secondaryAction,
+    tertiaryAction,
+    getData,
+    isPopupOpen,
+    errorHandler
+  });
+  const isPopupContentReady = usePopupContentReady({
+    isPopupOpen,
+    containerNode
+  });
+  const {
+    level
   } = (0, react_1.useContext)(PillContext);
   const triggerRef = (0, react_1.useRef)(null);
   const isChild = level !== 0;
   const [currentExpandedPills, setCurrentExpandedPills] = (0, react_1.useState)(new Set());
-  (0, react_1.useEffect)(() => {
-    if (isChild && autoExpand) {
-      onChildPillExpand(pillId);
-    }
-  }, [autoExpand, isChild, onChildPillExpand, pillId]);
   const handlePopupToggle = (0, react_1.useCallback)(e => {
     var _a;
     e === null || e === void 0 ? void 0 : e.stopPropagation();
     setIsPopupOpen(!isPopupOpen);
     isPopupOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
   }, [isPopupOpen]);
-  const handleChildToggle = (0, react_1.useCallback)(e => {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
-    const isExpanded = expandedChildPillIds.has(pillId);
-    if (isExpanded) {
-      onChildPillCollapse(pillId);
-    } else {
-      if (!autoExpand) {
-        // Prevent multiple child pills being expanded at the same time
-        expandedChildPillIds.forEach(pill => onChildPillCollapse(pill));
-      }
-      onChildPillExpand(pillId);
-    }
-  }, [expandedChildPillIds, pillId, autoExpand, onChildPillCollapse, onChildPillExpand]);
   const addExpandedChild = (0, react_1.useCallback)(id => {
     setCurrentExpandedPills(prev => {
       const next = new Set(prev);
@@ -277,16 +493,80 @@ const PillExpandableBase = ({
   const onChange = (0, react_1.useCallback)(() => {
     setIsPopupOpen(!isPopupOpen);
   }, [isPopupOpen]);
-  const buttonMoreProps = (0, react_1.useMemo)(() => (0, getProps_1.getButtonMoreProps)(viewMoreAction), [viewMoreAction]);
-  const validChildren = (0, react_1.useMemo)(() => react_1.Children.toArray(children).filter(child => {
+  const handlePopupClose = (0, react_1.useCallback)(() => {
     var _a;
-    return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "PillExpandable";
-  }), [children]);
+    setIsPopupOpen(false);
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, []);
+  const buttonMoreProps = (0, react_1.useMemo)(() => (0, getProps_1.getButtonMoreProps)(viewMoreAction), [viewMoreAction]);
+  // For upsell type, force IconUnlocked icon
+  const effectiveIcon = type === "upsell" ? iconUnlocked_1.IconUnlocked : icon;
+  // Analyze children to determine variant and extract config
+  const childrenAnalysis = (0, react_1.useMemo)(() => {
+    const childArray = react_1.Children.toArray(children);
+    const pillChildren = childArray.filter(child => {
+      var _a;
+      const displayName = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+      return displayName === "PillExpandable";
+    });
+    // Custom content = children that are not PillExpandable or PillExpandable.List
+    const customChildren = childArray.filter(child => {
+      var _a;
+      const displayName = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+      return displayName !== "PillExpandable" && displayName !== "PillExpandable.List";
+    });
+    return {
+      hasPillChildren: pillChildren.length > 0,
+      hasCustomChildren: customChildren.length > 0,
+      customChildren
+    };
+  }, [children]);
+  // Auto-detect variant based on children
+  // Priority: placeholder (custom children) > default
+  const effectiveVariant = childrenAnalysis.hasCustomChildren ? "placeholder" : "default";
+  // For upsell type, silently ignore nested children
+  const validChildren = (0, react_1.useMemo)(() => {
+    if (type === "upsell") {
+      return [];
+    }
+    return react_1.Children.toArray(children).filter(child => {
+      var _a;
+      const displayName = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+      // Filter out PillExpandable.List config component and keep only PillExpandable children
+      return displayName === "PillExpandable";
+    });
+  }, [children, type]);
   const childToDisplay = (0, react_1.useMemo)(() => validChildren.slice(0, MAX_PILLS_TO_DISPLAY_IN_POPUP), [validChildren]);
-  const childCount = (0, react_1.useMemo)(() => validChildren.length, [validChildren]);
-  const flatVsChildCounter = isFlat ? `${childCount + 1}` : `${childCount}`;
-  const moreCounter = uniquePills ? `${uniquePills}` : flatVsChildCounter;
-  const uniqueChildren = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
+  const childCount = validChildren.length;
+  const {
+    moreCounter,
+    uniqueChildren,
+    counterText
+  } = (0, react_1.useMemo)(() => {
+    const flatVsChildCounter = isFlat ? `${childCount + 1}` : `${childCount}`;
+    const more = uniquePills ? `${uniquePills}` : flatVsChildCounter;
+    const unique = uniquePills ? `${uniquePills}` : childCount ? `${childCount}` : "";
+    const counter = unique ? isFlat ? `+${unique}` : unique : "";
+    return {
+      moreCounter: more,
+      uniqueChildren: unique,
+      counterText: counter
+    };
+  }, [isFlat, uniquePills, childCount]);
+  const popoverContentProps = (0, react_1.useMemo)(() => ({
+    variant: effectiveVariant,
+    customContent: childrenAnalysis.hasCustomChildren ? childrenAnalysis.customChildren : undefined,
+    descriptionText: content.description,
+    date: content.date,
+    count: content.count,
+    mainAction: content.mainAction,
+    secondaryAction: content.secondaryAction,
+    tertiaryAction: content.tertiaryAction,
+    errorHandler: errorHandler,
+    descriptionId,
+    childToDisplay
+  }), [effectiveVariant, childrenAnalysis, content, errorHandler, descriptionId, childToDisplay]);
+  const showFooter = Boolean(moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP);
   if (isLoading) {
     return (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
       type: "pill",
@@ -294,35 +574,13 @@ const PillExpandableBase = ({
     });
   }
   if (isChild) {
-    const isExpanded = expandedChildPillIds.has(pillId);
-    return (0, jsx_runtime_1.jsxs)(PillContext.Provider, {
-      value: {
-        level: level + 1,
-        onChildPillExpand: addExpandedChild,
-        onChildPillCollapse: removeExpandedChild,
-        expandedChildPillIds: currentExpandedPills,
-        autoExpand: autoExpandChildren || false
-      },
-      children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
-        icon: icon,
-        text: text,
-        expanded: isExpanded,
-        onExpand: handleChildToggle,
-        expandAriaText: translate("Expand"),
-        type: type,
-        errorHandler: errorHandler,
-        descriptionId: descriptionId
-      }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
-        onActionClick: handleChildToggle,
-        descriptionText: content.description,
-        date: content.date,
-        count: content.count,
-        mainAction: content.mainAction,
-        secondaryAction: content.secondaryAction,
-        isVisible: isExpanded,
-        errorHandler: errorHandler,
-        descriptionId: descriptionId
-      })]
+    return (0, jsx_runtime_1.jsx)(PillExpandableChild, {
+      icon: icon,
+      text: text,
+      type: type,
+      errorHandler: errorHandler,
+      content: content,
+      autoExpandChildren: autoExpandChildren
     });
   }
   return (0, jsx_runtime_1.jsx)(PillContext.Provider, {
@@ -340,75 +598,47 @@ const PillExpandableBase = ({
         className: "zen-status-pill__pill-container",
         onClick: handlePopupToggle,
         children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
-          icon: icon,
+          icon: effectiveIcon,
           text: text,
           expanded: isPopupOpen,
           expandAriaText: translate("Expand"),
           ref: triggerRef,
           type: type,
           errorHandler: errorHandler,
-          isBeta: isBeta
+          isBeta: isBeta,
+          isMobile: isMobile
         }), uniqueChildren && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
-          icon: secondaryIcon || icon,
-          text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChildren}`,
+          icon: secondaryIcon || effectiveIcon,
+          text: hideCounterNumber ? "" : counterText,
           includeExpandIcon: false,
           type: type,
           errorHandler: errorHandler,
-          className: "zen-status-pill__counter"
+          className: "zen-status-pill__counter",
+          isMobile: isMobile
         })]
-      }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, {
-        recalculateTrigger: isPopupContentReady,
-        recalculateOnScroll: true,
-        useTrapFocusWithTrigger: "on",
-        className: popupClassName,
-        id: popupId,
-        onOpenChange: onChange,
-        paddingX: paddingX,
-        paddingY: paddingY,
+      }), (0, jsx_runtime_1.jsx)(PillExpandablePopover, {
+        useMobileSheet: useMobileSheet,
         isOpen: isPopupOpen,
+        popupId: popupId,
+        popupClassName: popupClassName,
+        text: text,
         triggerRef: triggerRef,
-        alignmentsFn: pillExpandableAlignments_1.alignments,
-        children: (0, jsx_runtime_1.jsx)("div", {
-          ref: node => setContainerNode(node),
-          className: "zen-status-pill-popup",
-          children: (0, jsx_runtime_1.jsxs)("div", {
-            className: "zen-status-pill-popup__container",
-            children: [(0, jsx_runtime_1.jsx)("div", {
-              className: "zen-status-pill-popup__main-pill",
-              children: (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
-                icon: icon,
-                text: text,
-                expanded: true,
-                onExpand: handlePopupToggle,
-                expandAriaText: translate("Expand"),
-                type: type,
-                errorHandler: errorHandler,
-                isBeta: isBeta,
-                descriptionId: descriptionId
-              })
-            }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
-              onActionClick: handlePopupToggle,
-              descriptionText: content.description,
-              date: content.date,
-              count: content.count,
-              mainAction: content.mainAction,
-              secondaryAction: content.secondaryAction,
-              errorHandler: errorHandler,
-              descriptionId: descriptionId
-            }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-              children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {
-                className: "zen-status-pill-popup__divider"
-              }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonMoreProps, {
-                type: "tertiary",
-                children: [translate("View all"), " (", moreCounter, ")"]
-              }))]
-            })]
-          })
-        })
+        onClose: handlePopupClose,
+        onToggle: handlePopupToggle,
+        onChange: onChange,
+        isPopupContentReady: isPopupContentReady,
+        setContainerNode: setContainerNode,
+        popoverSize: popoverSize,
+        popoverContentProps: popoverContentProps,
+        showFooter: showFooter,
+        moreCounter: moreCounter,
+        buttonMoreProps: buttonMoreProps,
+        title: title
       })]
     })
   });
 };
-exports.PillExpandable = (0, react_1.memo)(PillExpandableBase);
-exports.PillExpandable.displayName = "PillExpandable";
+const PillExpandableMemo = (0, react_1.memo)(PillExpandableBase);
+PillExpandableMemo.displayName = "PillExpandable";
+exports.PillExpandable = PillExpandableMemo;
 exports.TRANSLATIONS = ["Expand", "View all"];