@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/pillBox/pillBox.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.PillBox = exports.DEFAULT_MAX_PILLS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -9,26 +15,121 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const pillBoxItem_1 = require("./components/pillBoxItem");
 const pill_1 = require("../pill/pill");
 const pillBoxItem_2 = require("./components/pillBoxItem");
+injectString("cs", "and {0} more", "a {0} dal\u0161\xEDch");
+injectString("da-DK", "and {0} more", "og {0} mere");
+injectString("de", "and {0} more", "und {0} weitere");
+injectString("en", "and {0} more", "and {0} more");
+injectString("es", "and {0} more", "y {0} m\xE1s");
+injectString("fi-FI", "and {0} more", "ja {0} lis\xE4\xE4");
+injectString("fr", "and {0} more", "et {0} de plus");
+injectString("fr-FR", "and {0} more", "et {0} de plus");
+injectString("hu-HU", "and {0} more", "\xE9s m\xE9g {0}");
+injectString("id", "and {0} more", "dan {0} lainnya");
+injectString("it", "and {0} more", "e altri {0}");
+injectString("ja", "and {0} more", "{0} \u4EE5\u4E0A");
+injectString("ko-KR", "and {0} more", "\uBC0F {0}\uAC1C \uB354");
+injectString("ms", "and {0} more", "dan {0} lagi");
+injectString("nb-NO", "and {0} more", "og {0} flere");
+injectString("nl", "and {0} more", "en {0} meer");
+injectString("pl", "and {0} more", "i jeszcze {0}");
+injectString("pt-BR", "and {0} more", "e {0} mais");
+injectString("sk-SK", "and {0} more", "a {0} \u010Fal\u0161\xEDch");
+injectString("sv", "and {0} more", "och {0} till");
+injectString("th", "and {0} more", "\u0E41\u0E25\u0E30\u0E2D\u0E35\u0E01 {0}");
+injectString("tr", "and {0} more", "ve {0} tane daha");
+injectString("zh-Hans", "and {0} more", "\u548C\u53E6\u5916 {0} \u9879");
+injectString("zh-TW", "and {0} more", "\u9084\u6709 {0} \u500B");
+injectString("cs", "Selected:", "Vybr\xE1no:");
+injectString("da-DK", "Selected:", "Valgte:");
+injectString("de", "Selected:", "Ausgew\xE4hlte Fahrer");
+injectString("en", "Selected:", "Selected:");
+injectString("es", "Selected:", "Seleccionado:");
+injectString("fi-FI", "Selected:", "Valittu:");
+injectString("fr", "Selected:", "S\xE9lectionn\xE9\xA0:");
+injectString("fr-FR", "Selected:", "S\xE9lectionn\xE9 :");
+injectString("hu-HU", "Selected:", "Kijel\xF6lve:");
+injectString("id", "Selected:", "Dipilih:");
+injectString("it", "Selected:", "Selezionato:");
+injectString("ja", "Selected:", "\u9078\u629E");
+injectString("ko-KR", "Selected:", "\uC120\uD0DD\uB428:");
+injectString("ms", "Selected:", "Dipilih:");
+injectString("nb-NO", "Selected:", "Utvalgt:");
+injectString("nl", "Selected:", "Geselecteerd:");
+injectString("pl", "Selected:", "Wybrano:");
+injectString("pt-BR", "Selected:", "Selecionado:");
+injectString("sk-SK", "Selected:", "Vybran\xE9:");
+injectString("sv", "Selected:", "Vald:");
+injectString("th", "Selected:", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27:");
+injectString("tr", "Selected:", "Se\xE7ilen:");
+injectString("zh-Hans", "Selected:", "\u5DF2\u9009\uFF1A");
+injectString("zh-TW", "Selected:", "\u5DF2\u9078\u53D6\uFF1A");
+injectString("cs", "All", "V\u0161e");
+injectString("da-DK", "All", "Alle");
+injectString("de", "All", "Alle");
+injectString("en", "All", "All");
+injectString("es", "All", "Todo");
+injectString("fi-FI", "All", "Kaikki");
+injectString("fr", "All", "Tout");
+injectString("fr-FR", "All", "Tous");
+injectString("hu-HU", "All", "Minden");
+injectString("id", "All", "Semua");
+injectString("it", "All", "Tutti");
+injectString("ja", "All", "\u3059\u3079\u3066");
+injectString("ko-KR", "All", "\uC804\uCCB4");
+injectString("ms", "All", "Semua");
+injectString("nb-NO", "All", "Alle");
+injectString("nl", "All", "Alle");
+injectString("pl", "All", "Wszystkie");
+injectString("pt-BR", "All", "Tudo");
+injectString("sk-SK", "All", "V\u0161etko");
+injectString("sv", "All", "Alla");
+injectString("th", "All", "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+injectString("tr", "All", "T\xFCm\xFC");
+injectString("zh-Hans", "All", "\u5168\u90E8");
+injectString("zh-TW", "All", "\u5168\u90E8");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.DEFAULT_MAX_PILLS = 5;
-const PillBox = ({ className = "", hideSelectedLabel, selectedPills, isAllSelected, onRemove, maxPills = exports.DEFAULT_MAX_PILLS }) => {
-    const onRemoveEmpty = (0, react_1.useCallback)(() => { }, []);
-    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-box");
-    const onRemoveMemoized = (0, react_1.useCallback)((value) => onRemove === null || onRemove === void 0 ? void 0 : onRemove(value), [onRemove]);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    if (!selectedPills.length && !isAllSelected) {
-        return null;
-    }
-    const validMaxPills = (0, getValidMaxPills_1.getValidMaxPills)(maxPills);
-    const visiblePills = validMaxPills ? selectedPills.slice(0, validMaxPills) : selectedPills;
-    const hiddenPillsIds = validMaxPills ? selectedPills.slice(validMaxPills).map(item => item.id) : [];
-    const morePill = (0, jsx_runtime_1.jsx)(pill_1.Pill, { className: (0, classNames_1.classNames)(["zen-pill-box__pill", "zen-caption", "zen-pill-box__more-pill"]), children: (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("and {0} more").replace("{0}", hiddenPillsIds.length.toString()) }) }, "idClosePill");
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-pill-box", driveComponentClass !== null && driveComponentClass !== void 0 ? driveComponentClass : "", className]), children: [hideSelectedLabel ? null : (0, jsx_runtime_1.jsx)("div", { className: "zen-pill-box__label", children: `${translate("Selected:")}${isAllSelected ? " " + translate("All") : ""}` }), !isAllSelected && visiblePills.length ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-pill-box__pills", children: [visiblePills.map(item => (0, jsx_runtime_1.jsx)(pillBoxItem_1.PillBoxItem, { item: item, onRemove: onRemove ? onRemoveMemoized : onRemoveEmpty, className: "zen-pill-box__pill" }, item.id)), hiddenPillsIds.length ? morePill : null] }) : null] });
+const PillBox = ({
+  className = "",
+  hideSelectedLabel,
+  selectedPills,
+  isAllSelected,
+  onRemove,
+  maxPills = exports.DEFAULT_MAX_PILLS
+}) => {
+  const onRemoveEmpty = (0, react_1.useCallback)(() => {}, []);
+  const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-box");
+  const onRemoveMemoized = (0, react_1.useCallback)(value => onRemove === null || onRemove === void 0 ? void 0 : onRemove(value), [onRemove]);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  if (!selectedPills.length && !isAllSelected) {
+    return null;
+  }
+  const validMaxPills = (0, getValidMaxPills_1.getValidMaxPills)(maxPills);
+  const visiblePills = validMaxPills ? selectedPills.slice(0, validMaxPills) : selectedPills;
+  const hiddenPillsIds = validMaxPills ? selectedPills.slice(validMaxPills).map(item => item.id) : [];
+  const morePill = (0, jsx_runtime_1.jsx)(pill_1.Pill, {
+    className: (0, classNames_1.classNames)(["zen-pill-box__pill", "zen-caption", "zen-pill-box__more-pill"]),
+    children: (0, jsx_runtime_1.jsx)("span", {
+      className: "zen-caption__content",
+      children: translate("and {0} more").replace("{0}", hiddenPillsIds.length.toString())
+    })
+  }, "idClosePill");
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-pill-box", driveComponentClass !== null && driveComponentClass !== void 0 ? driveComponentClass : "", className]),
+    children: [hideSelectedLabel ? null : (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-pill-box__label",
+      children: `${translate("Selected:")}${isAllSelected ? " " + translate("All") : ""}`
+    }), !isAllSelected && visiblePills.length ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-pill-box__pills",
+      children: [visiblePills.map(item => (0, jsx_runtime_1.jsx)(pillBoxItem_1.PillBoxItem, {
+        item: item,
+        onRemove: onRemove ? onRemoveMemoized : onRemoveEmpty,
+        className: "zen-pill-box__pill"
+      }, item.id)), hiddenPillsIds.length ? morePill : null]
+    }) : null]
+  });
 };
 exports.PillBox = PillBox;
