@geotab/zenith 3.9.2 → 3.10.0-beta.1

package/README.md

@@ -47,9 +47,21 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
-### 3.9.2
-
-- Fix `ControlledPopup` max-height
+### 3.10.0
+
+- Add `wrap` and `vertical` props to `ListItem`
+- Add `data-analytics-id` prop to `Tab`, `TabItem`, and `Bookmark`
+- `Nav` component: support show/hide separator between Core and Apps sections
+- `Nav` empty state support
+- Allow multiple columns to be disabled in `ColumnsList`
+- Flip icons for Arabic (RTL) language
+- `Dropdown` search and select-all improvements
+- Fix system font fallback in Storybook pages
+- [MYG-128651](https://geotab.atlassian.net/browse/MYG-128651): Update Zenith beta pill parameters to take optional custom text
+- Increase max height of zen popup
+- [MYG-128520](https://geotab.atlassian.net/browse/MYG-128520): Fix SidePanel not animating open due to RTL regression
+- [MYG-121631](https://geotab.atlassian.net/browse/MYG-121631): Add `closeOnScroll` prop to close `ContextMenu` on scroll
+- [MYG-123578](https://geotab.atlassian.net/browse/MYG-123578): Fix checkbox accessibility by moving input inside label wrapper
 
 ### 3.9.1
 

package/dist/absolute/absolute.d.ts

@@ -22,8 +22,14 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    /**
+     * When true, closes the popup on scroll instead of repositioning it.
+     * Mutually exclusive with `recalculateOnScroll` — setting both causes a
+     * wasted position recalculation before the popup closes.
+     */
+    closeOnScroll?: boolean;
     recalculateTrigger?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -47,14 +47,18 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         return "";
     };
     const parent = (0, react_1.useMemo)(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return (0, getScrollableParent_1.getScrollableParent)(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = (0, react_1.useCallback)(() => (0, calculatePosition_1.calculatePosition)(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = (0, react_1.useCallback)(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
-    (0, useScroll_1.useScroll)(calculatePosition, isOpen, parent);
+    (0, useScroll_1.useScroll)(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/dist/alertRaw/alertRaw.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const alertAnimation_1 = __importDefault(require("./components/alertAnimation"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");

package/dist/alertRaw/components/alertAnimation.js

@@ -35,7 +35,7 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             return;
         }
         if (animation === "left-right") {
-            ref.current.animate([{ left: "0%" }, { left: "120%" }], {
+            ref.current.animate([{ insetInlineStart: "0%" }, { insetInlineStart: "120%" }], {
                 duration: 300,
                 iterations: 1,
                 delay: 0,
@@ -46,7 +46,7 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             };
             return;
         }
-        ref.current.animate([{ left: "120%" }, { left: "0%" }], {
+        ref.current.animate([{ insetInlineStart: "120%" }, { insetInlineStart: "0%" }], {
             duration: 300,
             iterations: 1,
             delay: 0,

package/dist/banner/bannerMultipLine.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const bannerUtils_1 = require("./bannerUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");

package/dist/banner/bannerSingleLine.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const button_1 = require("../button/button");
 const buttonType_1 = require("../button/buttonType");

package/dist/betaPill/betaPill.d.ts

@@ -6,26 +6,21 @@ export interface IBetaPillActions {
     link?: string;
     linkOptions?: ILinkOptions;
 }
-/**
- * @internal - temporary escape hatch
- * @deprecated
- */
-export interface IBetaPillBaseInternal {
-    name?: string;
-    description?: string;
-}
 interface IBetaPillBase {
     className?: string;
+    name?: string;
 }
 interface IBetaPillWithActions extends IBetaPillBase {
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    description?: string;
 }
 interface IBetaPillWithoutActions extends IBetaPillBase {
     feedbackAction?: never;
     betaOptionAction?: never;
+    description?: never;
 }
 export type IBetaPill = IBetaPillWithActions | IBetaPillWithoutActions;
-export declare const BetaPill: (props: IBetaPill) => import("react/jsx-runtime").JSX.Element;
+export declare const BetaPill: ({ className, feedbackAction, betaOptionAction, name, description }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/betaPill/betaPill.js

@@ -124,14 +124,13 @@ injectString("zh-Hans", "Beta", "\u6D4B\u8BD5\u7248");
 injectString("zh-TW", "Beta", "\u6E2C\u8A66\u7248");
 injectString("ro-RO", "Beta", "Beta");
 injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
-const BetaPill = props => {
-  const {
-    className,
-    feedbackAction,
-    betaOptionAction,
-    name,
-    description
-  } = props;
+const BetaPill = ({
+  className,
+  feedbackAction,
+  betaOptionAction,
+  name,
+  description
+}) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();

package/dist/bookmark/bookmark.d.ts

@@ -3,6 +3,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IBookmark extends IZenComponentProps {
     bookmarked: boolean;
     onChange: (bookmarkState: boolean) => void;
+    dataAnalyticsId?: string;
 }
-export declare const Bookmark: ({ className, bookmarked, onChange }: IBookmark) => import("react/jsx-runtime").JSX.Element;
+export declare const Bookmark: ({ className, bookmarked, onChange, dataAnalyticsId }: IBookmark) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/bookmark/bookmark.js

@@ -75,7 +75,8 @@ const iconBookmarkSelectedHover_1 = require("../icons/iconBookmarkSelectedHover"
 const Bookmark = ({
   className,
   bookmarked,
-  onChange
+  onChange,
+  dataAnalyticsId
 }) => {
   const [isHovered, setIsHovered] = (0, react_1.useState)(false);
   const {
@@ -108,7 +109,8 @@ const Bookmark = ({
       iconSize: isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large",
       iconClasses: `zen-page-bookmark__icon zen-page-bookmark__icon${bookmarked ? "--active" : "--inactive"}`,
       "aria-label": title,
-      title: title
+      title: title,
+      dataAnalyticsId: dataAnalyticsId
     })
   });
 };

package/dist/card/components/cardButton/cardButton.d.ts

@@ -11,5 +11,6 @@ export interface ICardButton extends IZenIdComponentProps {
     link?: string;
     target?: HTMLAttributeAnchorTarget;
     dataAnalyticsId?: string;
+    ariaLabel?: string;
 }
-export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }: ICardButton) => import("react/jsx-runtime").JSX.Element;
+export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId, ariaLabel }: ICardButton) => import("react/jsx-runtime").JSX.Element;

package/dist/card/components/cardButton/cardButton.js

@@ -12,7 +12,7 @@ const menu_1 = require("../../../menu/menu");
 const useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../../utils/theme/useDrive");
 const toKebabCase_1 = require("../../../utils/toKebabCase");
-const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
+const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId, ariaLabel }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const content = [];
@@ -32,9 +32,9 @@ const CardButton = ({ children, disabled = false, icon, name, onClick, link, cla
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(...args);
     };
-    const renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name })] }));
+    const renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, ariaLabel: ariaLabel, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name })] }));
     const renderButton = () => {
-        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length &&
+        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, ariaLabel: ariaLabel, dataAnalyticsId: analyticsId, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length &&
                     (isOpen ? ((0, jsx_runtime_1.jsx)(iconChevronTopSmall_1.IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })) : ((0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })))] }));
         return content.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] })) : (trigger);
     };

