@geotab/zenith 3.12.0-beta.0 → 3.12.1

package/README.md

@@ -47,53 +47,11 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 Markdown reference for each component (used by AI tooling and IRIS) lives in [`documentation/components/`](./documentation/components/). These are kept in sync with the source via the [`/zenith-doc-sync`](https://git.geotab.com/ai-hub/skill-playground/skill-workflow-zenith-doc-sync) skill when component code changes.
 
-## Testing
-
-### Quarantining Jest Tests
-
-Sisyphus can quarantine flaky Jest tests and auto-create follow-up tickets. To quarantine a test, the quarantine annotations **must be commented out** (Jest has no native trait attribute support) and placed inside the `describe` block, directly above the `test.skip` or `it.skip`.
-
-In the case the `test` syntax is used:
-
-```typescript
-describe("fooTestParent", () => {
-    // [Trait("QuarantinedReason", "Failed in main")] // This trait must be exactly the same, reason must be non-empty (or use a different reason)
-    // [Trait("QuarantinedTestTicketLink", "")] // This trait must be exactly the same (or a ticket can be added)
-    test.skip("fooTest", async () => {
-        // Insert test code
-    });
-});
-```
-
-Or, in case the `it` syntax is used instead:
-
-```typescript
-describe("fooTestParent", () => {
-    // [Trait("QuarantinedReason", "Failed in main")] // This trait must be exactly the same, reason must be non-empty (or use a different reason)
-    // [Trait("QuarantinedTestTicketLink", "")] // This trait must be exactly the same (or a ticket can be added)
-    it.skip("fooTest", async () => {
-        // Insert test code
-    });
-});
-```
-
-Or, for parameterized tests (`test.each` / `it.each`):
-
-```typescript
-describe("fooTestParent", () => {
-    // [Trait("QuarantinedReason", "Failed in main")] // This trait must be exactly the same, reason must be non-empty (or use a different reason)
-    // [Trait("QuarantinedTestTicketLink", "")] // This trait must be exactly the same (or a ticket can be added)
-    test.skip.each([...])("fooTest %s", async (param) => {
-        // Insert test code
-    });
-});
-```
-
-NOTE: `.skip` goes between `test`/`it` and `.each` — use `test.skip.each(...)`, not `test.each.skip(...)`.
+## Change log
 
-NOTE: this will not work in the case of adding quarantine annotations to a `describe` block.
+### 3.12.1
 
-## Change log
+- Fix CSS custom properties in `Nav` component
 
 ### 3.12.0
 

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -25,33 +25,33 @@ const useLanguage_1 = require("../../utils/localization/useLanguage");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
-injectString("da-DK", "Column Settings", "Kolonneindstillinger");
-injectString("de", "Column Settings", "Spalteneinstellungen");
-injectString("en", "Column Settings", "Column Settings");
-injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
-injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
-injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
-injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
-injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
-injectString("id", "Column Settings", "Pengaturan Kolom");
-injectString("it", "Column Settings", "Impostazioni colonna");
-injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
-injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
-injectString("ms", "Column Settings", "Tetapan Lajur");
-injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
-injectString("nl", "Column Settings", "Kolominstellingen");
-injectString("pl", "Column Settings", "Ustawienia kolumn");
-injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
-injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
-injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
-injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
-injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
-injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
-injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
-injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
-injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
-injectString("ar", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
+injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
+injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
+injectString("en", "Select visible columns", "Select visible columns");
+injectString("es", "Select visible columns", "Seleccionar columnas visibles");
+injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
+injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
+injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
+injectString("it", "Select visible columns", "Selezionare colonne visibili");
+injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
+injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
+injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
+injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
+injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
+injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
+injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("pt-PT", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("sk-SK", "Select visible columns", "Vybra\u0165 vidite\u013En\xE9 st\u013Apce");
+injectString("sv", "Select visible columns", "V\xE4lj synbara kolumner");
+injectString("th", "Select visible columns", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E44\u0E14\u0E49");
+injectString("tr", "Select visible columns", "G\xF6r\xFCn\xFCr s\xFCtunlar\u0131 se\xE7");
+injectString("zh-Hans", "Select visible columns", "\u9009\u62E9\u53EF\u89C1\u5217");
+injectString("zh-TW", "Select visible columns", "\u9078\u53D6\u53EF\u898B\u6B04");
+injectString("ro-RO", "Select visible columns", "Selecta\u021Bi coloanele vizibile");
+injectString("ar", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
 const withFlexibleColumns = DataGridComponent => {
   const FlexibleColumnsComponent = props => {
     var _a, _b;
@@ -218,7 +218,7 @@ const withFlexibleColumns = DataGridComponent => {
           children: listOfColumns
         })
       }) : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
-        ariaLabel: translate("Column Settings"),
+        ariaLabel: translate("Select visible columns"),
         triggerRef: popupTriggerRef,
         alignment: "bottom-right",
         children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
@@ -238,4 +238,4 @@ const withFlexibleColumns = DataGridComponent => {
   return FlexibleColumnsComponent;
 };
 exports.withFlexibleColumns = withFlexibleColumns;
-exports.withFlexibleColumns.translations = ["Column Settings", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];
+exports.withFlexibleColumns.translations = ["Select visible columns", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];

package/dist/index.css

@@ -17764,14 +17764,14 @@ html:lang(ar) .zen-mini-tabs {
   margin: 0;
 }
 .zen-nav {
-  --nav-gap: (16 / 16rem);
-  --nav-items-gap: (8 / 16rem);
-  --nav-bottom-padding: (12 / 16rem);
-  --nav-top-padding: (9 / 16rem);
-  --nav-left-right-padding: (12 / 16rem);
-  --nav-left-right-collapsed-padding: (8 / 16rem);
-  --nav-top-collapsed-padding: (20 / 16rem);
-  --nav-top-bottom-mobile-padding: (12 / 16rem);
+  --nav-gap: 1rem;
+  --nav-items-gap: 0.5rem;
+  --nav-bottom-padding: 0.75rem;
+  --nav-top-padding: 0.5625rem;
+  --nav-left-right-padding: 0.75rem;
+  --nav-left-right-collapsed-padding: 0.5rem;
+  --nav-top-collapsed-padding: 1.25rem;
+  --nav-top-bottom-mobile-padding: 0.75rem;
   --nav-background-color: var(--backgrounds-content-1);
   box-sizing: border-box;
   display: flex;

package/dist/menu/utils/useMenuItemCore.js

@@ -6,16 +6,13 @@ const pathContext_1 = require("../contexts/pathContext");
 const headerContext_1 = require("../../header/headerContext");
 const buildMenuContent_1 = require("./buildMenuContent");
 const useMenuItemKeyboardNav_1 = require("./useMenuItemKeyboardNav");
-const directionContext_1 = require("../../utils/localization/directionContext");
 /**
  * Core menu item logic shared between MenuItem and createMenuItem.
  * Consolidates context access, state computation, and callback memoization.
  */
 const useMenuItemCore = ({ id, children, className, alignment, isMobile = false, setIsOpen, onClick, onOpenChange }) => {
     const alignmentContext = (0, react_1.useContext)(headerContext_1.MenuAlignmentContext);
-    const direction = (0, react_1.useContext)(directionContext_1.directionContext);
-    const defaultAlignment = direction === "rtl" ? "left-top" : "right-top";
-    const contentAlignment = alignment || alignmentContext.alignment || defaultAlignment;
+    const contentAlignment = alignment || alignmentContext.alignment || "end-top";
     const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = (0, react_1.useContext)(pathContext_1.PathContext);
     const ref = (0, react_1.useRef)(null);
     const content = (0, react_1.useMemo)(() => (0, buildMenuContent_1.buildMenuContent)(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);

package/dist/summaryTile/summaryTile.d.ts

@@ -19,7 +19,7 @@ export declare enum SummaryTileSize {
     Small = "small",
     Medium = "medium"
 }
-export interface ISummaryTile extends IZenComponentProps, IZenGridItem, React.AriaAttributes {
+export interface ISummaryTile extends IZenComponentProps, IZenGridItem, Pick<React.AriaAttributes, "aria-selected" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-busy"> {
     /** ARIA role forwarded to the root element. */
     role?: React.AriaRole;
     /**

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -17,33 +17,33 @@ import { useLanguage } from "../../utils/localization/useLanguage";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
-injectString("da-DK", "Column Settings", "Kolonneindstillinger");
-injectString("de", "Column Settings", "Spalteneinstellungen");
-injectString("en", "Column Settings", "Column Settings");
-injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
-injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
-injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
-injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
-injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
-injectString("id", "Column Settings", "Pengaturan Kolom");
-injectString("it", "Column Settings", "Impostazioni colonna");
-injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
-injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
-injectString("ms", "Column Settings", "Tetapan Lajur");
-injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
-injectString("nl", "Column Settings", "Kolominstellingen");
-injectString("pl", "Column Settings", "Ustawienia kolumn");
-injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
-injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
-injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
-injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
-injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
-injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
-injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
-injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
-injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
-injectString("ar", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
+injectString("cs", "Select visible columns", "Vyberte viditeln\xE9 sloupce");
+injectString("da-DK", "Select visible columns", "V\xE6lg synlige kolonner");
+injectString("de", "Select visible columns", "Sichtbare Spalten ausw\xE4hlen");
+injectString("en", "Select visible columns", "Select visible columns");
+injectString("es", "Select visible columns", "Seleccionar columnas visibles");
+injectString("fi-FI", "Select visible columns", "Valitse n\xE4kyv\xE4t sarakkeet");
+injectString("fr", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("fr-FR", "Select visible columns", "S\xE9lectionner les colonnes visibles");
+injectString("hu-HU", "Select visible columns", "L\xE1that\xF3 oszlopok kiv\xE1laszt\xE1sa");
+injectString("id", "Select visible columns", "Pilih kolom yang terlihat");
+injectString("it", "Select visible columns", "Selezionare colonne visibili");
+injectString("ja", "Select visible columns", "\u8868\u793A\u5217\u3092\u9078\u629E");
+injectString("ko-KR", "Select visible columns", "\uD45C\uC2DC\uB418\uB294 \uC5F4 \uC120\uD0DD");
+injectString("ms", "Select visible columns", "Pilih lajur yang boleh dilihat");
+injectString("nb-NO", "Select visible columns", "Velg synlige kolonner");
+injectString("nl", "Select visible columns", "Zichtbare kolommen selecteren");
+injectString("pl", "Select visible columns", "Wybierz widoczne kolumny");
+injectString("pt-BR", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("pt-PT", "Select visible columns", "Selecionar colunas vis\xEDveis");
+injectString("sk-SK", "Select visible columns", "Vybra\u0165 vidite\u013En\xE9 st\u013Apce");
+injectString("sv", "Select visible columns", "V\xE4lj synbara kolumner");
+injectString("th", "Select visible columns", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C\u0E17\u0E35\u0E48\u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E44\u0E14\u0E49");
+injectString("tr", "Select visible columns", "G\xF6r\xFCn\xFCr s\xFCtunlar\u0131 se\xE7");
+injectString("zh-Hans", "Select visible columns", "\u9009\u62E9\u53EF\u89C1\u5217");
+injectString("zh-TW", "Select visible columns", "\u9078\u53D6\u53EF\u898B\u6B04");
+injectString("ro-RO", "Select visible columns", "Selecta\u021Bi coloanele vizibile");
+injectString("ar", "Select visible columns", "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0623\u0639\u0645\u062F\u0629 \u0627\u0644\u0645\u0631\u0626\u064A\u0629");
 export const withFlexibleColumns = DataGridComponent => {
   const FlexibleColumnsComponent = props => {
     var _a, _b;
@@ -210,7 +210,7 @@ export const withFlexibleColumns = DataGridComponent => {
           children: listOfColumns
         })
       }) : _jsx(Popup, {
-        ariaLabel: translate("Column Settings"),
+        ariaLabel: translate("Select visible columns"),
         triggerRef: popupTriggerRef,
         alignment: "bottom-right",
         children: _jsx(ColumnSettings, {
@@ -229,4 +229,4 @@ export const withFlexibleColumns = DataGridComponent => {
   FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
   return FlexibleColumnsComponent;
 };
-withFlexibleColumns.translations = ["Column Settings", ...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];
+withFlexibleColumns.translations = ["Select visible columns", ...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];

package/esm/menu/utils/useMenuItemCore.js

@@ -3,16 +3,13 @@ import { PathContext } from "../contexts/pathContext";
 import { MenuAlignmentContext } from "../../header/headerContext";
 import { buildMenuContent } from "./buildMenuContent";
 import { useMenuItemKeyboardNav } from "./useMenuItemKeyboardNav";
-import { directionContext } from "../../utils/localization/directionContext";
 /**
  * Core menu item logic shared between MenuItem and createMenuItem.
  * Consolidates context access, state computation, and callback memoization.
  */
 export const useMenuItemCore = ({ id, children, className, alignment, isMobile = false, setIsOpen, onClick, onOpenChange }) => {
     const alignmentContext = useContext(MenuAlignmentContext);
-    const direction = useContext(directionContext);
-    const defaultAlignment = direction === "rtl" ? "left-top" : "right-top";
-    const contentAlignment = alignment || alignmentContext.alignment || defaultAlignment;
+    const contentAlignment = alignment || alignmentContext.alignment || "end-top";
     const { path, onOpenBranch, closeBranch, navigatedViaKeyboardRef } = useContext(PathContext);
     const ref = useRef(null);
     const content = useMemo(() => buildMenuContent(children, isMobile, setIsOpen, className), [children, isMobile, setIsOpen, className]);

package/esm/summaryTile/summaryTile.d.ts

@@ -19,7 +19,7 @@ export declare enum SummaryTileSize {
     Small = "small",
     Medium = "medium"
 }
-export interface ISummaryTile extends IZenComponentProps, IZenGridItem, React.AriaAttributes {
+export interface ISummaryTile extends IZenComponentProps, IZenGridItem, Pick<React.AriaAttributes, "aria-selected" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-busy"> {
     /** ARIA role forwarded to the root element. */
     role?: React.AriaRole;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.12.0-beta.0",
+    "version": "3.12.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",