@geotab/zenith 3.8.0 → 3.9.0-beta.1

package/esm/index.d.ts

@@ -20,7 +20,6 @@ export { type ICardButton, CardButton } from "./card/components/cardButton/cardB
 export { type ICardToggle, CardToggle } from "./card/components/cardToggle/cardToggle";
 export { type IContent, Content } from "./card/components/content";
 export { type TCardStatus, Status } from "./card/components/status";
-export { Title } from "./card/components/title";
 export { TitleLink } from "./card/components/titleLink";
 export { getDefaultFullWidthValue } from "./card/helpers/getDefaultFullWidthValue";
 export { getIconFromStatus } from "./card/helpers/getIconFromStatus";
@@ -48,8 +47,8 @@ export { classNames } from "./commonHelpers/classNames/classNames";
 export { hexToRGBA } from "./commonHelpers/colorUtils";
 export { type IEntityWithId } from "./commonHelpers/entity";
 export { generateId } from "./commonHelpers/generateId";
-export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
+export { SSRProvider } from "./commonHelpers/hooks/ssrProvider";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
 export { useDeviceType } from "./commonHelpers/hooks/useDeviceType";
@@ -74,8 +73,6 @@ export { useDropdownState } from "./dropdown/useDropdownState";
 export { type IEmptyState, EmptyState } from "./emptyState/emptyState";
 export { type IFavoriteButton, FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
-export { TemplateDownloadSection } from "./fileUpload/components/templateDownloadSection";
-export { UploadedFilesSection } from "./fileUpload/components/uploadedFilesSection";
 export { FileUpload } from "./fileUpload/fileUpload";
 export { type IUploadedFile, type ITemplateDownload, type IFileUploadMeta, type IFileUpload } from "./fileUpload/fileUploadType";
 export { type TFilterButton, type IFilterButton, FilterButton } from "./filterButton/filterButton";
@@ -760,6 +757,7 @@ export { type ITextInputRaw, TextInputRaw } from "./textInputRaw/textInputRaw";
 export { type ITextarea, Textarea } from "./textarea/textarea";
 export { type ITextareaRaw, TextareaRaw } from "./textareaRaw/textareaRaw";
 export { type ITimePicker, type TTimePicker, TimePicker } from "./timePicker/timePicker";
+export { Title } from "./title/title";
 export { type IShowToast, useToast } from "./toast/hooks/useToast";
 export { type IToast, Toast } from "./toast/toast";
 export { type IToggleButton, type TToggleButton, ToggleButton } from "./toggleButton/toggleButton";
@@ -773,7 +771,7 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
-export { useLanguage } from "./utils/localization/useLanguage";
+export { useDirection } from "./utils/localization/useDirection";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";
 export { ThemeProvider } from "./utils/theme/themeProvider";

package/esm/index.js

@@ -21,7 +21,6 @@ export { CardButton } from "./card/components/cardButton/cardButton";
 export { CardToggle } from "./card/components/cardToggle/cardToggle";
 export { Content } from "./card/components/content";
 export { Status } from "./card/components/status";
-export { Title } from "./card/components/title";
 export { TitleLink } from "./card/components/titleLink";
 export { getDefaultFullWidthValue } from "./card/helpers/getDefaultFullWidthValue";
 export { getIconFromStatus } from "./card/helpers/getIconFromStatus";
@@ -48,8 +47,8 @@ export { getCheckboxState } from "./checkbox/checkboxUtils";
 export { classNames } from "./commonHelpers/classNames/classNames";
 export { hexToRGBA } from "./commonHelpers/colorUtils";
 export { generateId } from "./commonHelpers/generateId";
-export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
+export { SSRProvider } from "./commonHelpers/hooks/ssrProvider";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
 export { useDeviceType } from "./commonHelpers/hooks/useDeviceType";
@@ -73,8 +72,6 @@ export { useDropdownState } from "./dropdown/useDropdownState";
 export { EmptyState } from "./emptyState/emptyState";
 export { FavoriteButton } from "./favoriteButton/favoriteButton";
 export { FeedbackProvider } from "./feedbackProvider/feedbackProvider";
-export { TemplateDownloadSection } from "./fileUpload/components/templateDownloadSection";
-export { UploadedFilesSection } from "./fileUpload/components/uploadedFilesSection";
 export { FileUpload } from "./fileUpload/fileUpload";
 export { FilterButton } from "./filterButton/filterButton";
 export { FiltersChip } from "./filters/components/filtersChip";
@@ -745,6 +742,7 @@ export { TextInputRaw } from "./textInputRaw/textInputRaw";
 export { Textarea } from "./textarea/textarea";
 export { TextareaRaw } from "./textareaRaw/textareaRaw";
 export { TimePicker } from "./timePicker/timePicker";
+export { Title } from "./title/title";
 export { useToast } from "./toast/hooks/useToast";
 export { Toast } from "./toast/toast";
 export { ToggleButton } from "./toggleButton/toggleButton";
@@ -757,7 +755,7 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
-export { useLanguage } from "./utils/localization/useLanguage";
+export { useDirection } from "./utils/localization/useDirection";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";
 export { ThemeProvider } from "./utils/theme/themeProvider";

package/esm/menu/components/menuItem.js

@@ -6,7 +6,7 @@ import { ControlledMenu } from "../controlledMenu";
 import { ControlledPopup } from "../../controlledPopup/controlledPopup";
 import { PathContext } from "../contexts/pathContext";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { generateId } from "../../commonHelpers/utils";
+import { generateId } from "../../commonHelpers/generateId";
 import { MenuAlignmentContext } from "../../header/headerContext";
 import { isSeparator } from "./menuSeparator";
 export const isMenuItem = (element) => {

package/esm/menu/controlledMenu.js

@@ -16,7 +16,7 @@ import { ControlledPopup } from "../controlledPopup/controlledPopup";
 import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
-import { generateId } from "../commonHelpers/utils";
+import { generateId } from "../commonHelpers/generateId";
 import { PathProvider } from "./contexts/pathProvider";
 import { isSeparator, MenuSeparator } from "./components/menuSeparator";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";

package/esm/nav/nav.js

@@ -5,7 +5,7 @@ import { Children, cloneElement, Fragment, useCallback, useEffect, useLayoutEffe
 import { NavDivider } from "./navDivider/navDivider";
 import { detectOverlayScrollbar, filterPrimaryNavItems, collectNavItems } from "./utils/navUtils";
 import { useResize } from "../commonHelpers/hooks/useResize";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { NavMobileBar } from "./navMobileBar/navMobileBar";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
@@ -132,6 +132,7 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     useEffect(() => {
         onMenuVisibilityToggle === null || onMenuVisibilityToggle === void 0 ? void 0 : onMenuVisibilityToggle(!isMobile || isMobileMenuOpen);
     }, [isMobile, isMobileMenuOpen, onMenuVisibilityToggle]);
+    const navMobileBarPortal = usePortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: isEditState ? editListItems : primaryItems }), mobileBarContainer !== null && mobileBarContainer !== void 0 ? mobileBarContainer : undefined);
     return (_jsxs(NavContext, { value: {
             collapsed,
             onCollapseToggle,
@@ -142,13 +143,17 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
             searchTerm,
             onSearch: setSearchTerm,
             onNavigate: () => onIsMobileMenuOpenToggle && onIsMobileMenuOpenToggle(false)
-        }, children: [!isMobile || isMobileMenuOpen ? (_jsxs("div", { ref: menuRef, className: classNames(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header
+        }, children: [!isMobile || isMobileMenuOpen ? (_jsxs("div", { ref: menuRef, className: classNames([
+                    "zen-nav",
+                    isMobile ? "zen-nav--mobile" : "",
+                    isMobile && isEditState ? "zen-nav--mobile-edit" : "",
+                    collapsed ? "zen-nav--collapsed" : "",
+                    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 &&
-                createPortal(_jsx(NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: isEditState ? editListItems : primaryItems }), mobileBarContainer)] }));
+                                    }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })) : null, mobileBarContainer && isMobile && navMobileBarPortal] }));
 };