package/dist/checkbox/checkbox.js

@@ -54,10 +54,10 @@ const Checkbox = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
+    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), title: title, children: [checkbox, iconAndLabel] }) }));
 };
 exports.Checkbox = Checkbox;

package/dist/commonStyles/rangeFieldMixin.less

@@ -2,7 +2,7 @@
     display: grid;
     grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
     grid-template-rows: auto auto;
-    gap: 4px 8px;
+    gap: (4 / @rem) (8 / @rem);
     align-items: center;
     justify-items: start;
 }
@@ -12,12 +12,12 @@
     align-items: center;
     justify-items: start;
     grid-template-columns:
-        minmax(24px, 32px)
-        minmax(64px, 64px)
-        minmax(24px, 32px)
-        minmax(24px, 32px)
-        minmax(64px, 64px)
-        minmax(24px, 32px);
-    row-gap: 4px;
-    column-gap: 8px;
+        minmax((24 / @rem), (32 / @rem))
+        minmax((64 / @rem), (64 / @rem))
+        minmax((24 / @rem), (32 / @rem))
+        minmax((24 / @rem), (32 / @rem))
+        minmax((64 / @rem), (64 / @rem))
+        minmax((24 / @rem), (32 / @rem));
+    row-gap: (4 / @rem);
+    column-gap: (8 / @rem);
 }

