@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/lineChartMini/lineChartMini.js

@@ -1,16 +1,19 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.LineChartMini = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -23,77 +26,142 @@ const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const accessibleChart_1 = require("../chart/accessibleChart/accessibleChart");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+injectString("cs", "Line chart", "Spojnicov\xFD graf");
+injectString("da-DK", "Line chart", "Linjediagram");
+injectString("de", "Line chart", "Liniendiagramm");
+injectString("en", "Line chart", "Line chart");
+injectString("es", "Line chart", "Gr\xE1fico de l\xEDneas");
+injectString("fi-FI", "Line chart", "Viivakaavio");
+injectString("fr", "Line chart", "Graphique lin\xE9aire");
+injectString("fr-FR", "Line chart", "Graphique lin\xE9aire");
+injectString("hu-HU", "Line chart", "Vonaldiagram");
+injectString("id", "Line chart", "Bagan garis");
+injectString("it", "Line chart", "Grafico a linee");
+injectString("ja", "Line chart", "\u6298\u308C\u7DDA\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Line chart", "\uC120\uD615 \uCC28\uD2B8");
+injectString("ms", "Line chart", "Carta garisan");
+injectString("nb-NO", "Line chart", "Linjediagram");
+injectString("nl", "Line chart", "Lijndiagram");
+injectString("pl", "Line chart", "Wykres liniowy");
+injectString("pt-BR", "Line chart", "Gr\xE1fico de linhas");
+injectString("pt-PT", "Line chart", "Gr\xE1fico de linhas");
+injectString("sk-SK", "Line chart", "\u010Ciarov\xFD graf");
+injectString("sv", "Line chart", "Linjediagram");
+injectString("th", "Line chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E40\u0E2A\u0E49\u0E19");
+injectString("tr", "Line chart", "\xC7izgi grafik");
+injectString("zh-Hans", "Line chart", "\u6298\u7EBF\u56FE");
+injectString("zh-TW", "Line chart", "\u6298\u7DDA\u5716");
+injectString("ro-RO", "Line chart", "Grafic liniar");
+injectString("ar", "Line chart", "\u0645\u062E\u0637\u0637 \u062E\u0637\u064A");
+injectString("lt-LT", "Line chart", "Linijin\u0117 diagrama");
+injectString("lv-LV", "Line chart", "L\u012Bniju diagramma");
+injectString("ka-GE", "Line chart", "\u10EE\u10D0\u10D6\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Line chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Line chart", "Joondiagramm");
+injectString("bg-BG", "Line chart", "\u041B\u0438\u043D\u0435\u0439\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 auto_1.Chart.defaults.font = {
-    family: "Roboto",
-    size: 12
+  family: "Roboto",
+  size: 12
 };
 auto_1.Chart.register(auto_1.CategoryScale, auto_1.LinearScale, auto_1.PointElement, auto_1.LineElement, auto_1.Filler);
 const defaultGridStyle = {
-    display: false
+  display: false
 };
 const defaultGridBorderStyle = {
-    display: false
+  display: false
 };