package/esm/nav/navAddMenu/navAddMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, useRef, useState } from "react";
+import { Children, cloneElement, useId, useRef, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { NavItemContext } from "../navItem/navItem";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
@@ -9,13 +9,12 @@ import { IconClose } from "../../icons/iconClose";
 import { IconPlus } from "../../icons/iconPlus";
 import { Tooltip } from "../../tooltip/tooltip";
 import { useNavContext } from "../context/nav.context";
-import { generateId } from "../../commonHelpers/utils";
 export const NavAddMenu = ({ title, alignment, className, children }) => {
     const [isOpen, setIsOpen] = useState(false);
     const isMobile = useMobile();
     const { collapsed } = useNavContext();
     const triggerRef = useRef(null);
-    const triggerId = generateId();
+    const triggerId = useId();
     const validChildren = Children.toArray(children)
         .filter((child) => {
         const element = child;

package/esm/nav/navEditList/navEditListUtils.d.ts

@@ -1,3 +1,3 @@
 import { PointerEvent, ReactElement } from "react";
 import { INavActionItem } from "../navItem/navActionItem";
-export declare const attachDndHandler: (item: ReactElement<INavActionItem>, onPointerDown: (e: PointerEvent<HTMLElement>) => void) => ReactElement<INavActionItem, string | import("react").JSXElementConstructor<any>>;
+export declare const attachDndHandler: (item: ReactElement<INavActionItem>, onPointerDown: (e: PointerEvent<HTMLDivElement>) => void) => ReactElement<INavActionItem>;

package/esm/nav/navEditList/navEditListUtils.js

@@ -4,7 +4,8 @@ import { NavActionItem } from "../navItem/navActionItem";
 import { IconGrab } from "../../icons/iconGrab";
 export const attachDndHandler = (item, onPointerDown) => {
     if (item.type === NavActionItem) {
-        return cloneElement(item, Object.assign(Object.assign({}, item.props), { startNode: (_jsx("div", { className: "zen-nav-item__dnd", onPointerDown: onPointerDown, children: _jsx(IconGrab, { size: "large" }) })) }));
+        const navActionItem = item;
+        return cloneElement(navActionItem, Object.assign(Object.assign({}, navActionItem.props), { onLeftContentPointerDown: onPointerDown, startNode: (_jsx("div", { className: "zen-nav-item__dnd", children: _jsx(IconGrab, { size: "large" }) })) }));
     }
     return item;
 };

package/esm/nav/navItem/navActionItem.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-export const NavActionItem = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick }) => {
+const NavActionItemComponent = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick, onLeftContentPointerDown }) => {
     const PrimaryIconComponent = typeof icon === "function" ? icon : null;
     const EndButtonIconComponent = typeof endButtonIcon === "function" ? endButtonIcon : null;
     const itemClasses = classNames(["zen-nav-item", className || ""]);
-    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick ? (_jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })) : null] }));
+    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", onPointerDown: onLeftContentPointerDown, children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick ? (_jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })) : null] }));
 };
