@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/esm/lineChart/lineChart.js

@@ -1,13 +1,11 @@
-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;
+import { injectString } from "../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;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo } from "react";
@@ -20,73 +18,135 @@ import { LEGEND_PLUGIN_ID } from "./plugins/htmlLegend";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
+import { useLanguage } from "../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");
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, TimeScale);
 const defaultGridStyle = {
-    drawTicks: false,
-    color: "#C0CCD8"
+  drawTicks: false,
+  color: "#C0CCD8"
 };
 const defaultGridBorderStyle = {
-    display: false,
-    dash: [2, 2]
+  display: false,
+  dash: [2, 2]
 };
 const defTicksStyle = {
-    padding: 10
+  padding: 10
 };
-const getDefaultOptions = (fontSize) => {
-    const defTitleStyle = {
-        display: true,
-        font: {
-            size: fontSize,
-            weight: "400"
-        }
-    };
-    return {
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            },
-            y: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            }
-        },
-        plugins: {
-            legend: {
-                display: false
-            },
-            tooltip: {
-                enabled: true
-            }
-        }
-    };
+const getDefaultOptions = fontSize => {
+  const defTitleStyle = {
+    display: true,
+    font: {
+      size: fontSize,
+      weight: "400"
+    }
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      },
+      y: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true
+      }
+    }
+  };
 };
 /**
  * @deprecated - will be removed in the next releases.
  */
-export const LineChart = (_a) => {
-    var { data, options = {}, plugins, className } = _a, rest = __rest(_a, ["data", "options", "plugins", "className"]);
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
-    const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
-    adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
-    const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => (el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), { isDrive: isDrive }) : el)), [isDrive, plugins]);
-    return _jsx(Line, Object.assign({ options: adaptedOptions, data: adaptedData, plugins: memoizedPlagins, className: className }, rest));
-};
+export const LineChart = _a => {
+  var {
+      data,
+      options = {},
+      plugins,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "options", "plugins", "className"]);
+  const {
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const memoizedFontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
+  const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
+  adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
+  const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), {
+    isDrive: isDrive
+  }) : el), [isDrive, plugins]);
+  return _jsx("div", {
+    className: "zen-line-chart",
+    tabIndex: 0,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    role: "figure",
+    "aria-label": translate("Line chart"),
+    children: _jsx(Line, Object.assign({
+      options: adaptedOptions,
+      data: adaptedData,
+      plugins: memoizedPlagins,
+      className: className
+    }, rest))
+  });
+};

package/esm/lineChartMini/lineChartMini.d.ts

@@ -1,5 +1,6 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import type { ChartData, ChartOptions } from "chart.js/auto";
+import "./lineChartMini.less";
 export interface ILineChartMini extends IZenComponentProps {
     data: ChartData<"line">;
     options?: ChartOptions<"line">;

package/esm/lineChartMini/lineChartMini.js

@@ -1,16 +1,14 @@
-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;
+import { injectString } from "../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;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useId, useMemo } from "react";
 import { Line } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler } from "chart.js/auto";
 import { deepMerge } from "../commonHelpers/utils";
@@ -20,76 +18,141 @@ import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
 import { useIsRTL } from "../utils/localization/useIsRTL";
 import { AccessibleChart } from "../chart/accessibleChart/accessibleChart";
+import { useLanguage } from "../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");
 ChartJS.defaults.font = {
-    family: "Roboto",
-    size: 12
+  family: "Roboto",
+  size: 12
 };
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, 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
     }
+  }
 });