package/dist/controlledPopup/controlledPopup.d.ts

@@ -23,8 +23,9 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
+    closeOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/dist/controlledPopup/controlledPopup.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const absolute_1 = require("../absolute/absolute");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
-const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const isClientReady = (0, useClientReady_1.useClientReady)();
@@ -24,6 +24,6 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };
 exports.ControlledPopup = ControlledPopup;

package/dist/dataFeed/hooks/useVisibleColumns.js

@@ -10,7 +10,7 @@ const useVisibleColumns = (columnsList, expanded, options) => {
         secondaryColumns = expanded ? columnsList.slice(visibleColumns) : [];
         return { mainColumns, secondaryColumns };
     }
-    mainColumns = columnsList.slice(0, columnsList.length - collapsedColumnsQty);
+    mainColumns = columnsList.slice(0, Math.max(1, columnsList.length - collapsedColumnsQty));
     secondaryColumns = expanded ? columnsList.slice(mainColumns.length) : [];
     return { mainColumns, secondaryColumns };
 };

package/dist/dataGrid/extensions/toBasicColumn.js

@@ -9,8 +9,9 @@ const DEFAULT_META = {
     visibleOnHover: false
 };
 const toBasicColumn = (column) => {
+    var _a;
     const defaultColumn = (0, defaultColumnComponent_1.defaultColumnComponent)(column.id);
     const columnComponent = column.columnComponent || defaultColumn;
-    return Object.assign(Object.assign({}, column), { name: column.name || column.id || "", meta: Object.assign(Object.assign({}, DEFAULT_META), (column.meta || {})), columnComponent: columnComponent, wrappers: column.wrappers || [], colspan: column.colspan || 1 });
+    return Object.assign(Object.assign({}, column), { name: column.name || column.id || "", meta: Object.assign(Object.assign({}, DEFAULT_META), (column.meta || {})), columnComponent: columnComponent, wrappers: column.wrappers || [], alwaysVisible: (_a = column.alwaysVisible) !== null && _a !== void 0 ? _a : false, colspan: column.colspan || 1 });
 };
 exports.toBasicColumn = toBasicColumn;

package/dist/dataGrid/listColumn.d.ts

@@ -17,6 +17,7 @@ export interface IListColumn<T, N = T> {
     meta?: IListColumnMeta<T, N>;
     columnComponent?: IColumnComponent<T, N>;
     wrappers?: IListColumnWrapper<T, N>[];
+    alwaysVisible?: boolean;
     colspan?: undefined | number | ((entity: T | N) => number | undefined);
 }
 export type TRenderResult = ReactNode | PromiseLike<ReactNode | undefined> | undefined;

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.d.ts

@@ -6,10 +6,10 @@ import { IRowEntity } from "../../row/row";
 interface IColumnSettingsList<T extends IRowEntity<T>> extends IZenComponentProps {
     columns: IListFlexibleColumnStrict<T, T>[];
     settings: Map<string, boolean>;
-    firstColumn: string;
+    disabledColumns?: string[];
     onChange?: (newState: Map<string, boolean>) => void;
     sortGroups?: (a: string, b: string) => number;
     sortColumns?: (a: string, b: string) => number;
 }