-exports.TRANSLATIONS = [
-    "Selected:",
-    "All",
-    "and {0} more",
-    ...pillBoxItem_2.TRANSLATIONS
-];
+exports.TRANSLATIONS = ["Selected:", "All", "and {0} more", ...pillBoxItem_2.TRANSLATIONS];

package/dist/pillExpandable/pillExpandable.js

@@ -1,7 +1,61 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 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("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("cs", "View all", "Zobrazit v\u0161e");
+injectString("da-DK", "View all", "Se alle");
+injectString("de", "View all", "Alle anzeigen");
+injectString("en", "View all", "View all");
+injectString("es", "View all", "Ver todo");
+injectString("fi-FI", "View all", "N\xE4yt\xE4 kaikki");
+injectString("fr", "View all", "Afficher tout");
+injectString("fr-FR", "View all", "Tout afficher");
+injectString("hu-HU", "View all", "Mutasd az \xF6sszeset.");
+injectString("id", "View all", "Lihat semua");
+injectString("it", "View all", "Visualizzare tutto");
+injectString("ja", "View all", "\u3059\u3079\u3066\u8868\u793A");
+injectString("ko-KR", "View all", "\uC804\uCCB4 \uBCF4\uAE30");
+injectString("ms", "View all", "Lihat semua");
+injectString("nb-NO", "View all", "Se alle");
+injectString("nl", "View all", "Alles weergeven");
+injectString("pl", "View all", "Wy\u015Bwietl wszystkie");
+injectString("pt-BR", "View all", "Visualizar tudo");
+injectString("sk-SK", "View all", "Zobrazi\u0165 v\u0161etko");
+injectString("sv", "View all", "Visa alla");
+injectString("th", "View all", "\u0E14\u0E39\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+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");
 const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const button_1 = require("../button/button");
@@ -15,154 +69,294 @@ const skeleton_1 = require("../skeleton/skeleton");
 const reactHelpers_1 = require("../commonHelpers/reactHelpers/reactHelpers");
 const MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = (0, react_1.createContext)({
-    level: 0,
-    onPillExpand: () => { },
-    expandId: undefined
+  level: 0,
+  onPillExpand: () => {},
+  expandId: undefined
 });
 const paddingX = 26;
 const paddingY = 52;
-const getDefaultContent = ({ description, date, count, secondaryAction, mainAction, getData }) => {
-    if (getData) {
-        return {
-            description: {
-                isLoading: true,
-                data: ""
-            },
-            date: {
-                isLoading: true,
-                data: ""
-            },
-            count: {
-                isLoading: true,
-                data: 0
-            },
-            secondaryAction: {
-                isLoading: true,
-                data: {
-                    text: ""
-                }
-            },
-            mainAction: {
-                isLoading: true,
-                data: {
-                    text: ""
-                }
-            },
-            getData
-        };
-    }
+const getDefaultContent = ({
+  description,
+  date,
+  count,
+  secondaryAction,
+  mainAction,
+  getData
+}) => {
+  if (getData) {
     return {
-        description,
-        date,
-        count,
-        secondaryAction,
-        mainAction,
-        getData: undefined
+      description: {
+        isLoading: true,
+        data: ""
+      },
+      date: {
+        isLoading: true,
+        data: ""
+      },
+      count: {
+        isLoading: true,
+        data: 0
+      },
+      secondaryAction: {
+        isLoading: true,
+        data: {
+          text: ""
+        }
+      },
+      mainAction: {
+        isLoading: true,
+        data: {
+          text: ""
+        }
+      },
+      getData
     };
+  }
+  return {
+    description,
+    date,
+    count,
+    secondaryAction,
+    mainAction,
+    getData: undefined
+  };
 };
 const getValue = (parameter, setContent, paramName, errorHandler) => {
-    if (parameter instanceof Function) {
-        parameter()
-            .then((result) => {
-            setContent((prevValue) => (Object.assign(Object.assign({}, prevValue), { [paramName]: result })));
-        })
-            .catch((e) => {
-            errorHandler && errorHandler(e);
-        });
-    }
+  if (parameter instanceof Function) {
+    parameter().then(result => {
+      setContent(prevValue => Object.assign(Object.assign({}, prevValue), {
+        [paramName]: result
+      }));
+    }).catch(e => {
+      errorHandler && errorHandler(e);
+    });
+  }
 };
-const PillExpandableBase = ({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth = 200, hideCounterNumber }) => {
-    const popupId = (0, react_1.useId)();
-    const pillId = (0, react_1.useId)();
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const [content, setContent] = (0, react_1.useState)(getDefaultContent({
-        description,
-        date,
-        count,
-        secondaryAction,
-        mainAction,
-        getData
-    }));
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [isPopupContentReady, setIsPopupContentReady] = (0, react_1.useState)(false);
-    const [containerNode, setContainerNode] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!isOpen) {
-            setIsPopupContentReady(false);
-            return;
-        }
-        if (!containerNode || typeof ResizeObserver === "undefined") {
-            return;
-        }
-        const observer = new ResizeObserver(() => {
-            if (containerNode.offsetHeight > 0) {
-                setIsPopupContentReady(true);
-            }
-        });
-        observer.observe(containerNode);
-        // eslint-disable-next-line consistent-return
-        return () => {
-            observer.unobserve(containerNode);
-        };
-    }, [isOpen, containerNode]);
-    (0, react_1.useEffect)(() => {
-        const fetchData = function () {
-            if (!isOpen) {
-                return;
-            }
-            if ((0, reactHelpers_1.isFunction)(getData)) {
-                void getData().then(result => {
-                    setContent(result);
-                }).catch(e => {
-                    if (errorHandler) {
-                        void errorHandler(e);
-                    }
-                });
-            }
-        };
-        fetchData();
-    }, [getData, isOpen, errorHandler]);
-    (0, react_1.useEffect)(() => {
-        if (!isOpen) {
-            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, isOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
-    const { level, expandId, onPillExpand } = (0, react_1.useContext)(PillContext);
-    const triggerRef = (0, react_1.useRef)(null);
-    const isChild = level !== 0;
-    const [currentExpand, setCurrentExpand] = (0, react_1.useState)(undefined);
-    const onExpandHandler = (0, react_1.useCallback)(() => {
-        var _a;
-        setIsOpen(!isOpen);
-        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-        onPillExpand(pillId === expandId ? "" : pillId);
-    }, [isOpen, onPillExpand, pillId, expandId]);
-    const onChange = (0, react_1.useCallback)(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen]);
-    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 => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "PillExpandable"; }), [children]);
-    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 uniqueChilds = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
-    if (isLoading) {
-        return (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { type: "pill", width: loadingWidth });
+const PillExpandableBase = ({
+  children,
+  errorHandler,
+  getData,
+  text,
+  description,
+  date,
+  count,
+  mainAction,
+  secondaryAction,
+  viewMoreAction,
+  uniquePills,
+  type,
+  className,
+  popupClassName,
+  isLoading,
+  isFlat,
+  icon,
+  secondaryIcon,
+  isBeta,
+  loadingWidth = 200,
+  hideCounterNumber
+}) => {
+  const popupId = (0, react_1.useId)();
+  const pillId = (0, react_1.useId)();
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const [content, setContent] = (0, react_1.useState)(getDefaultContent({
+    description,
+    date,
+    count,
+    secondaryAction,
+    mainAction,
+    getData
+  }));
+  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+  const [isPopupContentReady, setIsPopupContentReady] = (0, react_1.useState)(false);
+  const [containerNode, setContainerNode] = (0, react_1.useState)(null);
+  (0, react_1.useEffect)(() => {
+    if (!isOpen) {
+      setIsPopupContentReady(false);
+      return;
+    }
+    if (!containerNode || typeof ResizeObserver === "undefined") {
+      return;
     }
-    if (isChild) {
-        return (0, jsx_runtime_1.jsxs)(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, { icon: icon, text: text, expanded: expandId === pillId, onExpand: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, { onActionClick: onExpandHandler, descriptionText: content.description, date: content.date, count: content.count, mainAction: content.mainAction, secondaryAction: content.secondaryAction, isVisible: expandId === pillId, errorHandler: errorHandler })] });
+    const observer = new ResizeObserver(() => {
+      if (containerNode.offsetHeight > 0) {
+        setIsPopupContentReady(true);
+      }
+    });
+    observer.observe(containerNode);
+    // eslint-disable-next-line consistent-return
+    return () => {
+      observer.unobserve(containerNode);
+    };
+  }, [isOpen, containerNode]);
+  (0, react_1.useEffect)(() => {
+    const fetchData = function () {
+      if (!isOpen) {
+        return;
+      }
+      if ((0, reactHelpers_1.isFunction)(getData)) {
+        void getData().then(result => {
+          setContent(result);
+        }).catch(e => {
+          if (errorHandler) {
+            void errorHandler(e);
+          }
+        });
+      }
+    };
+    fetchData();
+  }, [getData, isOpen, errorHandler]);
+  (0, react_1.useEffect)(() => {
+    if (!isOpen) {
+      return;
     }
-    return (0, jsx_runtime_1.jsx)(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-status-pill", className || ""]), "aria-haspopup": "true", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill__pill-container", children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, { icon: icon, text: text, expanded: isOpen, onExpand: onExpandHandler, expandAriaText: translate("Expand"), ref: triggerRef, type: type, errorHandler: errorHandler, isBeta: isBeta }), uniqueChilds && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, { icon: secondaryIcon || icon, text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChilds}`, onExpand: onExpandHandler, includeExpandIcon: false, type: type, errorHandler: errorHandler })] }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { recalculateTrigger: isPopupContentReady, recalculateOnScroll: true, useTrapFocusWithTrigger: "on", className: popupClassName, id: popupId, onOpenChange: onChange, paddingX: paddingX, paddingY: paddingY, isOpen: isOpen, 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: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler, isBeta: isBeta }) }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, { onActionClick: onExpandHandler, descriptionText: content.description, date: content.date, count: content.count, mainAction: content.mainAction, secondaryAction: content.secondaryAction, errorHandler: errorHandler }), 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)("div", { className: "zen-status-pill-popup__divider" }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonMoreProps, { type: "tertiary", children: [translate("View all"), " (", moreCounter, ")"] }))] })] }) }) })] }) });
+    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, isOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
+  const {
+    level,
+    expandId,
+    onPillExpand
+  } = (0, react_1.useContext)(PillContext);
+  const triggerRef = (0, react_1.useRef)(null);
+  const isChild = level !== 0;
+  const [currentExpand, setCurrentExpand] = (0, react_1.useState)(undefined);
+  const onExpandHandler = (0, react_1.useCallback)(() => {
+    var _a;
+    setIsOpen(!isOpen);
+    isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    onPillExpand(pillId === expandId ? "" : pillId);
+  }, [isOpen, onPillExpand, pillId, expandId]);
+  const onChange = (0, react_1.useCallback)(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  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 => {
+    var _a;
+    return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "PillExpandable";
+  }), [children]);
+  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 uniqueChilds = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
+  if (isLoading) {
+    return (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
+      type: "pill",
+      width: loadingWidth
+    });
+  }
+  if (isChild) {
+    return (0, jsx_runtime_1.jsxs)(PillContext.Provider, {
+      value: {
+        level: level + 1,
+        onPillExpand: setCurrentExpand,
+        expandId: currentExpand
+      },
+      children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+        icon: icon,
+        text: text,
+        expanded: expandId === pillId,
+        onExpand: onExpandHandler,
+        expandAriaText: translate("Expand"),
+        type: type,
+        errorHandler: errorHandler
+      }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
+        onActionClick: onExpandHandler,
+        descriptionText: content.description,
+        date: content.date,
+        count: content.count,
+        mainAction: content.mainAction,
+        secondaryAction: content.secondaryAction,
+        isVisible: expandId === pillId,
+        errorHandler: errorHandler
+      })]
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(PillContext.Provider, {
+    value: {
+      level: level + 1,
+      onPillExpand: setCurrentExpand,
+      expandId: currentExpand
+    },
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-status-pill", className || ""]),
+      "aria-haspopup": "true",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-status-pill__pill-container",
+        children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+          icon: icon,
+          text: text,
+          expanded: isOpen,
+          onExpand: onExpandHandler,
+          expandAriaText: translate("Expand"),
+          ref: triggerRef,
+          type: type,
+          errorHandler: errorHandler,
+          isBeta: isBeta
+        }), uniqueChilds && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+          icon: secondaryIcon || icon,
+          text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChilds}`,
+          onExpand: onExpandHandler,
+          includeExpandIcon: false,
+          type: type,
+          errorHandler: errorHandler
+        })]
+      }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, {
+        recalculateTrigger: isPopupContentReady,
+        recalculateOnScroll: true,
+        useTrapFocusWithTrigger: "on",
+        className: popupClassName,
+        id: popupId,
+        onOpenChange: onChange,
+        paddingX: paddingX,
+        paddingY: paddingY,
+        isOpen: isOpen,
+        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: onExpandHandler,
+                expandAriaText: translate("Expand"),
+                type: type,
+                errorHandler: errorHandler,
+                isBeta: isBeta
+              })
+            }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
+              onActionClick: onExpandHandler,
+              descriptionText: content.description,
+              date: content.date,
+              count: content.count,
+              mainAction: content.mainAction,
+              secondaryAction: content.secondaryAction,
+              errorHandler: errorHandler
+            }), 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)("div", {
+                className: "zen-status-pill-popup__divider"
+              }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonMoreProps, {
+                type: "tertiary",
+                children: [translate("View all"), " (", moreCounter, ")"]
+              }))]
+            })]
+          })
+        })
+      })]
+    })
+  });
 };
 exports.PillExpandable = (0, react_1.memo)(PillExpandableBase);
 exports.PillExpandable.displayName = "PillExpandable";
-exports.TRANSLATIONS = [
-    "Expand",
-    "View all"
-];
+exports.TRANSLATIONS = ["Expand", "View all"];