+export const NavActionItem = NavActionItemComponent;
 NavActionItem.displayName = "NavActionItem";

package/esm/nav/navItem/navItem.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
-import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext } from "react";
+import { useRef, useState, useEffect, Children, cloneElement, createContext, useContext, useId } from "react";
 import { IconBeta } from "../../icons/iconBeta";
 import { IconChevronRight } from "../../icons/iconChevronRight";
 import { IconOpen2 } from "../../icons/iconOpen2";
@@ -19,7 +19,6 @@ import { Tooltip } from "../../tooltip/tooltip";
 import { ControlledMenu } from "../../menu/controlledMenu";
 import { useNavContext } from "../context/nav.context";
 import { useMobile } from "../../commonHelpers/hooks/useMobile";
-import { generateId } from "../../commonHelpers/utils";
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
 export const NavItemContext = createContext({ parentLevel: 0 });
@@ -101,7 +100,7 @@ const ButtonNavItem = (_a) => {
     };
     const isMobile = useMobile();
     const isActive = active || (hasNestedItems && menuOpen);
-    const triggerId = generateId();
+    const triggerId = useId();
     const buttonElement = (_jsx("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: _jsx(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? (_jsx(Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {

package/esm/pageHeader/pageHeaderActions.js

@@ -8,7 +8,7 @@ import { PageToolbarCollapsedItemsControl } from "../header/components/collapsed
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
 import { getItemsFromFragments } from "./pageHeaderHelpers";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { zen } from "../utils/zen";
 export const PageHeaderActions = ({ className = "", children }) => {
     var _a, _b;
@@ -32,10 +32,11 @@ export const PageHeaderActions = ({ className = "", children }) => {
             isMobile ? "zen-page-header-component__actions--mobile-portal" : "",
             className
         ]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = usePortal(actionsContent, modalRoot);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        const modalRoot = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
-        return createPortal(actionsContent, modalRoot);
+        return portal;
     }
     return actionsContent;
 };

package/esm/rangeRaw/rangeRaw.js

@@ -252,6 +252,9 @@ export const RangeRaw = props => {
   } else {
     defaultValueInner = defaultValue;
   }
+  const generatedId = useId();
+  const intId = id || generatedId;
+  const rangeErrorId = `${intId}-error`;
   const [isOpen, setIsOpen] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const [errorType, setErrorType] = useState(undefined);
@@ -400,14 +403,17 @@ export const RangeRaw = props => {
   const memoizedContent = useMemo(() => _jsxs("div", {
     className: "zen-range__fields-wrapper",
     children: [_jsxs("div", {
+      id: intId,
       ref: setFieldsContainerRef,
+      "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
       className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]),
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
+      id: rangeErrorId,
       className: "zen-range__error",
       error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]
-  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max, intId, rangeErrorId]);
   const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, {
     isOpen: isOpen,
     className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]),

package/esm/selectList/selectList.js

@@ -45,7 +45,7 @@ export const SelectList = (_a) => {
         dispatchState({ type: ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
     }, [innerValue, multiselect, items]);
     useEffect(() => {
-        if (!multiselect) {
+        if (!multiselect && selectItemOnFocus) {
             dispatchState({ type: ListAction.FocusFirst, payload: { items } });
         }
         dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
@@ -56,14 +56,18 @@ export const SelectList = (_a) => {
     const onChangeItem = useCallback((updatedId, updatedState) => {
         dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
     }, [multiselect]);
+    const hasScrolledToInitial = useRef(false);
     useEffect(() => {
         var _a;
-        if (state.activeIndex >= 0 &&
-            ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) &&
-            listRef.current &&
-            isChildOf(zen.document.activeElement, listRef.current)) {
-            const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
-            itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+        if (state.activeIndex >= 0 && listRef.current) {
+            const isFocusInList = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && isChildOf(zen.document.activeElement, listRef.current);
+            if (isFocusInList || !hasScrolledToInitial.current) {
+                const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
+                itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+                if (itemEl) {
+                    hasScrolledToInitial.current = true;
+                }
+            }
         }
     }, [state.activeIndex]);
     useEffect(() => {

package/esm/selectRaw/selectRaw.js

@@ -147,6 +147,6 @@ export const SelectRaw = (props) => {
                             "zen-ellipsis",
                             "zen-caption__content",
                             !selectValue ? "zen-select__text--placeholder" : ""
-                        ]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => [item.id, selectValue === item.id ? CheckboxState.On : CheckboxState.Off])), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] }));
+                        ]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, focusOnOpen: false, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => [item.id, selectValue === item.id ? CheckboxState.On : CheckboxState.Off])), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] }));
 };
 SelectRaw.displayName = "SelectRaw";

