@geotab/zenith 3.6.3 → 3.7.0

package/esm/pillExpandable/pillExpandable.js

@@ -1,43 +1,24 @@
 import { injectString } from "../utils/localization/translationsDictionary";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Absolute } from "../absolute/absolute";
+import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { Button } from "../button/button";
+import { Divider } from "../divider/divider";
 import { PillContent } from "./pillContent";
 import { PillExpandableSimple } from "./pillExpandableSimple";
+import { PillExpandablePopoverContent } from "./pillExpandablePopoverContent";
 import { alignments } from "./pillExpandableAlignments";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getButtonMoreProps } from "./getProps";
+import { IconUnlocked } from "../icons/iconUnlocked";
 import { Skeleton } from "../skeleton/skeleton";
 import { isFunction } from "../commonHelpers/reactHelpers/reactHelpers";
-import { Divider } from "../divider/divider";
-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");
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { useDrive } from "../utils/theme/useDrive";
+import { DeviceType } from "../commonHelpers/hooks/deviceType";
+import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 injectString("cs", "View all", "Zobrazit v\u0161e");
 injectString("da-DK", "View all", "Se alle");
 injectString("de", "View all", "Alle anzeigen");
@@ -64,6 +45,32 @@ 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 MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = createContext({
   level: 0,
@@ -72,13 +79,197 @@ const PillContext = 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
+  } = useLanguage();
+  const popoverRef = useRef(null);
+  const handlePopoverRef = 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).
+  useEffect(() => {
+    if (!useMobileSheet && isPopupContentReady && popoverRef.current) {
+      const firstFocusable = popoverRef.current.querySelector(FOCUSABLE_SELECTOR);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [useMobileSheet, isPopupContentReady]);
+  const titleItem = title && _jsx("div", {
+    className: "zen-status-pill-popup__title-item",
+    children: _jsx("span", {
+      className: "zen-status-pill-popup__title-item-text",
+      children: title
+    })
+  });
+  const footer = showFooter && _jsxs("div", {
+    className: "zen-status-pill-popup__footer",
+    children: [_jsx(Divider, {
+      className: "zen-status-pill-popup__divider"
+    }), _jsxs(Button, Object.assign({}, buttonMoreProps, {
+      type: "tertiary",
+      className: "zen-status-pill-popup__view-more-button",
+      children: [_jsx("span", {
+        children: translate("View all")
+      }), _jsx("span", {
+        className: "zen-status-pill-popup__view-more-badge",
+        children: moreCounter
+      })]
+    }))]
+  });
+  if (useMobileSheet) {
+    return _jsxs(MobileSheet, {
+      className: classNames(["zen-status-pill-popup--mobile", popupClassName || ""]),
+      label: text,
+      triggerRef: triggerRef,
+      isOpen: isOpen,
+      onHidePanel: onClose,
+      onCloseClick: onClose,
+      id: popupId,
+      children: [_jsx(MobileSheet.Title, {
+        className: "zen-status-pill-popup__mobile-title",
+        children: title || text
+      }), _jsx(MobileSheet.Content, {
+        children: _jsxs("div", {
+          className: "zen-status-pill-popup__mobile-content",
+          children: [_jsx(PillExpandablePopoverContent, Object.assign({}, popoverContentProps, {
+            onActionClick: onClose
+          })), footer]
+        })
+      })]
+    });
+  }
+  return _jsx(Absolute, {
+    recalculateTrigger: isPopupContentReady,
+    recalculateOnScroll: true,
+    useTrapFocusWithTrigger: "on",
+    className: popupClassName,
+    id: popupId,
+    onOpenChange: onChange,
+    isOpen: isOpen,
+    triggerRef: triggerRef,
+    alignmentsFn: alignments,
+    children: _jsxs("div", {
+      ref: handlePopoverRef,
+      className: "zen-status-pill-popup",
+      tabIndex: -1,
+      children: [titleItem, _jsx("div", {
+        className: classNames(["zen-status-pill-popup__container", `zen-status-pill-popup__container--${popoverSize}`]),
+        children: _jsx(PillExpandablePopoverContent, Object.assign({}, popoverContentProps, {
+          onActionClick: onToggle
+        }))
+      }), footer]
+    })
+  });
+};
+const PillExpandableChild = ({
+  icon,
+  text,
+  type,
+  errorHandler,
+  content,
+  autoExpandChildren
+}) => {
+  const pillId = useId();
+  const descriptionId = useId();
+  const {
+    translate
+  } = useLanguage();
+  const {
+    level,
+    expandedChildPillIds,
+    onChildPillExpand,
+    onChildPillCollapse,
+    autoExpand
+  } = useContext(PillContext);
+  const [currentExpandedPills, setCurrentExpandedPills] = useState(new Set());
+  const isExpanded = expandedChildPillIds.has(pillId);
+  useEffect(() => {
+    if (autoExpand) {
+      onChildPillExpand(pillId);
+    }
+  }, [autoExpand, onChildPillExpand, pillId]);
+  const handleChildToggle = 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 = useCallback(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+  }, []);
+  const removeExpandedChild = useCallback(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  return _jsxs(PillContext.Provider, {
+    value: {
+      level: level + 1,
+      onChildPillExpand: addExpandedChild,
+      onChildPillCollapse: removeExpandedChild,
+      expandedChildPillIds: currentExpandedPills,
+      autoExpand: autoExpandChildren || false
+    },
+    children: [_jsx(PillExpandableSimple, {
+      icon: icon,
+      text: text,
+      expanded: isExpanded,
+      onExpand: handleChildToggle,
+      expandAriaText: translate("Expand"),
+      type: type,
+      errorHandler: errorHandler,
+      descriptionId: descriptionId
+    }), _jsx(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
 }) => {
@@ -102,6 +293,12 @@ const getDefaultContent = ({
           text: ""
         }
       },
+      tertiaryAction: {
+        isLoading: true,
+        data: {
+          text: ""
+        }
+      },
       mainAction: {
         isLoading: true,
         data: {
@@ -116,6 +313,7 @@ const getDefaultContent = ({
     date,
     count,
     secondaryAction,
+    tertiaryAction,
     mainAction,
     getData: undefined
   };
@@ -131,47 +329,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 = useId();
-  const pillId = useId();
-  const descriptionId = useId();
-  const {
-    translate
-  } = useLanguage();
   const [content, setContent] = useState(getDefaultContent({
     description,
     date,
     count,
     secondaryAction,
+    tertiaryAction,
     mainAction,
     getData
   }));
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  useEffect(() => {
+    if (!isPopupOpen || !isFunction(getData)) {
+      return;
+    }
+    void getData().then(result => {
+      setContent(result);
+    }).catch(e => {
+      if (errorHandler) {
+        void errorHandler(e);
+      }
+    });
+  }, [getData, isPopupOpen, errorHandler]);
+  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] = useState(false);
-  const [containerNode, setContainerNode] = useState(null);
   useEffect(() => {
     if (!isPopupOpen) {
       setIsPopupContentReady(false);
@@ -191,67 +398,76 @@ const PillExpandableBase = ({
       observer.unobserve(containerNode);
     };
   }, [isPopupOpen, containerNode]);
-  useEffect(() => {
-    const fetchData = function () {
-      if (!isPopupOpen) {
-        return;
-      }
-      if (isFunction(getData)) {
-        void getData().then(result => {
-          setContent(result);
-        }).catch(e => {
-          if (errorHandler) {
-            void errorHandler(e);
-          }
-        });
-      }
-    };
-    fetchData();
-  }, [getData, isPopupOpen, errorHandler]);
-  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 = useId();
+  const descriptionId = useId();
   const {
-    level,
-    expandedChildPillIds,
-    onChildPillExpand,
-    onChildPillCollapse,
-    autoExpand
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const [isMobile, setIsMobile] = useState(false);
+  const handleDeviceTypeChange = useCallback(deviceType => {
+    setIsMobile(deviceType === DeviceType.Mobile);
+  }, []);
+  useDeviceType(handleDeviceTypeChange);
+  const useMobileSheet = isMobile || isDrive;
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [containerNode, setContainerNode] = useState(null);
+  const content = usePillContentState({
+    description,
+    date,
+    count,
+    mainAction,
+    secondaryAction,
+    tertiaryAction,
+    getData,
+    isPopupOpen,
+    errorHandler
+  });
+  const isPopupContentReady = usePopupContentReady({
+    isPopupOpen,
+    containerNode
+  });
+  const {
+    level
   } = useContext(PillContext);
   const triggerRef = useRef(null);
   const isChild = level !== 0;
   const [currentExpandedPills, setCurrentExpandedPills] = useState(new Set());
-  useEffect(() => {
-    if (isChild && autoExpand) {
-      onChildPillExpand(pillId);
-    }
-  }, [autoExpand, isChild, onChildPillExpand, pillId]);
   const handlePopupToggle = 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 = 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 = useCallback(id => {
     setCurrentExpandedPills(prev => {
       const next = new Set(prev);
@@ -269,16 +485,80 @@ const PillExpandableBase = ({
   const onChange = useCallback(() => {
     setIsPopupOpen(!isPopupOpen);
   }, [isPopupOpen]);
-  const buttonMoreProps = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
-  const validChildren = useMemo(() => Children.toArray(children).filter(child => {
+  const handlePopupClose = 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 = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
+  // For upsell type, force IconUnlocked icon
+  const effectiveIcon = type === "upsell" ? IconUnlocked : icon;
+  // Analyze children to determine variant and extract config
+  const childrenAnalysis = useMemo(() => {
+    const childArray = 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 = useMemo(() => {
+    if (type === "upsell") {
+      return [];
+    }
+    return 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 = useMemo(() => validChildren.slice(0, MAX_PILLS_TO_DISPLAY_IN_POPUP), [validChildren]);
-  const childCount = 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
+  } = 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 = 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 _jsx(Skeleton, {
       type: "pill",
@@ -286,35 +566,13 @@ const PillExpandableBase = ({
     });
   }
   if (isChild) {
-    const isExpanded = expandedChildPillIds.has(pillId);
-    return _jsxs(PillContext.Provider, {
-      value: {
-        level: level + 1,
-        onChildPillExpand: addExpandedChild,
-        onChildPillCollapse: removeExpandedChild,
-        expandedChildPillIds: currentExpandedPills,
-        autoExpand: autoExpandChildren || false
-      },
-      children: [_jsx(PillExpandableSimple, {
-        icon: icon,
-        text: text,
-        expanded: isExpanded,
-        onExpand: handleChildToggle,
-        expandAriaText: translate("Expand"),
-        type: type,
-        errorHandler: errorHandler,
-        descriptionId: descriptionId
-      }), _jsx(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 _jsx(PillExpandableChild, {
+      icon: icon,
+      text: text,
+      type: type,
+      errorHandler: errorHandler,
+      content: content,
+      autoExpandChildren: autoExpandChildren
     });
   }
   return _jsx(PillContext.Provider, {
@@ -332,75 +590,47 @@ const PillExpandableBase = ({
         className: "zen-status-pill__pill-container",
         onClick: handlePopupToggle,
         children: [_jsx(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 && _jsx(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
         })]
-      }), _jsx(Absolute, {
-        recalculateTrigger: isPopupContentReady,
-        recalculateOnScroll: true,
-        useTrapFocusWithTrigger: "on",
-        className: popupClassName,
-        id: popupId,
-        onOpenChange: onChange,
-        paddingX: paddingX,
-        paddingY: paddingY,
+      }), _jsx(PillExpandablePopover, {
+        useMobileSheet: useMobileSheet,
         isOpen: isPopupOpen,
+        popupId: popupId,
+        popupClassName: popupClassName,
+        text: text,
         triggerRef: triggerRef,
-        alignmentsFn: alignments,
-        children: _jsx("div", {
-          ref: node => setContainerNode(node),
-          className: "zen-status-pill-popup",
-          children: _jsxs("div", {
-            className: "zen-status-pill-popup__container",
-            children: [_jsx("div", {
-              className: "zen-status-pill-popup__main-pill",
-              children: _jsx(PillExpandableSimple, {
-                icon: icon,
-                text: text,
-                expanded: true,
-                onExpand: handlePopupToggle,
-                expandAriaText: translate("Expand"),
-                type: type,
-                errorHandler: errorHandler,
-                isBeta: isBeta,
-                descriptionId: descriptionId
-              })
-            }), _jsx(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 && _jsxs(_Fragment, {
-              children: [_jsx(Divider, {
-                className: "zen-status-pill-popup__divider"
-              }), _jsxs(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
       })]
     })
   });
 };
-export const PillExpandable = memo(PillExpandableBase);
-PillExpandable.displayName = "PillExpandable";
+const PillExpandableMemo = memo(PillExpandableBase);
+PillExpandableMemo.displayName = "PillExpandable";
+export const PillExpandable = PillExpandableMemo;
 export const TRANSLATIONS = ["Expand", "View all"];