@geotab/zenith 3.9.2 → 3.10.0-beta.1

package/esm/menu/controlledMenu.js

@@ -20,7 +20,7 @@ import { generateId } from "../commonHelpers/generateId";
 import { PathProvider } from "./contexts/pathProvider";
 import { isSeparator, MenuSeparator } from "./components/menuSeparator";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
-export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
+export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = useState(DeviceType.Desktop);
     const isMobile = deviceType === DeviceType.Mobile;
     const memoizedOnChange = useCallback(setIsOpen, [setIsOpen]);
@@ -215,7 +215,7 @@ export const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLa
     if (isMobile) {
         return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsxs(MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [_jsx(MobileSheet.Title, { children: title }), _jsx(MobileSheet.Content, { children: renderMenuList() })] }) }) }));
     }
-    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+    return (_jsx(_Fragment, { children: _jsx(PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: _jsx(ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: classNames(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, closeOnScroll: closeOnScroll, 
                 // focusOnOpen is false - ControlledMenu handles focus based on input method
                 // (keyboard vs mouse) in its own useEffect
                 focusOnOpen: false, children: renderMenuList() }) }) }));

package/esm/mobileSheet/mobileSheet.js

@@ -51,10 +51,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");
@@ -65,13 +65,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");
 export const MobileSheet = ({
   /* eslint-enable @typescript-eslint/naming-convention */

package/esm/modal/modal.js

@@ -27,10 +27,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");
@@ -41,13 +41,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");
 export const Modal = ({
   isOpen,

package/esm/nav/nav.d.ts

@@ -1,5 +1,7 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./nav.less";
+import { FC } from "react";
+import { NavEmpty } from "./navEmpty/navEmpty";
 export interface INav extends IZenComponentProps {
     mobileBarContainer: HTMLElement | null;
     collapsed?: boolean;
@@ -8,8 +10,12 @@ export interface INav extends IZenComponentProps {
     isMobileMenuOpen?: boolean;
     onIsMobileMenuOpenToggle?: (isOpen: boolean) => void;
     onEditModeToggle?: (isEdit: boolean) => void;
+    showEmptyState?: boolean;
+    showSectionDividers?: boolean;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen, onIsMobileMenuOpenToggle, onEditModeToggle }: INav) => import("react/jsx-runtime").JSX.Element;
+export declare const Nav: FC<INav> & {
+    Empty: typeof NavEmpty;
+};

package/esm/nav/nav.js

@@ -10,6 +10,8 @@ import { NavMobileBar } from "./navMobileBar/navMobileBar";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { zen } from "../utils/zen";
+import { EmptyState } from "../emptyState/emptyState";
+import { NavEmpty } from "./navEmpty/navEmpty";
 const NavContent = ({ children }) => {
     const { isEditState } = useNavContext();
     const contentRef = useRef(null);
@@ -51,7 +53,8 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle, showEmptyState = false, showSectionDividers = true
 // eslint-disable-next-line complexity
  }) => {
     const menuRef = useRef(null);
@@ -88,8 +91,11 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const secondaryFooter = footer && filterPrimaryNavItems(footer, true);
     const primaryFooter = footer && filterPrimaryNavItems(footer, false);
     const footerToRender = isEditState ? editFooter : isMobile ? secondaryFooter : footer;
+    const isCollapsedEmptyState = !isEditState && showEmptyState && collapsed && !isMobile;
+    const shouldRenderEmptyState = !isEditState && showEmptyState && !isCollapsedEmptyState;
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => collectNavItems(e));
     const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditSection"; });
+    const navEmptyChild = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEmpty"; });
     const onSearchOpen = useCallback((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
@@ -151,9 +157,8 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
                     className || ""
                 ]), children: [header
                         ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) }))
-                        : null, _jsx(NavContent, { children: isEditState
-                            ? editListItems
-                            : sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
-                                        className: classNames(["zen-nav__section", section.props.className || ""])
-                                    }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })) : null, mobileBarContainer && isMobile && navMobileBarPortal] }));
+                        : null, _jsx(NavContent, { children: isEditState ? (editListItems) : isCollapsedEmptyState ? null : shouldRenderEmptyState ? (_jsx("div", { className: "zen-nav__empty-state", children: _jsx(EmptyState, { description: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.description, image: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.image, children: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.children }) })) : (sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
+                                    className: classNames(["zen-nav__section", section.props.className || ""])
+                                }), showSectionDividers && (isMobile || index < sectionsToRender.length - 1) ? _jsx(NavDivider, {}) : null] }, index)))) }), footerToRender] })) : null, mobileBarContainer && isMobile && navMobileBarPortal] }));
 };