package/esm/shield/shield.js

@@ -2,16 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useFadeComponent } from "../utils/useFadeComponent";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { zen } from "../utils/zen";
 export const Shield = ({ className, dataShieldId, isVisible }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { renderComponent, showContent, setIsOpen, handleTransitionEnd } = useFadeComponent(isVisible || false);
+    const container = (_d = (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen.document) === null || _c === void 0 ? void 0 : _c.body) !== null && _d !== void 0 ? _d : undefined;
+    const portal = usePortal(_jsx("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), container);
     useEffect(() => {
         setIsOpen(isVisible || false);
     }, [isVisible, setIsOpen]);
     if (!renderComponent && !isVisible) {
         return isVisible === undefined ? (_jsx("div", { className: classNames(["zen-shield", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" })) : null;
     }
-    return createPortal(_jsx("div", { onTransitionEnd: handleTransitionEnd, className: classNames(["zen-shield", "zen-shield-faded", showContent ? "zen-shield-faded--visible" : "", className !== null && className !== void 0 ? className : ""]), "data-shield-id": dataShieldId || "" }), ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body));
+    return portal;
 };

package/esm/sidePanel/sidePanel.js

@@ -18,7 +18,7 @@ import { isModalTarget } from "../modal/utils/isModalTarget";
 import { isBannerTarget } from "../banner/utils/isBannerTarget";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-import { createPortal } from "react-dom";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 /* eslint-enable @typescript-eslint/naming-convention */
 const OVERLAY_TARGET_CHECKS = [isAlertTarget, isToastTarget, isModalTarget, isBannerTarget];
 export const isChildPopup = (target, stopElement) => {
@@ -171,14 +171,8 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         }
         return attributes;
     }, [role, label]);
-    if (!renderComponent && !isOpen) {
-        return null;
-    }
-    if (!isClientReady) {
-        return undefined;
-    }
     const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
-    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, roleAttributes, { onTransitionEnd: handleTransitionEnd, className: classNames([
+    const portal = usePortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, roleAttributes, { onTransitionEnd: handleTransitionEnd, className: classNames([
             "zen-side-panel",
             driveClassName || "",
             dark ? "zen-dark" : "",
@@ -186,5 +180,12 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
             positioningClass,
             className !== null && className !== void 0 ? className : ""
         ]), children: memoizedChildForRender })), portalContainer);
+    if (!renderComponent && !isOpen) {
+        return null;
+    }
+    if (!isClientReady) {
+        return undefined;
+    }
+    return portal;
 };
 SidePanel.Cell = SidePanelCell;

package/esm/table/children/useTableChildren.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, RefObject } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, activeId?: string, gridRef?: RefObject<HTMLElement | null>, onCloseDetailPanel?: () => void) => {
     bulkActions: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     pagination: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     activePage: number | undefined;

package/esm/table/children/useTableChildren.js

@@ -24,7 +24,7 @@ const isChildElement = function (child, expectedType) {
     }
     return false;
 };
-export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
+export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel) => useMemo(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
     let activePage = undefined;
@@ -39,7 +39,7 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         }
         if (isChildElement(child, TableBulkActions.displayName)) {
             const bulkActionButtons = child.props.children || [];
-            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons }));
+            bulkActions = (_jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, children: bulkActionButtons }));
             return;
         }
         if (isChildElement(child, TablePagination.displayName)) {
@@ -100,4 +100,4 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         detailPanel: detailPanel,
         other: other
     };