-export declare function ColumnSettingsList<T extends IRowEntity<T> & IColumnsGroup>({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }: IColumnSettingsList<T>): import("react/jsx-runtime").JSX.Element[];
+export declare function ColumnSettingsList<T extends IRowEntity<T> & IColumnsGroup>({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }: IColumnSettingsList<T>): import("react/jsx-runtime").JSX.Element[];
 export {};

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const groupColumns_1 = require("../../extensions/groupColumns");
 const selectList_1 = require("../../../selectList/selectList");
 const checkboxState_1 = require("../../../checkbox/checkboxState");
-const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortColumns }) => {
+const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
     const id = (0, react_1.useId)();
     const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
         if (sortColumns) {
@@ -17,10 +17,10 @@ const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortC
     const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
         id: c.id,
         title: c.title,
-        disabled: c.name === firstColumn,
+        disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
         showCheckbox: true,
         children: c.title
-    })), [columns, firstColumn, sortColumnsInt]);
+    })), [columns, disabledColumns, sortColumnsInt]);
     const state = columns.reduce((res, c) => {
         res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
         return res;
@@ -39,7 +39,7 @@ const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortC
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] }));
 };
-function ColumnSettingsList({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }) {
+function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
     const groupped = (0, groupColumns_1.groupColumns)(columns);
     const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
         if (sortGroups) {
@@ -49,6 +49,6 @@ function ColumnSettingsList({ columns, settings, firstColumn, onChange, sortGrou
     }, [sortGroups]);
     return Array.from(groupped.entries())
         .sort(sortGroupsInt)
-        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, firstColumn: firstColumn, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
 }
 exports.ColumnSettingsList = ColumnSettingsList;

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -13,6 +13,7 @@ const flexibleColumnWrapper_1 = require("./columns/flexibleColumnWrapper");
 const columnSettings_1 = require("./components/columnSettings");
 const columnSettingsList_1 = require("./components/columnSettingsList");
 const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel");
+const emptySearchList_1 = require("../emptySearchList/emptySearchList");
 const zen_1 = require("../../utils/zen");
 // T - type of entity
 // P - props of wrapped component
@@ -25,6 +26,7 @@ const withFlexibleColumns = (DataGridComponent) => {
         const [isPanelOpen, setIsPanelOpen] = (0, react_1.useState)(false);
         const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
         const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+        const hasConfigurableColumns = (0, react_1.useMemo)(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
         const visibleColumns = (0, react_1.useMemo)(() => {
             const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
             return columnsSettings
@@ -66,10 +68,12 @@ const withFlexibleColumns = (DataGridComponent) => {
             }, 0);
         }), [settingsStore]);
         const listOfColumns = (0, react_1.useMemo)(() => {
-            var _a;
-            const firstColumn = (((_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
+            const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
+            const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
+            const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
+            const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
             const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
-            return ((0, jsx_runtime_1.jsx)(columnSettingsList_1.ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, firstColumn: firstColumn, onChange: async (newSettings) => {
+            return ((0, jsx_runtime_1.jsx)(columnSettingsList_1.ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, disabledColumns: disabledColumns, onChange: async (newSettings) => {
                     const settings = columnsSettings.map(s => {
                         const visible = newSettings.get(s.name) !== false;
                         return Object.assign(Object.assign({}, s), { visible });
@@ -77,7 +81,7 @@ const withFlexibleColumns = (DataGridComponent) => {
                     await saveSettingsToTheStore(settings);
                     onChangeSettings(settings);
                 }, sortGroups: sortGroups, sortColumns: sortColumns }));
-        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, visibleColumns, sortGroups, sortColumns]);
+        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
         const onReorderListener = (0, react_1.useCallback)(async ([from, to]) => {
             if (from === to) {
                 return;
@@ -137,10 +141,15 @@ const withFlexibleColumns = (DataGridComponent) => {
             onResetSettings();
             setIsPanelOpen(false);
         }, [onResetSettings, saveSettingsToTheStore]);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && visibleColumns.length > 0 ? (options.isFeed ? ((0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : ((0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid")] }));
+        (0, react_1.useEffect)(() => {
+            if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
+                popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
+            }
+        }, [popupTriggerRef, hasConfigurableColumns]);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && hasConfigurableColumns ? (options.isFeed ? ((0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : ((0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, visibleColumns.length === 0 && hasConfigurableColumns ? ((0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__empty", children: (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {}) })) : ((0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid"))] }));
     };
     FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
     return FlexibleColumnsComponent;
 };
 exports.withFlexibleColumns = withFlexibleColumns;
-exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations];
+exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];

package/dist/dialog/dialogContent.js

@@ -15,10 +15,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -29,13 +29,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const dialogHelpers_1 = require("./dialogHelpers");
 const classNames_1 = require("../commonHelpers/classNames/classNames");

package/dist/dropdownRaw/dropdownHelper.d.ts

@@ -31,7 +31,7 @@ export declare const checkIsDataProblem: (selectedIds: string[], groupsMap: IDro
 export declare const getStringFromSelected: (selectedIds: string[], groupsMapSelected: IDropdownState["groupsMapSelected"], translate: (s: string) => string, rootId: string) => string;
 export declare const getStringFromAllSelected: (groupsMap: IDropdownState["groupsMap"], translate: (s: string) => string, rootId: string) => string;
 export declare const getSelectedCount: (selectedIds: string[]) => number;
-export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog") => {
+export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog" | "buttonWithMenu") => {
     readonly role: "combobox";
     readonly "aria-haspopup": "listbox";
 } | {
@@ -40,4 +40,7 @@ export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "
 } | {
     readonly role: "button";
     readonly "aria-haspopup": "dialog";
+} | {
+    readonly role: "button";
+    readonly "aria-haspopup": "menu";
 };

package/dist/dropdownRaw/dropdownHelper.js

@@ -167,7 +167,8 @@ exports.getSelectedCount = getSelectedCount;
 const ALLY_TRIGGER_PROPS = {
     selectOnlyCombobox: { role: "combobox", "aria-haspopup": "listbox" },
     comboboxWithDialog: { role: "combobox", "aria-haspopup": "dialog" },
-    buttonWithDialog: { role: "button", "aria-haspopup": "dialog" }
+    buttonWithDialog: { role: "button", "aria-haspopup": "dialog" },
+    buttonWithMenu: { role: "button", "aria-haspopup": "menu" }
 };
 const getAllyTriggerProps = (allyPattern) => ALLY_TRIGGER_PROPS[allyPattern];
 exports.getAllyTriggerProps = getAllyTriggerProps;

package/dist/dropdownRaw/dropdownRaw.js

@@ -910,7 +910,7 @@ const DropdownRaw = props => {
     if (searchField) {
       return "comboboxWithDialog";
     }
-    return "buttonWithDialog";
+    return "buttonWithMenu";
   }, [searchField, multiselect]);
   if (isReadOnly) {
     // TODO: how many items should we show?
@@ -990,7 +990,7 @@ const DropdownRaw = props => {
       isSearchInPopup: chip,
       mobileSheetStackingClassName: mobileSheetStackingClassName,
       handleFocusOnSentinelItem: handleFocusOnSentinelItem,
-      role: memoizedAllyPattern === "selectOnlyCombobox" ? false : "dialog",
+      role: memoizedAllyPattern === "selectOnlyCombobox" || memoizedAllyPattern === "buttonWithMenu" ? false : "dialog",
       children: getPopupContent
     })]
   });