@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/esm/dataGrid/withSelectableRows/withSelectableRows.js

@@ -7,6 +7,8 @@ import { SelectList } from "../../selectList/selectList";
 import { CheckboxState } from "../../checkbox/checkboxState";
 import { SelectableRowsColumnWrapper } from "./columns/selectableRowsColumnWrapper";
 import { useLanguage } from "../../utils/localization/useLanguage";
+import { useDragSelection } from "../../table/selectable/useDragSelection";
+import { getDragSelectionRows } from "../../table/selectable/utils/getDragSelectionRows";
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -200,13 +202,29 @@ export const withSelectableRows = DataGridComponent => {
     const selectMenuRef = useRef(null);
     const selections = getSelections(selection);
     const allSelected = selection !== undefined && selection.allSelected;
-    const wrapper = useMemo(() => selectMode ? new SelectableRowsColumnWrapper(selections, {
-      createTitle: options.createTitle,
-      headerTitle: options.headerTitle,
-      condition: options.condition || options.checkboxVisible,
-      disabled: options.checkboxDisabled ? options.checkboxDisabled : entity => options.selectionLimit !== undefined ? !selections.has(entity.id) && selections.size >= options.selectionLimit : false,
-      header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
-    }, selectMenuRef) : null, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader]);
+    const isCheckboxVisible = useCallback(entity => {
+      const condition = options.condition || options.checkboxVisible;
+      return condition ? condition(entity) : true;
+    }, [options.condition, options.checkboxVisible]);
+    const isCheckboxDisabled = useCallback(entity => {
+      if (options.checkboxDisabled) {
+        return options.checkboxDisabled(entity);
+      }
+      if (options.selectionLimit !== undefined) {
+        return !selections.has(entity.id) && selections.size >= options.selectionLimit;
+      }
+      return false;
+    }, [options, selections]);
+    const wrapper = useMemo(() => {
+      var _a;
+      return selectMode ? new SelectableRowsColumnWrapper(selections, {
+        createTitle: options.createTitle,
+        headerTitle: options.headerTitle,
+        condition: options.condition || options.checkboxVisible,
+        disabled: (_a = options.checkboxDisabled) !== null && _a !== void 0 ? _a : isCheckboxDisabled,
+        header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
+      }, selectMenuRef) : null;
+    }, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader, isCheckboxDisabled]);
     if (wrapper) {
       wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
     }