-}, [children, clearSelection, isMobile, selected, gridRef, allSelected, selectAll, turnOffSelectAll, activeId, onCloseDetailPanel]);
+}, [children, clearSelection, isMobile, selected, gridRef, allSelected, activeId, onCloseDetailPanel]);

package/esm/table/flexible/useFlexibleColumns.js

@@ -10,6 +10,8 @@ import { ColumnSettingsStorage } from "./columnSettingsStorage";
 import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
 import { mergeColumnsSettings } from "./mergeColumnSettings";
 import { zen } from "../../utils/zen";
+import { SelectableWrapperName } from "../selectable/useSelectableRows";
+import { NestedWrapperName } from "../nested/useNestedRows";
 export const getColumnSettings = (pageName, defaultValue) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const storage = new ColumnSettingsStorage(pageName || "", zen === null || zen === void 0 ? void 0 : zen.localStorage, defaultValue);
@@ -42,11 +44,12 @@ export const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef,
         onChangeColumnSettings(newSettings);
     }, [onChangeColumnSettings, saveSettingsToTheStorage]);
     const flexibleColumns = useMemo(() => {
+        var _a, _b, _c, _d, _e;
         if (!flexible) {
             return columns;
         }
         const visibleColumnsMap = new Map(columns.map(c => [c.id, c]));
-        return columnSettings
+        const result = columnSettings
             .map((s, index) => {
             var _a;
             const column = visibleColumnsMap.get(s.name);
@@ -63,6 +66,41 @@ export const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef,
             return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { defaultWidth: width }), wrappers: [...wrappers, wrapper] });
         })
             .filter(c => c !== undefined);