+Nav.Empty = NavEmpty;

package/esm/nav/navEmpty/navEmpty.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface INavEmpty {
+    description?: string;
+    image?: ReactNode | React.FC;
+    children?: ReactNode;
+}
+export declare const NavEmpty: {
+    (_: INavEmpty): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/nav/navEmpty/navEmpty.js

@@ -0,0 +1,3 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const NavEmpty = (_) => _jsx(_Fragment, {});
+NavEmpty.displayName = "NavEmpty";

package/esm/notification/notification.js

@@ -16,10 +16,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");
@@ -30,13 +30,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");
 export const Notification = ({
   id,

package/esm/notification/pushNotification/pushNotification.js

@@ -6,7 +6,7 @@ export const PushNotification = ({ children, isOpen }) => {
         if (!ref.current || !isOpen) {
             return;
         }
-        ref.current.animate([{ left: "120%" }, { left: "0%" }], {
+        ref.current.animate([{ insetInlineStart: "120%" }, { insetInlineStart: "0%" }], {
             duration: 150,
             iterations: 1,
             delay: 0

package/esm/pill/components/pillNonActionable/pillNonActionable.js

@@ -13,10 +13,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");
@@ -27,13 +27,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");
 export const NonActionablePill = ({
   icon,

package/esm/pillExpandable/pillExpandable.js

@@ -27,24 +27,24 @@ injectString("es", "View all", "Ver todo");
 injectString("fi-FI", "View all", "N\xE4yt\xE4 kaikki");
 injectString("fr", "View all", "Afficher tout");
 injectString("fr-FR", "View all", "Tout afficher");
-injectString("hu-HU", "View all", "Mutasd az \xF6sszeset.");
+injectString("hu-HU", "View all", "\xD6sszes megtekint\xE9se");
 injectString("id", "View all", "Lihat semua");
 injectString("it", "View all", "Visualizzare tutto");
 injectString("ja", "View all", "\u3059\u3079\u3066\u8868\u793A");
 injectString("ko-KR", "View all", "\uC804\uCCB4 \uBCF4\uAE30");
 injectString("ms", "View all", "Lihat semua");
-injectString("nb-NO", "View all", "Se alle");
+injectString("nb-NO", "View all", "Vis alle");
 injectString("nl", "View all", "Alles weergeven");
 injectString("pl", "View all", "Wy\u015Bwietl wszystkie");
 injectString("pt-BR", "View all", "Visualizar tudo");
-injectString("pt-PT", "View all", "Visualizar tudo");
+injectString("pt-PT", "View all", "Ver tudo");
 injectString("sk-SK", "View all", "Zobrazi\u0165 v\u0161etko");
 injectString("sv", "View all", "Visa alla");
 injectString("th", "View all", "\u0E14\u0E39\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
 injectString("tr", "View all", "T\xFCm\xFCn\xFC g\xF6r\xFCnt\xFCle");
 injectString("zh-Hans", "View all", "\u67E5\u770B\u5168\u90E8");
 injectString("zh-TW", "View all", "\u6AA2\u8996\u5168\u90E8");
-injectString("ro-RO", "View all", "Afi\u0219a\u021Bi tot");
+injectString("ro-RO", "View all", "Vezi tot");
 injectString("ar-SA", "View all", "\u0639\u0631\u0636 \u0627\u0644\u0643\u0644");
 injectString("cs", "Expand", "Rozbalit");
 injectString("da-DK", "Expand", "Udvid");

package/esm/table/detailPanel/detailPanelHeader.js

@@ -37,10 +37,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");
@@ -51,13 +51,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");
 export const DetailPanelHeader = ({
   id,

package/esm/table/flexible/columnsList.d.ts

@@ -16,10 +16,9 @@ export interface IColumnsGroup {
 interface IColumnSettingsList<T extends IRowEntity<N>, N extends IEntityWithId> extends IZenComponentProps {
     columns: IListColumn<T, N>[];
     settings: Map<string, boolean>;
-    firstColumn: 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<N>, N extends IEntityWithId>({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }: IColumnSettingsList<T, N>): import("react/jsx-runtime").JSX.Element[];
+export declare function ColumnSettingsList<T extends IRowEntity<N>, N extends IEntityWithId>({ columns, settings, onChange, sortGroups, sortColumns }: IColumnSettingsList<T, N>): import("react/jsx-runtime").JSX.Element[];
 export {};

package/esm/table/flexible/columnsList.js

@@ -36,7 +36,7 @@ const SubColumnsList = ({
   title,
   columns,
   settings,
-  firstColumn,
+  lastVisibleColumnId,
   onChange,
   sortColumns
 }) => {
@@ -53,10 +53,10 @@ const SubColumnsList = ({
   const items = useMemo(() => columns.sort(sortColumnsInt).map(c => ({
     id: c.id,
     title: c.title,
-    disabled: c.id === firstColumn,
+    disabled: !!c.alwaysVisible || c.id === lastVisibleColumnId,
     showCheckbox: true,
     children: c.title
-  })), [columns, firstColumn, sortColumnsInt]);
+  })), [columns, sortColumnsInt, lastVisibleColumnId]);
   const state = columns.reduce((res, c) => {
     res.set(c.id, settings.get(c.id) !== false ? CheckboxState.On : CheckboxState.Off);
     return res;
@@ -92,7 +92,6 @@ const SubColumnsList = ({
 export function ColumnSettingsList({
   columns,
   settings,
-  firstColumn,
   onChange,
   sortGroups,
   sortColumns
@@ -104,11 +103,13 @@ export function ColumnSettingsList({
     }
     return 0;
   }, [sortGroups]);
+  const visibleColumns = columns.filter(c => settings.get(c.id) !== false);
+  const lastVisibleColumnId = visibleColumns.length === 1 ? visibleColumns[0].id : undefined;
   return Array.from(groupped.entries()).sort(sortGroupsInt).map(([title, cs]) => _jsx(SubColumnsList, {
     title: title,
     columns: cs,
     settings: settings,
-    firstColumn: firstColumn,
+    lastVisibleColumnId: lastVisibleColumnId,
     onChange: onChange,
     sortColumns: sortColumns
   }, cs.map(c => c.id).join("-")));

package/esm/table/flexible/columnsPopup.js

@@ -48,13 +48,10 @@ export const ColumnsPopup = ({
     translate
   } = useLanguage();
   const listOfColumns = useMemo(() => {
-    var _a;
-    const firstColumn = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id) || "";
     const columnSettingsMap = new Map(columnSettings.map(s => [s.name, s.visible]));
     return _jsx(ColumnSettingsList, {
       columns: columns.filter(c => c.title),
       settings: columnSettingsMap,
-      firstColumn: firstColumn,
       onChange: newSettings => {
         const settings = columnSettings.map(s => {
           const visible = newSettings.get(s.name) !== false;

package/esm/table/flexible/useFlexibleColumns.d.ts

@@ -17,4 +17,5 @@ export declare const getColumnSettings: (pageName: string, defaultValue?: IColum
 export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement | null>, columnsPopupRef: RefObject<HTMLElement | null> | undefined, isFeed: boolean) => {
     flexibleColumns: IListColumn<T, N>[];
     columnsPopup: import("react/jsx-runtime").JSX.Element | null;
+    allColumnsHidden: boolean;
 };

package/esm/table/flexible/useFlexibleColumns.js

@@ -112,11 +112,12 @@ export const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef,
         if (flexible.columnsPopup === false) {
             return null;
         }
-        if (flexibleColumns.length === 0) {
+        const configurableColumns = columns.filter(c => c.title && !(c.columnComponent instanceof ActionsColumn));
+        if (configurableColumns.length === 0 || configurableColumns.every(c => c.alwaysVisible)) {
             return null;
         }
         return (_jsx(ColumnsPopup, { columns: columns.filter(c => !(c.columnComponent instanceof ActionsColumn)), columnSettings: columnSettings, triggerRef: columnsPopupRef, sortGroups: flexible.sortGroups, sortColumns: flexible.sortColumns, onReset: onResetListener, onChange: onChangeListener }));
-    }, [columnSettings, columns, columnsPopupRef, flexible, flexibleColumns.length, onChangeListener, onResetListener]);
+    }, [columnSettings, columns, columnsPopupRef, flexible, onChangeListener, onResetListener]);
     const onReorderListener = useCallback(async ([from, to]) => {
         if (from === to) {
             return;
@@ -173,5 +174,5 @@ export const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef,
             return;
         };
     }, [onResizeColumn, onReorderListener, gridRef, flexibleColumns, isFeed, isDraggable]);
-    return { flexibleColumns, columnsPopup };
+    return { flexibleColumns, columnsPopup, allColumnsHidden: !!flexible && flexibleColumns.length === 0 };
 };

package/esm/table/loading/useLoading.d.ts

@@ -31,6 +31,7 @@ export declare const useLoading: <T extends IRowEntity<N>, N extends IEntityWith
         wrappers?: import("../table").IListColumnWrapper<T, N>[] | undefined;
         sortable?: boolean | undefined;
         draggable?: boolean | undefined;
+        alwaysVisible?: boolean | undefined;
         colspan?: number | ((entity: T | N) => number | undefined) | undefined;
         group?: string | undefined;
         visible?: boolean | undefined;

package/esm/table/loading/useLoading.js

@@ -6,7 +6,7 @@ import { Skeleton } from "../../skeleton/skeleton";
 export const DEFAULT_LOADING_ROWS = 50;
 const LoadingCell = ({ width, className }) => _jsx(Skeleton, { width: width, className: className });
 export const useLoading = (columns, entities, isLoading, loading) => {
-    const sampleEntity = useMemo(() => columns.map(column => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
+    const sampleEntity = useMemo(() => columns.map(column => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el)), {}), [columns]);
     // Cache skeleton entities with stable IDs - only regenerate when rows count or columns change
     // This prevents skeletons from flickering when unrelated Table props change
     const skeletonEntities = useMemo(() => new Array((loading === null || loading === void 0 ? void 0 : loading.rows) || DEFAULT_LOADING_ROWS).fill(undefined).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: generateId() }))), [loading === null || loading === void 0 ? void 0 : loading.rows, sampleEntity]);

package/esm/table/nested/useNestedRows.d.ts

@@ -12,6 +12,7 @@ export declare const useNestedRows: <T extends IRowEntity<N>, N extends IEntityW
         meta?: import("../../dataGrid/listColumn").IListColumnMeta<T, N> | undefined;
         columnComponent?: import("../../dataGrid/listColumn").IColumnComponent<T, N> | undefined;
         wrappers?: import("../../dataGrid/listColumn").IListColumnWrapper<T, N>[] | undefined;
+        alwaysVisible?: boolean | undefined;
         colspan?: number | ((entity: T | N) => number | undefined) | undefined;
     }[];
     nestedFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];

package/esm/table/selectable/useSelectableRows.js

@@ -140,6 +140,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     setSelectMode(newValue.all || newValue.selected.length > 0);
   }, [checkboxDisabled, checkboxVisible, entities, selectable, setSelectMode, setState, getNewSelection]);
   const onChangeSelectionState = useCallback(newState => {
+    var _a, _b;
     if (newState === SelectionState.All) {
       (selectable === null || selectable === void 0 ? void 0 : selectable.onSelect) && selectable.onSelect({
         selected: [],
@@ -158,8 +159,10 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     }
     const newSelections = getCurrentPageSelection(entities, selectable);
     setState(newState);
+    const previousSelections = (_b = (_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : [];
+    const mergedSelections = new Set([...previousSelections, ...newSelections]);
     const newValue = {
-      selected: [...newSelections],
+      selected: [...mergedSelections],
       all: false
     };
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect(newValue);
@@ -219,9 +222,24 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           checked: state === SelectionState.CurrentPage || state === SelectionState.All,
           indeterminate: state === SelectionState.Partial,
           onChange: newValue => {
-            const newState = newValue ? selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All : SelectionState.None;
-            setState(newState);
-            onChangeSelectionState(newState);
+            var _a, _b;
+            if (newValue) {
+              const newState = selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All;
+              setState(newState);
+              onChangeSelectionState(newState);
+            } else {
+              // Intentionally different from onSelect(None) ("Deselect all" menu item, which clears everything).
+              // Unchecking the header checkbox only removes the current page from the selection, preserving other pages.
+              const currentPageIds = getCurrentPageSelection(entities, selectable);
+              const remaining = ((_b = (_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : []).filter(id => !currentPageIds.has(id));
+              const newState = remaining.length > 0 ? SelectionState.Partial : SelectionState.None;
+              setState(newState);
+              selectable.onSelect({
+                selected: remaining,
+                all: false
+              });
+              setSelectMode(remaining.length > 0);
+            }
           },
           calculateSelectionState: () => selectableState,
           checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
@@ -235,7 +253,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked, entities, setSelectMode]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

package/esm/table/table.d.ts

@@ -41,6 +41,7 @@ export interface IListColumn<T extends IRowEntity<N>, N extends IEntityWithId =
     wrappers?: IListColumnWrapper<T, N>[];
     sortable?: boolean;
     draggable?: boolean;
+    alwaysVisible?: boolean;
     colspan?: undefined | number | ((entity: T | N) => number | undefined);
     group?: string;
     visible?: boolean;

package/esm/table/table.js

@@ -8,6 +8,7 @@ import { useSortableColumns } from "./sortable/useSortableColumns";
 import { useFlexibleColumns } from "./flexible/useFlexibleColumns";
 import { useActions } from "./actions/useActions";
 import { useLoading } from "./loading/useLoading";
+import { EmptySearchList } from "../dataGrid/emptySearchList/emptySearchList";
 import { EntitiesListActions } from "../dataGrid/entitiesListActions/entitiesListActions";
 import { DataFeedSelectPanel } from "../dataFeed/dataFeedSelectPanel/dataFeedSelectPanel";
 import { ColumnsListButton } from "../dataGrid/entitiesListActions/actions/columnsListButton";
@@ -143,7 +144,8 @@ const TableInner = ({
   } = useSortableColumns(selectableColumns, sortable, isMobile);
   const {
     flexibleColumns,
-    columnsPopup
+    columnsPopup,
+    allColumnsHidden
   } = useFlexibleColumns(sortableColumns, flexible, gridRef, columnsPopupRef, isMobile);
   const {
     columnsWithActions,
@@ -250,7 +252,10 @@ const TableInner = ({
         className: "zen-table__content",
         children: [_jsx("div", {
           className: "zen-table__table",
-          children: isMobile ? _jsxs(DataFeed, {
+          children: allColumnsHidden ? _jsx("div", {
+            className: "zen-data-grid__empty",
+            children: _jsx(EmptySearchList, {})
+          }) : isMobile ? _jsxs(DataFeed, {
             columns: loadingColumns,
             feedWrappers: [nestedFeedWrapper, selectableFeedWrapper],
             entities: loadingEntities,

package/esm/tabs/tabItem/tabItem.d.ts

@@ -9,5 +9,6 @@ export interface ITabItem extends IZenComponentProps {
     active: boolean;
     ariaControl?: string;
     handleButtonClick: (e: React.MouseEvent<HTMLElement>) => void;
+    dataAnalyticsId?: string;
 }
-export declare const TabItem: ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }: ITabItem) => import("react/jsx-runtime").JSX.Element;
+export declare const TabItem: ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId }: ITabItem) => import("react/jsx-runtime").JSX.Element;

package/esm/tabs/tabItem/tabItem.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useMobileClassName } from "../../utils/theme/useMobileClassName";
-export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity }) => {
+import { toKebabCase } from "../../utils/toKebabCase";
+export const TabItem = ({ tabId, tabName, icon, active, handleButtonClick, ariaControl, quantity, dataAnalyticsId }) => {
     const driveClassname = useDriveClassName("zen-tab-item");
     const mobileClassname = useMobileClassName("zen-tab-item");
-    return (_jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || mobileClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && (_jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon })), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) }));
+    const analyticsId = dataAnalyticsId || `tab-${toKebabCase(tabName)}`;
+    return (_jsx("button", { id: tabId, type: "button", className: classNames(["zen-tab-item", driveClassname || mobileClassname || "", active ? "zen-tab-item--active" : ""]), role: "tab", "aria-controls": ariaControl, "aria-selected": active ? "true" : "false", "aria-label": tabName, title: tabName, onClick: handleButtonClick, "data-analytics-id": analyticsId, children: _jsxs("div", { className: "zen-tab-item__content", children: [icon && (_jsx("span", { className: classNames(["zen-tab-item__content-icon", active ? "zen-tab-item__content-icon--active" : ""]), children: icon })), _jsx("span", { className: "zen-tab-item__content-text", children: tabName }), quantity && _jsx("div", { className: "zen-tab-item__content-quantity", children: quantity })] }) }));
 };

package/esm/tabs/tabs.d.ts

@@ -8,6 +8,7 @@ export interface ITabElement {
     icon?: React.ReactElement | React.FC<IIcon>;
     id: string;
     quantity?: number;
+    dataAnalyticsId?: string;
 }
 export interface ITabs extends IZenComponentProps {
     tabs: ITabElement[];

package/esm/tabs/tabs.js

@@ -235,7 +235,8 @@ export const Tabs = ({
             quantity: tab.quantity,
             active: activeTabId === tab.id,
             ariaControl: `panel-${tab.id}`,
-            handleButtonClick: handleButtonClick
+            handleButtonClick: handleButtonClick,
+            dataAnalyticsId: tab.dataAnalyticsId
           }, tab.id))
         })
       }), scrollButtonType === "end" || scrollButtonType === "both" ? _jsxs(_Fragment, {

package/esm/toastRaw/components/toastAnimation.js

@@ -30,7 +30,7 @@ export const ToastAnimation = ({ 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,
@@ -40,7 +40,7 @@ export const ToastAnimation = ({ 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