@@ -214,9 +232,10 @@ export const withSelectableRows = DataGridComponent => {
       const newSelections = new Set(selections);
       entities.forEach(entity => {
         if (checked) {
-          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
+          // Intentionally not isCheckboxDisabled: "select all" ignores the selection
+          // limit, it only skips rows the consumer explicitly disabled.
           const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-          if (isVisible && isEnabled) {
+          if (isCheckboxVisible(entity) && isEnabled) {
             newSelections.add(entity.id);
           }
           return;
@@ -229,8 +248,49 @@ export const withSelectableRows = DataGridComponent => {
         allSelected: newState === SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, isCheckboxVisible]);
+    const {
+      rows: dragRows,
+      entityById
+    } = useMemo(() => getDragSelectionRows(entities), [entities]);
+    const isRowSelectable = useCallback(row => {
+      const entity = entityById.get(row.id);
+      return !!entity && isCheckboxVisible(entity) && !isCheckboxDisabled(entity);
+    }, [entityById, isCheckboxVisible, isCheckboxDisabled]);
+    // "Select all" is held as a flag rather than a list of ids, so materialise the page before
+    // a range starts editing it — otherwise the range would be applied to an empty selection.
+    const getBaseSelection = useCallback(() => allSelected ? new Set(entities.map(entity => entity.id)) : new Set(selections), [allSelected, entities, selections]);
+    const onBatchSelect = useCallback((rangeIds, select, base) => {
+      const result = new Set(base);
+      const limit = options.selectionLimit;
+      for (const id of rangeIds) {
+        if (select) {
+          if (limit !== undefined && result.size >= limit) {
+            break;
+          }
+          result.add(id);
+        } else {
+          result.delete(id);
+        }
+      }
+      const newState = calculateSelectionState(entities, result, false, options);
+      onSelect({
+        selected: [...result],
+        allSelected: newState === SelectionState.All,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    const {
+      onCheckboxMouseDown,
+      suppressNextChangeRef
+    } = useDragSelection(dragRows, props.ref, onBatchSelect, getBaseSelection, isRowSelectable, selectMode);
     const onSelectListener = useCallback(([id, checked]) => {
+      // A drag or shift-click has already emitted the whole range; swallow the click that
+      // ends it so the row it landed on is not toggled back.
+      if (suppressNextChangeRef.current) {
+        suppressNextChangeRef.current = false;
+        return;
+      }
       if (allSelected) {
         const newSelection = new Set(entities.map(entity => entity.id));
         newSelection.delete(id);
@@ -252,7 +312,7 @@ export const withSelectableRows = DataGridComponent => {
         allSelected: newState === SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, suppressNextChangeRef]);
     const onSelectAll = useCallback(([checked]) => {
       if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
         selectAll(true);
@@ -301,10 +361,11 @@ export const withSelectableRows = DataGridComponent => {
       wrapper.attach("change", onSelectListener);
       wrapper.attach("change-all", onSelectAll);
       wrapper.attach("toggle", onTriggerClick);
+      wrapper.attach("mousedown", ([id, checked, e]) => onCheckboxMouseDown(id, checked, e));
       return () => {
         wrapper.detach();
       };
-    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick, onCheckboxMouseDown]);
     const listColumns = useMemo(() => {
       const newColumns = columns.map(c => Object.assign({}, c));
       // Remove CheckboxColumnWrappers from wrappers list

package/esm/dropdown/dropdownTrigger.d.ts

@@ -1 +1 @@
-export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, dataAnalyticsId, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, dataAnalyticsId, isFormItem, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;

package/esm/dropdownRaw/dropdownHelper.d.ts

@@ -12,15 +12,27 @@ export declare const isAllItemsHasOneParent: (listData: IDropdownRawItem[], chil
 export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownRawItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
 export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
 export declare const sortDropdownItemArray: (arr: IDropdownRawItem[], sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number) => IDropdownRawItem[];
+/**
+ * Floats selected items to the top of the list while preserving the relative order within each
+ * group (selected and unselected). When `selectedIds` is empty the original array is returned
+ * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ */
+export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[]) => IDropdownRawItem[];
 export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[]) => {
+    destructive: boolean | undefined;
+    divider?: boolean | undefined;
     id: string;
     children: string;
+    title: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];
 export declare const createListDataOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isMultiselect: boolean, isAllSelected?: boolean) => ICheckboxListWithActionOption[] | {
+    destructive: boolean | undefined;
+    divider?: boolean | undefined;
     id: string;
     children: string;
+    title: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];

package/esm/dropdownRaw/dropdownHelper.js

@@ -45,7 +45,7 @@ export function prepareComboOptionsForList(actionListData, translate, options, g
     const preparedOptions = options && options.length
         ? options.map(option => {
             const selectedChild = getSelectedChildFn(option.id);
-            return Object.assign({ label: getGroupDescription(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {}));
+            return Object.assign(Object.assign({ label: getGroupDescription(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {})), (option.divider ? { divider: true } : {}));
         })
         : [];
     return preparedOptions;
@@ -81,16 +81,32 @@ export const sortDropdownItemArray = (arr, sortFn) => {
     }
     return arr;
 };
+/**
+ * Floats selected items to the top of the list while preserving the relative order within each
+ * group (selected and unselected). When `selectedIds` is empty the original array is returned
+ * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ */
+export const applySortSelectedToTop = (items, selectedIds) => {
+    if (!selectedIds.length)
+        return items;
+    const selectedSet = new Set(selectedIds);
+    const selected = [];
+    const unselected = [];
+    for (const item of items) {
+        (selectedSet.has(item.id) ? selected : unselected).push(item);
+    }
+    return [...selected, ...unselected];
+};
 export const createSingleListOptions = (stateObj, translate, listItem) => {
     const preparedOptions = listItem && listItem.length
-        ? listItem.map(option => ({
-            id: option.id,
-            children: getGroupDescription(stateObj.groupsMap[option.id] || option, translate),
-            disabled: option.disabled,
-            multiLevel: Object.keys(stateObj.groupsMap).length === 0
-                ? false
-                : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined
-        }))
+        ? listItem.map(option => {
+            const description = getGroupDescription(stateObj.groupsMap[option.id] || option, translate);
+            return Object.assign(Object.assign({ id: option.id, children: description, 
+                // Long names are truncated by `zen-ellipsis`, so expose the full text on hover
+                title: description, disabled: option.disabled, multiLevel: Object.keys(stateObj.groupsMap).length === 0
+                    ? false
+                    : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined }, (option.divider ? { divider: true } : {})), { destructive: option.destructive });
+        })
         : [];
     return preparedOptions;
 };
@@ -109,7 +125,11 @@ export const compareObjectsArrays = (arr1, arr2) => arr1.length === arr2.length
         const sameDisabled = el.disabled === el2.disabled ||
             (el.disabled === undefined && el2.disabled === false) ||
             (el2.disabled === undefined && el.disabled === false);
-        return sameId && sameDisabled;
+        const sameDivider = el.divider === el2.divider || (el.divider === undefined && el2.divider === false) || (el2.divider === undefined && el.divider === false);
+        const sameDestructive = el.destructive === el2.destructive ||
+            (el.destructive === undefined && el2.destructive === false) ||
+            (el2.destructive === undefined && el.destructive === false);
+        return sameId && sameDisabled && sameDivider && sameDestructive;
     });
 export const prepareSelectedIdsToItems = (selectedIds, groupsMap, groupsMapSelected) => {
     const selectedItems = selectedIds.map(id => {

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 { applySortSelectedToTop, checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
 import { DropdownTrigger } from "./dropdownTrigger";
 import { isFocusable } from "../dialog/dialogHelpers";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -127,7 +127,8 @@ export const DropdownRaw = props => {
     mobileSheetStackingClassName,
     isError,
     firstParentNodeIsVisible,
-    dataAnalyticsId
+    dataAnalyticsId,
+    sortSelectedToTop = false
   } = props;
   const {
     isFormSection
@@ -937,7 +938,7 @@ export const DropdownRaw = props => {
     const currentAbort = abortToken.current;
     controlData(currentAbort.signal, newValue, state.isChecked);
   }, [controlData, state.isChecked]);
-  const containerClassName = classNames(["zen-dropdown", isFormSection ? "zen-dropdown--form-item" : "", "zen-dropdown__container", className || ""]);
+  const containerClassName = classNames(["zen-dropdown", isFormSection || isFormItemVal ? "zen-dropdown--form-item" : "", "zen-dropdown__container", className || ""]);
   const handleCheckboxChange = useCallback(e => {
     const isChecked = e.target.checked;
     dispatchState({
@@ -1131,9 +1132,35 @@ export const DropdownRaw = props => {
     }
     if (state.showList) {
       const isSearchMode = state.inputValue && !state.currentId;
-      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);
+      // For the non-search path, applySortSelectedToTop must run BEFORE .slice(0, listLimit)
+      // so that selected items located beyond listLimit in sort order are floated into the
+      // visible window rather than being discarded by the clip.
+      // In search mode sort-to-top is suspended (results appear in natural/sortFn order).
+      let rawItems;
+      let pinnedCount = 0;
+      if (isSearchMode) {
+        rawItems = sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId);
+      } else {
+        const children = sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn);
+        // hasApplyButton=false (default): uses the open-time snapshot — items don't jump
+        //   while the dropdown is open; sort applies on the next open (confirmed design intent).
+        // hasApplyButton=true: uses globalSelectedIds (committed selection) — reordering
+        //   only takes effect after the user clicks "Apply".
+        const idsForSort = hasApplyButton ? state.globalSelectedIds : state.sortedTopSnapshot;
+        const floated = sortSelectedToTop ? applySortSelectedToTop(children, idsForSort) : children;
+        rawItems = floated.slice(0, listLimit);
+        if (sortSelectedToTop) {
+          const selectedSet = new Set(idsForSort);
+          pinnedCount = rawItems.filter(item => selectedSet.has(item.id)).length;
+        }
+      }
+      const listData = createListDataOptions(state, translate, rawItems, multiselect, currentAllSelected);
+      // Explicit bounds check (rather than relying on CheckboxListWithAction's own
+      // `ind < optionsArr.length - 1` guard) keeps the "don't draw a trailing divider"
+      // intent local to where the boundary is computed.
+      const currentListData = multiselect && sortSelectedToTop && pinnedCount > 0 && pinnedCount < listData.length ? listData.map((opt, ind) => ind === pinnedCount - 1 ? Object.assign(Object.assign({}, opt), {
+        divider: true
+      }) : opt) : listData;
       return _jsx(DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
@@ -1167,7 +1194,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, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId, sortSelectedToTop]);
   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;
@@ -1211,7 +1238,7 @@ export const DropdownRaw = props => {
       isError: isError,
       disabled: disabled,
       count: showCounterPill ? countSelected : 0,
-      fullWidth: fullWidthTriggerButton,
+      fullWidth: isFormItemVal && !searchField ? true : fullWidthTriggerButton,
       inputValue: state.inputValue,
       placeholder: placeholder || translate("Filter by group"),
       searchField: searchField && !isMobile ? searchField : false,
@@ -1227,7 +1254,8 @@ export const DropdownRaw = props => {
       handleFocusOnPopup: handleFocusOnPopup,
       popupId: memoizedAllyPattern === "selectOnlyCombobox" ? selectListId : popupId,
       allyPattern: memoizedAllyPattern,
-      dataAnalyticsId: dataAnalyticsId
+      dataAnalyticsId: dataAnalyticsId,
+      isFormItem: isFormItemVal
     }, accessibilityProps)), _jsx(DropdownPopup, {
       alignment: alignment,
       triggerRef: triggerRef,

package/esm/dropdownRaw/dropdownSearchableTrigger.d.ts

@@ -23,9 +23,10 @@ interface IDropdownSearchableTrigger {
     autocomplete?: string;
     handleFocusOnPopup?: () => void;
     dataAnalyticsId?: string;
+    isFormItem?: boolean;
 }
 export declare const DropdownSearchableTrigger: {
-    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur, popupId, autocomplete, handleFocusOnPopup, dataAnalyticsId, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
+    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, name, onBlur, popupId, autocomplete, handleFocusOnPopup, dataAnalyticsId, isFormItem, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownSearchableTrigger.js

@@ -17,6 +17,8 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
 import { FormSectionContext } from "../formSection/utils/formSectionProvider";
+import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
+import { getNonAriaProps } from "../commonHelpers/getNonAriaProps";
 injectString("cs", "Filter by group", "Filtrovat podle skupiny");
 injectString("da-DK", "Filter by group", "Filtrer efter gruppe");
 injectString("de", "Filter by group", "Nach Gruppe filtern");
@@ -172,9 +174,10 @@ export const DropdownSearchableTrigger = _a => {
       popupId,
       autocomplete,
       handleFocusOnPopup,
-      dataAnalyticsId
+      dataAnalyticsId,
+      isFormItem
     } = _a,
-    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId", "autocomplete", "handleFocusOnPopup", "dataAnalyticsId"])
+    otherProps = __rest(_a, ["value", "className", "onChange", "placeholder", "isOpenPopup", "inputRef", "handleClick", "width", "title", "id", "disabled", "count", "currentSelection", "isError", "fullWidth", "ref", "name", "onBlur", "popupId", "autocomplete", "handleFocusOnPopup", "dataAnalyticsId", "isFormItem"])
     // eslint-disable-next-line complexity
 ;
   const {
@@ -193,6 +196,10 @@ export const DropdownSearchableTrigger = _a => {
   } : {};
   const isLargeNumber = count && count > 99;
   const clearRef = useRef(null);
+  // The element with role="combobox" is the inner TextInputRaw, not the wrapper, so aria-* props
+  // have to reach the input. Everything else stays on the wrapper.
+  const accessibilityProps = getAriaAttributes(otherProps);
+  const restProps = getNonAriaProps(otherProps);
   const handleKeydown = e => {
     if (e.key === "Enter" && !isOpenPopup) {
       handleClick(true);
@@ -222,10 +229,10 @@ export const DropdownSearchableTrigger = _a => {
     onChange(undefined);
   };
   return _jsxs("div", Object.assign({
-    className: classNames(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "", driveComponentClass || "", isFormSection ? "zen-dropdown-searchable-trigger--form-item" : "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""])
+    className: classNames(["zen-dropdown-searchable-trigger", isError ? "zen-dropdown-searchable-trigger--error" : "", driveComponentClass || "", isFormSection || isFormItem ? "zen-dropdown-searchable-trigger--form-item" : "", disabled ? "zen-dropdown-searchable-trigger--disabled" : ""])
   }, inputStyle, {
     ref: ref
-  }, otherProps, {
+  }, restProps, {
     onClick: disabled ? () => {} : clickHandler,
     "data-analytics-id": dataAnalyticsId,
     children: [_jsxs("div", {
@@ -234,7 +241,7 @@ export const DropdownSearchableTrigger = _a => {
       children: [_jsx("div", {
         className: "zen-dropdown-searchable-trigger__input-container",
         onKeyDown: handleKeydown,
-        children: _jsx(TextInputRaw, {
+        children: _jsx(TextInputRaw, Object.assign({
           value: value,
           placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"),
           className: classNames(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]),
@@ -250,7 +257,7 @@ export const DropdownSearchableTrigger = _a => {
           ariaHaspopup: "dialog",
           role: "combobox",
           autocomplete: autocomplete
-        })
+        }, accessibilityProps))
       }), count ? _jsx("div", {
         className: "zen-dropdown-searchable-trigger__label-element",
         children: _jsx("div", {

package/esm/dropdownRaw/dropdownTrigger.d.ts

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

package/esm/dropdownRaw/dropdownTrigger.js

@@ -16,13 +16,13 @@ import { useMemo, useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getAllyTriggerProps } from "./dropdownHelper";
 export const DropdownTrigger = (_a) => {
-    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern = "buttonWithDialog", dataAnalyticsId } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "autocomplete", "buttonType", "isError", "popupId", "handleFocusOnPopup", "allyPattern", "dataAnalyticsId"]);
+    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern = "buttonWithDialog", dataAnalyticsId, isFormItem } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "autocomplete", "buttonType", "isError", "popupId", "handleFocusOnPopup", "allyPattern", "dataAnalyticsId", "isFormItem"]);
     const elInpRef = useRef(null);
     const handleButtonClick = () => {
         handleClick(!isActive);
     };
     const allyTriggerProps = useMemo(() => getAllyTriggerProps(allyPattern), [allyPattern]);
-    return (_jsx(_Fragment, { children: searchField ? (_jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId, autocomplete: autocomplete, dataAnalyticsId: dataAnalyticsId }, otherProps))) : (_jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || currentSelection || placeholder, "aria-expanded": isActive, "aria-controls": popupId }, allyTriggerProps, { dataAnalyticsId: dataAnalyticsId }, otherProps, { children: currentSelection ? (_jsx("span", { className: classNames([
+    return (_jsx(_Fragment, { children: searchField ? (_jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId, autocomplete: autocomplete, dataAnalyticsId: dataAnalyticsId, isFormItem: isFormItem }, otherProps))) : (_jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || currentSelection || placeholder, "aria-expanded": isActive, "aria-controls": popupId }, allyTriggerProps, { dataAnalyticsId: dataAnalyticsId }, otherProps, { children: currentSelection ? (_jsx("span", { className: classNames([
                     "zen-dropdown__trigger-button-text",
                     buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""
                 ]), children: currentSelection })) : (placeholder) }))) }));

package/esm/dropdownRaw/stateReducer/stateReducer.d.ts

@@ -31,6 +31,13 @@ export interface IDropdownState {
     defaultValueIsChecked?: boolean;
     globalIsChecked?: boolean;
     firstParentNodeIsVisible?: boolean;
+    /**
+     * Snapshot of `selectedIds` captured when the dropdown transitions from closed to open
+     * (sortSelectedToTop, hasApplyButton=false path). Captured in the reducer — rather than via a
+     * ref mutated during render — so it is safe under concurrent rendering (an interrupted/discarded
+     * render can't cause a stale snapshot to be reused) and is directly testable via dispatch.
+     */
+    sortedTopSnapshot: string[];
 }
 export interface IStateReducer extends Reducer<IDropdownState, TStateAction> {
 }
@@ -62,5 +69,6 @@ export declare const getInitialState: (isFullSelectionMode: boolean, comboItems:
     listLimit: number;
     resultsExceedListLimit: boolean;
     firstParentNodeIsVisible: boolean | undefined;
+    sortedTopSnapshot: string[];
 };
 export declare function stateReducer(state: IDropdownState, action: TStateAction): IDropdownState;

package/esm/dropdownRaw/stateReducer/stateReducer.js

@@ -47,7 +47,8 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, list
         globalIsChecked: isChecked,
         listLimit,
         resultsExceedListLimit: false,
-        firstParentNodeIsVisible: firstParentNodeIsVisible
+        firstParentNodeIsVisible: firstParentNodeIsVisible,
+        sortedTopSnapshot: selection
     };
 };
 // eslint-disable-next-line complexity
@@ -99,7 +100,9 @@ export function stateReducer(state, action) {
         case StateActionType.SetCurrentId:
             return Object.assign(Object.assign({}, state), { currentId: payload || undefined });
         case StateActionType.SetIsOpenCombo:
-            return Object.assign(Object.assign({}, state), { isOpenCombo: payload });
+            return Object.assign(Object.assign({}, state), { isOpenCombo: payload, 
+                // Capture the sortSelectedToTop snapshot exactly on the closed→open transition.
+                sortedTopSnapshot: payload && !state.isOpenCombo ? [...state.selectedIds] : state.sortedTopSnapshot });
         case StateActionType.ResetSelection:
             return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined });
         case StateActionType.ResetStateToGlobal:

package/esm/dropdownRaw/types.d.ts

@@ -15,6 +15,14 @@ export interface IDropdownRawItem extends IEntityWithId {
     children?: IEntityWithId[];
     color?: IColor;
     disabled?: boolean;
+    /** When true, renders a 1px separator line below this item. Purely visual — does not affect selection or keyboard navigation. */
+    divider?: boolean;
+    /**
+     * When true, renders the item label in `--text-error-message` red. Visual signal only — does not prevent selection.
+     * Only applies in single-select (SelectList) mode; ignored in multiselect (CheckboxListWithAction).
+     * Disabled+destructive renders with `--accents-error--main` (#ffeceb) on a transparent background, no hover feedback.
+     */
+    destructive?: boolean;
 }
 interface IFetchState<T> {
     data: T | undefined;
@@ -69,6 +77,34 @@ interface IDropdownBase extends IChipsParent {
     mobileSheetStackingClassName?: string;
     firstParentNodeIsVisible?: boolean;
     dataAnalyticsId?: string;
+    /**
+     * When `true`, floats currently-selected items to the top of the list when the dropdown opens.
+     * Selected items maintain their relative order among themselves; unselected items maintain
+     * their relative order below.
+     *
+     * **Reactivity — sort applies on open, not live:**
+     * - `hasApplyButton=false` (default): the sort is snapshotted at open-time. Checking or
+     *   unchecking items while the dropdown is open does **not** reorder the list immediately;
+     *   the user closes and reopens the dropdown to see the updated order.
+     * - `hasApplyButton=true`: order reflects the last committed selection (`globalSelectedIds`),
+     *   so reordering only takes effect after the user clicks "Apply" and then reopens.
+     *
+     * In search mode the sort is suspended so results appear in natural/sortFn order.
+     * Compatible with `sortFn`: `sortFn` is applied within each group before concatenation.
+     * The float is applied before `listLimit` clipping, so selected items beyond the limit are
+     * still surfaced into the visible window.
+     * In nested lists the sort applies per-level: when the user drills into a sub-group, selected
+     * children of that group float to the top of that group's view, independent of other levels.
+     *
+     * **Known limitation — full-selection mode (`isAllSelected: true`):** when the value uses the
+     * `{ selected, isAllSelected: true }` form and `hasApplyButton=false`, `state.selectedIds`
+     * may be empty (all items are implicitly selected rather than enumerated). In this combination
+     * `sortSelectedToTop` silently does nothing — all items are already selected so the visual
+     * result is equivalent. If you need explicit float ordering, use the enumerated `selected`
+     * array form instead.
+     * @default false
+     */
+    sortSelectedToTop?: boolean;
 }
 interface IDropdownBaseDefault {
     disabled?: boolean;

package/esm/filterButton/filterButton.d.ts

@@ -2,7 +2,7 @@ import React, { RefObject } from "react";
 import "./filterButton.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { ButtonType } from "../button/buttonType";
-export type TFilterButton = typeof ButtonType.Secondary | typeof ButtonType.Tertiary | typeof ButtonType.TertiaryBlack;
+export type TFilterButton = typeof ButtonType.Primary | typeof ButtonType.Destructive | typeof ButtonType.Secondary | typeof ButtonType.Tertiary | typeof ButtonType.TertiaryBlack | typeof ButtonType.TertiaryDestructive;
 export interface IFilterButton extends IZenComponentProps {
     id?: string;
     name?: string;

package/esm/formGroup/hooks/rowHooks/useLabelClasses.js

@@ -5,7 +5,9 @@ import { getOneLabelOneControlClasses } from "../../utils/getLabelClasses/getOne
 import { useLabelAlign } from "../useLabelAlign";
 import { useMode } from "../useMode";
 import { useSectionType } from "../useSectionType";
+const TOP_ALIGN_CLASS = "zen-form-field-label--top";
 export const useLabelClasses = (state) => {
+    var _a, _b;
     const type = useSectionType();
     const mode = useMode();
     const columns = useColumns();
@@ -15,10 +17,14 @@ export const useLabelClasses = (state) => {
         return;
     }
     const { labelClasses1, labelClasses2 } = getLabelClasses(state, columns, labelAlign, mode, type);
+    const effectiveLabelAlign1 = ((_a = state.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || labelAlign;
+    const effectiveLabelAlign2 = ((_b = state.elements.label2) === null || _b === void 0 ? void 0 : _b.labelAlign) || labelAlign;
+    const topAlignClass1 = effectiveLabelAlign1 === "top" ? ` ${TOP_ALIGN_CLASS}` : "";
+    const topAlignClass2 = effectiveLabelAlign2 === "top" ? ` ${TOP_ALIGN_CLASS}` : "";
     if (state.elements.label1 && labelClasses1) {
-        state.elements.label1.className = `${labelClasses1} ${state.elements.label1.className || ""}`;
+        state.elements.label1.className = `${labelClasses1}${topAlignClass1} ${state.elements.label1.className || ""}`;
     }
     if (state.elements.label2 && labelClasses2) {
-        state.elements.label2.className = `${labelClasses2} ${state.elements.label2.className || ""}`;
+        state.elements.label2.className = `${labelClasses2}${topAlignClass2} ${state.elements.label2.className || ""}`;
     }
 };

package/esm/formLayout/utils/applyLayoutPosition/applyLayoutPosition.d.ts

@@ -1 +1,2 @@
-export declare const applyLayoutPosition: (components: any, result: any) => void;
+import { ReactElement } from "react";
+export declare const applyLayoutPosition: (components: ReactElement[], result: ReactElement[]) => void;