+        // Ensure selectable and nested wrappers are always on the first visible column
+        if (result.length > 0) {
+            const pinnedWrapperWidth = 32;
+            let widthDelta = 0;
+            let donorCol = undefined;
+            for (const wrapperName of [NestedWrapperName, SelectableWrapperName]) {
+                if ((_a = result[0].wrappers) === null || _a === void 0 ? void 0 : _a.some(w => w.name === wrapperName)) {
+                    continue;
+                }
+                let pinnedWrapper;
+                for (const col of result.slice(1)) {
+                    if (col.wrappers) {
+                        const found = col.wrappers.find(w => w.name === wrapperName);
+                        if (found) {
+                            pinnedWrapper = found;
+                            donorCol = donorCol !== null && donorCol !== void 0 ? donorCol : col;
+                            widthDelta += pinnedWrapperWidth;
+                            col.wrappers = col.wrappers.filter(w => w.name !== wrapperName);
+                            break;
+                        }
+                    }
+                }
+                if (pinnedWrapper) {
+                    result[0].wrappers = [...(result[0].wrappers || []), pinnedWrapper];
+                }
+            }
+            if (widthDelta > 0) {
+                result[0] = Object.assign(Object.assign({}, result[0]), { meta: Object.assign(Object.assign({}, (result[0].meta || {})), { defaultWidth: ((_c = (_b = result[0].meta) === null || _b === void 0 ? void 0 : _b.defaultWidth) !== null && _c !== void 0 ? _c : 0) + widthDelta }) });
+                if (donorCol) {
+                    const donorIndex = result.indexOf(donorCol);
+                    result[donorIndex] = Object.assign(Object.assign({}, donorCol), { meta: Object.assign(Object.assign({}, (donorCol.meta || {})), { defaultWidth: Math.max(0, ((_e = (_d = donorCol.meta) === null || _d === void 0 ? void 0 : _d.defaultWidth) !== null && _e !== void 0 ? _e : 0) - widthDelta) }) });
+                }
+            }
+        }
+        return result;
     }, [columnSettings, columns, flexible]);
     const columnsPopup = useMemo(() => {
         if (!flexible) {

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

@@ -3,6 +3,7 @@ import { IListColumn } from "../../dataGrid/listColumn";
 import { IRowEntity } from "../../dataGrid/row/row";
 import "./nestedButton.less";
 import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const NestedWrapperName = "Nested";
 export declare const useNestedRows: <T extends IRowEntity<N>, N extends IEntityWithId>(expandedRows: string[] | undefined, onExpand: ((id: string, isExpanded: boolean) => void) | undefined, columns: IListColumn<T, N>[], isMobile: boolean) => {
     nestedColumns: {
         id: string;

package/esm/table/nested/useNestedRows.js

@@ -58,7 +58,7 @@ injectString("zh-Hans", "Expand", "\u5C55\u5F00");
 injectString("zh-TW", "Expand", "\u5C55\u958B");
 injectString("ro-RO", "Expand", "Extinde\u021Bi");
 injectString("ar-SA", "Expand", "\u062A\u0648\u0633\u064A\u0639");
-const NestedWrapperName = "Nested";
+export const NestedWrapperName = "Nested";
 export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
   const {
     translate

package/esm/table/selectable/useSelectableRows.d.ts

@@ -16,6 +16,14 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     checkboxTitle?: (entity: T | N) => string;
     headerTitle?: (state: SelectionState) => string;
     turnOffSelectAll?: boolean;
+    /**
+     * When `true`, the header checkbox emits the current page's IDs instead of `{ all: true }`.
+     * When `undefined`, falls back to `turnOffSelectAll` for backward compatibility.
+     *
+     * Note: avoid setting this to `false` alongside `turnOffSelectAll: true` — the checkbox
+     * will emit `{ all: true }` while the dropdown hides the "Select all" option, which is inconsistent.
+     */
+    checkboxSelectsCurrentPage?: boolean;
     checkboxPlaceholder?: boolean;
     strategy?: TSelectionStrategy;
     selectAll?: boolean;
@@ -24,6 +32,7 @@ export declare const getEmptySelection: () => {
     all: boolean;
     selected: string[];
 };
+export declare const SelectableWrapperName = "Selectable";
 export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];

package/esm/table/selectable/useSelectableRows.js

@@ -68,7 +68,7 @@ export const getEmptySelection = () => ({
   all: false,
   selected: []
 });
-const SelectableWrapperName = "Selectable";
+export const SelectableWrapperName = "Selectable";
 export const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMode, selectable) => {
   var _a;
   const {
@@ -157,7 +157,6 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
       return;
     }
     const newSelections = getCurrentPageSelection(entities, selectable);
-    setState(newState);
     const newValue = {
       selected: [...newSelections],
       all: false
@@ -176,8 +175,16 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
+  const hasSelectable = !!selectable;
+  const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
+  const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
+  const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
+  const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
+  const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
+  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
+  const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = useMemo(() => {
-    if (!selectable) {
+    if (!hasSelectable) {
       return null;
     }
     return {
@@ -219,23 +226,23 @@ 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;
+            const newState = newValue ? checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All : SelectionState.None;
             setState(newState);
             onChangeSelectionState(newState);
           },
           calculateSelectionState: () => selectableState,
-          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
-          header: selectable.header,
+          checkboxInHeader: checkboxInHeaderValue,
+          header: selectableHeader,
           onSelect: newState => {
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectable.turnOffSelectAll
+          turnOffSelectAll: selectableTurnOffSelectAll
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {