@geotab/zenith 3.9.1 → 3.10.0-beta.0

package/README.md

@@ -47,6 +47,17 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 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
+
 ### 3.9.1
 
 - Fix `GroupsButton` styles

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/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/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/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
     })]
   });

package/dist/dropdownRaw/dropdownTrigger.d.ts

@@ -24,7 +24,7 @@ export interface IDropdownTrigger extends IZenComponentProps {
     onBlur?: () => void;
     popupId?: string;
     handleFocusOnPopup?: () => void;
-    allyPattern?: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog";
+    allyPattern?: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog" | "buttonWithMenu";
 }
 export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, ...otherProps }: IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/dropdownRaw/dropdownTrigger.js

@@ -25,7 +25,7 @@ const DropdownTrigger = (_a) => {
         handleClick(!isActive);
     };
     const allyTriggerProps = (0, react_1.useMemo)(() => (0, dropdownHelper_1.getAllyTriggerProps)(allyPattern), [allyPattern]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchField ? ((0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps))) : ((0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || placeholder, "aria-expanded": isActive, "aria-controls": popupId }, allyTriggerProps, otherProps, { children: currentSelection ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchField ? ((0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps))) : ((0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || currentSelection || placeholder, "aria-expanded": isActive, "aria-controls": popupId }, allyTriggerProps, otherProps, { children: currentSelection ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
                     "zen-dropdown__trigger-button-text",
                     buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""
                 ]), children: currentSelection })) : (placeholder) }))) }));

package/dist/fileUpload/components/uploadedFilesSection.js

@@ -46,7 +46,7 @@ injectString("zh-TW", "Uploaded", "Uploaded");
 injectString("ro-RO", "Uploaded", "Uploaded");
 injectString("ar-SA", "Uploaded", "\u062A\u0645 \u0627\u0644\u0631\u0641\u0639");
 injectString("cs", "Remove", "Odebrat");
-injectString("da-DK", "Remove", "Fjerne");
+injectString("da-DK", "Remove", "Fjern");
 injectString("de", "Remove", "Entfernen");
 injectString("en", "Remove", "Remove");
 injectString("es", "Remove", "Eliminar");
@@ -68,9 +68,9 @@ injectString("sk-SK", "Remove", "Odstr\xE1ni\u0165");
 injectString("sv", "Remove", "Ta bort");
 injectString("th", "Remove", "\u0E25\u0E1A");
 injectString("tr", "Remove", "Kald\u0131r");
-injectString("zh-Hans", "Remove", "\u5220\u9664");
+injectString("zh-Hans", "Remove", "\u79FB\u9664");
 injectString("zh-TW", "Remove", "\u79FB\u9664");
-injectString("ro-RO", "Remove", "Elimina\u021Bi");
+injectString("ro-RO", "Remove", "Elimin\u0103");
 injectString("ar-SA", "Remove", "\u0625\u0632\u0627\u0644\u0629");
 const getFileIcon = file => {
   var _a;

package/dist/filters/components/filtersSavedChipComponent.js

@@ -154,7 +154,7 @@ injectString("zh-TW", "This filter is currently applied.", "This filter is curre
 injectString("ro-RO", "This filter is currently applied.", "This filter is currently applied.");
 injectString("ar-SA", "This filter is currently applied.", "\u0647\u0630\u0647 \u0627\u0644\u062A\u0635\u0641\u064A\u0629 \u0645\u0637\u0628\u0642\u0629 \u062D\u0627\u0644\u064A\u0627\u064B.");
 injectString("cs", "Remove", "Odebrat");
-injectString("da-DK", "Remove", "Fjerne");
+injectString("da-DK", "Remove", "Fjern");
 injectString("de", "Remove", "Entfernen");
 injectString("en", "Remove", "Remove");
 injectString("es", "Remove", "Eliminar");
@@ -176,9 +176,9 @@ injectString("sk-SK", "Remove", "Odstr\xE1ni\u0165");
 injectString("sv", "Remove", "Ta bort");
 injectString("th", "Remove", "\u0E25\u0E1A");
 injectString("tr", "Remove", "Kald\u0131r");
-injectString("zh-Hans", "Remove", "\u5220\u9664");
+injectString("zh-Hans", "Remove", "\u79FB\u9664");
 injectString("zh-TW", "Remove", "\u79FB\u9664");
-injectString("ro-RO", "Remove", "Elimina\u021Bi");
+injectString("ro-RO", "Remove", "Elimin\u0103");
 injectString("ar-SA", "Remove", "\u0625\u0632\u0627\u0644\u0629");
 injectString("cs", "Remove filter", "Odebrat filtr");
 injectString("da-DK", "Remove filter", "Fjern filter");

package/dist/filters/components/filtersSearchItemData.js

@@ -14,7 +14,7 @@ const button_1 = require("../../button/button");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconClose_1 = require("../../icons/iconClose");
 injectString("cs", "Remove", "Odebrat");
-injectString("da-DK", "Remove", "Fjerne");
+injectString("da-DK", "Remove", "Fjern");
 injectString("de", "Remove", "Entfernen");
 injectString("en", "Remove", "Remove");
 injectString("es", "Remove", "Eliminar");
@@ -36,9 +36,9 @@ injectString("sk-SK", "Remove", "Odstr\xE1ni\u0165");
 injectString("sv", "Remove", "Ta bort");
 injectString("th", "Remove", "\u0E25\u0E1A");
 injectString("tr", "Remove", "Kald\u0131r");
-injectString("zh-Hans", "Remove", "\u5220\u9664");
+injectString("zh-Hans", "Remove", "\u79FB\u9664");
 injectString("zh-TW", "Remove", "\u79FB\u9664");
-injectString("ro-RO", "Remove", "Elimina\u021Bi");
+injectString("ro-RO", "Remove", "Elimin\u0103");
 injectString("ar-SA", "Remove", "\u0625\u0632\u0627\u0644\u0629");
 const SearchItemContent = ({
   icon,

package/dist/filters/components/filtersSidePanel.js

@@ -229,10 +229,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");
@@ -243,13 +243,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 zen_1 = require("../../utils/zen");
 const SELECTED_TAB_ID = "Selected";

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -137,10 +137,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");
@@ -151,13 +151,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 useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");