@geotab/zenith 3.6.3 → 3.7.0

package/dist/nav/nav.js

@@ -54,7 +54,7 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle
+const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle
 // eslint-disable-next-line complexity
  }) => {
     const menuRef = (0, react_1.useRef)(null);
@@ -97,7 +97,8 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuV
     const onEditStateToggle = (0, react_1.useCallback)((isEdit) => {
         isEdit && !isMobile && onCollapseToggle && onCollapseToggle(false);
         editListItems && editFooter && setIsEditState(isEdit);
-    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile]);
+        onEditModeToggle && onEditModeToggle(isEdit);
+    }, [onCollapseToggle, setIsEditState, editListItems, editFooter, isMobile, onEditModeToggle]);
     (0, react_1.useEffect)(() => {
         const wasMobile = prevIsMobileRef.current;
         prevIsMobileRef.current = isMobile;

package/dist/nav/navEditList/navEditList.js

@@ -12,10 +12,11 @@ const marksClassNames = {
     dragging: "zen-nav-edit-list__item--dragging",
     dragged: "zen-nav-edit-list__item--dragged"
 };
+const EDIT_ITEM_GAP = 10;
 const NavEditList = ({ children, className, onItemsChangeOrder, onBeforeItemDrag }) => {
     const appsListRef = (0, react_1.useRef)(null);
     const dragHandler = onItemsChangeOrder ? onItemsChangeOrder : () => { };
-    const { onDragStart } = (0, useDragAndDrop_1.useDragAndDrop)(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag);
+    const { onDragStart } = (0, useDragAndDrop_1.useDragAndDrop)(appsListRef, dragHandler, marksClassNames, onBeforeItemDrag, EDIT_ITEM_GAP);
     const childrenArray = (0, react_1.useMemo)(() => onItemsChangeOrder ? react_1.Children.map(children, child => (0, navEditListUtils_1.attachDndHandler)(child, onDragStart)) : children, [children, onItemsChangeOrder, onDragStart]);
     return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-nav-edit-list", className || ""]), ref: appsListRef, children: childrenArray });
 };

package/dist/nav/navItem/navItem.d.ts

@@ -27,6 +27,7 @@ export interface ILinkNavItem extends INavItemCommon {
 export interface IButtonNavItem extends INavItemCommon {
     onClick?: () => void;
     menuAlignment?: TAlignment;
+    onDropdownStateChange?: (isOpen: boolean) => void;
 }
 interface INavItemContext {
     parentLevel?: number;

package/dist/nav/navItem/navItem.js

@@ -73,9 +73,12 @@ const LinkNavItem = (_a) => {
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top", isMenuItem = true, tooltipAlignment = defaultTooltipAlignment, actionIcon, actionIconTitle, onActionIconClick, onDropdownStateChange } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment", "isMenuItem", "tooltipAlignment", "actionIcon", "actionIconTitle", "onActionIconClick", "onDropdownStateChange"]);
     const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
     const { parentLevel = 0, closeParentMenu } = (0, react_1.useContext)(exports.NavItemContext);
+    (0, react_1.useEffect)(() => {
+        onDropdownStateChange === null || onDropdownStateChange === void 0 ? void 0 : onDropdownStateChange(menuOpen);
+    }, [menuOpen, onDropdownStateChange]);
     const triggerRef = (0, react_1.useRef)(null);
     const currentLevel = parentLevel + 1;
     const validChildren = react_1.Children.toArray(children).filter(child => {

package/dist/pillExpandable/pillContent.d.ts

@@ -7,10 +7,11 @@ interface IPillContent {
     descriptionText?: TLazyContent<ReactNode>;
     mainAction?: TLazyContent<IPillExpandableAction>;
     secondaryAction?: TLazyContent<IPillExpandableAction>;
+    tertiaryAction?: TLazyContent<IPillExpandableAction>;
     onActionClick: () => void;
     isVisible?: boolean;
     errorHandler: (err: any) => ReactNode | undefined;
     descriptionId?: string;
 }
-export declare const PillContent: ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible, errorHandler, descriptionId }: IPillContent) => import("react/jsx-runtime").JSX.Element;
+export declare const PillContent: ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible, errorHandler, descriptionId }: IPillContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/pillExpandable/pillContent.js

@@ -7,7 +7,7 @@ const button_1 = require("../button/button");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const lazyContent_1 = require("../skeleton/lazyContent");
-const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
+const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, tertiaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
     const headerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__description");
     const mainActionClick = (0, react_1.useCallback)((onClick) => () => {
@@ -18,12 +18,17 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
+    const tertiaryActionClick = (0, react_1.useCallback)((onClick) => () => {
+        onClick && onClick();
+        onActionClick();
+    }, [onActionClick]);
     const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text })), [mainActionClick]);