-const getDefaultOptions = (isRtl) => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    layout: {
-        padding: {
-            left: isRtl ? 16 : 0,
-            right: isRtl ? 0 : 16
-        }
+const getDefaultOptions = isRtl => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  layout: {
+    padding: {
+      left: isRtl ? 16 : 0,
+      right: isRtl ? 0 : 16
+    }
+  },
+  scales: {
+    x: {
+      grid: defaultGridStyle,
+      border: defaultGridBorderStyle,
+      reverse: isRtl,
+      offset: false
     },
-    scales: {
-        x: {
-            grid: defaultGridStyle,
-            border: defaultGridBorderStyle,
-            reverse: isRtl,
-            offset: false
-        },
-        y: {
-            grid: defaultGridStyle,
-            border: defaultGridBorderStyle,
-            position: isRtl ? "right" : "left",
-            ticks: {
-                display: false
-            }
-        }
+    y: {
+      grid: defaultGridStyle,
+      border: defaultGridBorderStyle,
+      position: isRtl ? "right" : "left",
+      ticks: {
+        display: false
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
     },
-    plugins: {
-        legend: {
-            display: false
-        },
-        tooltip: {
-            enabled: false
-        }
+    tooltip: {
+      enabled: false
     }
+  }
 });
-const LineChartMini = (_a) => {
-    var _b, _c;
-    var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
-    const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const memoizedFontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const isRtl = (0, useIsRTL_1.useIsRTL)();
-    (0, react_1.useEffect)(() => {
-        auto_1.Chart.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const defaultOptions = (0, react_1.useMemo)(() => getDefaultOptions(isRtl), [isRtl]);
-    const adaptedOptions = (0, utils_1.deepMerge)(defaultOptions, options);
-    if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
-        const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));
-        const newLabels = Array(maxLabelsCount).fill("");
-        newLabels[0] = (_c = data.labels) === null || _c === void 0 ? void 0 : _c[0];
-        newLabels[newLabels.length - 1] = data.labels ? data.labels[data.labels.length - 1] : "";
-        adaptedData.labels = newLabels;
-    }
-    adaptedData.datasets = adaptedData.datasets.map((ds, i) => (0, utils_2.getDefaultDatasetStyle)(ds, i, true));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ options: adaptedOptions, data: adaptedData, "aria-hidden": true }, rest)), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line-mini", data: adaptedData })] }));
+const LineChartMini = _a => {
+  var _b, _c;
+  var {
+      data,
+      options = {}
+    } = _a,
+    rest = __rest(_a, ["data", "options"]);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const narrativeId = (0, react_1.useId)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const memoizedFontSize = (0, react_1.useMemo)(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const isRtl = (0, useIsRTL_1.useIsRTL)();
+  (0, react_1.useEffect)(() => {
+    auto_1.Chart.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const defaultOptions = (0, react_1.useMemo)(() => getDefaultOptions(isRtl), [isRtl]);
+  const adaptedOptions = (0, utils_1.deepMerge)(defaultOptions, options);
+  if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
+    const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));
+    const newLabels = Array(maxLabelsCount).fill("");
+    newLabels[0] = (_c = data.labels) === null || _c === void 0 ? void 0 : _c[0];
+    newLabels[newLabels.length - 1] = data.labels ? data.labels[data.labels.length - 1] : "";
+    adaptedData.labels = newLabels;
+  }
+  adaptedData.datasets = adaptedData.datasets.map((ds, i) => (0, utils_2.getDefaultDatasetStyle)(ds, i, true));
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: "zen-line-chart-mini",
+      tabIndex: 0,
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      role: "figure",
+      "aria-label": translate("Line chart"),
+      "aria-describedby": narrativeId,
+      children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({
+        options: adaptedOptions,
+        data: adaptedData,
+        "aria-hidden": true
+      }, rest))
+    }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, {
+      type: "line-mini",
+      data: adaptedData,
+      narrativeId: narrativeId
+    })]
+  });
 };
-exports.LineChartMini = LineChartMini;
+exports.LineChartMini = LineChartMini;

package/dist/list/itemData/itemData.d.ts

