@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/esm/commonHelpers/hooks/useMobileOrTablet.js

@@ -0,0 +1,17 @@
+import { useCallback, useContext, useMemo, useState } from "react";
+import { topWindowContext } from "../../utils/topWindow/topWindowContext";
+import { getParentWindow } from "../../utils/getParentWindow";
+import { useResize } from "./useResize";
+import { zen } from "../../utils/zen";
+import { Breakpoints } from "./breakpoints";
+const isMobileOrTabletUtil = (width) => width <= Breakpoints.TabletMaxWidth;
+export const useMobileOrTablet = () => {
+    const { topWindow } = useContext(topWindowContext);
+    const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
+    const [value, setValue] = useState(isMobileOrTabletUtil(win.innerWidth));
+    const onResize = useCallback(() => {
+        setValue(isMobileOrTabletUtil(win.innerWidth));
+    }, [win]);
+    useResize(onResize, true);
+    return value;
+};

package/esm/commonHelpers/hooks/usePillSize.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IPill } from "../../pill/interfaces/pill.interface";
 import { IPillNonActionable } from "../../pill/interfaces/pillNonActionable.interface";
 interface IPillSize extends Pick<IPill, "size">, Pick<IPillNonActionable, "onClose"> {

package/esm/commonHelpers/hooks/useTablet.js

@@ -0,0 +1,17 @@
+import { useCallback, useContext, useMemo, useState } from "react";
+import { topWindowContext } from "../../utils/topWindow/topWindowContext";
+import { getParentWindow } from "../../utils/getParentWindow";
+import { useResize } from "./useResize";
+import { zen } from "../../utils/zen";
+import { Breakpoints } from "./breakpoints";
+const isTabletUtil = (width) => width > Breakpoints.MobileMaxWidth && width <= Breakpoints.TabletMaxWidth;
+export const useTablet = () => {
+    const { topWindow } = useContext(topWindowContext);
+    const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
+    const [isTablet, setIsTablet] = useState(isTabletUtil(win.innerWidth));
+    const onResize = useCallback(() => {
+        setIsTablet(isTabletUtil(win.innerWidth));
+    }, [win]);
+    useResize(onResize, true);
+    return isTablet;
+};

package/esm/dataFeed/dataFeed.d.ts

@@ -30,7 +30,7 @@ export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
 }
 export declare const EmptyList: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const Footer: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage, rowClassName, expandedRows, onExpandedChange, activePage, onClick }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage, rowClassName, expandedRows, onExpandedChange, activePage, onClick, isLoading }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataFeedStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;

package/esm/dataFeed/dataFeed.js

@@ -20,7 +20,7 @@ const checkCloseToTheEnd = (feedContainerElt) => {
     return distanceToTheBottom < endOfFeedThreshold;
 };
 const FIRST_RENDERED_ROWS = 50;
-const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage = 1000, rowClassName, expandedRows, onExpandedChange, activePage, onClick }, ref) => {
+const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage = 1000, rowClassName, expandedRows, onExpandedChange, activePage, onClick, isLoading }, ref) => {
     const [pages, setPages] = useState(1);
     const data = useMemo(() => entities.slice(0, itemsPerPage * pages), [entities, itemsPerPage, pages]);
     const initialVisibleRows = useMemo(() => data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [data]);
@@ -141,7 +141,7 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
         onExpandedChange,
         onClick
     ]);
-    return (_jsx("div", { className: "zen-data-grid-wrapper", children: _jsxs("div", { className: classNames(["zen-data-grid", className || ""]), ref: feedRef, onScroll: handleScroll, children: [_jsx("div", { role: "feed", className: "zen-data-grid__feed zen-data-feed", "aria-label": description, "aria-busy": "false", children: feedItems }), emptyList && data.length === 0 ? emptyList : null, footer] }) }));
+    return (_jsx("div", { className: "zen-data-grid-wrapper", children: _jsxs("div", { className: classNames(["zen-data-grid", className || ""]), ref: feedRef, onScroll: handleScroll, children: [_jsx("div", { role: "feed", className: "zen-data-grid__feed zen-data-feed", "aria-label": description, "aria-busy": !!isLoading, children: feedItems }), emptyList && data.length === 0 ? emptyList : null, footer] }) }));
 };
 const DataFeed = forwardRef(DataFeedInner);
 DataFeed.EmptyList = EmptyList;