-    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "secondary", children: data.text })), [secondaryActionClick]);
+    const renderTertiaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: tertiaryActionClick(data.onClick), type: "tertiary", children: data.text })), [tertiaryActionClick]);
     const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(date || count) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__content-header", children: [date && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
-                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
+                (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction || tertiaryAction) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__actions", children: [mainAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible }), tertiaryAction && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { type: "button", content: tertiaryAction, errorHandler: errorHandler, render: renderTertiaryButton, isVisible: isVisible })] })] });
 };
 exports.PillContent = PillContent;

package/dist/pillExpandable/pillExpandable.d.ts

@@ -1,5 +1,6 @@
 import "./pillExpandable.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { Exclusive } from "../commonHelpers/types/exclusive";
 import React, { FC, ReactNode } from "react";
 import { TViewMoreButton } from "./getProps";
 import { IIcon } from "../icons/icon";
@@ -20,6 +21,7 @@ export interface IBaseData {
     count?: TLazyContent<number>;
     mainAction?: TLazyContent<IPillExpandableAction>;
     secondaryAction?: TLazyContent<IPillExpandableAction>;
+    tertiaryAction?: TLazyContent<IPillExpandableAction>;
     getData?: undefined;
 }
 export interface IPromisedBaseData {
@@ -29,16 +31,20 @@ export interface IPromisedBaseData {
     count?: undefined;
     mainAction?: undefined;
     secondaryAction?: undefined;
+    tertiaryAction?: undefined;
 }
 type TProps = IBaseData | IPromisedBaseData;
-export interface IPillExpandable extends IZenComponentProps {
+export type TPopoverVariant = "default" | "placeholder";
+export type TPopoverSize = "small" | "medium" | "large";
+type TPillTypeBase = "error" | "success" | "warning" | "info" | "default";
+export type TPillType = TPillTypeBase | "upsell";
+/** Base props shared by all PillExpandable variants */
+export interface IPillExpandableBase extends IZenComponentProps {
     uniquePills?: number;
     text: string;
-    type?: "error" | "success" | "warning" | "info" | "default";
     viewMoreAction?: TViewMoreButton;
     className?: string;
     popupClassName?: string;
-    icon?: FC<IIcon> | false;
     secondaryIcon?: FC<IIcon> | false;
     isFlat?: boolean;
     isLoading?: boolean;
@@ -47,8 +53,25 @@ export interface IPillExpandable extends IZenComponentProps {
     isBeta?: boolean;
     hideCounterNumber?: boolean;
     autoExpandChildren?: boolean;
+    /** Popover size: small (220px), medium (320px), large (420px). Default: "medium" */
+    popoverSize?: TPopoverSize;
+    /** Title displayed in the popover title bar. If provided, the title bar will be shown. */
+    title?: string;
+}
+/** Props for standard PillExpandable (non-upsell) */
+interface IPillExpandableStandard extends IPillExpandableBase {
+    type?: TPillTypeBase;
+    icon?: FC<IIcon> | false;
+}
+/** Props for upsell PillExpandable - icon and children are not allowed */
+interface IPillExpandableUpsell extends IPillExpandableBase {
+    type: "upsell";
+    icon?: never;
+    children?: never;
 }
+/** Combined type using Exclusive to prevent mixing upsell with standard props */
+export type IPillExpandable = Exclusive<IPillExpandableStandard, IPillExpandableUpsell>;
 type TPillExpandable = IPillExpandable & TProps;
-export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
+export declare const PillExpandable: React.MemoExoticComponent<({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, tertiaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth, hideCounterNumber, autoExpandChildren, popoverSize, title }: TPillExpandable) => import("react/jsx-runtime").JSX.Element>;
 export declare const TRANSLATIONS: string[];
 export {};