-export const LineChartMini = (_a) => {
-    var _b, _c;
-    var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    const isRtl = useIsRTL();
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
-    const adaptedOptions = 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) => getDefaultDatasetStyle(ds, i, true));
-    return (_jsxs(_Fragment, { children: [_jsx(Line, Object.assign({ options: adaptedOptions, data: adaptedData, "aria-hidden": true }, rest)), _jsx(AccessibleChart, { type: "line-mini", data: adaptedData })] }));
-};
+export const LineChartMini = _a => {
+  var _b, _c;
+  var {
+      data,
+      options = {}
+    } = _a,
+    rest = __rest(_a, ["data", "options"]);
+  const {
+    translate
+  } = useLanguage();
+  const narrativeId = useId();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const memoizedFontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  const isRtl = useIsRTL();
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
+  const adaptedOptions = 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) => getDefaultDatasetStyle(ds, i, true));
+  return _jsxs(_Fragment, {
+    children: [_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: _jsx(Line, Object.assign({
+        options: adaptedOptions,
+        data: adaptedData,
+        "aria-hidden": true
+      }, rest))
+    }), _jsx(AccessibleChart, {
+      type: "line-mini",
+      data: adaptedData,
+      narrativeId: narrativeId
+    })]
+  });
+};

package/esm/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/esm/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/esm/list/list.d.ts

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

package/esm/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/esm/list/viewportProvider/viewportContext.d.ts

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

package/esm/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/esm/menu/components/controlledMenuList/controlledMenuList.js

@@ -8,6 +8,7 @@ import { getItemLabel } from "../../utils/getItemLabel";
 import { normalizeSeparators } from "../../utils/normalizeSeparators";
 import { useMenuPath } from "../../utils/useMenuPath";
 import { useLastValidSheet } from "../../utils/useLastValidSheet";
+import { useDisplayContent } from "../../utils/useDisplayContent";
 import { useMenuListKeyboardNav } from "../../utils/useMenuListKeyboardNav";
 import { MenuButton } from "../menuButton";
 import { IconArrowLeft } from "../../../icons/iconArrowLeft";
@@ -95,6 +96,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
         }
         return [buildListItems(children), null];
     }, [children, isMobile, path, isEmbedded, buildListItems]);
+    const { displayContent, displayParent } = useDisplayContent(isOpen, content, parent);
     // Standalone mobile only: compute nested content for the inline MobileSheet.
     const [nestedContent, nestedParent] = useMemo(() => {
         if (isEmbedded || !isMobile || path.length === 0) {
@@ -115,7 +117,7 @@ const ControlledMenuListBase = forwardRef(({ children, setIsOpen, isOpen, classN
                 applyDirection && direction === "horizontal" ? "zen-menu-item--horizontal" : ""
             ]), children: [backParent ? (_jsx(MenuButton, { id: "root", name: getItemLabel(backParent), icon: BackArrowIcon, onClick: closeBranch, hasChildren: false, disabled: false }, "root")) : null, listContent] }) }));
     const { sheetContent, sheetParent, sheetPathLength, sheetParentName } = useLastValidSheet(nestedContent, nestedParent, path, children);
-    return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(content, parent, divRefCallback), !isEmbedded && isMobile && (_jsxs(MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [_jsx(MobileSheet.Title, { children: sheetParentName }), _jsx(MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
+    return (_jsxs(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: [renderList(displayContent, displayParent, divRefCallback), !isEmbedded && isMobile && (_jsxs(MobileSheet, { label: sheetParentName, isOpen: path.length > 0, triggerRef: internalRef, onHidePanel: closeAll, onCloseClick: closeAll, children: [_jsx(MobileSheet.Title, { children: sheetParentName }), _jsx(MobileSheet.Content, { children: renderList(sheetContent, sheetPathLength > 1 ? sheetParent : null, undefined, false, onKeyDownVertical) })] }))] }));
 });
 ControlledMenuListBase.displayName = "ControlledMenuList";
 export const ControlledMenuList = ControlledMenuListBase;

package/esm/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/esm/menu/utils/useDisplayContent.js

@@ -0,0 +1,31 @@
+import { useRef, useLayoutEffect } 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 const useDisplayContent = (isOpen, content, parent) => {
+    const lastRef = useRef({ content: [], parent: null });
+    // content and parent are compared by reference — see stability contract above.
+    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
+    };
+};

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

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

package/esm/nav/context/nav.context.d.ts

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

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

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

package/esm/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/esm/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;
 };