@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/pillExpandable/pillExpandable.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Absolute } from "../absolute/absolute";
@@ -10,156 +11,344 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { getButtonMoreProps } from "./getProps";
 import { Skeleton } from "../skeleton/skeleton";
 import { isFunction } from "../commonHelpers/reactHelpers/reactHelpers";
+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 MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = 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 = useId();
-    const pillId = useId();
-    const { translate } = useLanguage();
-    const [content, setContent] = useState(getDefaultContent({
-        description,
-        date,
-        count,
-        secondaryAction,
-        mainAction,
-        getData
-    }));
-    const [isOpen, setIsOpen] = useState(false);
-    const [isPopupContentReady, setIsPopupContentReady] = useState(false);
-    const [containerNode, setContainerNode] = useState(null);
-    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]);
-    useEffect(() => {
-        const fetchData = function () {
-            if (!isOpen) {
-                return;
-            }
-            if (isFunction(getData)) {
-                void getData().then(result => {
-                    setContent(result);
-                }).catch(e => {
-                    if (errorHandler) {
-                        void errorHandler(e);
-                    }
-                });
-            }
-        };
-        fetchData();
-    }, [getData, isOpen, errorHandler]);
-    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 } = useContext(PillContext);
-    const triggerRef = useRef(null);
-    const isChild = level !== 0;
-    const [currentExpand, setCurrentExpand] = useState(undefined);
-    const onExpandHandler = 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 = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen]);
-    const buttonMoreProps = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
-    const validChildren = useMemo(() => 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 = 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 uniqueChilds = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
-    if (isLoading) {
-        return _jsx(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 = useId();
+  const pillId = useId();
+  const {
+    translate
+  } = useLanguage();
+  const [content, setContent] = useState(getDefaultContent({
+    description,
+    date,
+    count,
+    secondaryAction,
+    mainAction,
+    getData
+  }));
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPopupContentReady, setIsPopupContentReady] = useState(false);
+  const [containerNode, setContainerNode] = useState(null);
+  useEffect(() => {
+    if (!isOpen) {
+      setIsPopupContentReady(false);
+      return;
     }
-    if (isChild) {
-        return _jsxs(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: [_jsx(PillExpandableSimple, { icon: icon, text: text, expanded: expandId === pillId, onExpand: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler }), _jsx(PillContent, { onActionClick: onExpandHandler, descriptionText: content.description, date: content.date, count: content.count, mainAction: content.mainAction, secondaryAction: content.secondaryAction, isVisible: expandId === pillId, errorHandler: errorHandler })] });
+    if (!containerNode || typeof ResizeObserver === "undefined") {
+      return;
     }
-    return _jsx(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: _jsxs("div", { className: classNames(["zen-status-pill", className || ""]), "aria-haspopup": "true", children: [_jsxs("div", { className: "zen-status-pill__pill-container", children: [_jsx(PillExpandableSimple, { icon: icon, text: text, expanded: isOpen, onExpand: onExpandHandler, expandAriaText: translate("Expand"), ref: triggerRef, type: type, errorHandler: errorHandler, isBeta: isBeta }), uniqueChilds && _jsx(PillExpandableSimple, { icon: secondaryIcon || icon, text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChilds}`, onExpand: onExpandHandler, includeExpandIcon: false, type: type, errorHandler: errorHandler })] }), _jsx(Absolute, { recalculateTrigger: isPopupContentReady, recalculateOnScroll: true, useTrapFocusWithTrigger: "on", className: popupClassName, id: popupId, onOpenChange: onChange, paddingX: paddingX, paddingY: paddingY, isOpen: isOpen, 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: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler, isBeta: isBeta }) }), _jsx(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 && _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-status-pill-popup__divider" }), _jsxs(Button, Object.assign({}, buttonMoreProps, { type: "tertiary", children: [translate("View all"), " (", moreCounter, ")"] }))] })] }) }) })] }) });
+    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]);
+  useEffect(() => {
+    const fetchData = function () {
+      if (!isOpen) {
+        return;
+      }
+      if (isFunction(getData)) {
+        void getData().then(result => {
+          setContent(result);
+        }).catch(e => {
+          if (errorHandler) {
+            void errorHandler(e);
+          }
+        });
+      }
+    };
+    fetchData();
+  }, [getData, isOpen, errorHandler]);
+  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
+  } = useContext(PillContext);
+  const triggerRef = useRef(null);
+  const isChild = level !== 0;
+  const [currentExpand, setCurrentExpand] = useState(undefined);
+  const onExpandHandler = 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 = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  const buttonMoreProps = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
+  const validChildren = useMemo(() => 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 = 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 uniqueChilds = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
+  if (isLoading) {
+    return _jsx(Skeleton, {
+      type: "pill",
+      width: loadingWidth
+    });
+  }
+  if (isChild) {
+    return _jsxs(PillContext.Provider, {
+      value: {
+        level: level + 1,
+        onPillExpand: setCurrentExpand,
+        expandId: currentExpand
+      },
+      children: [_jsx(PillExpandableSimple, {
+        icon: icon,
+        text: text,
+        expanded: expandId === pillId,
+        onExpand: onExpandHandler,
+        expandAriaText: translate("Expand"),
+        type: type,
+        errorHandler: errorHandler
+      }), _jsx(PillContent, {
+        onActionClick: onExpandHandler,
+        descriptionText: content.description,
+        date: content.date,
+        count: content.count,
+        mainAction: content.mainAction,
+        secondaryAction: content.secondaryAction,
+        isVisible: expandId === pillId,
+        errorHandler: errorHandler
+      })]
+    });
+  }
+  return _jsx(PillContext.Provider, {
+    value: {
+      level: level + 1,
+      onPillExpand: setCurrentExpand,
+      expandId: currentExpand
+    },
+    children: _jsxs("div", {
+      className: classNames(["zen-status-pill", className || ""]),
+      "aria-haspopup": "true",
+      children: [_jsxs("div", {
+        className: "zen-status-pill__pill-container",
+        children: [_jsx(PillExpandableSimple, {
+          icon: icon,
+          text: text,
+          expanded: isOpen,
+          onExpand: onExpandHandler,
+          expandAriaText: translate("Expand"),
+          ref: triggerRef,
+          type: type,
+          errorHandler: errorHandler,
+          isBeta: isBeta
+        }), uniqueChilds && _jsx(PillExpandableSimple, {
+          icon: secondaryIcon || icon,
+          text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChilds}`,
+          onExpand: onExpandHandler,
+          includeExpandIcon: false,
+          type: type,
+          errorHandler: errorHandler
+        })]
+      }), _jsx(Absolute, {
+        recalculateTrigger: isPopupContentReady,
+        recalculateOnScroll: true,
+        useTrapFocusWithTrigger: "on",
+        className: popupClassName,
+        id: popupId,
+        onOpenChange: onChange,
+        paddingX: paddingX,
+        paddingY: paddingY,
+        isOpen: isOpen,
+        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: onExpandHandler,
+                expandAriaText: translate("Expand"),
+                type: type,
+                errorHandler: errorHandler,
+                isBeta: isBeta
+              })
+            }), _jsx(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 && _jsxs(_Fragment, {
+              children: [_jsx("div", {
+                className: "zen-status-pill-popup__divider"
+              }), _jsxs(Button, Object.assign({}, buttonMoreProps, {
+                type: "tertiary",
+                children: [translate("View all"), " (", moreCounter, ")"]
+              }))]
+            })]
+          })
+        })
+      })]
+    })
+  });
 };
 export const PillExpandable = memo(PillExpandableBase);
 PillExpandable.displayName = "PillExpandable";
-export const TRANSLATIONS = [
-    "Expand",
-    "View all"
-];
+export const TRANSLATIONS = ["Expand", "View all"];