@@ -28,5 +28,6 @@ export interface IItemData {
     isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemData: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;
+declare const ItemDataInner: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemData: typeof ItemDataInner;
 export {};

package/dist/list/itemData/itemDataInternal.d.ts

@@ -27,5 +27,6 @@ export interface IItemData {
     isTall?: boolean;
     target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, isTall, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
+declare const ItemDataInternalInner: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, isTall, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemDataInternal: typeof ItemDataInternalInner;
 export {};

package/dist/list/list.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./list.less";
 import { TListType } from "./interfaces";

package/dist/list/utils/changeOrder.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.changeOrder = void 0;
+exports.changeOrder = changeOrder;
 function changeOrder(data, startPosition, endPosition) {
     const newData = [...data];
     const [movedElement] = newData.splice(startPosition, 1);
     newData.splice(endPosition, 0, movedElement);
     return newData;
 }
-exports.changeOrder = changeOrder;

package/dist/list/utils/isDataListitem.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement, ReactNode } from "react";
 import { IItemData } from "../itemData/itemData";
-export declare const isDataListItem: (item: ReactNode) => item is ReactElement<IItemData, string | import("react").JSXElementConstructor<any>>;
+export declare const isDataListItem: (item: ReactNode) => item is ReactElement<IItemData>;

package/dist/list/viewportProvider/viewportContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IViewportContext {
     isInViewport: (id: string) => boolean;
 }

package/dist/menu/components/controlledMenuList/controlledMenuList.d.ts

@@ -1,4 +1,4 @@
-import { FC, ForwardRefExoticComponent, RefAttributes, ReactNode } from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, PropsWithChildren } from "react";
 import { IMenuControlledItem } from "../menuItem";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 import { IMenuSeparator } from "../menuSeparator";
@@ -19,9 +19,7 @@ export interface IControlledMenuListInternal extends IControlledMenuList {
     isOpen?: boolean;
     setIsOpen?: (v: boolean) => void;
 }
-export declare const ControlledMenuList: ForwardRefExoticComponent<IControlledMenuList & {
-    children?: ReactNode;
-} & RefAttributes<HTMLDivElement>> & {
+export declare const ControlledMenuList: ForwardRefExoticComponent<PropsWithChildren<IControlledMenuList> & RefAttributes<HTMLDivElement>> & {
     Item: FC<IMenuControlledItem>;
     Separator: FC<IMenuSeparator>;
 };

package/dist/menu/components/controlledMenuList/controlledMenuList.js

@@ -11,6 +11,7 @@ const getItemLabel_1 = require("../../utils/getItemLabel");
 const normalizeSeparators_1 = require("../../utils/normalizeSeparators");
 const useMenuPath_1 = require("../../utils/useMenuPath");
 const useLastValidSheet_1 = require("../../utils/useLastValidSheet");
+const useDisplayContent_1 = require("../../utils/useDisplayContent");
 const useMenuListKeyboardNav_1 = require("../../utils/useMenuListKeyboardNav");
 const menuButton_1 = require("../menuButton");
 const iconArrowLeft_1 = require("../../../icons/iconArrowLeft");
@@ -98,6 +99,7 @@ const ControlledMenuListBase = (0, react_1.forwardRef)(({ children, setIsOpen, i
         }
         return [buildListItems(children), null];
     }, [children, isMobile, path, isEmbedded, buildListItems]);
+    const { displayContent, displayParent } = (0, useDisplayContent_1.useDisplayContent)(isOpen, content, parent);
     // Standalone mobile only: compute nested content for the inline MobileSheet.
     const [nestedContent, nestedParent] = (0, react_1.useMemo)(() => {
         if (isEmbedded || !isMobile || path.length === 0) {
@@ -118,7 +120,7 @@ const ControlledMenuListBase = (0, react_1.forwardRef)(({ children, setIsOpen, i
                 applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
             ]), children: [backParent ? ((0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: (0, getItemLabel_1.getItemLabel)(backParent), icon: BackArrowIcon, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
     const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = (0, useLastValidSheet_1.useLastValidSheet)(nestedContent, nestedParent, path, children);
-    return ((0, jsx_runtime_1.jsxs)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && ((0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: sheetParentName }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(displayContent, displayParent, divRefCallback), !isEmbedded && isMobile && ((0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: sheetParentName }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
 });
 ControlledMenuListBase.displayName = "ControlledMenuList";
 exports.ControlledMenuList = ControlledMenuListBase;

package/dist/menu/components/createControlledMenuList.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createControlledMenuList = void 0;
+exports.createControlledMenuList = createControlledMenuList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const controlledMenuList_1 = require("./controlledMenuList/controlledMenuList");
 const menuItem_1 = require("./menuItem");
@@ -52,4 +52,3 @@ function createControlledMenuList(renderContent) {
     result.Separator = menuSeparator_1.MenuSeparator;
     return result;
 }
-exports.createControlledMenuList = createControlledMenuList;

package/dist/menu/components/createMenuItem.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createMenuItem = void 0;
+exports.createMenuItem = createMenuItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const controlledPopup_1 = require("../../controlledPopup/controlledPopup");
@@ -94,4 +94,3 @@ function createMenuItem(renderTrigger, options) {
     CreatedItem.displayName = "MenuItem";
     return CreatedItem;
 }
-exports.createMenuItem = createMenuItem;

package/dist/menu/contexts/usePathContext.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePathContext = void 0;
+exports.usePathContext = usePathContext;
 const react_1 = require("react");
 const pathContext_1 = require("./pathContext");
 function usePathContext() {
     return (0, react_1.useContext)(pathContext_1.PathContext);
 }
-exports.usePathContext = usePathContext;

package/dist/menu/utils/buildMenuContent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildMenuContent = void 0;
+exports.buildMenuContent = buildMenuContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = require("react");
@@ -35,4 +35,3 @@ function buildMenuContent(children, isMobile, setIsOpen, className) {
     });
     return cont;
 }
-exports.buildMenuContent = buildMenuContent;

package/dist/menu/utils/findPrevFocusable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findPrevFocusable = void 0;
+exports.findPrevFocusable = findPrevFocusable;
 const focusableSelector_1 = require("../../utils/focusableSelector");
 function findPrevFocusable(element) {
     if (!element) {
@@ -17,4 +17,3 @@ function findPrevFocusable(element) {
     const focusable = listItemEl.parentNode.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
     return focusable[focusable.length - 1];
 }
-exports.findPrevFocusable = findPrevFocusable;

package/dist/menu/utils/useDisplayContent.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+/**
+ * Freezes the displayed content/parent while the MobileSheet is closing so the
+ * sheet animates out over the submenu the user was in rather than flashing back
+ * to the root list.
+ *
+ * Refs are updated whenever the menu is open. When the user navigates back to
+ * root (parent === null) the frozen state is cleared, so closing from root does
+ * not freeze stale sub-level content.
+ *
+ * ⚠️ Stability contract: `content` and `parent` must be referentially stable
+ * across renders while the menu is open (e.g. produced by `useMemo`).
+ * Passing a new array or object literal on every render will cause the
+ * `useLayoutEffect` to re-run every cycle, defeating the freeze: the ref will
+ * always reflect the latest values so there is nothing to freeze when
+ * `isOpen` transitions to `false`.
+ */
+export declare const useDisplayContent: (isOpen: boolean | undefined, content: ReactElement[], parent: ReactElement | null) => {
+    displayContent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];
+    displayParent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};

package/dist/menu/utils/useDisplayContent.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisplayContent = void 0;
+const react_1 = require("react");
+/**
+ * Freezes the displayed content/parent while the MobileSheet is closing so the
+ * sheet animates out over the submenu the user was in rather than flashing back
+ * to the root list.
+ *
+ * Refs are updated whenever the menu is open. When the user navigates back to
+ * root (parent === null) the frozen state is cleared, so closing from root does
+ * not freeze stale sub-level content.
+ *
+ * ⚠️ Stability contract: `content` and `parent` must be referentially stable
+ * across renders while the menu is open (e.g. produced by `useMemo`).
+ * Passing a new array or object literal on every render will cause the
+ * `useLayoutEffect` to re-run every cycle, defeating the freeze: the ref will
+ * always reflect the latest values so there is nothing to freeze when
+ * `isOpen` transitions to `false`.
+ */
+const useDisplayContent = (isOpen, content, parent) => {
+    const lastRef = (0, react_1.useRef)({ content: [], parent: null });
+    // content and parent are compared by reference — see stability contract above.
+    (0, react_1.useLayoutEffect)(() => {
+        if (isOpen !== false) {
+            lastRef.current = { content, parent };
+        }
+    }, [isOpen, content, parent]);
+    const isFreezing = isOpen === false && lastRef.current.parent !== null;
+    return {
+        displayContent: isFreezing ? lastRef.current.content : content,
+        displayParent: isFreezing ? lastRef.current.parent : parent
+    };
+};
+exports.useDisplayContent = useDisplayContent;

package/dist/menu/utils/useMenuItemKeyboardNav.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuItemKeyboardNav = void 0;
+exports.useMenuItemKeyboardNav = useMenuItemKeyboardNav;
 const react_1 = require("react");
 function useMenuItemKeyboardNav(isOpen, navigatedViaKeyboardRef) {
     const wasOpenRef = (0, react_1.useRef)(false);
@@ -12,4 +12,3 @@ function useMenuItemKeyboardNav(isOpen, navigatedViaKeyboardRef) {
     wasOpenRef.current = isOpen;
     return localOpenedViaKeyboardRef.current;
 }
-exports.useMenuItemKeyboardNav = useMenuItemKeyboardNav;

package/dist/miniTabs/miniTabsHelper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getChildrenForRender = exports.convertChild = exports.getChildren = void 0;
 const react_1 = __importStar(require("react"));

package/dist/mobileSheet/components/mobileSheetTitle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IMobileSheetTitle extends IZenComponentProps {
 }

package/dist/modal/modal.js

@@ -27,13 +27,23 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 } : function (o, v) {
   o["default"] = v;
 });
-var __importStar = this && this.__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  __setModuleDefault(result, mod);
-  return result;
-};
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/nav/context/nav.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface INavContext {
     collapsed: boolean;
     onCollapseToggle?: (isCollapsed: boolean) => void;

package/dist/nav/navFooter/navEditFooter/navEditFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./navEditFooter.less";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
 /**

package/dist/nav/navFooter/navFooter.d.ts

@@ -8,7 +8,7 @@ export interface INavFooter extends IZenComponentProps {
  */
 export declare const NavFooter: FC<INavFooter> & {
     Action: {
-        ({ children }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
+        ({ children, active }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
     Bottom: FC<IZenComponentProps>;

package/dist/nav/navFooter/navFooterAction/navFooterAction.d.ts

@@ -1,11 +1,12 @@
 import "./navFooterAction.less";
 import { PropsWithChildren } from "react";
 export interface INavFooterActionProps extends PropsWithChildren {
+    active?: boolean;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
 export declare const NavFooterAction: {
-    ({ children }: INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ children, active }: INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -48,7 +48,8 @@ const iconSettings4_1 = require("../../../icons/iconSettings4");
  * @beta This component is not fully ready yet and may change in future releases.
  */
 const NavFooterAction = ({
-  children
+  children,
+  active
 }) => {
   const {
     translate
@@ -66,6 +67,7 @@ const NavFooterAction = ({
     title: translate("Configure"),
     menuAlignment: "end-bottom",
     isMenuItem: false,
+    active: active,
     children: filteredItems
   });
 };

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

@@ -3,6 +3,7 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC, ReactNode } from "react";
 import { IIcon } from "../../icons/icon";
 import { TAlignment } from "../../absolute/absolute";
+import { TNavItemType } from "./navItemType";
 interface INavItemCommon extends IZenComponentProps {
     title: string;
     primaryIcon?: FC<IIcon> | ReactNode;
@@ -17,6 +18,7 @@ interface INavItemCommon extends IZenComponentProps {
     isExternalLink?: boolean;
     iconClass?: string;
     isPrimary?: boolean;
+    type?: TNavItemType;
     tabIndex?: 0 | -1;
     isMenuItem?: boolean;
     tooltipAlignment?: TAlignment;