@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/dist/dropdownRaw/dropdownRaw.js

@@ -135,7 +135,8 @@ const DropdownRaw = props => {
     mobileSheetStackingClassName,
     isError,
     firstParentNodeIsVisible,
-    dataAnalyticsId
+    dataAnalyticsId,
+    sortSelectedToTop = false
   } = props;
   const {
     isFormSection
@@ -945,7 +946,7 @@ const DropdownRaw = props => {
     const currentAbort = abortToken.current;
     controlData(currentAbort.signal, newValue, state.isChecked);
   }, [controlData, state.isChecked]);
-  const containerClassName = (0, classNames_1.classNames)(["zen-dropdown", isFormSection ? "zen-dropdown--form-item" : "", "zen-dropdown__container", className || ""]);
+  const containerClassName = (0, classNames_1.classNames)(["zen-dropdown", isFormSection || isFormItemVal ? "zen-dropdown--form-item" : "", "zen-dropdown__container", className || ""]);
   const handleCheckboxChange = (0, react_1.useCallback)(e => {
     const isChecked = e.target.checked;
     dispatchState({
@@ -1139,9 +1140,35 @@ const DropdownRaw = props => {
     }
     if (state.showList) {
       const isSearchMode = state.inputValue && !state.currentId;
-      const currentListData = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      (0, dropdownHelper_1.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 = (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId);
+      } else {
+        const children = (0, dropdownHelper_1.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 ? (0, dropdownHelper_1.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 = (0, dropdownHelper_1.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 (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,
@@ -1175,7 +1202,7 @@ 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 ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate, state.rootId) : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
   const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
   const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
@@ -1219,7 +1246,7 @@ 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,
@@ -1235,7 +1262,8 @@ const DropdownRaw = props => {
       handleFocusOnPopup: handleFocusOnPopup,
       popupId: memoizedAllyPattern === "selectOnlyCombobox" ? selectListId : popupId,
       allyPattern: memoizedAllyPattern,
-      dataAnalyticsId: dataAnalyticsId
+      dataAnalyticsId: dataAnalyticsId,
+      isFormItem: isFormItemVal
     }, accessibilityProps)), (0, jsx_runtime_1.jsx)(dropdownPopup_1.DropdownPopup, {
       alignment: alignment,
       triggerRef: triggerRef,

package/dist/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/dist/dropdownRaw/dropdownSearchableTrigger.js

@@ -157,6 +157,8 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
 const formSectionProvider_1 = require("../formSection/utils/formSectionProvider");
+const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
+const getNonAriaProps_1 = require("../commonHelpers/getNonAriaProps");
 const DropdownSearchableTrigger = _a => {
   var {
       value,
@@ -180,9 +182,10 @@ 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 {
@@ -201,6 +204,10 @@ const DropdownSearchableTrigger = _a => {
   } : {};
   const isLargeNumber = count && count > 99;
   const clearRef = (0, react_1.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 = (0, getAriaAttributes_1.getAriaAttributes)(otherProps);
+  const restProps = (0, getNonAriaProps_1.getNonAriaProps)(otherProps);
   const handleKeydown = e => {
     if (e.key === "Enter" && !isOpenPopup) {
       handleClick(true);
@@ -230,10 +237,10 @@ const DropdownSearchableTrigger = _a => {
     onChange(undefined);
   };
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classNames_1.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: (0, classNames_1.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: [(0, jsx_runtime_1.jsxs)("div", {
@@ -242,7 +249,7 @@ const DropdownSearchableTrigger = _a => {
       children: [(0, jsx_runtime_1.jsx)("div", {
         className: "zen-dropdown-searchable-trigger__input-container",
         onKeyDown: handleKeydown,
-        children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, {
+        children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, Object.assign({
           value: value,
           placeholder: currentSelection ? currentSelection : placeholder || translate("Filter by group"),
           className: (0, classNames_1.classNames)(["zen-dropdown-searchable-trigger__input", "zen-ellipsis", currentSelection ? "zen-dropdown-searchable-trigger__input--selected" : ""]),
@@ -258,7 +265,7 @@ const DropdownSearchableTrigger = _a => {
           ariaHaspopup: "dialog",
           role: "combobox",
           autocomplete: autocomplete
-        })
+        }, accessibilityProps))
       }), count ? (0, jsx_runtime_1.jsx)("div", {
         className: "zen-dropdown-searchable-trigger__label-element",
         children: (0, jsx_runtime_1.jsx)("div", {

package/dist/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/dist/dropdownRaw/dropdownTrigger.js

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

package/dist/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/dist/dropdownRaw/stateReducer/stateReducer.js

@@ -51,7 +51,8 @@ const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit,
         globalIsChecked: isChecked,
         listLimit,
         resultsExceedListLimit: false,
-        firstParentNodeIsVisible: firstParentNodeIsVisible
+        firstParentNodeIsVisible: firstParentNodeIsVisible,
+        sortedTopSnapshot: selection
     };
 };
 exports.getInitialState = getInitialState;
@@ -104,7 +105,9 @@ function stateReducer(state, action) {
         case stateActionType_1.StateActionType.SetCurrentId:
             return Object.assign(Object.assign({}, state), { currentId: payload || undefined });
         case stateActionType_1.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_1.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_1.StateActionType.ResetStateToGlobal:

package/dist/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/dist/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/dist/formGroup/hooks/rowHooks/useLabelClasses.js

@@ -8,7 +8,9 @@ const getOneLabelOneControlClasses_1 = require("../../utils/getLabelClasses/getO
 const useLabelAlign_1 = require("../useLabelAlign");
 const useMode_1 = require("../useMode");
 const useSectionType_1 = require("../useSectionType");
+const TOP_ALIGN_CLASS = "zen-form-field-label--top";
 const useLabelClasses = (state) => {
+    var _a, _b;
     const type = (0, useSectionType_1.useSectionType)();
     const mode = (0, useMode_1.useMode)();
     const columns = (0, useColumns_1.useColumns)();
@@ -18,11 +20,15 @@ const useLabelClasses = (state) => {
         return;
     }
     const { labelClasses1, labelClasses2 } = (0, getLabelClasses_1.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 || ""}`;
     }
 };
 exports.useLabelClasses = useLabelClasses;

package/dist/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;

package/dist/formLayout/utils/applyLayoutPosition/applyLayoutPosition.js

@@ -7,108 +7,55 @@ const banner_1 = require("../../../banner/banner");
 const formLayoutTitle_1 = require("../../components/formLayoutTitle");
 const formLayoutColumnTitle_1 = require("../../components/columnTitle/formLayoutColumnTitle");
 const STATIC_COMPONENTS = [formStepper_1.FormStepper, formStepperButtons_1.FormStepperButtons, banner_1.Banner, formLayoutTitle_1.FormLayoutTitle, formLayoutColumnTitle_1.FormLayoutColumnTitle];
-const transform = components => {
-    const state = {};
-    // eslint-disable-next-line
-    // @ts-ignore
-    const movableComponents = components.filter((child) => !STATIC_COMPONENTS.includes(child.type));
-    // 1. Initialize state
-    components.forEach((child, index) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
-            state[index] = {
-                value: child,
-                realPos: index,
-                oldPos: null,
-                newPos: null,
-                newRealPos: index
-            };
-            return;
+const isStaticComponent = (child) => STATIC_COMPONENTS.includes(child.type);
+const getLayoutPosition = (child) => child.props.layoutPosition;
+const findNextFreeIndex = (fields, startIndex) => {
+    for (let offset = 0; offset < fields.length; offset++) {
+        const candidateIndex = (startIndex + offset) % fields.length;
+        if (fields[candidateIndex] === null) {
+            return candidateIndex;
         }
-        // eslint-disable-next-line
-        // @ts-ignore
-        const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state).map(field => field.newPos);
-        let newPos;
-        if (layoutPosition !== undefined) {
-            newPos = layoutPosition < 0 ? 0 : layoutPosition > movableComponents.length - 1 ? movableComponents.length - 1 : layoutPosition;
-            // eslint-disable-next-line
-            if (newPositions.indexOf(newPos) !== -1) {
-                if (layoutPosition >= movableComponents.length - 1) {
-                    newPos = 0;
-                }
-                // eslint-disable-next-line
-                while (newPositions.indexOf(newPos) !== -1) {
-                    newPos++;
-                }
-            }
+    }
+    return -1;
+};
+const clampLayoutPosition = (layoutPosition, maxPosition) => Math.max(0, Math.min(Math.trunc(layoutPosition), maxPosition));
+const transform = (components) => {
+    const movableComponents = components.filter(child => !isStaticComponent(child));
+    const positionedComponents = new Array(movableComponents.length).fill(null);
+    movableComponents.forEach(child => {
+        const layoutPosition = getLayoutPosition(child);
+        if (layoutPosition === undefined || !Number.isFinite(layoutPosition)) {
+            return;
         }
-        else {
-            newPos = null;
+        const clampedLayoutPosition = clampLayoutPosition(layoutPosition, movableComponents.length - 1);
+        const targetIndex = findNextFreeIndex(positionedComponents, clampedLayoutPosition);
+        if (targetIndex !== -1) {
+            positionedComponents[targetIndex] = child;
         }
-        state[index] = {
-            value: child,
-            realPos: index,
-            oldPos: movableComponents.indexOf(child),
-            newPos: newPos,
-            newRealPos: null
-        };
     });
-    // 2. Adjust positions
-    components
-        .sort((a, b) => a.props.layoutPosition - b.props.layoutPosition)
-        .forEach((child, index) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
+    const placedComponents = new Set(positionedComponents);
+    movableComponents.forEach(child => {
+        if (placedComponents.has(child)) {
             return;
         }
-        if (state[index].newPos !== null) {
-            return;
-        }
-        // eslint-disable-next-line
-        // @ts-ignore
-        const layoutPosition = child.props.layoutPosition;
-        const newPositions = Object.values(state)
-            .map(field => field.newPos)
-            .filter(pos => pos !== null);
-        let newPos = 0;
-        if (newPositions.indexOf(newPos) !== -1) {
-            if (layoutPosition >= movableComponents.length - 1) {
-                newPos = 0;
-            }
-            while (newPositions.indexOf(newPos) !== -1) {
-                newPos++;
-            }
+        const targetIndex = findNextFreeIndex(positionedComponents, 0);
+        if (targetIndex !== -1) {
+            positionedComponents[targetIndex] = child;
         }
-        state[index] = {
-            value: child,
-            realPos: index,
-            oldPos: movableComponents.indexOf(child),
-            newPos: newPos,
-            newRealPos: null
-        };
     });
-    // 3. Update newRealPos
-    components.forEach((child) => {
-        // eslint-disable-next-line
-        // @ts-ignore
-        if (STATIC_COMPONENTS.includes(child.type)) {
+    const reorderedMovableComponents = positionedComponents.filter((child) => child !== null);
+    const reorderedComponents = [...components];
+    let movableIndex = 0;
+    components.forEach((child, index) => {
+        if (isStaticComponent(child)) {
+            reorderedComponents[index] = child;
             return;
         }
-        const index = components.indexOf(child);
-        const newPos = state[index].newPos;
-        const withOldPos = Object.values(state).find(field => field.oldPos === newPos);
-        if (withOldPos) {
-            state[index].newRealPos = withOldPos.realPos;
-        }
+        reorderedComponents[index] = reorderedMovableComponents[movableIndex];
+        movableIndex++;
     });
-    return Object.values(state)
-        .sort((a, b) => a.newRealPos - b.newRealPos)
-        .map(el => el.value);
+    return reorderedComponents;
 };
-// TODO: test with titles
 const applyLayoutPosition = (components, result) => {
     const state = transform(components);
     result.length = 0;

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.d.ts

@@ -5,7 +5,7 @@ import { IMenuItem } from "../../../menu/components/menuItem";
 export interface ICustomContent {
     [key: string]: React.ReactElement<PropsWithChildren> | undefined;
 }
-export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon"> {
+export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon" | "iconOpen" | "destructive"> {
 }
 export interface IHeaderCustomContent {
     content: ICustomContent | null;

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -109,7 +109,9 @@ const PageToolbarCollapsedItemsControl = ({
         link: child.props.link,
         target: child.props.target,
         rel: child.props.rel,
-        icon: child.props.icon
+        icon: child.props.icon,
+        iconOpen: child.props.iconOpen,
+        destructive: child.props.destructive
       });
       items.push(el);
     }
@@ -122,7 +124,9 @@ const PageToolbarCollapsedItemsControl = ({
         link: child.props.link,
         target: child.props.target,
         rel: child.props.rel,
-        icon: child.props.icon
+        icon: child.props.icon,
+        iconOpen: child.props.iconOpen,
+        destructive: child.props.destructive
       }, child.props.children);
       items.push(el);
     }

package/dist/header/headerButton.d.ts

@@ -7,6 +7,8 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
     important?: boolean;
     inContextMenu?: boolean;
     icon?: React.FC<IIcon>;
+    iconOpen?: boolean;
+    destructive?: boolean;
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
@@ -14,6 +16,6 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
 }
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: {
-    ({ id, children, icon, iconPosition, className, important, onClick, inContextMenu, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconOpen, destructive, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/header/headerButton.js

@@ -18,9 +18,11 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 exports.HeaderButtonDisplayName = "HeaderButton";
 const HeaderButton = (_a) => {
-    var { id, children, icon, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "important", "onClick", "inContextMenu"]);
+    var { id, children, icon, iconOpen, destructive, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "destructive", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
     const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className]);
-    const props = Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" });
+    const props = Object.assign(Object.assign({}, restProps), { disabled, "data-important": important ? "1" : "0", 
+        // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.
+        focusableWhenDisabled: focusableWhenDisabled !== null && focusableWhenDisabled !== void 0 ? focusableWhenDisabled : Boolean(disabled) });
     return icon ? ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? e => onClick(id, e) : undefined }, props, { children: children })));
 };
 exports.HeaderButton = HeaderButton;

package/dist/header/headerMenu.d.ts

@@ -10,6 +10,8 @@ export interface IHeaderMenu extends Omit<IButton, "onClick"> {
     important?: boolean;
     inContextMenu?: boolean;
     icon?: FC<IIcon>;
+    iconOpen?: boolean;
+    destructive?: boolean;
     iconSize?: TSvgIconSize;
     alignment?: TAlignment;
     onlyIcon?: boolean;

package/dist/header/headerMenu.js

@@ -24,7 +24,7 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 exports.HeaderMenuDisplayName = "HeaderMenu";
 const HeaderMenu = (_a) => {
-    var { name, children, icon, iconSize = "large", className = "", important, alignment = "bottom-end", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
+    var { name, children, icon, iconOpen, destructive, iconSize = "large", className = "", important, alignment = "bottom-end", inContextMenu, onlyIcon } = _a, restProps = __rest(_a, ["name", "children", "icon", "iconOpen", "destructive", "iconSize", "className", "important", "alignment", "inContextMenu", "onlyIcon"]);
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-header-button-with-dropdown");