package/esm/dataFeed/dataFeedCell/dataFeedCell.d.ts

@@ -15,4 +15,6 @@ export interface IDataFeedCell<T extends object> extends IZenComponentProps {
     isNested: boolean;
     onClick?: () => void;
 }
-export declare const DataFeedCell: <T extends object>({ limited, visibleOnHover, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }: IDataFeedCell<T>) => import("react/jsx-runtime").JSX.Element;
+declare const FeedCell: <T extends object>({ limited, visibleOnHover, isVisible, title, render, renderWrappers, renderPlaceholder, defaultValue, entity, isNested }: IDataFeedCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataFeedCell: typeof FeedCell;
+export {};

package/esm/dataFeed/dataFeedColumnsItems.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IActionWithId } from "../dataGrid/columns/actionsColumn/actionsColumn";
 import { IListColumnStrict } from "../dataGrid/extensions/toBasicColumn";
 import { IRowEntity } from "../dataGrid/row/row";
@@ -25,5 +24,6 @@ interface IFeedItem<T extends IRowEntity<N>, N extends IEntityWithId> {
     primaryActions?: IActionWithId<T>[] | ((e: T, isNested: boolean) => IActionWithId<T>[]);
     onClick?: (id: string) => void;
 }
-export declare const FeedItem: <T extends IRowEntity<N>, N extends IEntityWithId>({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className, isRowExpanded, onExpandedChange, actions, actionsAsync, primaryActions, onClick }: IFeedItem<T, N>) => import("react/jsx-runtime").JSX.Element;
+declare const FeedItemInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className, isRowExpanded, onExpandedChange, actions, actionsAsync, primaryActions, onClick }: IFeedItem<T, N>) => import("react/jsx-runtime").JSX.Element;
+export declare const FeedItem: typeof FeedItemInner;
 export {};

package/esm/dataGrid/cell/cell.d.ts

@@ -18,4 +18,6 @@ export interface IDataGridCell<T extends IEntityWithId> extends IZenComponentPro
     onClick?: () => void;
     isActive?: boolean;
 }
-export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Cell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, maxWidth, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: typeof Cell;
+export {};

package/esm/dataGrid/columns/actionsColumn/actionsColumn.d.ts

@@ -46,8 +46,8 @@ export declare class ActionsColumn<T extends IRowEntity<N>, N extends IEntityWit
     constructor(actionsOptions: IActionsColumnOptions<T | N>);
     get options(): IActionsColumnOptions<T | N>;
     set options(actionsOptions: IActionsColumnOptions<T | N>);
-    get columnActions(): IActionWithId<N | T> | ((entity: T, isNested: boolean) => import("react").JSX.Element) | undefined;
-    get columnActionsAsync(): ((entity: T, isNested: boolean) => PromiseLike<import("react").JSX.Element>) | undefined;
-    get columnPrimaryActions(): IActionWithId<N | T>[] | ((entity: N | T, isNested: boolean) => IAction<T>[]) | undefined;
+    get columnActions(): IActionWithId<N | T> | ((entity: T, isNested: boolean) => React.JSX.Element) | undefined;
+    get columnActionsAsync(): ((entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>) | undefined;
+    get columnPrimaryActions(): IActionWithId<N | T>[] | ((entity: T | N, isNested: boolean) => IAction<T>[]) | undefined;
 }
 export {};

package/esm/dataGrid/dataGrid.d.ts

@@ -17,6 +17,18 @@ export interface IDataGrid<T, N = T> extends Omit<IZenComponentProps, "children"
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
     active?: string | undefined;
     onClick?: (id: string) => void;
+    /**
+     * Called when the user scrolls within ~100 px of the grid bottom (once per approach to the bottom).
+     * Also fires after each `entities` change while the grid is already near the bottom — this drives
+     * viewport-fill on initial load and greedy load-ahead on appends, so it can fire without new scroll
+     * input. The caller is responsible for preventing concurrent fetches (e.g. ignore it while `isLoading`).
+     */
+    onScrollEnd?: () => void;
+    /**
+     * When true, sets `aria-busy` on the grid `<table>` for assistive technology while a fetch is in
+     * flight. Callers should also treat it as the guard signal for `onScrollEnd` (skip re-entrant fetches).
+     */
+    isLoading?: boolean;
 }
 export declare const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
 export declare const DRAGGING_MODIFIER = "zen-data-grid--dragging";
@@ -25,7 +37,7 @@ export declare const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll"
 export declare const MIN_CELL_WIDTH = 100;
 export declare const EmptyList: FC<PropsWithChildren>;
 export declare const Footer: FC<PropsWithChildren>;
-declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange, active, onClick }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange, active, onClick, onScrollEnd, isLoading }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataGridStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;

package/esm/dataGrid/dataGrid.js

@@ -69,6 +69,7 @@ export const Footer = ({
   children: children
 });
 const FIRST_RENDERED_ROWS = 100;
+const SCROLL_END_THRESHOLD = 100;
 const DataGridInner = ({
   entities,
   columns,
@@ -80,7 +81,9 @@ const DataGridInner = ({
   expandedRows,
   onExpandedChange,
   active,
-  onClick
+  onClick,
+  onScrollEnd,
+  isLoading
 }, ref) => {
   const {
     translate
@@ -96,6 +99,8 @@ const DataGridInner = ({
   const gridRef = useRef(null);
   const bodyRef = useRef(null);
   const lazyRenderTimerRef = useRef(0);
+  const scrollEndFiredRef = useRef(false);
+  const prevEntitiesRef = useRef(entities);
   const rowsMap = useMemo(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
   const emptyList = useMemo(() => Children.toArray(children).find(child => child.type === EmptyList), [children]);
   const footer = useMemo(() => Children.toArray(children).find(child => child.type === Footer), [children]);
@@ -173,10 +178,48 @@ const DataGridInner = ({
       setVerticalScrollApplied(scrollTop > 0);
     }
   }, [horizontalScrollApplied, setHorizontalScrollApplied, verticalScrollApplied, setVerticalScrollApplied]);
+  const checkScrollEnd = useCallback(() => {
+    const grid = gridRef.current;
+    if (!grid || !onScrollEnd) {
+      return;
+    }
+    // scrollHeight is 0 before layout (or for an empty grid) — nothing to measure yet.
+    if (grid.scrollHeight === 0) {
+      return;
+    }
+    const distanceToTheBottom = grid.scrollHeight - grid.scrollTop - grid.clientHeight;
+    if (distanceToTheBottom < SCROLL_END_THRESHOLD) {
+      if (!scrollEndFiredRef.current) {
+        scrollEndFiredRef.current = true;
+        onScrollEnd();
+      }
+    } else {
+      scrollEndFiredRef.current = false;
+    }
+  }, [onScrollEnd]);
   const handleScroll = useCallback(() => {
     updateScroll();
     scheduleLazyRender();
-  }, [updateScroll, scheduleLazyRender]);
+    checkScrollEnd();
+  }, [updateScroll, scheduleLazyRender, checkScrollEnd]);
+  useEffect(() => {
+    // On a data change (load-more append, or a sort/filter that replaces the list):
+    // re-arm the once-per-approach guard so a stale "already fired" flag can't suppress the
+    // next trigger, then re-check fit. The re-check covers the viewport-fit case: if the new
+    // content doesn't fill the viewport there is no scrollbar and no scroll event, so the next
+    // page must be requested here. Resize alone intentionally does not run this (see useResize).
+    if (prevEntitiesRef.current !== entities) {
+      prevEntitiesRef.current = entities;
+      scrollEndFiredRef.current = false;
+    }
+    // Intentionally unconditional: this covers BOTH viewport-fill (new content too short to
+    // scroll) AND greedy load-ahead (user parked near the bottom while a page lands, so the
+    // next page is requested without further scroll input). Consequence: onScrollEnd is NOT
+    // strictly "once per manual approach" — it keeps firing while near the bottom until
+    // hasMore is false or the user scrolls away. Callers MUST guard with their own isLoading
+    // to avoid concurrent fetches (documented on the onScrollEnd prop).
+    checkScrollEnd();
+  }, [entities, checkScrollEnd]);
   const getCellParams = useCallback(columnIndex => {
     const defaultWidth = listOfDefaultWidthColumns[columnIndex];
     const minWidth = listOfMinWidthColumns[columnIndex];
@@ -239,7 +282,8 @@ const DataGridInner = ({
   const body = useMemo(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
   const headerContent = useMemo(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
   useResize(() => {
-    handleScroll();
+    updateScroll();
+    scheduleLazyRender();
   }, true);
   const gridClasses = classNames(["zen-data-grid", className, horizontalScrollApplied ? HORIZONTAL_SCROLL_MODIFIER : "", verticalScrollApplied ? VERTICAL_SCROLL_MODIFIER : ""]);
   return _jsx("div", {
@@ -252,6 +296,7 @@ const DataGridInner = ({
       children: [_jsxs("table", {
         className: "zen-data-grid__table",
         "aria-label": description,
+        "aria-busy": !!isLoading,
         role: isTreeGrid ? "treegrid" : undefined,
         children: [_jsx("thead", {
           className: "zen-data-grid__header",

package/esm/dataGrid/emptySearchList/emptySearchList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IEmptyState } from "../../emptyState/emptyState";
 export interface IEmptySearchList extends Omit<IEmptyState, "children"> {
     image?: React.ReactNode;

package/esm/dataGrid/row/row.d.ts

@@ -20,4 +20,6 @@ export interface IDataGridRow<T extends IRowEntity<N>, N extends IEntityWithId>
     onClick?: (id: string) => void;
 }
 export declare const MIN_CELL_WIDTH = 100;
-export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;
+declare const Row: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: typeof Row;
+export {};

package/esm/dataGrid/withActions/withActions.d.ts

@@ -7,7 +7,7 @@ export interface IActionColumnsProps<T extends IEntityWithId> {
     columns: IListColumn<T, T>[];
     ref?: RefObject<HTMLElement | null>;
 }
-export declare const withActions: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+export declare const withActions: <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>) => {
     (props: IActionColumnsProps<T> & P): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.d.ts

@@ -23,7 +23,7 @@ export interface IFlexibleColumnsListProps<T> {
     ref?: RefObject<HTMLElement | null>;
 }
 export declare const withFlexibleColumns: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): {
+    <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>): {
         (props: IFlexibleColumnsListProps<T> & P): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };

package/esm/dataGrid/withLoading/withLoading.d.ts

@@ -19,7 +19,7 @@ export interface IWithLoadingProps<T> {
 export interface ILoadingEntity extends IEntityWithId {
     isLoading?: boolean;
 }
-export declare const withLoading: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+export declare const withLoading: <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>) => {
     (props: IWithLoadingProps<T> & Partial<Pick<ISelectableRowsList<T, T>, "selectMode">> & P): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/dataGrid/withSelectableRows/withLimitedSelectableRows.d.ts

@@ -12,7 +12,7 @@ export interface ILimitedSelectableRowsList<T extends IEntityWithId> extends ISe
 /**
  * @deprecated Please use withSelectableRows with options checkboxVisible/checkboxDisabled instead
  */
-export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>) => {
     (props: ILimitedSelectableRowsList<T> & P): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/dataGrid/withSelectableRows/withSelectableRows.d.ts

@@ -33,7 +33,7 @@ export interface ISelectableRowsList<T, N = T> {
     ref?: RefObject<HTMLElement | null>;
 }
 export declare const getSelections: (selections: ISelectableRowsListSelections | undefined) => Set<string>;
-export declare const withSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+export declare const withSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>) => {
     (props: ISelectableRowsList<T, T> & P): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     translations: string[];

package/esm/dataGrid/withSortableColumns/withSortableColumns.d.ts

@@ -18,7 +18,7 @@ export interface ISortableColumnsListProps<T> {
     ref?: RefObject<HTMLElement | null>;
 }
 export declare const withSortableColumns: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): (props: ISortableColumnsListProps<T> & P) => import("react/jsx-runtime").JSX.Element;
+    <T extends IEntityWithId, P extends IDataGrid<T>>(DataGridComponent: ComponentType<P>): (props: ISortableColumnsListProps<T> & P) => import("react/jsx-runtime").JSX.Element;
     translations: string[];
 };
 export {};

package/esm/dialog/dialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./dialog.less";
 import { DialogContent } from "./dialogContent";
 export interface IDialog {

package/esm/dropdown/dropdown.js

@@ -20,4 +20,4 @@ export const Dropdown = (_a) => {
     var props = __rest(_a, []);
     return _jsx(DropDownFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];

package/esm/dropdown/useDropdownState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useDropdownState: (withCheckbox?: boolean, debounceTimeout?: number) => {
     checked?: boolean | undefined;
     setChecked?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;

package/esm/dropdownRaw/dropdownList.d.ts

@@ -13,7 +13,8 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isAllSelected: boolean;
+    isSelectAllActive?: boolean;
+    shouldBlockItems?: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -39,6 +40,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/dropdownRaw/dropdownList.js

@@ -178,39 +178,6 @@ injectString("ka-GE", "Apply", "\u10D2\u10D0\u10DB\u10DD\u10E7\u10D4\u10DC\u10D4
 injectString("el-GR", "Apply", "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE");
 injectString("et-EE", "Apply", "Rakenda");
 injectString("bg-BG", "Apply", "\u041F\u0440\u0438\u043B\u0430\u0433\u0430\u043D\u0435");
-injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
-injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
-injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
-injectString("en", "Deselect all", "Deselect all");
-injectString("es", "Deselect all", "Deseleccionar todo");
-injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
-injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
-injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
-injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
-injectString("id", "Deselect all", "Batalkan pilih semua");
-injectString("it", "Deselect all", "Deselezionare tutto");
-injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
-injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
-injectString("ms", "Deselect all", "Nyahpilih semua");
-injectString("nb-NO", "Deselect all", "Fjern alle valg");
-injectString("nl", "Deselect all", "Alles deselecteren");
-injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
-injectString("pt-BR", "Deselect all", "Desmarcar tudo");
-injectString("pt-PT", "Deselect all", "Desmarcar tudo");
-injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
-injectString("sv", "Deselect all", "Avmarkera alla");
-injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
-injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
-injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
-injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
-injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
-injectString("ar", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
-injectString("lt-LT", "Deselect all", "At\u017Eym\u0117ti visus");
-injectString("lv-LV", "Deselect all", "Atcelt visas atlases");
-injectString("ka-GE", "Deselect all", "\u10E7\u10D5\u10D4\u10DA\u10D0\u10E1 \u10DB\u10DD\u10EE\u10E1\u10DC\u10D0");
-injectString("el-GR", "Deselect all", "\u039A\u03B1\u03C4\u03AC\u03C1\u03B3\u03B7\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD");
-injectString("et-EE", "Deselect all", "T\xFChista k\xF5ik valikud");
-injectString("bg-BG", "Deselect all", "\u041F\u0440\u0435\u043C\u0430\u0445\u0432\u0430\u043D\u0435 \u043D\u0430 \u0432\u0441\u0438\u0447\u043A\u0438 \u0438\u0437\u0431\u043E\u0440\u0438");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -373,7 +340,8 @@ export const DropdownList = ({
   onSelect,
   onSingleSelect,
   listData,
-  isAllSelected,
+  isSelectAllActive,
+  shouldBlockItems,
   backButtonName,
   width,
   minWidth,
@@ -402,7 +370,7 @@ export const DropdownList = ({
   const internalListId = useId();
   const selectListId = listId || internalListId;
   const handleSelectAllClick = () => {
-    onSelectAllClick(isAllSelected);
+    onSelectAllClick(!!isSelectAllActive);
   };
   const handleBackButtonKeyDown = useCallback(event => {
     if (event.key === "ArrowLeft") {
@@ -430,13 +398,14 @@ export const DropdownList = ({
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
   }, [activeValue, forceSelection, onSingleSelect]);
-  const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
-  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => _jsx("button", {
+  const selectButtonLabel = translate("Select all");
+  const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown, isSelected) => _jsx("button", {
     type: "button",
     disabled: isDisabled,
     onClick: clickHandler,
     onKeyDown: onKeyDown,
-    className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
+    "aria-pressed": isSelected,
+    className: classNames(["zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", isSelected ? "zen-dropdown-list__action-button--selected" : ""]),
     title: title,
     children: _jsxs(_Fragment, {
       children: [React.createElement(icon, {
@@ -472,11 +441,14 @@ export const DropdownList = ({
       });
       return values;
     };
+    const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
+      blocked: true
+    })) : listData;
     return _jsx("div", {
       className: "zen-dropdown-list__elements",
       ref: listElementRef,
       children: isMultiselect ? _jsx(CheckboxListWithAction, {
-        options: listData,
+        options: multiselectOptions,
         label: "",
         onChange: handleChange,
         onClick: handleClick
@@ -492,7 +464,7 @@ export const DropdownList = ({
         value: createValue(listData, activeValue)
       })
     });
-  }, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
+  }, [listElementRef, isMultiselect, shouldBlockItems, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
   return _jsxs("div", Object.assign({
     className: classNames(["zen-dropdown-list", driveComponentClass || ""])
   }, styleWidth, {
@@ -510,7 +482,7 @@ export const DropdownList = ({
     }) : null, backButtonName ? _jsx("div", {
       className: "zen-dropdown-list__item-wrapper",
       children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
-    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", {
+    }) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge", undefined, isSelectAllActive) : null, listDataComponent, isWithFooter ? _jsxs("div", {
       className: "zen-dropdown-list__footer",
       children: [_jsx(Button, {
         onClick: isMultiselect ? onClearClick : handleClearClick,
@@ -538,4 +510,4 @@ export const DropdownList = ({
     }) : null]
   }));
 };
-export const TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Select all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/dropdownRaw.js

@@ -8,7 +8,7 @@ import { getInitialState, stateReducer, ROOT_GROUP_ID } from "./stateReducer/sta
 import { StateActionType } from "./stateReducer/stateActionType";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { useEscape } from "../commonHelpers/hooks/useEscape";
-import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
+import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
 import { DropdownTrigger } from "./dropdownTrigger";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -109,7 +109,10 @@ export const DropdownRaw = props => {
     mobileSheetStackingClassName,
     isError,
     firstParentNodeIsVisible,
-    dataAnalyticsId
+    dataAnalyticsId,
+    hideSelectAllOnSearch = false,
+    blockItemsOnSelectAll = false,
+    autoPromoteSelectAll = false
   } = props;
   const {
     isFormSection
@@ -147,7 +150,7 @@ export const DropdownRaw = props => {
   const isQueryMode = useMemo(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
   const isCheckboxMode = useMemo(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
   const [initialInChecked] = useState(isCheckboxMode ? value.isChecked : undefined);
-  const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined, firstParentNodeIsVisible));
+  const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined, firstParentNodeIsVisible, autoPromoteSelectAll));
   const chipStatus = useChipStatus();
   const isMobile = useMobile();
   const popupId = useId();
@@ -174,6 +177,7 @@ export const DropdownRaw = props => {
   const getNamedItemsHasBeenCalled = useRef(false);
   const selectedItemsLoader = useRef(undefined);
   const previousMapDataItems = useRef(isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : !getData && (dataItems === null || dataItems === void 0 ? void 0 : dataItems.length) ? dataItems : []);
+  const previousFetchStateData = useRef(isQueryMode ? fetchState === null || fetchState === void 0 ? void 0 : fetchState.data : undefined);
   const prevIsLoading = useRef(isLoading);
   const prevIsChecked = useRef(isCheckboxMode ? value.isChecked : undefined);
   const currentAllSelected = useMemo(() => state.isNestedList || !multiselect || !isFullSelectionMode ? undefined : state.isAllSelected, [state.isNestedList, state.isAllSelected, multiselect, isFullSelectionMode]);
@@ -380,7 +384,9 @@ export const DropdownRaw = props => {
   }, [handleClose]);
   const memoizedAllowClosing = useMemo(() => state.currentId === undefined || state.currentId === state.rootId, [state.currentId, state.rootId]);
   const handleSingleSelection = useCallback((reset, selected) => {
-    const shouldBeClosed = !hasApplyButton && memoizedAllowClosing && (!reset && selected || reset);
+    var _a, _b;
+    const isLeaf = !!selected && !((_b = (_a = state.groupsMap[selected]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length);
+    const shouldBeClosed = !hasApplyButton && (memoizedAllowClosing || isLeaf) && (reset || !!selected);
     dispatchState({
       type: StateActionType.ChangeSingleSelection,
       payload: {
@@ -393,7 +399,7 @@ export const DropdownRaw = props => {
       type: StateActionType.SetInputValue,
       payload: ""
     });
-  }, [handleEscape, hasApplyButton, memoizedAllowClosing]);
+  }, [handleEscape, hasApplyButton, memoizedAllowClosing, state.groupsMap]);
   const handleSelectAllClick = useCallback(isAllSelect => {
     if (isFullSelectionMode) {
       dispatchState({
@@ -529,8 +535,12 @@ export const DropdownRaw = props => {
       payload: undefined
     });
   }, [errorHandler]);
-  const handleDataQuery = useCallback((dta, searchVal) => {
-    if (dta.length && !searchVal && !compareObjectsArrays(dta, previousMapDataItems.current)) {
+  const handleDataQuery = useCallback((dta, searchVal, dataChanged = true) => {
+    // Only (re)build groupsMap from a genuine, freshly fetched full list. In query mode the parent's
+    // fetchState.data lags behind the typed search value, so when a search is cleared this effect can run
+    // with the previous, search-filtered data while searchVal is already empty. Rebuilding groupsMap from
+    // that stale subset shrinks it and makes the current selection look like "all selected".
+    if (dataChanged && dta.length && !searchVal && !compareObjectsArrays(dta, previousMapDataItems.current)) {
       dispatchState({
         type: StateActionType.CreateMap,
         payload: dta
@@ -577,7 +587,9 @@ export const DropdownRaw = props => {
       if (!isQueryMode || (fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading)) {
         return;
       }
-      handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue);
+      const dataChanged = (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) !== previousFetchStateData.current;
+      previousFetchStateData.current = fetchState === null || fetchState === void 0 ? void 0 : fetchState.data;
+      handleDataQuery((fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [], state.inputValue, dataChanged);
     });
     return () => {
       var _a;
@@ -876,7 +888,15 @@ export const DropdownRaw = props => {
       });
     }
     if (state.showList) {
-      const isSearchMode = state.inputValue && !state.currentId;
+      const isSearchMode = Boolean(state.inputValue) && !state.currentId;
+      const selectAllActiveForCurrentLevel = state.selectAllActiveForId === (state.currentId || state.rootId);
+      // DESIGN INTENT: button state (isSelectAllActive) is truth-based — shows pressed whenever
+      // all items are actually selected, including after search+clear where selectAllActiveForId
+      // was cleared. shouldBlockItems is intent-based — only activates when "Select all" was
+      // explicitly clicked (selectAllActiveForCurrentLevel), never from manual individual selection.
+      // This asymmetry is intentional: the button restores its visual state post-search, but
+      // blocking does not, to avoid unexpected UX when users manually select all items.
+      const isAllCurrentLevelSelected = !isSearchMode && !isFullSelectionMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : false;
       const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
@@ -892,16 +912,17 @@ export const DropdownRaw = props => {
         activeValue: state.selectedIds.length ? state.selectedIds[0] : "root",
         backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined,
         filterName: isMobile ? undefined : filterName,
-        isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || state.rootId) : false,
+        isSelectAllActive: isFullSelectionMode ? currentAllSelected : isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : selectAllActiveForCurrentLevel || isAllCurrentLevelSelected,
+        shouldBlockItems: blockItemsOnSelectAll && !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
         isMultiselect: multiselect,
         forceSelection: forceSelection,
         listData: currentListData,
         width: width || currentWidth === 180 ? undefined : currentWidth,
         minWidth: currentWidth,
-        hasSelectAllButton: selectAllButton && multiselect,
+        hasSelectAllButton: selectAllButton && multiselect && !(hideSelectAllOnSearch && state.inputValue),
         hasApplyButton: hasApplyButton,
         isApplyDisabled: memoizedIsApplyButtonDisabled,
-        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
+        isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
         isClearButtonDisabled: memoizedIsClearButtonDisabled,
         isWithFooter: memoizedWithFooter && !isMobile,
         isMobile: isMobile,
@@ -913,7 +934,7 @@ export const DropdownRaw = props => {
       });
     }
     return null;
-  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId]);
+  }, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, hideSelectAllOnSearch, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId, isFullSelectionMode, blockItemsOnSelectAll]);
   const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate, state.rootId) : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
   const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
   const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
@@ -1011,4 +1032,4 @@ export const DropdownRaw = props => {
   });
 };
 DropdownRaw.displayName = "DropdownRaw";
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];