@geotab/zenith 3.3.0 → 3.4.0-beta.0

package/dist/pillExpandable/pillExpandable.js

@@ -70,8 +70,10 @@ 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
+  onChildPillExpand: () => {},
+  onChildPillCollapse: () => {},
+  expandedChildPillIds: new Set(),
+  autoExpand: false
 });
 const paddingX = 26;
 const paddingY = 52;
@@ -153,7 +155,8 @@ const PillExpandableBase = ({
   secondaryIcon,
   isBeta,
   loadingWidth = 200,
-  hideCounterNumber
+  hideCounterNumber,
+  autoExpandChildren
 }) => {
   const popupId = (0, react_1.useId)();
   const pillId = (0, react_1.useId)();
@@ -168,11 +171,11 @@ const PillExpandableBase = ({
     mainAction,
     getData
   }));
-  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+  const [isPopupOpen, setIsPopupOpen] = (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) {
+    if (!isPopupOpen) {
       setIsPopupContentReady(false);
       return;
     }
@@ -189,10 +192,10 @@ const PillExpandableBase = ({
     return () => {
       observer.unobserve(containerNode);
     };
-  }, [isOpen, containerNode]);
+  }, [isPopupOpen, containerNode]);
   (0, react_1.useEffect)(() => {
     const fetchData = function () {
-      if (!isOpen) {
+      if (!isPopupOpen) {
         return;
       }
       if ((0, reactHelpers_1.isFunction)(getData)) {
@@ -206,9 +209,9 @@ const PillExpandableBase = ({
       }
     };
     fetchData();
-  }, [getData, isOpen, errorHandler]);
+  }, [getData, isPopupOpen, errorHandler]);
   (0, react_1.useEffect)(() => {
-    if (!isOpen) {
+    if (!isPopupOpen) {
       return;
     }
     getValue(description, setContent, "description", errorHandler);
@@ -216,25 +219,58 @@ const PillExpandableBase = ({
     getValue(count, setContent, "count", errorHandler);
     getValue(secondaryAction, setContent, "secondaryAction", errorHandler);
     getValue(mainAction, setContent, "mainAction", errorHandler);
-  }, [content, isOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
+  }, [content, isPopupOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
   const {
     level,
-    expandId,
-    onPillExpand
+    expandedChildPillIds,
+    onChildPillExpand,
+    onChildPillCollapse,
+    autoExpand
   } = (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)(e => {
+  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();
-    setIsOpen(!isOpen);
-    isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    onPillExpand(pillId === expandId ? "" : pillId);
-  }, [isOpen, onPillExpand, pillId, expandId]);
+    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);
+      next.add(id);
+      return next;
+    });
+  }, []);
+  const removeExpandedChild = (0, react_1.useCallback)(id => {
+    setCurrentExpandedPills(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
   const onChange = (0, react_1.useCallback)(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
+    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 => {
     var _a;
@@ -252,28 +288,31 @@ const PillExpandableBase = ({
     });
   }
   if (isChild) {
+    const isExpanded = expandedChildPillIds.has(pillId);
     return (0, jsx_runtime_1.jsxs)(PillContext.Provider, {
       value: {
         level: level + 1,
-        onPillExpand: setCurrentExpand,
-        expandId: currentExpand
+        onChildPillExpand: addExpandedChild,
+        onChildPillCollapse: removeExpandedChild,
+        expandedChildPillIds: currentExpandedPills,
+        autoExpand: autoExpandChildren || false
       },
       children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
         icon: icon,
         text: text,
-        expanded: expandId === pillId,
-        onExpand: onExpandHandler,
+        expanded: isExpanded,
+        onExpand: handleChildToggle,
         expandAriaText: translate("Expand"),
         type: type,
         errorHandler: errorHandler
       }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
-        onActionClick: onExpandHandler,
+        onActionClick: handleChildToggle,
         descriptionText: content.description,
         date: content.date,
         count: content.count,
         mainAction: content.mainAction,
         secondaryAction: content.secondaryAction,
-        isVisible: expandId === pillId,
+        isVisible: isExpanded,
         errorHandler: errorHandler
       })]
     });
@@ -281,19 +320,21 @@ const PillExpandableBase = ({
   return (0, jsx_runtime_1.jsx)(PillContext.Provider, {
     value: {
       level: level + 1,
-      onPillExpand: setCurrentExpand,
-      expandId: currentExpand
+      onChildPillExpand: addExpandedChild,
+      onChildPillCollapse: removeExpandedChild,
+      expandedChildPillIds: currentExpandedPills,
+      autoExpand: autoExpandChildren || false
     },
     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",
-        onClick: onExpandHandler,
+        onClick: handlePopupToggle,
         children: [(0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
           icon: icon,
           text: text,
-          expanded: isOpen,
+          expanded: isPopupOpen,
           expandAriaText: translate("Expand"),
           ref: triggerRef,
           type: type,
@@ -315,7 +356,7 @@ const PillExpandableBase = ({
         onOpenChange: onChange,
         paddingX: paddingX,
         paddingY: paddingY,
-        isOpen: isOpen,
+        isOpen: isPopupOpen,
         triggerRef: triggerRef,
         alignmentsFn: pillExpandableAlignments_1.alignments,
         children: (0, jsx_runtime_1.jsx)("div", {
@@ -329,14 +370,14 @@ const PillExpandableBase = ({
                 icon: icon,
                 text: text,
                 expanded: true,
-                onExpand: onExpandHandler,
+                onExpand: handlePopupToggle,
                 expandAriaText: translate("Expand"),
                 type: type,
                 errorHandler: errorHandler,
                 isBeta: isBeta
               })
             }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
-              onActionClick: onExpandHandler,
+              onActionClick: handlePopupToggle,
               descriptionText: content.description,
               date: content.date,
               count: content.count,

package/dist/radioGroupRaw/radioGroupRaw.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IRadioGroupRawDefault, TRadioGroupRaw } from "./types";
 import "./radioGroupRaw.less";
 export interface IRadioGroupRaw extends IRadioGroupRawDefault {

package/dist/rangeRaw/rangeRaw.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IRangeRawDefault, TRangeRaw } from "./types";
 import "./rangeRaw.less";
 export type { IRangeValuesRaw } from "./types";

package/dist/summary/summary.js

@@ -72,7 +72,6 @@ const Summary = ({
         children: title
       }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
         alignment: "top",
-        size: "auto",
         trigger: (0, jsx_runtime_1.jsx)("div", {
           className: "zen-summary__trigger",
           children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, {

package/dist/summaryTile/summaryTile.js

@@ -53,7 +53,7 @@ var SummaryTileSize;
     SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (exports.SummaryTileSize = SummaryTileSize = {}));
 exports.SummaryTileDisplayName = "SummaryTile";
-const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top", tooltipSize }) => {
+const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top" }) => {
     const generatedId = React.useId();
     const eltId = id || generatedId;
     const memoizedGetIconId = React.useMemo(() => {
@@ -83,7 +83,7 @@ const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title,
         };
     }
     const Tag = onClick ? "button" : "div";
-    return (0, jsx_runtime_1.jsxs)(Tag, Object.assign({}, componentProps, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-summary-tile__title-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: tooltipAlignment, size: tooltipSize, trigger: (0, jsx_runtime_1.jsx)(summaryTileTrigger_1.SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__content", children: children })] }));
+    return (0, jsx_runtime_1.jsxs)(Tag, Object.assign({}, componentProps, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-summary-tile__title-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: tooltipAlignment, trigger: (0, jsx_runtime_1.jsx)(summaryTileTrigger_1.SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__content", children: children })] }));
 };
 exports.SummaryTile = SummaryTile;
 exports.SummaryTile.displayName = exports.SummaryTileDisplayName;

package/dist/table/children/tableEmpty.d.ts

@@ -1,5 +1,5 @@
 import { IEmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
-export interface ITableEmpty extends Pick<IEmptySearchList, "description" | "image" | "className"> {
+export interface ITableEmpty extends Pick<IEmptySearchList, "description" | "image" | "className" | "children"> {
 }
 export declare const TableEmpty: {
     (_: ITableEmpty): import("react/jsx-runtime").JSX.Element;

package/dist/table/children/useTableChildren.js

@@ -71,7 +71,7 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
                 description: child.props.description,
                 image: child.props.image,
                 className: child.props.className
-            }));
+            }, child.props.children));
             return;
         }
         if (isChildElement(child, tableDetailPanel_1.TableDetailPanel.displayName)) {

package/dist/timePickerRaw/timePickerRaw.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { ITimePickerRawDefault, TTimePickerRaw } from "./types";
 import "./timePickerRaw.less";
 export interface ITimePickerRaw extends ITimePickerRawDefault {

package/dist/tooltip/tooltip.d.ts

@@ -1,13 +1,24 @@
-import { FC, PropsWithChildren, ReactElement } from "react";
+import React, { FC, PropsWithChildren, ReactElement } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { TAlignment } from "../absolute/absolute";
 import "./tooltip.less";
+import { TAlignment } from "../absolute/absolute";
 export type TooltipSize = "large" | "small" | "auto";
 export type TMobileView = "default" | "mobileSheet";
 interface ITooltip extends IZenComponentProps {
-    trigger: ReactElement<PropsWithChildren>;
-    size?: TooltipSize;
+    trigger?: ReactElement<PropsWithChildren & {
+        onClick?: (e: React.MouseEvent) => void;
+    }>;
     alignment?: TAlignment;
+    triggerClassName?: string;
+    mobileTitle?: string;
+    /**
+    * @deprecated
+    * @param mobileSheetTitle - will be removed in the next major release
+    * @param mobileView - will be removed in the next major release
+    * @param size - will be removed in the next major release
+    * @param padding - will be removed in the next major release
+    */
+    size?: TooltipSize;
     padding?: number;
     mobileView?: TMobileView;
     mobileSheetTitle?: ReactElement | string;