npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-aedbcc7 → 0.0.0-canary-a46ac70 - Mend

@cube-dev/ui-kit 0.0.0-canary-aedbcc7 → 0.0.0-canary-a46ac70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (447) hide show

package/dist/components/fields/DatePicker/DateInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateInputBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/fields/DatePicker/DatePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DatePickerButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/TimeInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/intl.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

package/dist/components/fields/DatePicker/parseDate.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/FilterListBox/FilterListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Input/Input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { _FileInput } from "../FileInput/FileInput.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/ListBox/ListBox.d.ts CHANGED Viewed

@@ -14,11 +14,6 @@ interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, Fi
   listStyles?: Styles;
   /** Custom styles for individual options */
   optionStyles?: Styles;
-  /**
-   * Substring to highlight within each option's (text) children. Typically the
-   * current search query. Matching is case-insensitive.
-   */
-  optionHighlight?: string;
   /** Custom styles for section containers */
   sectionStyles?: Styles;
   /** Custom styles for section headings */

package/dist/components/fields/ListBox/ListBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -298,7 +298,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = "No items", shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
 	const [, forceUpdate] = useState({});
 	const lastSelectedKeyRef = useRef(null);
 	const externalSelectionHandler = onSelectionChange || props.onChange;
@@ -546,7 +546,6 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
-							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -577,7 +576,6 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
-							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -606,7 +604,6 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 								item,
 								state: listState,
 								optionStyles,
-								optionHighlight,
 								headingStyles,
 								sectionStyles,
 								isParentDisabled: isDisabled,
@@ -623,7 +620,6 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							item,
 							state: listState,
 							styles: optionStyles,
-							highlight: optionHighlight,
 							isParentDisabled: isDisabled,
 							validationState,
 							focusOnHover,
@@ -643,7 +639,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		]
 	}), ref, props);
 });
-function Option({ size = "medium", item, state, styles, highlight, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
+function Option({ size = "medium", item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
 	const localRef = useRef(null);
 	const combinedRef = useCombinedRefs(localRef, virtualRef);
 	const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
@@ -724,7 +720,6 @@ function Option({ size = "medium", item, state, styles, highlight, isParentDisab
 		isSelected,
 		isDisabled,
 		icon: effectiveIcon,
-		highlight,
 		labelProps,
 		descriptionProps,
 		styles: mergeStyles(styles, filteredItemProps.styles),
@@ -778,7 +773,7 @@ function ListBoxDropIndicator({ target, dropState }) {
 	});
 }
 function ListBoxSection(props) {
-	const { item, state, optionStyles, optionHighlight, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
+	const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
 	const heading = item.rendered;
 	const { itemProps, headingProps, groupProps } = useListBoxSection({
 		heading,
@@ -799,7 +794,6 @@ function ListBoxSection(props) {
 				item: node,
 				state,
 				styles: optionStyles,
-				highlight: optionHighlight,
 				isParentDisabled,
 				validationState,
 				focusOnHover,

package/dist/components/fields/ListBox/ListBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListBox.js","names":["Item","useHover","mergeProps","useFocus","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/ListBox/ListBox.tsx"],"sourcesContent":["import { useHover } from '@react-aria/interactions';\nimport { IconMinus } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n COLOR_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n AriaListBoxProps,\n DropTarget,\n useDraggableItem,\n useDropIndicator,\n useKeyboard,\n useListBox,\n useListBoxSection,\n useOption,\n} from 'react-aria';\nimport {\n Section as BaseSection,\n DraggableCollectionState,\n DroppableCollectionState,\n useListState,\n} from 'react-stately';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CheckIcon, GripVerticalIcon } from '../../../icons';\nimport { Icon } from '../../../icons/index';\nimport { useProviderProps } from '../../../provider';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\n// Import Menu styled components for header and footer\nimport {\n StyledDivider,\n StyledFooter,\n StyledHeader,\n StyledSectionHeading,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n CubeCollectionItemProps,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { DraggableListBox } from './DraggableListBox';\n\nimport type { CollectionBase, Key } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FirstArg<F> = F extends (...args: infer A) => any ? A[0] : never;\n\nconst ListBoxWrapperElement = tasty({\n qa: 'ListBox',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: 'max-content max-content max-content 1sf max-content',\n flow: 'column',\n gap: 0,\n position: 'relative',\n radius: {\n '': '1cr',\n '[data-shape=\"popover\"]': '(1cr - 1bw)',\n '[data-shape=\"plain\"]': '0',\n },\n color: '#dark-02',\n transition: 'theme',\n outline: {\n '': '#purple-03.0',\n 'invalid & focused': '#danger.50',\n focused: '#purple-03',\n },\n border: {\n '': true,\n focused: '#primary-text',\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n disabled: true,\n '[data-shape=\"plain\"] \| [data-shape=\"popover\"] \| searchable': false,\n },\n },\n});\n\nconst ListElement = tasty({\n as: 'ul',\n styles: {\n display: 'block',\n padding: 0,\n listStyle: 'none',\n boxSizing: 'border-box',\n margin: {\n '': '.5x .5x 0 .5x',\n '[data-shape=\"plain\"]': '0',\n },\n height: 'max-content',\n },\n});\n\n// NEW: dedicated scroll container for ListBox\nconst ListBoxScrollElement = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n overflow: 'auto',\n scrollbar: 'styled',\n },\n});\n\n// Create an extended Item for ListBox options with 'all' modifier support\nconst ListBoxItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n styles: {\n margin: {\n '': '0 0 1bw 0',\n ':last-of-type': '0',\n 'draggable & :last-of-type': '0 0 .5x 0',\n all: '.5x',\n },\n Icon: {\n cursor: {\n draggable: 'grab',\n },\n opacity: {\n gripIcon: '.4',\n 'gripIcon & hovered': '1',\n },\n transition: {\n draggable: 'opacity',\n },\n },\n },\n});\n\n// Horizontal drop indicator for DnD reordering\nconst ListBoxDropIndicatorElement = tasty({\n as: 'li',\n styles: {\n zIndex: 10,\n position: 'relative',\n pointerEvents: 'none',\n height: 0,\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n\n Indicator: {\n $: '>',\n position: 'absolute',\n left: '.5x',\n right: '.5x',\n top: '-1px',\n height: '2px',\n fill: '#primary',\n radius: 'round',\n },\n },\n});\n\nconst SectionWrapperElement = tasty({\n as: 'li',\n styles: {\n display: 'block',\n padding: {\n '': 0,\n ':last-of-type': '0 0 .5x 0',\n },\n },\n});\n\nconst SectionListElement = tasty({\n qa: 'ListBoxSectionList',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '0',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n },\n});\n\n// Checkbox component for multiple selection options\nconst ListBoxCheckbox = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: '.5r',\n width: '(2x - 2bw)',\n height: '(2x - 2bw)',\n flexShrink: 0,\n transition: 'theme',\n opacity: {\n '': 0,\n 'selected \| indeterminate \| hovered \| focused': 1,\n },\n fill: {\n '': '#surface',\n 'selected \| indeterminate': '#primary',\n 'invalid & !(selected \| indeterminate)': '#surface',\n 'invalid & (selected \| indeterminate)': '#danger',\n disabled: '#dark.12',\n },\n color: {\n '': '#clear',\n 'selected \| indeterminate': '#white',\n },\n border: {\n '': '#dark.30',\n invalid: '#danger',\n 'disabled \| ((selected \| indeterminate) & !invalid)': '#clear',\n },\n },\n});\n\nconst ListBoxCheckboxWrapper = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n cursor: '$pointer',\n placeSelf: 'stretch',\n },\n});\n\nfunction renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n}: {\n isSelected: boolean;\n isDisabled: boolean;\n isFocused: boolean;\n isHovered: boolean;\n validationState?: string;\n}) {\n const mods = {\n selected: isSelected,\n disabled: isDisabled,\n focused: isFocused,\n hovered: isHovered,\n invalid: validationState === 'invalid',\n };\n\n return (\n <ListBoxCheckboxWrapper data-element=\"CheckboxWrapper\" mods={mods}>\n <ListBoxCheckbox data-element=\"Checkbox\" mods={mods}>\n <CheckIcon size={12} stroke={3} />\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n}\n\nexport interface CubeListBoxProps<T>\n extends AriaListBoxProps<T>,\n CollectionBase<T>,\n FieldBaseProps,\n BasePropsWithoutChildren {\n /** Custom styles for the list container /\n listStyles?: Styles;\n /* Custom styles for individual options /\n optionStyles?: Styles;\n /\n Substring to highlight within each option's (text) children. Typically the\n * current search query. Matching is case-insensitive.\n /\n optionHighlight?: string;\n /* Custom styles for section containers /\n sectionStyles?: Styles;\n /* Custom styles for section headings /\n headingStyles?: Styles;\n /* Whether the ListBox is disabled /\n isDisabled?: boolean;\n /* The selected key in controlled single selection mode /\n selectedKey?: Key \| null;\n /* The selected keys in controlled multiple selection mode. Use \"all\" to select all items or an array of keys /\n selectedKeys?: 'all' \| Key[];\n /* The default selected key in uncontrolled single selection mode /\n defaultSelectedKey?: Key \| null;\n /* The default selected keys in uncontrolled multiple selection mode. Use \"all\" to select all items or an array of keys /\n defaultSelectedKeys?: 'all' \| Key[];\n /* Callback fired when selection changes /\n onSelectionChange?: (key: Key \| null \| 'all' \| Key[]) => void;\n /* The selection mode of the ListBox /\n selectionMode?: 'single' \| 'multiple';\n /* Ref for accessing the list DOM element /\n listRef?: RefObject<HTMLUListElement \| null>;\n /* Whether to disallow empty selection /\n disallowEmptySelection?: boolean;\n /* Whether to wrap focus when reaching the end of the list /\n shouldFocusWrap?: boolean;\n /\n Ref to access the internal ListState instance.\n * This allows parent components to access selection state and other list functionality.\n /\n stateRef?: RefObject<any \| null>;\n\n /\n Whether moving the pointer over an option will move DOM focus to that option.\n * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).\n * Defaults to true.\n /\n focusOnHover?: boolean;\n /* Custom header content displayed above the list /\n header?: ReactNode;\n /* Custom footer content displayed below the list /\n footer?: ReactNode;\n /* Custom styles for the header /\n headerStyles?: Styles;\n /* Custom styles for the footer /\n footerStyles?: Styles;\n /* Additional modifiers for styling the ListBox /\n mods?: Record<string, boolean>;\n /* Size variant of the ListBox /\n size?: 'small' \| 'medium' \| 'large';\n\n /\n When `true`, clicking an already-selected item keeps it selected instead of toggling it off.\n * Useful when embedding ListBox inside components like ComboBox.\n /\n disableSelectionToggle?: boolean;\n\n /\n Whether to use virtual focus for keyboard navigation.\n * When true, DOM focus stays outside individual option elements (useful for searchable lists).\n * Defaults to false for backward compatibility.\n /\n shouldUseVirtualFocus?: boolean;\n\n /\n Callback fired when the user presses Escape key.\n * When provided, this prevents React Aria's default Escape behavior (selection reset).\n /\n onEscape?: () => void;\n\n /\n Whether to show checkboxes for multiple selection mode.\n * This adds a checkbox icon to the left of each option.\n /\n isCheckable?: boolean;\n\n /\n Callback fired when an option is clicked but not on the checkbox area.\n * Used by FilterPicker to close the popover on non-checkbox clicks.\n /\n onOptionClick?: (key: Key) => void;\n\n /\n Whether to show the \"Select All\" option in multiple selection mode.\n * This adds a select all option to the header that allows selecting/deselecting all items.\n /\n showSelectAll?: boolean;\n\n /\n Label for the \"Select All\" option. Defaults to \"Select All\".\n /\n selectAllLabel?: ReactNode;\n\n /\n Props to apply to the \"Select All\" option.\n /\n allValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n /\n Filter function to apply to the collection nodes.\n * Takes an iterable of nodes and returns a filtered iterable.\n * Useful for implementing search/filter functionality.\n /\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n\n /\n Label to display when the list is empty (no items available).\n * Defaults to \"No items\".\n /\n emptyLabel?: ReactNode;\n\n /\n Visual shape of the ListBox styling.\n * - `card` (default): Standard card styling with border and margin\n * - `plain`: No border, no margin, no radius - suitable for embedded use\n * - `popover`: No border, but keeps margin and radius - suitable for overlay use\n * Defaults to 'card'.\n /\n shape?: 'card' \| 'plain' \| 'popover';\n\n /\n Enable drag-and-drop reordering of list items.\n * When enabled, virtualization is disabled and each item gets a drag handle.\n * @default false\n /\n isReorderable?: boolean;\n\n /\n Callback when items are reordered via drag-and-drop.\n * Called with the new array of item keys in their new order.\n /\n onReorder?: (newOrder: string[]) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst SelectAllOption = ({\n label = 'Select All',\n isSelected,\n isIndeterminate,\n isDisabled,\n isCheckable,\n size = 'medium',\n state,\n lastFocusSourceRef,\n onClick,\n allValueProps = {},\n}: {\n label?: ReactNode;\n isSelected: boolean;\n isIndeterminate: boolean;\n isDisabled?: boolean;\n isCheckable?: boolean;\n size?: 'small' \| 'medium' \| 'large';\n state: any;\n lastFocusSourceRef: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n onClick: (propagate?: boolean) => void;\n allValueProps?: Partial<CubeCollectionItemProps<any>>;\n}) => {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const markIcon = isIndeterminate ? (\n <Icon size={12} stroke={3}>\n <IconMinus />\n </Icon>\n ) : (\n <CheckIcon size={12} stroke={3} />\n );\n\n const localRef = useRef<HTMLLIElement>(null);\n\n // Create checkbox icon for select all option\n const checkboxIcon = useMemo(() => {\n if (!isCheckable) {\n return null;\n }\n\n return (\n <ListBoxCheckboxWrapper\n data-element=\"CheckboxWrapper\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n <ListBoxCheckbox\n data-element=\"Checkbox\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n {(isIndeterminate \|\| isSelected) && markIcon}\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n }, [\n isCheckable,\n isSelected,\n isDisabled,\n isHovered,\n isIndeterminate,\n markIcon,\n ]);\n\n const handleOptionClick = (e) => {\n // Mark focus changes from mouse clicks\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n // If there's an onOptionClick callback and this is checkable in multiple mode,\n // we need to distinguish between checkbox and content clicks\n if (state.selectionManager.selectionMode === 'multiple') {\n // Check if the click target is within the checkbox area\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget \|\|\n checkboxElement.contains(clickTarget))\n ) {\n onClick?.(false);\n } else {\n // Then call the callback (which will close the popover in FilterPicker)\n onClick?.(true);\n }\n } else {\n onClick?.(true);\n }\n };\n\n return (\n <>\n <ListBoxItem\n ref={localRef}\n data-size={size}\n size={size}\n role=\"option\"\n aria-selected={isSelected}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={checkboxIcon}\n mods={{\n listboxitem: true,\n disabled: isDisabled,\n checkable: isCheckable,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n all: true, // Important: this preserves the 'all' modifier\n }}\n {...mergeProps(hoverProps, allValueProps, {\n onClick: handleOptionClick,\n })}\n >\n {label}\n </ListBoxItem>\n <StyledDivider />\n </>\n );\n};\n\nexport const ListBox = forwardRef(function ListBox<T extends object>(\n props: CubeListBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: any = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: any) => {\n if (props.selectionMode === 'multiple') {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n qa,\n label,\n extra,\n id,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n listStyles,\n optionStyles,\n optionHighlight,\n sectionStyles,\n headingStyles,\n listRef,\n message,\n description,\n styles,\n mods: externalMods,\n size = 'medium',\n labelSuffix,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n shouldUseVirtualFocus,\n onSelectionChange,\n disableSelectionToggle = false,\n stateRef,\n focusOnHover,\n header,\n footer,\n headerStyles,\n footerStyles,\n onEscape,\n isCheckable,\n onOptionClick,\n showSelectAll,\n selectAllLabel,\n allValueProps,\n filter,\n emptyLabel = 'No items',\n shape = 'card',\n isReorderable = false,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const [, forceUpdate] = useState({});\n const lastSelectedKeyRef = useRef<Key \| null>(null);\n\n // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format\n const externalSelectionHandler = onSelectionChange \|\| (props as any).onChange;\n\n const wrappedOnSelectionChange = useMemo(() => {\n if (!externalSelectionHandler) return undefined;\n\n return (keys: any) => {\n // Don't allow selection changes when disabled\n if (isDisabled) {\n return;\n }\n\n // React Aria always passes a Set for selection changes\n // Handle the special \"all\" case and convert to our public API format\n if (keys === 'all') {\n externalSelectionHandler('all');\n } else if (keys instanceof Set) {\n if (keys.size === 0) {\n if (disableSelectionToggle && props.selectionMode === 'single') {\n const prevKey = lastSelectedKeyRef.current;\n if (prevKey != null) {\n externalSelectionHandler(prevKey);\n return;\n }\n }\n externalSelectionHandler(\n props.selectionMode === 'multiple' ? [] : null,\n );\n } else if (props.selectionMode === 'multiple') {\n externalSelectionHandler(Array.from(keys));\n } else {\n const key = Array.from(keys)[0];\n lastSelectedKeyRef.current = key ?? null;\n externalSelectionHandler(key);\n }\n } else {\n lastSelectedKeyRef.current = keys as Key \| null;\n externalSelectionHandler(keys);\n }\n };\n }, [\n externalSelectionHandler,\n isDisabled,\n props.selectionMode,\n disableSelectionToggle,\n ]);\n\n // Prepare props for useListState with correct selection props\n const listStateProps: FirstArg<typeof useListState> = {\n ...props,\n onSelectionChange: wrappedOnSelectionChange,\n isDisabled,\n disabledBehavior: 'all',\n filter,\n selectionMode: props.selectionMode \|\| 'single',\n };\n\n // Set selection props based on mode\n if (listStateProps.selectionMode === 'multiple') {\n if (selectedKeys !== undefined) {\n // Handle \"all\" selection by passing it directly to React Aria\n listStateProps.selectedKeys =\n selectedKeys === 'all' ? 'all' : new Set(selectedKeys as Key[]);\n }\n if (defaultSelectedKeys !== undefined) {\n // Handle \"all\" default selection\n listStateProps.defaultSelectedKeys =\n defaultSelectedKeys === 'all'\n ? 'all'\n : new Set(defaultSelectedKeys as Key[]);\n }\n // Remove single-selection props if any\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n } else {\n // For single-selection we convert the scalar key props that our public\n // API exposes into the Set-based props that React Stately expects.\n if (selectedKey !== undefined) {\n listStateProps.selectedKeys =\n selectedKey == null ? new Set() : new Set([selectedKey]);\n }\n\n if (defaultSelectedKey !== undefined) {\n listStateProps.defaultSelectedKeys =\n defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);\n }\n\n // Remove the single-value props so we don't pass unsupported keys through.\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n }\n\n const listState = useListState(listStateProps);\n\n useLayoutEffect(() => {\n const selected = listState.selectionManager.selectedKeys;\n if (selected && (selected as any).size > 0) {\n const first = Array.from(selected as Set<Key>)[0];\n lastSelectedKeyRef.current = first ?? null;\n }\n }, [listState.selectionManager.selectedKeys]);\n\n // Calculate select all state for multiple selection mode\n const selectAllState = useMemo(() => {\n // Select-all only makes sense for multiple selection mode and* when the UI is enabled\n if (props.selectionMode !== 'multiple' \|\| !showSelectAll) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // React Stately exposes the raw selection value which is either the string \"all\"\n // (when `selectAll(true)` was used) or a Set of item keys.\n const rawSelection: any = (listState.selectionManager as any).rawSelection;\n\n // Fast path – user pressed our \"Select All\" control previously.\n if (rawSelection === 'all') {\n return { isSelected: true, isIndeterminate: false };\n }\n\n const selectedKeys = listState.selectionManager.selectedKeys as Set<Key>;\n\n // When there is nothing selected, we are in a clear state\n if (selectedKeys.size === 0) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // Otherwise it must be a partial (indeterminate) selection.\n return { isSelected: false, isIndeterminate: true };\n }, [\n props.selectionMode,\n showSelectAll,\n listState.collection,\n listState.disabledKeys,\n listState.selectionManager.selectedKeys,\n listState.selectionManager.rawSelection,\n ]);\n\n // Handle select all click\n const handleSelectAllClick = (propagate?: boolean) => {\n if (isDisabled \|\| props.selectionMode !== 'multiple') return;\n\n if (selectAllState.isSelected) {\n // All selected, deselect all\n listState.selectionManager.clearSelection();\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.(new Set());\n } else {\n // Some or none selected, select all\n listState.selectionManager.selectAll(true);\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.('all');\n forceUpdate({});\n }\n\n if (propagate && !selectAllState.isSelected) {\n onOptionClick?.('__ALL__');\n }\n };\n\n // Track whether the last focus change was due to keyboard navigation\n const lastFocusSourceRef = useRef<'keyboard' \| 'mouse' \| 'other'>('other');\n\n // Expose the list state instance via the provided ref (if any)\n if (stateRef) {\n stateRef.current = {\n ...listState,\n lastFocusSourceRef,\n };\n }\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && props.selectionMode === 'single', {\n key: ['listbox-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Custom keyboard handling to prevent selection clearing on Escape while allowing overlay dismiss\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Mark focus changes from keyboard navigation\n if (\n e.key === 'ArrowDown' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'Home' \|\|\n e.key === 'End' \|\|\n e.key === 'PageUp' \|\|\n e.key === 'PageDown'\n ) {\n lastFocusSourceRef.current = 'keyboard';\n }\n\n if (e.key === 'Escape' && onEscape) {\n // Don't prevent default - let the overlay system handle closing\n // But we'll call onEscape to potentially override the default selection clearing\n onEscape();\n }\n },\n });\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n listRef = useCombinedRefs(listRef);\n\n // ----- Collection and virtualization decision (must precede useListBox) -----\n const itemsArray = useMemo(\n () => [...listState.collection],\n [listState.collection],\n );\n\n const hasSections = useMemo(\n () => itemsArray.some((i) => i.type === 'section'),\n [itemsArray],\n );\n\n const shouldVirtualize = !hasSections && !isReorderable;\n\n const { listBoxProps } = useListBox(\n {\n ...props,\n id: id,\n 'aria-label': props['aria-label'] \|\| label?.toString(),\n isDisabled,\n // Only disable isVirtualized for reorderable lists (DnD needs real DOM focus).\n // Section-based lists keep isVirtualized: true to preserve ARIA attributes.\n isVirtualized: !isReorderable,\n shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,\n escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',\n },\n listState,\n listRef,\n );\n\n const { isFocused, focusProps } = useFocus({ isDisabled });\n const isInvalid = validationState === 'invalid';\n\n // Use ref to ensure estimateSize always accesses current itemsArray\n const itemsArrayRef = useRef(itemsArray);\n itemsArrayRef.current = itemsArray;\n\n // Scroll container ref for virtualization\n const scrollRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: shouldVirtualize ? itemsArray.length : 0,\n getScrollElement: () => scrollRef.current,\n // Use the actual item key to ensure React properly reconciles DOM elements\n // when items are filtered, added, or removed. Without this, the virtualizer\n // uses index-based keys which causes DOM reuse issues and style leaking.\n getItemKey: (index: number) => {\n const item = itemsArrayRef.current[index];\n return item?.key ?? index;\n },\n estimateSize: (index: number) => {\n const currentItem: any = itemsArrayRef.current[index];\n\n if (currentItem?.props?.description) {\n return SIZES.XL + 1;\n }\n return SIZES[SIZE_NAME_TO_KEY[size] as keyof typeof SIZES] + 1;\n },\n measureElement: (el) => {\n return el.offsetHeight + 1;\n },\n overscan: 10,\n });\n\n // Trigger remeasurement when items change (for filtering scenarios)\n useEffect(() => {\n if (shouldVirtualize) {\n rowVirtualizer.measure();\n }\n }, [shouldVirtualize, itemsArray, rowVirtualizer]);\n\n // Keep focused item visible, but only for keyboard navigation\n useLayoutEffect(() => {\n const focusedKey = listState.selectionManager.focusedKey;\n if (focusedKey == null) return;\n\n // Only scroll on keyboard navigation\n if (lastFocusSourceRef.current !== 'keyboard') return;\n\n const scrollElement = scrollRef.current;\n if (!scrollElement) return;\n\n const itemElement = scrollElement.querySelector(\n `[data-key=\"${CSS.escape(String(focusedKey))}\"]`,\n ) as HTMLElement;\n if (!itemElement) return;\n\n const scrollTop = scrollElement.scrollTop;\n const viewportHeight = scrollElement.clientHeight;\n const viewportBottom = scrollTop + viewportHeight;\n\n const itemRect = itemElement.getBoundingClientRect();\n const scrollRect = scrollElement.getBoundingClientRect();\n\n // Calculate item position relative to scroll container\n const itemTop = itemRect.top - scrollRect.top + scrollTop;\n const itemBottom = itemTop + itemRect.height;\n\n // Check if the item is fully visible in the viewport\n const isAlreadyVisible =\n itemTop >= scrollTop && itemBottom <= viewportBottom;\n\n if (!isAlreadyVisible) {\n // Use scrollIntoView with block: 'nearest' to minimize scroll jumps\n itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });\n }\n }, [listState.selectionManager.focusedKey, itemsArray]);\n\n // Merge React Aria listbox props with custom keyboard props so both sets of\n // event handlers (e.g. Arrow navigation and our Escape handler) are\n // preserved.\n const mergedListBoxProps = mergeProps(listBoxProps, keyboardProps);\n\n // Ordered keys for DnD reordering\n const orderedKeys = useMemo(() => {\n if (!isReorderable) {\n return [];\n }\n\n return itemsArray\n .filter((i) => i.type === 'item')\n .map((i) => String(i.key));\n }, [isReorderable, itemsArray]);\n\n const mods = useMemo(\n () => ({\n invalid: isInvalid,\n valid: validationState === 'valid',\n disabled: isDisabled,\n focused: isFocused,\n header: !!header \|\| (showSelectAll && props.selectionMode === 'multiple'),\n footer: !!footer,\n selectAll: showSelectAll && props.selectionMode === 'multiple',\n ...externalMods,\n }),\n [\n isInvalid,\n validationState,\n isDisabled,\n isFocused,\n header,\n footer,\n showSelectAll,\n props.selectionMode,\n externalMods,\n ],\n );\n\n const listBoxField = (\n <ListBoxWrapperElement\n ref={ref}\n qa=\"ListBoxWrapper\"\n mods={mods}\n styles={styles}\n data-shape={shape}\n >\n {header ? (\n <StyledHeader styles={headerStyles} data-size={size}>\n {header}\n </StyledHeader>\n ) : (\n <div role=\"presentation\" />\n )}\n {showSelectAll && props.selectionMode === 'multiple' ? (\n <SelectAllOption\n label={selectAllLabel \|\| 'Select All'}\n state={listState}\n lastFocusSourceRef={lastFocusSourceRef}\n isSelected={selectAllState.isSelected}\n isIndeterminate={selectAllState.isIndeterminate}\n isDisabled={isDisabled}\n isCheckable={isCheckable}\n size={size}\n allValueProps={allValueProps}\n onClick={handleSelectAllClick}\n />\n ) : (\n <>\n <div role=\"presentation\" />\n <div role=\"presentation\" />\n </>\n )}\n {/* Scroll container wrapper /}\n <ListBoxScrollElement ref={scrollRef} mods={mods} {...focusProps}>\n {listState.collection.size === 0 ? (\n <Item preset=\"t4\" color=\"#dark-03\" size={size} padding=\"(.5x - 1bw)\">\n {emptyLabel}\n </Item>\n ) : isReorderable ? (\n <DraggableListBox\n state={listState}\n listRef={listRef}\n orderedKeys={orderedKeys}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) => (\n <ListElement\n qa={qa \|\| 'ListBox'}\n {...mergeProps(mergedListBoxProps, collectionProps)}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled \|\| undefined}\n mods={{ sections: false }}\n data-shape={shape}\n data-input-type=\"listbox\"\n >\n {itemsArray\n .filter((item) => item.type === 'item')\n .map((item) => (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n dragState={dragState}\n dropState={dropState}\n onClick={onOptionClick}\n />\n ))}\n </ListElement>\n )}\n </DraggableListBox>\n ) : (\n <ListElement\n qa={qa \|\| 'ListBox'}\n {...mergedListBoxProps}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled \|\| undefined}\n mods={{ sections: hasSections }}\n data-shape={shape}\n data-input-type=\"listbox\"\n style={\n shouldVirtualize\n ? {\n position: 'relative',\n height: `${rowVirtualizer.getTotalSize() + 3}px`,\n }\n : undefined\n }\n >\n {shouldVirtualize\n ? rowVirtualizer.getVirtualItems().map((virtualItem) => {\n const item = itemsArray[virtualItem.index];\n\n return (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n // We don't need to measure the element here, because the height is already set by the virtualizer\n // This is a workaround to avoid glitches when selecting/deselecting items\n virtualRef={rowVirtualizer.measureElement as any}\n virtualStyle={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n transform: `translateY(${virtualItem.start}px)`,\n }}\n virtualIndex={virtualItem.index}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n );\n })\n : (() => {\n const renderedItems: ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of listState.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <StyledDivider\n key={`divider-${String(item.key)}`}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <ListBoxSection\n key={item.key}\n item={item}\n state={listState}\n optionStyles={optionStyles}\n optionHighlight={optionHighlight}\n headingStyles={headingStyles}\n sectionStyles={sectionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n size={size}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n }\n }\n\n return renderedItems;\n })()}\n </ListElement>\n )}\n </ListBoxScrollElement>\n {footer ? (\n <StyledFooter styles={footerStyles} data-size={size}>\n {footer}\n </StyledFooter>\n ) : (\n <div role=\"presentation\" />\n )}\n </ListBoxWrapperElement>\n );\n\n return wrapWithField<Omit<CubeListBoxProps<T>, 'children'>>(\n listBoxField,\n ref,\n props,\n );\n}) as unknown as (<T>(\n props: CubeListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & {\n Item: typeof CollectionItem;\n Section: typeof BaseSection;\n};\n\nfunction Option({\n size = 'medium',\n item,\n state,\n styles,\n highlight,\n isParentDisabled,\n validationState,\n focusOnHover = false,\n isCheckable,\n onClick: onOptionClick,\n virtualStyle,\n virtualRef,\n virtualIndex,\n lastFocusSourceRef,\n dragState,\n dropState,\n}: {\n size?: 'small' \| 'medium' \| 'large';\n item: any;\n state: any;\n styles?: Styles;\n highlight?: string;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n /* Inline style applied when virtualized (absolute positioning etc.) /\n virtualStyle?: CSSProperties;\n /* Ref callback from react-virtual to measure row height /\n virtualRef?: (element: HTMLElement \| null) => void;\n /* Virtual index from react-virtual for data-index attribute /\n virtualIndex?: number;\n /* Ref to track the source of focus changes /\n lastFocusSourceRef?: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n /* Drag state from DraggableCollection. When provided, enables drag-and-drop. /\n dragState?: DraggableCollectionState;\n /* Drop state from DraggableCollection. When provided, renders drop indicators. */\n dropState?: DroppableCollectionState;\n}) {\n const localRef = useRef<HTMLLIElement>(null);\n // Merge local ref with react-virtual measure ref when provided\n const combinedRef = useCombinedRefs(localRef, virtualRef);\n\n const isDisabled = isParentDisabled \|\| state.disabledKeys.has(item.key);\n const isSelected = state.selectionManager.isSelected(item.key);\n const isFocused = state.selectionManager.focusedKey === item.key;\n\n // Drag-and-drop support — only enable when both states are provided\n const isDraggable = !!dragState && !!dropState;\n\n // useDraggableItem must be called unconditionally (Rules of Hooks).\n // When dragState is undefined, we pass a minimal mock state to satisfy the hook.\n const mockDragState = useMemo(\n () => createMockDragState(state.collection, state.selectionManager),\n [state.collection, state.selectionManager],\n );\n\n const dragResult = useDraggableItem(\n { key: item.key },\n dragState ?? mockDragState,\n );\n const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n const isDragging = isDraggable && dragResult.isDragging;\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: focusOnHover,\n },\n state,\n combinedRef,\n );\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n // Determine icon: drag handle > checkbox > user icon > default\n const effectiveIcon = useMemo(() => {\n if (isDraggable) {\n if (!filteredItemProps.icon \|\| isHovered) {\n return <GripVerticalIcon size={14} />;\n }\n }\n\n if (\n !isCheckable \|\|\n state.selectionManager.selectionMode !== 'multiple' \|\|\n filteredItemProps.icon\n ) {\n return (\n filteredItemProps.icon ??\n (state.selectionManager.selectionMode !== 'multiple' ? null : undefined)\n );\n }\n\n return renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n });\n }, [\n isDraggable,\n isCheckable,\n state.selectionManager.selectionMode,\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n filteredItemProps.icon,\n ]);\n\n // Side-effects layered on top of React Aria's own onClick. The underlying\n // React Aria onClick is already chained via mergeProps below, so this handler\n // must NOT call optionProps.onClick again — re-invoking it would trigger\n // usePress's virtual-click branch and double-fire onPress (and toggle\n // selection twice in multiple mode).\n const handleOptionExtras = (e: MouseEvent) => {\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n state.selectionManager.setFocusedKey(item.key);\n\n if (!onOptionClick) {\n return;\n }\n\n // In checkable multiple mode, suppress the callback when the click landed\n // inside the checkbox wrapper — that area is reserved for toggle-only\n // behaviour (React Aria still handles the toggle via the chained onClick).\n if (isCheckable && state.selectionManager.selectionMode === 'multiple') {\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget \|\|\n checkboxElement.contains(clickTarget))\n ) {\n return;\n }\n }\n\n onOptionClick(item.key);\n };\n\n // Filter out React Aria props that shouldn't reach the DOM\n const {\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n ...filteredOptionProps\n } = optionProps;\n\n const theme =\n { valid: 'success', invalid: 'danger' }[validationState] \|\| 'default';\n\n const listBoxItem = (\n <ListBoxItem\n ref={combinedRef}\n id={`ListBoxItem-${String(item.key)}`}\n data-key={String(item.key)}\n {...mergeProps(\n filteredOptionProps,\n hoverProps,\n filteredItemProps,\n {\n onClick: handleOptionExtras,\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n },\n effectiveDragProps,\n )}\n theme={theme}\n style={virtualStyle}\n data-size={size}\n data-index={virtualIndex}\n size={size}\n display={isDraggable ? 'grid' : undefined}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={effectiveIcon}\n highlight={highlight}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n styles={mergeStyles(styles, filteredItemProps.styles)}\n defaultTooltipPlacement=\"right\"\n mods={{\n listboxitem: true,\n focused: isFocused,\n pressed: isPressed,\n dragging: isDragging,\n draggable: isDraggable,\n gripIcon: isDraggable && (!filteredItemProps.icon \|\| isHovered),\n valid: isSelected && validationState === 'valid',\n invalid: isSelected && validationState === 'invalid',\n checkable: isCheckable,\n hovered: isHovered,\n all: false, // This will be set to true for SelectAllOption\n }}\n >\n {item.rendered}\n </ListBoxItem>\n );\n\n if (!isDraggable \|\| !dropState) {\n return listBoxItem;\n }\n\n return (\n <>\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n dropState={dropState}\n />\n {listBoxItem}\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n dropState={dropState}\n />\n </>\n );\n}\n\n// =============================================================================\n// Drop Indicator for DnD reordering\n// =============================================================================\n\nfunction ListBoxDropIndicator({\n target,\n dropState,\n}: {\n target: DropTarget;\n dropState: DroppableCollectionState;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n { target },\n dropState,\n ref,\n );\n\n if (isHidden) {\n return null;\n }\n\n return (\n <ListBoxDropIndicatorElement\n ref={ref}\n role=\"option\"\n {...dropIndicatorProps}\n mods={{ 'drop-target': isDropTarget }}\n >\n <div data-element=\"Indicator\" />\n </ListBoxDropIndicatorElement>\n );\n}\n\ninterface ListBoxSectionProps<T> {\n item: any;\n state: any;\n optionStyles?: Styles;\n optionHighlight?: string;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n size?: 'small' \| 'medium' \| 'large';\n lastFocusSourceRef?: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n}\n\nfunction ListBoxSection<T>(props: ListBoxSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n optionHighlight,\n headingStyles,\n sectionStyles,\n isParentDisabled,\n validationState,\n focusOnHover,\n isCheckable,\n onClick: onOptionClick,\n lastFocusSourceRef,\n } = props;\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <SectionWrapperElement {...itemProps} styles={sectionStyles}>\n {heading && (\n <StyledSectionHeading\n {...headingProps}\n size={props.size}\n styles={headingStyles}\n >\n {heading}\n </StyledSectionHeading>\n )}\n <SectionListElement {...groupProps}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n size={props.size}\n item={node}\n state={state}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isParentDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n ))}\n </SectionListElement>\n </SectionWrapperElement>\n );\n}\n\ntype SectionComponent = typeof BaseSection;\n\nconst ListBoxSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nListBox.Item = CollectionItem;\n\nListBox.Section = ListBoxSectionComponent;\n\nObject.defineProperty(ListBox, 'cubeInputType', {\n value: 'ListBox',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"ListBox.js","names":["Item","useHover","mergeProps","useFocus","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/ListBox/ListBox.tsx"],"sourcesContent":["import { useHover } from '@react-aria/interactions';\nimport { IconMinus } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n COLOR_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n AriaListBoxProps,\n DropTarget,\n useDraggableItem,\n useDropIndicator,\n useKeyboard,\n useListBox,\n useListBoxSection,\n useOption,\n} from 'react-aria';\nimport {\n Section as BaseSection,\n DraggableCollectionState,\n DroppableCollectionState,\n useListState,\n} from 'react-stately';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CheckIcon, GripVerticalIcon } from '../../../icons';\nimport { Icon } from '../../../icons/index';\nimport { useProviderProps } from '../../../provider';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\n// Import Menu styled components for header and footer\nimport {\n StyledDivider,\n StyledFooter,\n StyledHeader,\n StyledSectionHeading,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n CubeCollectionItemProps,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { DraggableListBox } from './DraggableListBox';\n\nimport type { CollectionBase, Key } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FirstArg<F> = F extends (...args: infer A) => any ? A[0] : never;\n\nconst ListBoxWrapperElement = tasty({\n qa: 'ListBox',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: 'max-content max-content max-content 1sf max-content',\n flow: 'column',\n gap: 0,\n position: 'relative',\n radius: {\n '': '1cr',\n '[data-shape=\"popover\"]': '(1cr - 1bw)',\n '[data-shape=\"plain\"]': '0',\n },\n color: '#dark-02',\n transition: 'theme',\n outline: {\n '': '#purple-03.0',\n 'invalid & focused': '#danger.50',\n focused: '#purple-03',\n },\n border: {\n '': true,\n focused: '#primary-text',\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n disabled: true,\n '[data-shape=\"plain\"] \| [data-shape=\"popover\"] \| searchable': false,\n },\n },\n});\n\nconst ListElement = tasty({\n as: 'ul',\n styles: {\n display: 'block',\n padding: 0,\n listStyle: 'none',\n boxSizing: 'border-box',\n margin: {\n '': '.5x .5x 0 .5x',\n '[data-shape=\"plain\"]': '0',\n },\n height: 'max-content',\n },\n});\n\n// NEW: dedicated scroll container for ListBox\nconst ListBoxScrollElement = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n overflow: 'auto',\n scrollbar: 'styled',\n },\n});\n\n// Create an extended Item for ListBox options with 'all' modifier support\nconst ListBoxItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n styles: {\n margin: {\n '': '0 0 1bw 0',\n ':last-of-type': '0',\n 'draggable & :last-of-type': '0 0 .5x 0',\n all: '.5x',\n },\n Icon: {\n cursor: {\n draggable: 'grab',\n },\n opacity: {\n gripIcon: '.4',\n 'gripIcon & hovered': '1',\n },\n transition: {\n draggable: 'opacity',\n },\n },\n },\n});\n\n// Horizontal drop indicator for DnD reordering\nconst ListBoxDropIndicatorElement = tasty({\n as: 'li',\n styles: {\n zIndex: 10,\n position: 'relative',\n pointerEvents: 'none',\n height: 0,\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n\n Indicator: {\n $: '>',\n position: 'absolute',\n left: '.5x',\n right: '.5x',\n top: '-1px',\n height: '2px',\n fill: '#primary',\n radius: 'round',\n },\n },\n});\n\nconst SectionWrapperElement = tasty({\n as: 'li',\n styles: {\n display: 'block',\n padding: {\n '': 0,\n ':last-of-type': '0 0 .5x 0',\n },\n },\n});\n\nconst SectionListElement = tasty({\n qa: 'ListBoxSectionList',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '0',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n },\n});\n\n// Checkbox component for multiple selection options\nconst ListBoxCheckbox = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: '.5r',\n width: '(2x - 2bw)',\n height: '(2x - 2bw)',\n flexShrink: 0,\n transition: 'theme',\n opacity: {\n '': 0,\n 'selected \| indeterminate \| hovered \| focused': 1,\n },\n fill: {\n '': '#surface',\n 'selected \| indeterminate': '#primary',\n 'invalid & !(selected \| indeterminate)': '#surface',\n 'invalid & (selected \| indeterminate)': '#danger',\n disabled: '#dark.12',\n },\n color: {\n '': '#clear',\n 'selected \| indeterminate': '#white',\n },\n border: {\n '': '#dark.30',\n invalid: '#danger',\n 'disabled \| ((selected \| indeterminate) & !invalid)': '#clear',\n },\n },\n});\n\nconst ListBoxCheckboxWrapper = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n cursor: '$pointer',\n placeSelf: 'stretch',\n },\n});\n\nfunction renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n}: {\n isSelected: boolean;\n isDisabled: boolean;\n isFocused: boolean;\n isHovered: boolean;\n validationState?: string;\n}) {\n const mods = {\n selected: isSelected,\n disabled: isDisabled,\n focused: isFocused,\n hovered: isHovered,\n invalid: validationState === 'invalid',\n };\n\n return (\n <ListBoxCheckboxWrapper data-element=\"CheckboxWrapper\" mods={mods}>\n <ListBoxCheckbox data-element=\"Checkbox\" mods={mods}>\n <CheckIcon size={12} stroke={3} />\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n}\n\nexport interface CubeListBoxProps<T>\n extends AriaListBoxProps<T>,\n CollectionBase<T>,\n FieldBaseProps,\n BasePropsWithoutChildren {\n /** Custom styles for the list container /\n listStyles?: Styles;\n /* Custom styles for individual options /\n optionStyles?: Styles;\n /* Custom styles for section containers /\n sectionStyles?: Styles;\n /* Custom styles for section headings /\n headingStyles?: Styles;\n /* Whether the ListBox is disabled /\n isDisabled?: boolean;\n /* The selected key in controlled single selection mode /\n selectedKey?: Key \| null;\n /* The selected keys in controlled multiple selection mode. Use \"all\" to select all items or an array of keys /\n selectedKeys?: 'all' \| Key[];\n /* The default selected key in uncontrolled single selection mode /\n defaultSelectedKey?: Key \| null;\n /* The default selected keys in uncontrolled multiple selection mode. Use \"all\" to select all items or an array of keys /\n defaultSelectedKeys?: 'all' \| Key[];\n /* Callback fired when selection changes /\n onSelectionChange?: (key: Key \| null \| 'all' \| Key[]) => void;\n /* The selection mode of the ListBox /\n selectionMode?: 'single' \| 'multiple';\n /* Ref for accessing the list DOM element /\n listRef?: RefObject<HTMLUListElement \| null>;\n /* Whether to disallow empty selection /\n disallowEmptySelection?: boolean;\n /* Whether to wrap focus when reaching the end of the list /\n shouldFocusWrap?: boolean;\n /\n Ref to access the internal ListState instance.\n * This allows parent components to access selection state and other list functionality.\n /\n stateRef?: RefObject<any \| null>;\n\n /\n Whether moving the pointer over an option will move DOM focus to that option.\n * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).\n * Defaults to true.\n /\n focusOnHover?: boolean;\n /* Custom header content displayed above the list /\n header?: ReactNode;\n /* Custom footer content displayed below the list /\n footer?: ReactNode;\n /* Custom styles for the header /\n headerStyles?: Styles;\n /* Custom styles for the footer /\n footerStyles?: Styles;\n /* Additional modifiers for styling the ListBox /\n mods?: Record<string, boolean>;\n /* Size variant of the ListBox /\n size?: 'small' \| 'medium' \| 'large';\n\n /\n When `true`, clicking an already-selected item keeps it selected instead of toggling it off.\n * Useful when embedding ListBox inside components like ComboBox.\n /\n disableSelectionToggle?: boolean;\n\n /\n Whether to use virtual focus for keyboard navigation.\n * When true, DOM focus stays outside individual option elements (useful for searchable lists).\n * Defaults to false for backward compatibility.\n /\n shouldUseVirtualFocus?: boolean;\n\n /\n Callback fired when the user presses Escape key.\n * When provided, this prevents React Aria's default Escape behavior (selection reset).\n /\n onEscape?: () => void;\n\n /\n Whether to show checkboxes for multiple selection mode.\n * This adds a checkbox icon to the left of each option.\n /\n isCheckable?: boolean;\n\n /\n Callback fired when an option is clicked but not on the checkbox area.\n * Used by FilterPicker to close the popover on non-checkbox clicks.\n /\n onOptionClick?: (key: Key) => void;\n\n /\n Whether to show the \"Select All\" option in multiple selection mode.\n * This adds a select all option to the header that allows selecting/deselecting all items.\n /\n showSelectAll?: boolean;\n\n /\n Label for the \"Select All\" option. Defaults to \"Select All\".\n /\n selectAllLabel?: ReactNode;\n\n /\n Props to apply to the \"Select All\" option.\n /\n allValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n /\n Filter function to apply to the collection nodes.\n * Takes an iterable of nodes and returns a filtered iterable.\n * Useful for implementing search/filter functionality.\n /\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n\n /\n Label to display when the list is empty (no items available).\n * Defaults to \"No items\".\n /\n emptyLabel?: ReactNode;\n\n /\n Visual shape of the ListBox styling.\n * - `card` (default): Standard card styling with border and margin\n * - `plain`: No border, no margin, no radius - suitable for embedded use\n * - `popover`: No border, but keeps margin and radius - suitable for overlay use\n * Defaults to 'card'.\n /\n shape?: 'card' \| 'plain' \| 'popover';\n\n /\n Enable drag-and-drop reordering of list items.\n * When enabled, virtualization is disabled and each item gets a drag handle.\n * @default false\n /\n isReorderable?: boolean;\n\n /\n Callback when items are reordered via drag-and-drop.\n * Called with the new array of item keys in their new order.\n /\n onReorder?: (newOrder: string[]) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst SelectAllOption = ({\n label = 'Select All',\n isSelected,\n isIndeterminate,\n isDisabled,\n isCheckable,\n size = 'medium',\n state,\n lastFocusSourceRef,\n onClick,\n allValueProps = {},\n}: {\n label?: ReactNode;\n isSelected: boolean;\n isIndeterminate: boolean;\n isDisabled?: boolean;\n isCheckable?: boolean;\n size?: 'small' \| 'medium' \| 'large';\n state: any;\n lastFocusSourceRef: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n onClick: (propagate?: boolean) => void;\n allValueProps?: Partial<CubeCollectionItemProps<any>>;\n}) => {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const markIcon = isIndeterminate ? (\n <Icon size={12} stroke={3}>\n <IconMinus />\n </Icon>\n ) : (\n <CheckIcon size={12} stroke={3} />\n );\n\n const localRef = useRef<HTMLLIElement>(null);\n\n // Create checkbox icon for select all option\n const checkboxIcon = useMemo(() => {\n if (!isCheckable) {\n return null;\n }\n\n return (\n <ListBoxCheckboxWrapper\n data-element=\"CheckboxWrapper\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n <ListBoxCheckbox\n data-element=\"Checkbox\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n {(isIndeterminate \|\| isSelected) && markIcon}\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n }, [\n isCheckable,\n isSelected,\n isDisabled,\n isHovered,\n isIndeterminate,\n markIcon,\n ]);\n\n const handleOptionClick = (e) => {\n // Mark focus changes from mouse clicks\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n // If there's an onOptionClick callback and this is checkable in multiple mode,\n // we need to distinguish between checkbox and content clicks\n if (state.selectionManager.selectionMode === 'multiple') {\n // Check if the click target is within the checkbox area\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget \|\|\n checkboxElement.contains(clickTarget))\n ) {\n onClick?.(false);\n } else {\n // Then call the callback (which will close the popover in FilterPicker)\n onClick?.(true);\n }\n } else {\n onClick?.(true);\n }\n };\n\n return (\n <>\n <ListBoxItem\n ref={localRef}\n data-size={size}\n size={size}\n role=\"option\"\n aria-selected={isSelected}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={checkboxIcon}\n mods={{\n listboxitem: true,\n disabled: isDisabled,\n checkable: isCheckable,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n all: true, // Important: this preserves the 'all' modifier\n }}\n {...mergeProps(hoverProps, allValueProps, {\n onClick: handleOptionClick,\n })}\n >\n {label}\n </ListBoxItem>\n <StyledDivider />\n </>\n );\n};\n\nexport const ListBox = forwardRef(function ListBox<T extends object>(\n props: CubeListBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: any = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: any) => {\n if (props.selectionMode === 'multiple') {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n qa,\n label,\n extra,\n id,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n message,\n description,\n styles,\n mods: externalMods,\n size = 'medium',\n labelSuffix,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n shouldUseVirtualFocus,\n onSelectionChange,\n disableSelectionToggle = false,\n stateRef,\n focusOnHover,\n header,\n footer,\n headerStyles,\n footerStyles,\n onEscape,\n isCheckable,\n onOptionClick,\n showSelectAll,\n selectAllLabel,\n allValueProps,\n filter,\n emptyLabel = 'No items',\n shape = 'card',\n isReorderable = false,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const [, forceUpdate] = useState({});\n const lastSelectedKeyRef = useRef<Key \| null>(null);\n\n // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format\n const externalSelectionHandler = onSelectionChange \|\| (props as any).onChange;\n\n const wrappedOnSelectionChange = useMemo(() => {\n if (!externalSelectionHandler) return undefined;\n\n return (keys: any) => {\n // Don't allow selection changes when disabled\n if (isDisabled) {\n return;\n }\n\n // React Aria always passes a Set for selection changes\n // Handle the special \"all\" case and convert to our public API format\n if (keys === 'all') {\n externalSelectionHandler('all');\n } else if (keys instanceof Set) {\n if (keys.size === 0) {\n if (disableSelectionToggle && props.selectionMode === 'single') {\n const prevKey = lastSelectedKeyRef.current;\n if (prevKey != null) {\n externalSelectionHandler(prevKey);\n return;\n }\n }\n externalSelectionHandler(\n props.selectionMode === 'multiple' ? [] : null,\n );\n } else if (props.selectionMode === 'multiple') {\n externalSelectionHandler(Array.from(keys));\n } else {\n const key = Array.from(keys)[0];\n lastSelectedKeyRef.current = key ?? null;\n externalSelectionHandler(key);\n }\n } else {\n lastSelectedKeyRef.current = keys as Key \| null;\n externalSelectionHandler(keys);\n }\n };\n }, [\n externalSelectionHandler,\n isDisabled,\n props.selectionMode,\n disableSelectionToggle,\n ]);\n\n // Prepare props for useListState with correct selection props\n const listStateProps: FirstArg<typeof useListState> = {\n ...props,\n onSelectionChange: wrappedOnSelectionChange,\n isDisabled,\n disabledBehavior: 'all',\n filter,\n selectionMode: props.selectionMode \|\| 'single',\n };\n\n // Set selection props based on mode\n if (listStateProps.selectionMode === 'multiple') {\n if (selectedKeys !== undefined) {\n // Handle \"all\" selection by passing it directly to React Aria\n listStateProps.selectedKeys =\n selectedKeys === 'all' ? 'all' : new Set(selectedKeys as Key[]);\n }\n if (defaultSelectedKeys !== undefined) {\n // Handle \"all\" default selection\n listStateProps.defaultSelectedKeys =\n defaultSelectedKeys === 'all'\n ? 'all'\n : new Set(defaultSelectedKeys as Key[]);\n }\n // Remove single-selection props if any\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n } else {\n // For single-selection we convert the scalar key props that our public\n // API exposes into the Set-based props that React Stately expects.\n if (selectedKey !== undefined) {\n listStateProps.selectedKeys =\n selectedKey == null ? new Set() : new Set([selectedKey]);\n }\n\n if (defaultSelectedKey !== undefined) {\n listStateProps.defaultSelectedKeys =\n defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);\n }\n\n // Remove the single-value props so we don't pass unsupported keys through.\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n }\n\n const listState = useListState(listStateProps);\n\n useLayoutEffect(() => {\n const selected = listState.selectionManager.selectedKeys;\n if (selected && (selected as any).size > 0) {\n const first = Array.from(selected as Set<Key>)[0];\n lastSelectedKeyRef.current = first ?? null;\n }\n }, [listState.selectionManager.selectedKeys]);\n\n // Calculate select all state for multiple selection mode\n const selectAllState = useMemo(() => {\n // Select-all only makes sense for multiple selection mode and* when the UI is enabled\n if (props.selectionMode !== 'multiple' \|\| !showSelectAll) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // React Stately exposes the raw selection value which is either the string \"all\"\n // (when `selectAll(true)` was used) or a Set of item keys.\n const rawSelection: any = (listState.selectionManager as any).rawSelection;\n\n // Fast path – user pressed our \"Select All\" control previously.\n if (rawSelection === 'all') {\n return { isSelected: true, isIndeterminate: false };\n }\n\n const selectedKeys = listState.selectionManager.selectedKeys as Set<Key>;\n\n // When there is nothing selected, we are in a clear state\n if (selectedKeys.size === 0) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // Otherwise it must be a partial (indeterminate) selection.\n return { isSelected: false, isIndeterminate: true };\n }, [\n props.selectionMode,\n showSelectAll,\n listState.collection,\n listState.disabledKeys,\n listState.selectionManager.selectedKeys,\n listState.selectionManager.rawSelection,\n ]);\n\n // Handle select all click\n const handleSelectAllClick = (propagate?: boolean) => {\n if (isDisabled \|\| props.selectionMode !== 'multiple') return;\n\n if (selectAllState.isSelected) {\n // All selected, deselect all\n listState.selectionManager.clearSelection();\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.(new Set());\n } else {\n // Some or none selected, select all\n listState.selectionManager.selectAll(true);\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.('all');\n forceUpdate({});\n }\n\n if (propagate && !selectAllState.isSelected) {\n onOptionClick?.('__ALL__');\n }\n };\n\n // Track whether the last focus change was due to keyboard navigation\n const lastFocusSourceRef = useRef<'keyboard' \| 'mouse' \| 'other'>('other');\n\n // Expose the list state instance via the provided ref (if any)\n if (stateRef) {\n stateRef.current = {\n ...listState,\n lastFocusSourceRef,\n };\n }\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && props.selectionMode === 'single', {\n key: ['listbox-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Custom keyboard handling to prevent selection clearing on Escape while allowing overlay dismiss\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Mark focus changes from keyboard navigation\n if (\n e.key === 'ArrowDown' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'Home' \|\|\n e.key === 'End' \|\|\n e.key === 'PageUp' \|\|\n e.key === 'PageDown'\n ) {\n lastFocusSourceRef.current = 'keyboard';\n }\n\n if (e.key === 'Escape' && onEscape) {\n // Don't prevent default - let the overlay system handle closing\n // But we'll call onEscape to potentially override the default selection clearing\n onEscape();\n }\n },\n });\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n listRef = useCombinedRefs(listRef);\n\n // ----- Collection and virtualization decision (must precede useListBox) -----\n const itemsArray = useMemo(\n () => [...listState.collection],\n [listState.collection],\n );\n\n const hasSections = useMemo(\n () => itemsArray.some((i) => i.type === 'section'),\n [itemsArray],\n );\n\n const shouldVirtualize = !hasSections && !isReorderable;\n\n const { listBoxProps } = useListBox(\n {\n ...props,\n id: id,\n 'aria-label': props['aria-label'] \|\| label?.toString(),\n isDisabled,\n // Only disable isVirtualized for reorderable lists (DnD needs real DOM focus).\n // Section-based lists keep isVirtualized: true to preserve ARIA attributes.\n isVirtualized: !isReorderable,\n shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,\n escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',\n },\n listState,\n listRef,\n );\n\n const { isFocused, focusProps } = useFocus({ isDisabled });\n const isInvalid = validationState === 'invalid';\n\n // Use ref to ensure estimateSize always accesses current itemsArray\n const itemsArrayRef = useRef(itemsArray);\n itemsArrayRef.current = itemsArray;\n\n // Scroll container ref for virtualization\n const scrollRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: shouldVirtualize ? itemsArray.length : 0,\n getScrollElement: () => scrollRef.current,\n // Use the actual item key to ensure React properly reconciles DOM elements\n // when items are filtered, added, or removed. Without this, the virtualizer\n // uses index-based keys which causes DOM reuse issues and style leaking.\n getItemKey: (index: number) => {\n const item = itemsArrayRef.current[index];\n return item?.key ?? index;\n },\n estimateSize: (index: number) => {\n const currentItem: any = itemsArrayRef.current[index];\n\n if (currentItem?.props?.description) {\n return SIZES.XL + 1;\n }\n return SIZES[SIZE_NAME_TO_KEY[size] as keyof typeof SIZES] + 1;\n },\n measureElement: (el) => {\n return el.offsetHeight + 1;\n },\n overscan: 10,\n });\n\n // Trigger remeasurement when items change (for filtering scenarios)\n useEffect(() => {\n if (shouldVirtualize) {\n rowVirtualizer.measure();\n }\n }, [shouldVirtualize, itemsArray, rowVirtualizer]);\n\n // Keep focused item visible, but only for keyboard navigation\n useLayoutEffect(() => {\n const focusedKey = listState.selectionManager.focusedKey;\n if (focusedKey == null) return;\n\n // Only scroll on keyboard navigation\n if (lastFocusSourceRef.current !== 'keyboard') return;\n\n const scrollElement = scrollRef.current;\n if (!scrollElement) return;\n\n const itemElement = scrollElement.querySelector(\n `[data-key=\"${CSS.escape(String(focusedKey))}\"]`,\n ) as HTMLElement;\n if (!itemElement) return;\n\n const scrollTop = scrollElement.scrollTop;\n const viewportHeight = scrollElement.clientHeight;\n const viewportBottom = scrollTop + viewportHeight;\n\n const itemRect = itemElement.getBoundingClientRect();\n const scrollRect = scrollElement.getBoundingClientRect();\n\n // Calculate item position relative to scroll container\n const itemTop = itemRect.top - scrollRect.top + scrollTop;\n const itemBottom = itemTop + itemRect.height;\n\n // Check if the item is fully visible in the viewport\n const isAlreadyVisible =\n itemTop >= scrollTop && itemBottom <= viewportBottom;\n\n if (!isAlreadyVisible) {\n // Use scrollIntoView with block: 'nearest' to minimize scroll jumps\n itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });\n }\n }, [listState.selectionManager.focusedKey, itemsArray]);\n\n // Merge React Aria listbox props with custom keyboard props so both sets of\n // event handlers (e.g. Arrow navigation and our Escape handler) are\n // preserved.\n const mergedListBoxProps = mergeProps(listBoxProps, keyboardProps);\n\n // Ordered keys for DnD reordering\n const orderedKeys = useMemo(() => {\n if (!isReorderable) {\n return [];\n }\n\n return itemsArray\n .filter((i) => i.type === 'item')\n .map((i) => String(i.key));\n }, [isReorderable, itemsArray]);\n\n const mods = useMemo(\n () => ({\n invalid: isInvalid,\n valid: validationState === 'valid',\n disabled: isDisabled,\n focused: isFocused,\n header: !!header \|\| (showSelectAll && props.selectionMode === 'multiple'),\n footer: !!footer,\n selectAll: showSelectAll && props.selectionMode === 'multiple',\n ...externalMods,\n }),\n [\n isInvalid,\n validationState,\n isDisabled,\n isFocused,\n header,\n footer,\n showSelectAll,\n props.selectionMode,\n externalMods,\n ],\n );\n\n const listBoxField = (\n <ListBoxWrapperElement\n ref={ref}\n qa=\"ListBoxWrapper\"\n mods={mods}\n styles={styles}\n data-shape={shape}\n >\n {header ? (\n <StyledHeader styles={headerStyles} data-size={size}>\n {header}\n </StyledHeader>\n ) : (\n <div role=\"presentation\" />\n )}\n {showSelectAll && props.selectionMode === 'multiple' ? (\n <SelectAllOption\n label={selectAllLabel \|\| 'Select All'}\n state={listState}\n lastFocusSourceRef={lastFocusSourceRef}\n isSelected={selectAllState.isSelected}\n isIndeterminate={selectAllState.isIndeterminate}\n isDisabled={isDisabled}\n isCheckable={isCheckable}\n size={size}\n allValueProps={allValueProps}\n onClick={handleSelectAllClick}\n />\n ) : (\n <>\n <div role=\"presentation\" />\n <div role=\"presentation\" />\n </>\n )}\n {/* Scroll container wrapper /}\n <ListBoxScrollElement ref={scrollRef} mods={mods} {...focusProps}>\n {listState.collection.size === 0 ? (\n <Item preset=\"t4\" color=\"#dark-03\" size={size} padding=\"(.5x - 1bw)\">\n {emptyLabel}\n </Item>\n ) : isReorderable ? (\n <DraggableListBox\n state={listState}\n listRef={listRef}\n orderedKeys={orderedKeys}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) => (\n <ListElement\n qa={qa \|\| 'ListBox'}\n {...mergeProps(mergedListBoxProps, collectionProps)}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled \|\| undefined}\n mods={{ sections: false }}\n data-shape={shape}\n data-input-type=\"listbox\"\n >\n {itemsArray\n .filter((item) => item.type === 'item')\n .map((item) => (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n dragState={dragState}\n dropState={dropState}\n onClick={onOptionClick}\n />\n ))}\n </ListElement>\n )}\n </DraggableListBox>\n ) : (\n <ListElement\n qa={qa \|\| 'ListBox'}\n {...mergedListBoxProps}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled \|\| undefined}\n mods={{ sections: hasSections }}\n data-shape={shape}\n data-input-type=\"listbox\"\n style={\n shouldVirtualize\n ? {\n position: 'relative',\n height: `${rowVirtualizer.getTotalSize() + 3}px`,\n }\n : undefined\n }\n >\n {shouldVirtualize\n ? rowVirtualizer.getVirtualItems().map((virtualItem) => {\n const item = itemsArray[virtualItem.index];\n\n return (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n // We don't need to measure the element here, because the height is already set by the virtualizer\n // This is a workaround to avoid glitches when selecting/deselecting items\n virtualRef={rowVirtualizer.measureElement as any}\n virtualStyle={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n transform: `translateY(${virtualItem.start}px)`,\n }}\n virtualIndex={virtualItem.index}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n );\n })\n : (() => {\n const renderedItems: ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of listState.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <StyledDivider\n key={`divider-${String(item.key)}`}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <ListBoxSection\n key={item.key}\n item={item}\n state={listState}\n optionStyles={optionStyles}\n headingStyles={headingStyles}\n sectionStyles={sectionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n size={size}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n }\n }\n\n return renderedItems;\n })()}\n </ListElement>\n )}\n </ListBoxScrollElement>\n {footer ? (\n <StyledFooter styles={footerStyles} data-size={size}>\n {footer}\n </StyledFooter>\n ) : (\n <div role=\"presentation\" />\n )}\n </ListBoxWrapperElement>\n );\n\n return wrapWithField<Omit<CubeListBoxProps<T>, 'children'>>(\n listBoxField,\n ref,\n props,\n );\n}) as unknown as (<T>(\n props: CubeListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & {\n Item: typeof CollectionItem;\n Section: typeof BaseSection;\n};\n\nfunction Option({\n size = 'medium',\n item,\n state,\n styles,\n isParentDisabled,\n validationState,\n focusOnHover = false,\n isCheckable,\n onClick: onOptionClick,\n virtualStyle,\n virtualRef,\n virtualIndex,\n lastFocusSourceRef,\n dragState,\n dropState,\n}: {\n size?: 'small' \| 'medium' \| 'large';\n item: any;\n state: any;\n styles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n /* Inline style applied when virtualized (absolute positioning etc.) /\n virtualStyle?: CSSProperties;\n /* Ref callback from react-virtual to measure row height /\n virtualRef?: (element: HTMLElement \| null) => void;\n /* Virtual index from react-virtual for data-index attribute /\n virtualIndex?: number;\n /* Ref to track the source of focus changes /\n lastFocusSourceRef?: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n /* Drag state from DraggableCollection. When provided, enables drag-and-drop. /\n dragState?: DraggableCollectionState;\n /* Drop state from DraggableCollection. When provided, renders drop indicators. */\n dropState?: DroppableCollectionState;\n}) {\n const localRef = useRef<HTMLLIElement>(null);\n // Merge local ref with react-virtual measure ref when provided\n const combinedRef = useCombinedRefs(localRef, virtualRef);\n\n const isDisabled = isParentDisabled \|\| state.disabledKeys.has(item.key);\n const isSelected = state.selectionManager.isSelected(item.key);\n const isFocused = state.selectionManager.focusedKey === item.key;\n\n // Drag-and-drop support — only enable when both states are provided\n const isDraggable = !!dragState && !!dropState;\n\n // useDraggableItem must be called unconditionally (Rules of Hooks).\n // When dragState is undefined, we pass a minimal mock state to satisfy the hook.\n const mockDragState = useMemo(\n () => createMockDragState(state.collection, state.selectionManager),\n [state.collection, state.selectionManager],\n );\n\n const dragResult = useDraggableItem(\n { key: item.key },\n dragState ?? mockDragState,\n );\n const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n const isDragging = isDraggable && dragResult.isDragging;\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: focusOnHover,\n },\n state,\n combinedRef,\n );\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n // Determine icon: drag handle > checkbox > user icon > default\n const effectiveIcon = useMemo(() => {\n if (isDraggable) {\n if (!filteredItemProps.icon \|\| isHovered) {\n return <GripVerticalIcon size={14} />;\n }\n }\n\n if (\n !isCheckable \|\|\n state.selectionManager.selectionMode !== 'multiple' \|\|\n filteredItemProps.icon\n ) {\n return (\n filteredItemProps.icon ??\n (state.selectionManager.selectionMode !== 'multiple' ? null : undefined)\n );\n }\n\n return renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n });\n }, [\n isDraggable,\n isCheckable,\n state.selectionManager.selectionMode,\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n filteredItemProps.icon,\n ]);\n\n // Side-effects layered on top of React Aria's own onClick. The underlying\n // React Aria onClick is already chained via mergeProps below, so this handler\n // must NOT call optionProps.onClick again — re-invoking it would trigger\n // usePress's virtual-click branch and double-fire onPress (and toggle\n // selection twice in multiple mode).\n const handleOptionExtras = (e: MouseEvent) => {\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n state.selectionManager.setFocusedKey(item.key);\n\n if (!onOptionClick) {\n return;\n }\n\n // In checkable multiple mode, suppress the callback when the click landed\n // inside the checkbox wrapper — that area is reserved for toggle-only\n // behaviour (React Aria still handles the toggle via the chained onClick).\n if (isCheckable && state.selectionManager.selectionMode === 'multiple') {\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget \|\|\n checkboxElement.contains(clickTarget))\n ) {\n return;\n }\n }\n\n onOptionClick(item.key);\n };\n\n // Filter out React Aria props that shouldn't reach the DOM\n const {\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n ...filteredOptionProps\n } = optionProps;\n\n const theme =\n { valid: 'success', invalid: 'danger' }[validationState] \|\| 'default';\n\n const listBoxItem = (\n <ListBoxItem\n ref={combinedRef}\n id={`ListBoxItem-${String(item.key)}`}\n data-key={String(item.key)}\n {...mergeProps(\n filteredOptionProps,\n hoverProps,\n filteredItemProps,\n {\n onClick: handleOptionExtras,\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n },\n effectiveDragProps,\n )}\n theme={theme}\n style={virtualStyle}\n data-size={size}\n data-index={virtualIndex}\n size={size}\n display={isDraggable ? 'grid' : undefined}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={effectiveIcon}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n styles={mergeStyles(styles, filteredItemProps.styles)}\n defaultTooltipPlacement=\"right\"\n mods={{\n listboxitem: true,\n focused: isFocused,\n pressed: isPressed,\n dragging: isDragging,\n draggable: isDraggable,\n gripIcon: isDraggable && (!filteredItemProps.icon \|\| isHovered),\n valid: isSelected && validationState === 'valid',\n invalid: isSelected && validationState === 'invalid',\n checkable: isCheckable,\n hovered: isHovered,\n all: false, // This will be set to true for SelectAllOption\n }}\n >\n {item.rendered}\n </ListBoxItem>\n );\n\n if (!isDraggable \|\| !dropState) {\n return listBoxItem;\n }\n\n return (\n <>\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n dropState={dropState}\n />\n {listBoxItem}\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n dropState={dropState}\n />\n </>\n );\n}\n\n// =============================================================================\n// Drop Indicator for DnD reordering\n// =============================================================================\n\nfunction ListBoxDropIndicator({\n target,\n dropState,\n}: {\n target: DropTarget;\n dropState: DroppableCollectionState;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n { target },\n dropState,\n ref,\n );\n\n if (isHidden) {\n return null;\n }\n\n return (\n <ListBoxDropIndicatorElement\n ref={ref}\n role=\"option\"\n {...dropIndicatorProps}\n mods={{ 'drop-target': isDropTarget }}\n >\n <div data-element=\"Indicator\" />\n </ListBoxDropIndicatorElement>\n );\n}\n\ninterface ListBoxSectionProps<T> {\n item: any;\n state: any;\n optionStyles?: Styles;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n size?: 'small' \| 'medium' \| 'large';\n lastFocusSourceRef?: MutableRefObject<'keyboard' \| 'mouse' \| 'other'>;\n}\n\nfunction ListBoxSection<T>(props: ListBoxSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n headingStyles,\n sectionStyles,\n isParentDisabled,\n validationState,\n focusOnHover,\n isCheckable,\n onClick: onOptionClick,\n lastFocusSourceRef,\n } = props;\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <SectionWrapperElement {...itemProps} styles={sectionStyles}>\n {heading && (\n <StyledSectionHeading\n {...headingProps}\n size={props.size}\n styles={headingStyles}\n >\n {heading}\n </StyledSectionHeading>\n )}\n <SectionListElement {...groupProps}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n size={props.size}\n item={node}\n state={state}\n styles={optionStyles}\n isParentDisabled={isParentDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n ))}\n </SectionListElement>\n </SectionWrapperElement>\n );\n}\n\ntype SectionComponent = typeof BaseSection;\n\nconst ListBoxSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nListBox.Item = CollectionItem;\n\nListBox.Section = ListBoxSectionComponent;\n\nObject.defineProperty(ListBox, 'cubeInputType', {\n value: 'ListBox',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,aAAa;EACb,UAAU;EACV,MAAM;EACN,KAAK;EACL,UAAU;EACV,QAAQ;GACN,IAAI;GACJ,4BAA0B;GAC1B,0BAAwB;GACzB;EACD,OAAO;EACP,YAAY;EACZ,SAAS;GACP,IAAI;GACJ,qBAAqB;GACrB,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,OAAO;GACP,SAAS;GACT,UAAU;GACV,kEAA8D;GAC/D;EACF;CACF,CAAC;AAEF,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACT,WAAW;EACX,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,0BAAwB;GACzB;EACD,QAAQ;EACT;CACF,CAAC;AAGF,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,aAAa;EACb,UAAU;EACV,UAAU;EACV,WAAW;EACZ;CACF,CAAC;AAGF,MAAM,cAAc,MAAMA,OAAM;CAC9B,IAAI;CACJ,qBAAqB;CACrB,QAAQ;EACN,QAAQ;GACN,IAAI;GACJ,iBAAiB;GACjB,6BAA6B;GAC7B,KAAK;GACN;EACD,MAAM;GACJ,QAAQ,EACN,WAAW,QACZ;GACD,SAAS;IACP,UAAU;IACV,sBAAsB;IACvB;GACD,YAAY,EACV,WAAW,WACZ;GACF;EACF;CACF,CAAC;AAGF,MAAM,8BAA8B,MAAM;CACxC,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,UAAU;EACV,eAAe;EACf,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,eAAe;GAChB;EAED,WAAW;GACT,GAAG;GACH,UAAU;GACV,MAAM;GACN,OAAO;GACP,KAAK;GACL,QAAQ;GACR,MAAM;GACN,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;GACP,IAAI;GACJ,iBAAiB;GAClB;EACF;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,KAAK;EACL,MAAM;EACN,QAAQ;EACR,SAAS;EACT,WAAW;EACZ;CACF,CAAC;AAGF,MAAM,kBAAkB,MAAM;CAC5B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,SAAS;GACP,IAAI;GACJ,gDAAgD;GACjD;EACD,MAAM;GACJ,IAAI;GACJ,4BAA4B;GAC5B,yCAAyC;GACzC,wCAAwC;GACxC,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,4BAA4B;GAC7B;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,sDAAsD;GACvD;EACF;CACF,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,QAAQ;EACR,WAAW;EACZ;CACF,CAAC;AAEF,SAAS,mBAAmB,EAC1B,YACA,YACA,WACA,WACA,mBAOC;CACD,MAAM,OAAO;EACX,UAAU;EACV,UAAU;EACV,SAAS;EACT,SAAS;EACT,SAAS,oBAAoB;EAC9B;AAED,QACE,oBAAC;EAAuB,gBAAa;EAAwB;YAC3D,oBAAC;GAAgB,gBAAa;GAAiB;aAC7C,oBAAC;IAAU,MAAM;IAAI,QAAQ;KAAK;IAClB;GACK;;AAiJ7B,MAAM,cAAc;CAAC,GAAG;CAAa,GAAG;CAAc,GAAG;CAAa;AAEtE,MAAM,mBAAmB,EACvB,QAAQ,cACR,YACA,iBACA,YACA,aACA,OAAO,UACP,OACA,oBACA,SACA,gBAAgB,EAAE,OAYd;CACJ,MAAM,EAAE,YAAY,cAAcC,WAAS,EAAE,YAAY,CAAC;CAE1D,MAAM,WAAW,kBACf,oBAAC;EAAK,MAAM;EAAI,QAAQ;YACtB,oBAAC,cAAY;GACR,GAEP,oBAAC;EAAU,MAAM;EAAI,QAAQ;GAAK;CAGpC,MAAM,WAAW,OAAsB,KAAK;CAG5C,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,YACH,QAAO;AAGT,SACE,oBAAC;GACC,gBAAa;GACb,MAAM;IACJ,UAAU;IACV,UAAU;IACV,SAAS;IACT,eAAe;IAChB;aAED,oBAAC;IACC,gBAAa;IACb,MAAM;KACJ,UAAU;KACV,UAAU;KACV,SAAS;KACT,eAAe;KAChB;eAEC,mBAAmB,eAAe;KACpB;IACK;IAE1B;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,qBAAqB,MAAM;AAE/B,MAAI,mBACF,oBAAmB,UAAU;AAK/B,MAAI,MAAM,iBAAiB,kBAAkB,YAAY;GAEvD,MAAM,cAAc,EAAE;GACtB,MAAM,kBAAkB,SAAS,SAAS,cACxC,qCACD;AAED,OACE,oBACC,oBAAoB,eACnB,gBAAgB,SAAS,YAAY,EAEvC,WAAU,MAAM;OAGhB,WAAU,KAAK;QAGjB,WAAU,KAAK;;AAInB,QACE,8CACE,oBAAC;EACC,KAAK;EACL,aAAW;EACL;EACN,MAAK;EACL,iBAAe;EACH;EACA;EACZ,MAAM;EACN,MAAM;GACJ,aAAa;GACb,UAAU;GACV,WAAW;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,GAAIC,aAAW,YAAY,eAAe,EACxC,SAAS,mBACV,CAAC;YAED;GACW,EACd,oBAAC,kBAAgB,IAChB;;AAIP,MAAa,UAAU,WAAW,SAAS,QACzC,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO,EAC3B,mBAAmB,EAAE,OAAO,eAAe;EACzC,MAAM,aAAkB,EAAE;AAE1B,MAAI,MAAM,kBAAkB,WAC1B,YAAW,eAAe,SAAS,EAAE;MAErC,YAAW,cAAc,SAAS;AAGpC,aAAW,qBAAqB,QAAa;AAC3C,OAAI,MAAM,kBAAkB,WAC1B,UAAS,MAAO,MAAM,QAAQ,IAAI,GAAG,MAAM,CAAC,IAAI,GAAI,EAAE,CAAC;OAEvD,UAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK,IAAI;;AAI/C,SAAO;IAEV,CAAC;CAEF,IAAI,EACF,IACA,OACA,OACA,IACA,aACA,YACA,oBACA,iBACA,YACA,YACA,cACA,eACA,eACA,SACA,SACA,aACA,QACA,MAAM,cACN,OAAO,UACP,aACA,aACA,oBACA,cACA,qBACA,uBACA,mBACA,yBAAyB,OACzB,UACA,cACA,QACA,QACA,cACA,cACA,UACA,aACA,eACA,eACA,gBACA,eACA,QACA,aAAa,YACb,QAAQ,QACR,gBAAgB,OAChB,WACA,MACA,GAAG,eACD;CAEJ,MAAM,GAAG,eAAe,SAAS,EAAE,CAAC;CACpC,MAAM,qBAAqB,OAAmB,KAAK;CAGnD,MAAM,2BAA2B,qBAAsB,MAAc;CAErE,MAAM,2BAA2B,cAAc;AAC7C,MAAI,CAAC,yBAA0B,QAAO;AAEtC,UAAQ,SAAc;AAEpB,OAAI,WACF;AAKF,OAAI,SAAS,MACX,0BAAyB,MAAM;YACtB,gBAAgB,IACzB,KAAI,KAAK,SAAS,GAAG;AACnB,QAAI,0BAA0B,MAAM,kBAAkB,UAAU;KAC9D,MAAM,UAAU,mBAAmB;AACnC,SAAI,WAAW,MAAM;AACnB,+BAAyB,QAAQ;AACjC;;;AAGJ,6BACE,MAAM,kBAAkB,aAAa,EAAE,GAAG,KAC3C;cACQ,MAAM,kBAAkB,WACjC,0BAAyB,MAAM,KAAK,KAAK,CAAC;QACrC;IACL,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,uBAAmB,UAAU,OAAO;AACpC,6BAAyB,IAAI;;QAE1B;AACL,uBAAmB,UAAU;AAC7B,6BAAyB,KAAK;;;IAGjC;EACD;EACA;EACA,MAAM;EACN;EACD,CAAC;CAGF,MAAM,iBAAgD;EACpD,GAAG;EACH,mBAAmB;EACnB;EACA,kBAAkB;EAClB;EACA,eAAe,MAAM,iBAAiB;EACvC;AAGD,KAAI,eAAe,kBAAkB,YAAY;AAC/C,MAAI,iBAAiB,OAEnB,gBAAe,eACb,iBAAiB,QAAQ,QAAQ,IAAI,IAAI,aAAsB;AAEnE,MAAI,wBAAwB,OAE1B,gBAAe,sBACb,wBAAwB,QACpB,QACA,IAAI,IAAI,oBAA6B;AAG7C,SAAO,eAAe;AACtB,SAAO,eAAe;QACjB;AAGL,MAAI,gBAAgB,OAClB,gBAAe,eACb,eAAe,uBAAO,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC;AAG5D,MAAI,uBAAuB,OACzB,gBAAe,sBACb,sBAAsB,uBAAO,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC;AAI1E,SAAO,eAAe;AACtB,SAAO,eAAe;;CAGxB,MAAM,YAAY,aAAa,eAAe;AAE9C,uBAAsB;EACpB,MAAM,WAAW,UAAU,iBAAiB;AAC5C,MAAI,YAAa,SAAiB,OAAO,EAEvC,oBAAmB,UADL,MAAM,KAAK,SAAqB,CAAC,MACT;IAEvC,CAAC,UAAU,iBAAiB,aAAa,CAAC;CAG7C,MAAM,iBAAiB,cAAc;AAEnC,MAAI,MAAM,kBAAkB,cAAc,CAAC,cACzC,QAAO;GAAE,YAAY;GAAO,iBAAiB;GAAO;AAQtD,MAH2B,UAAU,iBAAyB,iBAGzC,MACnB,QAAO;GAAE,YAAY;GAAM,iBAAiB;GAAO;AAMrD,MAHqB,UAAU,iBAAiB,aAG/B,SAAS,EACxB,QAAO;GAAE,YAAY;GAAO,iBAAiB;GAAO;AAItD,SAAO;GAAE,YAAY;GAAO,iBAAiB;GAAM;IAClD;EACD,MAAM;EACN;EACA,UAAU;EACV,UAAU;EACV,UAAU,iBAAiB;EAC3B,UAAU,iBAAiB;EAC5B,CAAC;CAGF,MAAM,wBAAwB,cAAwB;AACpD,MAAI,cAAc,MAAM,kBAAkB,WAAY;AAEtD,MAAI,eAAe,YAAY;AAE7B,aAAU,iBAAiB,gBAAgB;AAE3C,8CAA2B,IAAI,KAAK,CAAC;SAChC;AAEL,aAAU,iBAAiB,UAAU,KAAK;AAE1C,8BAA2B,MAAM;AACjC,eAAY,EAAE,CAAC;;AAGjB,MAAI,aAAa,CAAC,eAAe,WAC/B,iBAAgB,UAAU;;CAK9B,MAAM,qBAAqB,OAAuC,QAAQ;AAG1E,KAAI,SACF,UAAS,UAAU;EACjB,GAAG;EACH;EACD;AAIH,SAAQ,gBAAgB,SAAS,MAAM,kBAAkB,UAAU;EACjE,KAAK,CAAC,gCAAgC;EACtC,MAAM,CACJ,6HACD;EACF,CAAC;CAGF,MAAM,EAAE,kBAAkB,YAAY,EACpC,YAAY,MAAM;AAEhB,MACE,EAAE,QAAQ,eACV,EAAE,QAAQ,aACV,EAAE,QAAQ,UACV,EAAE,QAAQ,SACV,EAAE,QAAQ,YACV,EAAE,QAAQ,WAEV,oBAAmB,UAAU;AAG/B,MAAI,EAAE,QAAQ,YAAY,SAGxB,WAAU;IAGf,CAAC;AAEF,UAAS,cAAc,YAAY,aAAa,OAAO;AAEvD,OAAM,gBAAgB,IAAI;AAC1B,WAAU,gBAAgB,QAAQ;CAGlC,MAAM,aAAa,cACX,CAAC,GAAG,UAAU,WAAW,EAC/B,CAAC,UAAU,WAAW,CACvB;CAED,MAAM,cAAc,cACZ,WAAW,MAAM,MAAM,EAAE,SAAS,UAAU,EAClD,CAAC,WAAW,CACb;CAED,MAAM,mBAAmB,CAAC,eAAe,CAAC;CAE1C,MAAM,EAAE,iBAAiB,WACvB;EACE,GAAG;EACC;EACJ,cAAc,MAAM,iBAAiB,OAAO,UAAU;EACtD;EAGA,eAAe,CAAC;EAChB,uBAAuB,yBAAyB;EAChD,mBAAmB,WAAW,SAAS;EACxC,EACD,WACA,QACD;CAED,MAAM,EAAE,WAAW,eAAeC,WAAS,EAAE,YAAY,CAAC;CAC1D,MAAM,YAAY,oBAAoB;CAGtC,MAAM,gBAAgB,OAAO,WAAW;AACxC,eAAc,UAAU;CAGxB,MAAM,YAAY,OAAuB,KAAK;CAE9C,MAAM,iBAAiB,eAAe;EACpC,OAAO,mBAAmB,WAAW,SAAS;EAC9C,wBAAwB,UAAU;EAIlC,aAAa,UAAkB;AAE7B,UADa,cAAc,QAAQ,QACtB,OAAO;;EAEtB,eAAe,UAAkB;AAG/B,OAFyB,cAAc,QAAQ,QAE9B,OAAO,YACtB,QAAO,MAAM,KAAK;AAEpB,UAAO,MAAM,iBAAiB,SAA+B;;EAE/D,iBAAiB,OAAO;AACtB,UAAO,GAAG,eAAe;;EAE3B,UAAU;EACX,CAAC;AAGF,iBAAgB;AACd,MAAI,iBACF,gBAAe,SAAS;IAEzB;EAAC;EAAkB;EAAY;EAAe,CAAC;AAGlD,uBAAsB;EACpB,MAAM,aAAa,UAAU,iBAAiB;AAC9C,MAAI,cAAc,KAAM;AAGxB,MAAI,mBAAmB,YAAY,WAAY;EAE/C,MAAM,gBAAgB,UAAU;AAChC,MAAI,CAAC,cAAe;EAEpB,MAAM,cAAc,cAAc,cAChC,cAAc,IAAI,OAAO,OAAO,WAAW,CAAC,CAAC,IAC9C;AACD,MAAI,CAAC,YAAa;EAElB,MAAM,YAAY,cAAc;EAEhC,MAAM,iBAAiB,YADA,cAAc;EAGrC,MAAM,WAAW,YAAY,uBAAuB;EACpD,MAAM,aAAa,cAAc,uBAAuB;EAGxD,MAAM,UAAU,SAAS,MAAM,WAAW,MAAM;EAChD,MAAM,aAAa,UAAU,SAAS;AAMtC,MAAI,EAFF,WAAW,aAAa,cAAc,gBAItC,aAAY,eAAe;GAAE,OAAO;GAAW,UAAU;GAAQ,CAAC;IAEnE,CAAC,UAAU,iBAAiB,YAAY,WAAW,CAAC;CAKvD,MAAM,qBAAqBD,aAAW,cAAc,cAAc;CAGlE,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,cACH,QAAO,EAAE;AAGX,SAAO,WACJ,QAAQ,MAAM,EAAE,SAAS,OAAO,CAChC,KAAK,MAAM,OAAO,EAAE,IAAI,CAAC;IAC3B,CAAC,eAAe,WAAW,CAAC;CAE/B,MAAM,OAAO,eACJ;EACL,SAAS;EACT,OAAO,oBAAoB;EAC3B,UAAU;EACV,SAAS;EACT,QAAQ,CAAC,CAAC,UAAW,iBAAiB,MAAM,kBAAkB;EAC9D,QAAQ,CAAC,CAAC;EACV,WAAW,iBAAiB,MAAM,kBAAkB;EACpD,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;EACD,CACF;AAyMD,QAAO,cAtML,qBAAC;EACM;EACL,IAAG;EACG;EACE;EACR,cAAY;;GAEX,SACC,oBAAC;IAAa,QAAQ;IAAc,aAAW;cAC5C;KACY,GAEf,oBAAC,SAAI,MAAK,iBAAiB;GAE5B,iBAAiB,MAAM,kBAAkB,aACxC,oBAAC;IACC,OAAO,kBAAkB;IACzB,OAAO;IACa;IACpB,YAAY,eAAe;IAC3B,iBAAiB,eAAe;IACpB;IACC;IACP;IACS;IACf,SAAS;KACT,GAEF,8CACE,oBAAC,SAAI,MAAK,iBAAiB,EAC3B,oBAAC,SAAI,MAAK,iBAAiB,IAC1B;GAGL,oBAAC;IAAqB,KAAK;IAAiB;IAAM,GAAI;cACnD,UAAU,WAAW,SAAS,IAC7B,oBAACF;KAAK,QAAO;KAAK,OAAM;KAAiB;KAAM,SAAQ;eACpD;MACI,GACL,gBACF,oBAAC;KACC,OAAO;KACE;KACI;KACF;gBAET,WAAW,WAAW,oBACtB,oBAAC;MACC,IAAI,MAAM;MACV,GAAIE,aAAW,oBAAoB,gBAAgB;MACnD,KAAK;MACL,QAAQ;MACR,iBAAe,cAAc;MAC7B,MAAM,EAAE,UAAU,OAAO;MACzB,cAAY;MACZ,mBAAgB;gBAEf,WACE,QAAQ,SAAS,KAAK,SAAS,OAAO,CACtC,KAAK,SACJ,oBAAC;OAEO;OACA;OACN,OAAO;OACP,QAAQ;OACR,kBAAkB;OACD;OACH;OACD;OACO;OACT;OACA;OACX,SAAS;SAZJ,KAAK,IAaV,CACF;OACQ;MAEC,GAEnB,oBAAC;KACC,IAAI,MAAM;KACV,GAAI;KACJ,KAAK;KACL,QAAQ;KACR,iBAAe,cAAc;KAC7B,MAAM,EAAE,UAAU,aAAa;KAC/B,cAAY;KACZ,mBAAgB;KAChB,OACE,mBACI;MACE,UAAU;MACV,QAAQ,GAAG,eAAe,cAAc,GAAG,EAAE;MAC9C,GACD;eAGL,mBACG,eAAe,iBAAiB,CAAC,KAAK,gBAAgB;MACpD,MAAM,OAAO,WAAW,YAAY;AAEpC,aACE,oBAAC;OAEO;OACA;OACN,OAAO;OACP,QAAQ;OACR,kBAAkB;OACD;OACH;OACD;OAGb,YAAY,eAAe;OAC3B,cAAc;QACZ,UAAU;QACV,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,cAAc,YAAY,MAAM;QAC5C;OACD,cAAc,YAAY;OACN;OACpB,SAAS;SArBJ,KAAK,IAsBV;OAEJ,UACK;MACL,MAAM,gBAA6B,EAAE;MACrC,IAAI,iBAAiB;AAErB,WAAK,MAAM,QAAQ,UAAU,WAC3B,KAAI,KAAK,SAAS,WAAW;AAC3B,WAAI,CAAC,eACH,eAAc,KACZ,oBAAC;QAEC,MAAK;QACL,oBAAiB;UAFZ,WAAW,OAAO,KAAK,IAAI,GAGhC,CACH;AAGH,qBAAc,KACZ,oBAAC;QAEO;QACN,OAAO;QACO;QACC;QACA;QACf,kBAAkB;QACD;QACH;QACD;QACP;QACc;QACpB,SAAS;UAZJ,KAAK,IAaV,CACH;AAED,wBAAiB;YAEjB,eAAc,KACZ,oBAAC;OAEO;OACA;OACN,OAAO;OACP,QAAQ;OACR,kBAAkB;OACD;OACH;OACD;OACO;OACpB,SAAS;SAVJ,KAAK,IAWV,CACH;AAIL,aAAO;SACL;MACI;KAEK;GACtB,SACC,oBAAC;IAAa,QAAQ;IAAc,aAAW;cAC5C;KACY,GAEf,oBAAC,SAAI,MAAK,iBAAiB;;GAEP,EAKxB,KACA,MACD;EACD;AAOF,SAAS,OAAO,EACd,OAAO,UACP,MACA,OACA,QACA,kBACA,iBACA,eAAe,OACf,aACA,SAAS,eACT,cACA,YACA,cACA,oBACA,WACA,aAuBC;CACD,MAAM,WAAW,OAAsB,KAAK;CAE5C,MAAM,cAAc,gBAAgB,UAAU,WAAW;CAEzD,MAAM,aAAa,oBAAoB,MAAM,aAAa,IAAI,KAAK,IAAI;CACvE,MAAM,aAAa,MAAM,iBAAiB,WAAW,KAAK,IAAI;CAC9D,MAAM,YAAY,MAAM,iBAAiB,eAAe,KAAK;CAG7D,MAAM,cAAc,CAAC,CAAC,aAAa,CAAC,CAAC;CAIrC,MAAM,gBAAgB,cACd,oBAAoB,MAAM,YAAY,MAAM,iBAAiB,EACnE,CAAC,MAAM,YAAY,MAAM,iBAAiB,CAC3C;CAED,MAAM,aAAa,iBACjB,EAAE,KAAK,KAAK,KAAK,EACjB,aAAa,cACd;CACD,MAAM,qBAAqB,cAAc,WAAW,YAAY,EAAE;CAClE,MAAM,aAAa,eAAe,WAAW;CAE7C,MAAM,EAAE,YAAY,cAAcD,WAAS,EAAE,YAAY,CAAC;CAE1D,MAAM,EAAE,aAAa,WAAW,YAAY,qBAAqB,UAC/D;EACE,KAAK,KAAK;EACV;EACA;EACA,uBAAuB;EACvB,oBAAoB;EACrB,EACD,OACA,YACD;CAGD,MAAM,oBAAoB,0BAA0B,KAAK,MAAM;CAG/D,MAAM,gBAAgB,cAAc;AAClC,MAAI,aACF;OAAI,CAAC,kBAAkB,QAAQ,UAC7B,QAAO,oBAAC,oBAAiB,MAAM,KAAM;;AAIzC,MACE,CAAC,eACD,MAAM,iBAAiB,kBAAkB,cACzC,kBAAkB,KAElB,QACE,kBAAkB,SACjB,MAAM,iBAAiB,kBAAkB,aAAa,OAAO;AAIlE,SAAO,mBAAmB;GACxB;GACA;GACA;GACA;GACA;GACD,CAAC;IACD;EACD;EACA;EACA,MAAM,iBAAiB;EACvB;EACA;EACA;EACA;EACA;EACA,kBAAkB;EACnB,CAAC;CAOF,MAAM,sBAAsB,MAAkB;AAC5C,MAAI,mBACF,oBAAmB,UAAU;AAG/B,QAAM,iBAAiB,cAAc,KAAK,IAAI;AAE9C,MAAI,CAAC,cACH;AAMF,MAAI,eAAe,MAAM,iBAAiB,kBAAkB,YAAY;GACtE,MAAM,cAAc,EAAE;GACtB,MAAM,kBAAkB,SAAS,SAAS,cACxC,qCACD;AAED,OACE,oBACC,oBAAoB,eACnB,gBAAgB,SAAS,YAAY,EAEvC;;AAIJ,gBAAc,KAAK,IAAI;;CAIzB,MAAM,EACJ,WACA,SACA,UACA,iBAAiB,cACjB,iBAAiB,cACjB,MACA,GAAG,wBACD;CAEJ,MAAM,QACJ;EAAE,OAAO;EAAW,SAAS;EAAU,CAAC,oBAAoB;CAE9D,MAAM,cACJ,oBAAC;EACC,KAAK;EACL,IAAI,eAAe,OAAO,KAAK,IAAI;EACnC,YAAU,OAAO,KAAK,IAAI;EAC1B,GAAIC,aACF,qBACA,YACA,mBACA;GACE,SAAS;GACT;GACA;GACA;GACA,iBAAiB;GACjB,iBAAiB;GACjB;GACD,EACD,mBACD;EACM;EACP,OAAO;EACP,aAAW;EACX,cAAY;EACN;EACN,SAAS,cAAc,SAAS;EACpB;EACA;EACZ,MAAM;EACM;EACM;EAClB,QAAQ,YAAY,QAAQ,kBAAkB,OAAO;EACrD,yBAAwB;EACxB,MAAM;GACJ,aAAa;GACb,SAAS;GACT,SAAS;GACT,UAAU;GACV,WAAW;GACX,UAAU,gBAAgB,CAAC,kBAAkB,QAAQ;GACrD,OAAO,cAAc,oBAAoB;GACzC,SAAS,cAAc,oBAAoB;GAC3C,WAAW;GACX,SAAS;GACT,KAAK;GACN;YAEA,KAAK;GACM;AAGhB,KAAI,CAAC,eAAe,CAAC,UACnB,QAAO;AAGT,QACE;EACE,oBAAC;GACC,QAAQ;IAAE,MAAM;IAAQ,KAAK,KAAK;IAAK,cAAc;IAAU;GACpD;IACX;EACD;EACD,oBAAC;GACC,QAAQ;IAAE,MAAM;IAAQ,KAAK,KAAK;IAAK,cAAc;IAAS;GACnD;IACX;KACD;;AAQP,SAAS,qBAAqB,EAC5B,QACA,aAIC;CACD,MAAM,MAAM,OAAsB,KAAK;CACvC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ,EACV,WACA,IACD;AAED,KAAI,SACF,QAAO;AAGT,QACE,oBAAC;EACM;EACL,MAAK;EACL,GAAI;EACJ,MAAM,EAAE,eAAe,cAAc;YAErC,oBAAC,SAAI,gBAAa,cAAc;GACJ;;AAmBlC,SAAS,eAAkB,OAA+B;CACxD,MAAM,EACJ,MACA,OACA,cACA,eACA,eACA,kBACA,iBACA,cACA,aACA,SAAS,eACT,uBACE;CACJ,MAAM,UAAU,KAAK;CAErB,MAAM,EAAE,WAAW,cAAc,eAAe,kBAAkB;EAChE;EACA,cAAc,KAAK;EACpB,CAAC;AAEF,QACE,qBAAC;EAAsB,GAAI;EAAW,QAAQ;aAC3C,WACC,oBAAC;GACC,GAAI;GACJ,MAAM,MAAM;GACZ,QAAQ;aAEP;IACoB,EAEzB,oBAAC;GAAmB,GAAI;aACrB,CAAC,GAAG,KAAK,WAAW,CAClB,QAAQ,SAAc,MAAM,WAAW,QAAQ,KAAK,IAAI,CAAC,CACzD,KAAK,SACJ,oBAAC;IAEC,MAAM,MAAM;IACZ,MAAM;IACC;IACP,QAAQ;IACU;IACD;IACH;IACD;IACO;IACpB,SAAS;MAVJ,KAAK,IAWV,CACF;IACe;GACC;;AAM5B,MAAM,0BAA0B,OAAO,OAAOE,SAAa,EACzD,aAAa,WACd,CAAC;AAEF,QAAQ,OAAOC;AAEf,QAAQ,UAAU;AAElB,OAAO,eAAe,SAAS,iBAAiB;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;CACf,CAAC"}

package/dist/components/fields/NumberInput/NumberInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/NumberInput/StepButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/PasswordInput/PasswordInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Picker/Picker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/RadioGroup/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchInput/SearchInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-aedbcc7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a46ac70 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";