npm - @cube-dev/ui-kit - Versions diffs - 0.176.0 → 0.178.0 - Mend

@cube-dev/ui-kit 0.176.0 → 0.178.0

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 (576) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterPicker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/FilterPicker/FilterPicker.tsx"],"sourcesContent":["import { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, Placement, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n CubeItemButtonProps,\n ItemAction,\n ItemActionProvider,\n ItemButton,\n} from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport {\n CubeFilterListBoxProps,\n FilterListBox,\n} from '../FilterListBox/FilterListBox';\nimport { ListBox } from '../ListBox';\n\nimport type { FieldBaseProps } from '../../../shared';\n\ninterface ItemWithKey {\n key?: string \| number;\n id?: string \| number;\n textValue?: string;\n children?: ItemWithKey[];\n [key: string]: unknown;\n}\n\nexport interface CubeFilterPickerProps<T>\n extends Omit<CubeFilterListBoxProps<T>, 'size' \| 'tooltip' \| 'shape'>,\n Omit<CubeItemProps, 'children' \| 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Placeholder text when no selection is made /\n placeholder?: string;\n /* Size of the picker component /\n size?: 'small' \| 'medium' \| 'large';\n /* Custom styles for the list box popover /\n listBoxStyles?: Styles;\n /* Custom styles for the popover container /\n popoverStyles?: Styles;\n /* Custom styles for the trigger button /\n triggerStyles?: Styles;\n /* Whether to show checkboxes for multiple selection mode /\n isCheckable?: boolean;\n /* Whether to flip the popover placement /\n shouldFlip?: boolean;\n /\n Placement of the popover relative to the trigger.\n * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n * `'top start'`, `'right top'`, `'left top'`).\n * @default 'bottom start'\n /\n placement?: Placement;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n /* Tooltip for the trigger button (separate from field tooltip) /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Description for the trigger button (separate from field description) /\n triggerDescription?: CubeItemProps['description'];\n\n /\n Custom renderer for the summary shown inside the trigger when there is a selection.\n \n For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n \n For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n \n The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n /\n renderSummary?:\n \| ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' \| (string \| number)[];\n selectedLabel?: string;\n selectedKey?: string \| number \| null;\n selectionMode?: 'single' \| 'multiple';\n }) => ReactNode)\n \| false;\n\n /* Ref to access internal ListBox state (from FilterListBox) /\n listStateRef?: RefObject<ListState<T>>;\n /* Additional modifiers for styling the FilterPicker /\n mods?: Record<string, boolean>;\n /* Whether the filter picker is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Whether items are currently loading. Shows a loading spinner in the search\n * input suffix inside the popover. Unlike `isLoading`, this does NOT disable\n * the trigger.\n /\n isLoadingItems?: boolean;\n /\n Sort selected items to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Ignored when using JSX children.\n * @default true when items are provided, false when using JSX children\n /\n sortSelectedToTop?: boolean;\n /* Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst FilterPickerWrapper = tasty({\n qa: 'FilterPicker',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const FilterPicker = forwardRef(function FilterPicker<T extends object>(\n props: CubeFilterPickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key \| null \| 'all' \| Key[]) => {\n if (props.selectionMode === 'multiple') {\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\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 icon,\n rightIcon,\n prefix,\n suffix,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n placement = 'bottom start',\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = t('picker.all', 'All'),\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n allowsCustomValue,\n renderSummary,\n isCheckable,\n allValueProps,\n customValueProps,\n newCustomValueProps,\n searchPlaceholder,\n autoFocus,\n filter,\n emptyLabel,\n searchInputStyles,\n searchInputRef,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n isLoadingItems,\n searchValue,\n onSearchChange,\n sortSelectedToTop: sortSelectedToTopProp,\n onOpenChange,\n isReorderable,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;\n const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['filterpicker-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 useWarn(sortSelectedToTopExplicit && sortSelectedToTop && !items, {\n key: ['filterpicker-sort-selected-to-top-children'],\n args: [\n 'FilterPicker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.',\n ],\n });\n\n // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key \| null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' \| Key[]\n >(defaultSelectedKeys ?? []);\n\n // Popover state — used as controlled prop for DialogTrigger\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const cachedItemsOrder = useRef<T[] \| null>(null);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n // Measured lazily on popover open instead of on every render\n const triggerWidthRef = useRef<number \| undefined>(undefined);\n\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Collection for label extraction (shared with FilterListBox via _internalCollection)\n const localCollectionState = useListState({\n children: children as any,\n items: items as any,\n selectionMode: 'none' as any,\n });\n\n // Build Maps for O(1) label and key lookups from the collection\n const { labelMap, keyMap } = useMemo(() => {\n const lm = new Map<string, string>();\n const km = new Map<string, Key>();\n\n const traverse = (nodes: Iterable<any>) => {\n for (const node of nodes) {\n if (node.type === 'item') {\n const strKey = String(node.key);\n lm.set(strKey, node.textValue \|\| strKey);\n km.set(strKey, node.key);\n } else if (node.childNodes) {\n traverse(node.childNodes);\n }\n }\n };\n\n traverse(localCollectionState.collection);\n return { labelMap: lm, keyMap: km };\n }, [localCollectionState.collection]);\n\n // O(1) key mapping via Map (replaces O(n) iteration per key)\n const mappedSelectedKey = useMemo(() => {\n if (selectionMode !== 'single' \|\| effectiveSelectedKey == null) return null;\n const strKey = String(effectiveSelectedKey);\n return keyMap.get(strKey) ?? effectiveSelectedKey;\n }, [selectionMode, effectiveSelectedKey, keyMap]);\n\n const mappedSelectedKeys = useMemo(() => {\n if (selectionMode !== 'multiple') return undefined;\n if (effectiveSelectedKeys === 'all') return 'all' as const;\n if (Array.isArray(effectiveSelectedKeys)) {\n return effectiveSelectedKeys.map((k) => {\n const strKey = String(k);\n return keyMap.get(strKey) ?? k;\n });\n }\n return effectiveSelectedKeys;\n }, [selectionMode, effectiveSelectedKeys, keyMap]);\n\n // Memoized label extraction using the labelMap\n const selectedLabels = useMemo(() => {\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n return Array.from(labelMap.values());\n }\n\n const selectedKeyStrs =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : effectiveSelectedKey != null\n ? [String(effectiveSelectedKey)]\n : [];\n\n return selectedKeyStrs.map((k) => labelMap.get(k) ?? k);\n }, [selectionMode, effectiveSelectedKey, effectiveSelectedKeys, labelMap]);\n\n const hasSelection = selectedLabels.length > 0;\n\n // Refs for tracking selection state synchronously\n const latestSelectionRef = useRef<{\n single: string \| null;\n multiple: 'all' \| string[];\n }>({\n single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n });\n\n useEffect(() => {\n latestSelectionRef.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n };\n }, [effectiveSelectedKey, effectiveSelectedKeys]);\n\n const selectionsWhenClosed = useRef<{\n single: string \| null;\n multiple: 'all' \| string[];\n }>({ single: null, multiple: [] });\n\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionsWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n };\n }\n }, [effectiveSelectedKey, effectiveSelectedKeys, isPopoverOpen]);\n\n // ---------------------------------------------------------------------------\n // Popover lifecycle — all effects moved out of the inline renderTrigger\n // function so they have a stable component identity and don't tear\n // down/setup on every parent re-render.\n // DialogTrigger is controlled via isOpen/onOpenChange.\n // ---------------------------------------------------------------------------\n\n const handleOpenChange = useEvent((isOpen: boolean) => {\n if (isOpen === isPopoverOpen) return;\n\n if (isOpen) {\n triggerWidthRef.current =\n triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n }\n setIsPopoverOpen(isOpen);\n if (!isOpen) {\n selectionsWhenClosed.current = { ...latestSelectionRef.current };\n cachedItemsOrder.current = null;\n onSearchChange?.('');\n }\n onOpenChange?.(isOpen);\n });\n\n // Popover sync is handled by the inner `DialogTrigger` (type=\"popover\").\n\n // Keyboard handler for arrow keys to open popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n }\n },\n });\n\n // Clear handler\n const clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n handleOpenChange(false);\n triggerRef?.current?.focus?.();\n props.onClear?.();\n\n return false;\n });\n\n // ---------------------------------------------------------------------------\n // Sorting\n // ---------------------------------------------------------------------------\n\n // Ref values (selectionsWhenClosed.current) are read synchronously inside\n // the memo body; isPopoverOpen changing triggers recomputation at the right\n // time (the ref is updated before the next render).\n const finalItems = useMemo(() => {\n if (!items) return items;\n if (!sortSelectedToTop) return items;\n if (!isPopoverOpen) return items;\n if (cachedItemsOrder.current) return cachedItemsOrder.current;\n\n const selectedSet = new Set<string>();\n\n const addSelected = (key: Key) => {\n if (key != null) selectedSet.add(String(key));\n };\n\n if (selectionMode === 'multiple') {\n if (selectionsWhenClosed.current.multiple === 'all') {\n return items;\n }\n (selectionsWhenClosed.current.multiple as string[]).forEach(addSelected);\n } else {\n if (selectionsWhenClosed.current.single != null) {\n addSelected(selectionsWhenClosed.current.single);\n }\n }\n\n if (selectedSet.size === 0) {\n return items;\n }\n\n const getItemKey = (obj: unknown): string \| undefined => {\n if (obj == null \|\| typeof obj !== 'object') return undefined;\n\n const item = obj as ItemWithKey;\n if (item.key != null) return String(item.key);\n if (item.id != null) return String(item.id);\n return undefined;\n };\n\n const sortArray = (arr: unknown[]): unknown[] => {\n const selectedArr: unknown[] = [];\n const unselectedArr: unknown[] = [];\n\n arr.forEach((obj) => {\n const item = obj as ItemWithKey;\n if (obj && Array.isArray(item.children)) {\n const sortedChildren = sortArray(item.children);\n unselectedArr.push({ ...item, children: sortedChildren });\n } else {\n const key = getItemKey(obj);\n if (key && selectedSet.has(key)) {\n selectedArr.push(obj);\n } else {\n unselectedArr.push(obj);\n }\n }\n });\n\n return [...selectedArr, ...unselectedArr];\n };\n\n const itemsArray = Array.isArray(items)\n ? items\n : Array.from(items as Iterable<unknown>);\n const sorted = sortArray(itemsArray) as T[];\n\n cachedItemsOrder.current = sorted;\n\n return sorted;\n }, [items, sortSelectedToTop, selectionMode, isPopoverOpen]);\n\n // ---------------------------------------------------------------------------\n // Trigger content\n // ---------------------------------------------------------------------------\n\n const triggerContent = useMemo((): ReactNode => {\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n return selectedLabels[0] \|\| null;\n } else if (effectiveSelectedKeys === 'all') {\n return selectAllLabel;\n } else {\n return selectedLabels.join(', ') \|\| null;\n }\n }, [\n renderSummary,\n selectionMode,\n selectedLabels,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n hasSelection,\n placeholder,\n selectAllLabel,\n ]);\n\n const showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n const validationIcon = getValidationIcon({ isInvalid, isValid });\n\n if (validationIcon) {\n suffix = (\n <>\n {suffix}\n {validationIcon}\n </>\n );\n }\n\n // Trigger element — plain JSX with no hooks.\n // The element type (ItemButton) is stable so React can reconcile efficiently.\n const triggerElement = (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n qa={qa \|\| 'FilterPicker'}\n id={id}\n type={type}\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n size={size}\n shape={shape}\n isDisabled={isDisabled \|\| isLoading}\n data-input-type=\"filterpicker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n <ItemActionProvider\n type={type}\n // The same expression the trigger is painted with, not the raw\n // `theme` — see `Picker` for why validation has to be applied here too.\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n >\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"FilterPickerClearButton\"\n // No explicit `type`/`theme` — see `Picker`: the default `current`\n // type inherits the trigger's text color, which already carries\n // validation state.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n </ItemActionProvider>\n ) : (\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {triggerContent}\n </ItemButton>\n );\n\n // ---------------------------------------------------------------------------\n // Selection change handler\n // ---------------------------------------------------------------------------\n\n const handleSelectionChange = useEvent((selection: any) => {\n if (selectionMode === 'single') {\n // With `disallowEmptySelection`, re-selecting the current item emits a\n // duplicate event (see `allowDuplicateSelectionEvents` below). Close the\n // popover but don't propagate the unchanged selection.\n if (\n disallowEmptySelection &&\n selection != null &&\n effectiveSelectedKey != null &&\n String(selection) === String(effectiveSelectedKey)\n ) {\n handleOpenChange(false);\n return;\n }\n\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key \| null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' \| Key[] = selection;\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n normalized = processSelectionArray(selection as Set<Key>);\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n // Update latest selection ref synchronously\n if (selectionMode === 'single') {\n latestSelectionRef.current.single =\n selection != null ? String(selection) : null;\n } else {\n if (selection === 'all') {\n latestSelectionRef.current.multiple = 'all';\n } else if (Array.isArray(selection)) {\n latestSelectionRef.current.multiple = Array.from(\n new Set(processSelectionArray(selection)),\n );\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n latestSelectionRef.current.multiple = Array.from(\n new Set(processSelectionArray(selection as Set<Key>)),\n );\n } else {\n latestSelectionRef.current.multiple =\n selection === 'all'\n ? 'all'\n : Array.isArray(selection)\n ? selection.map(String)\n : [];\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n handleOpenChange(false);\n }\n });\n\n // Stable callbacks for popover content (avoid inline closures that change every render)\n const handleEscape = useEvent(() => {\n handleOpenChange(false);\n });\n\n const handleOptionClick = useEvent((key: Key) => {\n if ((selectionMode === 'multiple' && isCheckable) \|\| key === '__ALL__') {\n handleOpenChange(false);\n }\n });\n\n const filterPickerField = (\n <FilterPickerWrapper\n qa=\"FilterPickerWrapper\"\n styles={styles}\n {...filterBaseProps(otherProps, { eventProps: true })}\n >\n <DialogTrigger\n type=\"popover\"\n placement={placement}\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"FilterPickerOverlay\"\n isDismissable={false}\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidthRef.current\n ? ({\n '--overlay-min-width': `${triggerWidthRef.current}px`,\n } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <FilterListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n aria-label={`${props['aria-label'] ?? props.label ?? ''} ${t(\n 'picker.pickerAriaLabel',\n 'Picker',\n )}`}\n _internalCollection={localCollectionState.collection}\n selectedKey={\n selectionMode === 'single' ? mappedSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple' ? mappedSelectedKeys : undefined\n }\n searchPlaceholder={searchPlaceholder}\n filter={filter}\n searchValue={searchValue}\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n allowDuplicateSelectionEvents={\n selectionMode === 'single' && !!disallowEmptySelection\n }\n emptyLabel={emptyLabel}\n searchInputStyles={searchInputStyles}\n searchInputRef={searchInputRef}\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n allowsCustomValue={allowsCustomValue}\n selectionMode={selectionMode}\n isInvalid={isInvalid}\n isValid={isValid}\n isDisabled={isDisabled}\n isLoading={isLoading}\n isLoadingItems={isLoadingItems}\n stateRef={listStateRef}\n isCheckable={isCheckable}\n mods={{\n popover: true,\n }}\n size={size === 'small' ? 'medium' : size}\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n allValueProps={allValueProps}\n customValueProps={customValueProps}\n newCustomValueProps={newCustomValueProps}\n isReorderable={isReorderable}\n onSearchChange={onSearchChange}\n onReorder={onReorder}\n onEscape={handleEscape}\n onOptionClick={handleOptionClick}\n onSelectionChange={handleSelectionChange}\n >\n {\n (children\n ? (children as CollectionChildren<T>)\n : undefined) as CollectionChildren<T>\n }\n </FilterListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </FilterPickerWrapper>\n );\n\n return wrapWithField<Omit<CubeFilterPickerProps<T>, 'children' \| 'tooltip'>>(\n filterPickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubeFilterPickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & { Item: typeof ListBox.Item; Section: typeof BaseSection };\n\nFilterPicker.Item = ListBox.Item;\n\nFilterPicker.Section = BaseSection;\n\nObject.defineProperty(FilterPicker, 'cubeInputType', {\n value: 'FilterPicker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"FilterPicker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/FilterPicker/FilterPicker.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\nimport { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, Placement, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n CubeItemButtonProps,\n ItemAction,\n ItemActionProvider,\n ItemButton,\n} from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport {\n CubeFilterListBoxProps,\n FilterListBox,\n} from '../FilterListBox/FilterListBox';\nimport { ListBox } from '../ListBox';\nimport { TriggerActions } from '../TriggerActions';\n\nimport type { FieldBaseProps } from '../../../shared';\n\ninterface ItemWithKey {\n key?: string \| number;\n id?: string \| number;\n textValue?: string;\n children?: ItemWithKey[];\n [key: string]: unknown;\n}\n\nexport interface CubeFilterPickerProps<T>\n extends Omit<CubeFilterListBoxProps<T>, 'size' \| 'tooltip' \| 'shape'>,\n Omit<CubeItemProps, 'children' \| 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Placeholder text when no selection is made /\n placeholder?: string;\n /* Size of the picker component /\n size?: 'small' \| 'medium' \| 'large';\n /* Custom styles for the list box popover /\n listBoxStyles?: Styles;\n /* Custom styles for the popover container /\n popoverStyles?: Styles;\n /* Custom styles for the trigger button /\n triggerStyles?: Styles;\n /* Whether to show checkboxes for multiple selection mode /\n isCheckable?: boolean;\n /* Whether to flip the popover placement /\n shouldFlip?: boolean;\n /\n Placement of the popover relative to the trigger.\n * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n * `'top start'`, `'right top'`, `'left top'`).\n * @default 'bottom start'\n /\n placement?: Placement;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n /* Tooltip for the trigger button (separate from field tooltip) /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Description for the trigger button (separate from field description) /\n triggerDescription?: CubeItemProps['description'];\n\n /\n Custom renderer for the summary shown inside the trigger when there is a selection.\n \n For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n \n For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n \n The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n /\n renderSummary?:\n \| ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' \| (string \| number)[];\n selectedLabel?: string;\n selectedKey?: string \| number \| null;\n selectionMode?: 'single' \| 'multiple';\n }) => ReactNode)\n \| false;\n\n /* Ref to access internal ListBox state (from FilterListBox) /\n listStateRef?: RefObject<ListState<T>>;\n /* Additional modifiers for styling the FilterPicker /\n mods?: Record<string, boolean>;\n /* Whether the filter picker is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Custom actions rendered inside the trigger, to the left of the built-in\n * clear button and dropdown caret. Use `FilterPicker.Action` so they match the\n * trigger's size and theme.\n \n Pressing one runs its handler without opening or closing the popover —\n * including while the popover is open. Actions follow the trigger's disabled\n * state but NOT `isReadOnly`, since a read-only field can still host an\n * action that does not change the value; pass `isDisabled` yourself for one\n * that does.\n /\n actions?: ReactNode;\n /\n Whether items are currently loading. Shows a loading spinner in the search\n * input suffix inside the popover. Unlike `isLoading`, this does NOT disable\n * the trigger.\n /\n isLoadingItems?: boolean;\n /\n Sort selected items to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Ignored when using JSX children.\n * @default true when items are provided, false when using JSX children\n /\n sortSelectedToTop?: boolean;\n /* Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst FilterPickerWrapper = tasty({\n qa: 'FilterPicker',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const FilterPicker = forwardRef(function FilterPicker<T extends object>(\n props: CubeFilterPickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key \| null \| 'all' \| Key[]) => {\n if (props.selectionMode === 'multiple') {\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\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 icon,\n rightIcon,\n prefix,\n suffix,\n actions,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n placement = 'bottom start',\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = t('picker.all', 'All'),\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n allowsCustomValue,\n renderSummary,\n isCheckable,\n allValueProps,\n customValueProps,\n newCustomValueProps,\n searchPlaceholder,\n autoFocus,\n filter,\n emptyLabel,\n searchInputStyles,\n searchInputRef,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n isLoadingItems,\n searchValue,\n onSearchChange,\n sortSelectedToTop: sortSelectedToTopProp,\n onOpenChange,\n isReorderable,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;\n const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['filterpicker-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 useWarn(sortSelectedToTopExplicit && sortSelectedToTop && !items, {\n key: ['filterpicker-sort-selected-to-top-children'],\n args: [\n 'FilterPicker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.',\n ],\n });\n\n // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key \| null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' \| Key[]\n >(defaultSelectedKeys ?? []);\n\n // Popover state — used as controlled prop for DialogTrigger\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const cachedItemsOrder = useRef<T[] \| null>(null);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n // Measured lazily on popover open instead of on every render\n const triggerWidthRef = useRef<number \| undefined>(undefined);\n\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Collection for label extraction (shared with FilterListBox via _internalCollection)\n const localCollectionState = useListState({\n children: children as any,\n items: items as any,\n selectionMode: 'none' as any,\n });\n\n // Build Maps for O(1) label and key lookups from the collection\n const { labelMap, keyMap } = useMemo(() => {\n const lm = new Map<string, string>();\n const km = new Map<string, Key>();\n\n const traverse = (nodes: Iterable<any>) => {\n for (const node of nodes) {\n if (node.type === 'item') {\n const strKey = String(node.key);\n lm.set(strKey, node.textValue \|\| strKey);\n km.set(strKey, node.key);\n } else if (node.childNodes) {\n traverse(node.childNodes);\n }\n }\n };\n\n traverse(localCollectionState.collection);\n return { labelMap: lm, keyMap: km };\n }, [localCollectionState.collection]);\n\n // O(1) key mapping via Map (replaces O(n) iteration per key)\n const mappedSelectedKey = useMemo(() => {\n if (selectionMode !== 'single' \|\| effectiveSelectedKey == null) return null;\n const strKey = String(effectiveSelectedKey);\n return keyMap.get(strKey) ?? effectiveSelectedKey;\n }, [selectionMode, effectiveSelectedKey, keyMap]);\n\n const mappedSelectedKeys = useMemo(() => {\n if (selectionMode !== 'multiple') return undefined;\n if (effectiveSelectedKeys === 'all') return 'all' as const;\n if (Array.isArray(effectiveSelectedKeys)) {\n return effectiveSelectedKeys.map((k) => {\n const strKey = String(k);\n return keyMap.get(strKey) ?? k;\n });\n }\n return effectiveSelectedKeys;\n }, [selectionMode, effectiveSelectedKeys, keyMap]);\n\n // Memoized label extraction using the labelMap\n const selectedLabels = useMemo(() => {\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n return Array.from(labelMap.values());\n }\n\n const selectedKeyStrs =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : effectiveSelectedKey != null\n ? [String(effectiveSelectedKey)]\n : [];\n\n return selectedKeyStrs.map((k) => labelMap.get(k) ?? k);\n }, [selectionMode, effectiveSelectedKey, effectiveSelectedKeys, labelMap]);\n\n const hasSelection = selectedLabels.length > 0;\n\n // Refs for tracking selection state synchronously\n const latestSelectionRef = useRef<{\n single: string \| null;\n multiple: 'all' \| string[];\n }>({\n single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n });\n\n useEffect(() => {\n latestSelectionRef.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n };\n }, [effectiveSelectedKey, effectiveSelectedKeys]);\n\n const selectionsWhenClosed = useRef<{\n single: string \| null;\n multiple: 'all' \| string[];\n }>({ single: null, multiple: [] });\n\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionsWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n effectiveSelectedKeys === 'all'\n ? 'all'\n : (effectiveSelectedKeys ?? []).map(String),\n };\n }\n }, [effectiveSelectedKey, effectiveSelectedKeys, isPopoverOpen]);\n\n // ---------------------------------------------------------------------------\n // Popover lifecycle — all effects moved out of the inline renderTrigger\n // function so they have a stable component identity and don't tear\n // down/setup on every parent re-render.\n // DialogTrigger is controlled via isOpen/onOpenChange.\n // ---------------------------------------------------------------------------\n\n const handleOpenChange = useEvent((isOpen: boolean) => {\n if (isOpen === isPopoverOpen) return;\n\n if (isOpen) {\n triggerWidthRef.current =\n triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n }\n setIsPopoverOpen(isOpen);\n if (!isOpen) {\n selectionsWhenClosed.current = { ...latestSelectionRef.current };\n cachedItemsOrder.current = null;\n onSearchChange?.('');\n }\n onOpenChange?.(isOpen);\n });\n\n // Popover sync is handled by the inner `DialogTrigger` (type=\"popover\").\n\n // Keyboard handler for arrow keys to open popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n }\n },\n });\n\n // A press on the trigger's own trailing run — a custom action or the clear\n // button — must not be read as an interaction outside the popover. Without\n // this the overlay reads it as a press on our own trigger and dismisses,\n // swallowing the press, so the first press on `Reset` while the list is open\n // only closed the list and the action never ran.\n const shouldCloseOnInteractOutside = useEvent(\n (element: Element) => !element.closest('[data-trigger-action]'),\n );\n\n // Clear handler\n const clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n handleOpenChange(false);\n triggerRef?.current?.focus?.();\n props.onClear?.();\n\n return false;\n });\n\n // ---------------------------------------------------------------------------\n // Sorting\n // ---------------------------------------------------------------------------\n\n // Ref values (selectionsWhenClosed.current) are read synchronously inside\n // the memo body; isPopoverOpen changing triggers recomputation at the right\n // time (the ref is updated before the next render).\n const finalItems = useMemo(() => {\n if (!items) return items;\n if (!sortSelectedToTop) return items;\n if (!isPopoverOpen) return items;\n if (cachedItemsOrder.current) return cachedItemsOrder.current;\n\n const selectedSet = new Set<string>();\n\n const addSelected = (key: Key) => {\n if (key != null) selectedSet.add(String(key));\n };\n\n if (selectionMode === 'multiple') {\n if (selectionsWhenClosed.current.multiple === 'all') {\n return items;\n }\n (selectionsWhenClosed.current.multiple as string[]).forEach(addSelected);\n } else {\n if (selectionsWhenClosed.current.single != null) {\n addSelected(selectionsWhenClosed.current.single);\n }\n }\n\n if (selectedSet.size === 0) {\n return items;\n }\n\n const getItemKey = (obj: unknown): string \| undefined => {\n if (obj == null \|\| typeof obj !== 'object') return undefined;\n\n const item = obj as ItemWithKey;\n if (item.key != null) return String(item.key);\n if (item.id != null) return String(item.id);\n return undefined;\n };\n\n const sortArray = (arr: unknown[]): unknown[] => {\n const selectedArr: unknown[] = [];\n const unselectedArr: unknown[] = [];\n\n arr.forEach((obj) => {\n const item = obj as ItemWithKey;\n if (obj && Array.isArray(item.children)) {\n const sortedChildren = sortArray(item.children);\n unselectedArr.push({ ...item, children: sortedChildren });\n } else {\n const key = getItemKey(obj);\n if (key && selectedSet.has(key)) {\n selectedArr.push(obj);\n } else {\n unselectedArr.push(obj);\n }\n }\n });\n\n return [...selectedArr, ...unselectedArr];\n };\n\n const itemsArray = Array.isArray(items)\n ? items\n : Array.from(items as Iterable<unknown>);\n const sorted = sortArray(itemsArray) as T[];\n\n cachedItemsOrder.current = sorted;\n\n return sorted;\n }, [items, sortSelectedToTop, selectionMode, isPopoverOpen]);\n\n // ---------------------------------------------------------------------------\n // Trigger content\n // ---------------------------------------------------------------------------\n\n const triggerContent = useMemo((): ReactNode => {\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n return selectedLabels[0] \|\| null;\n } else if (effectiveSelectedKeys === 'all') {\n return selectAllLabel;\n } else {\n return selectedLabels.join(', ') \|\| null;\n }\n }, [\n renderSummary,\n selectionMode,\n selectedLabels,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n hasSelection,\n placeholder,\n selectAllLabel,\n ]);\n\n const showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n const validationIcon = getValidationIcon({ isInvalid, isValid });\n\n // The same expression the trigger is painted with, not the raw `theme` — see\n // `Picker` for why validation has to be applied here too.\n const paintedTheme = getValidationTheme(theme, { isInvalid, isValid });\n\n if (validationIcon \|\| actions) {\n // The `suffix` slot sits between the label and `rightIcon`, so actions\n // placed at its end land immediately left of the built-in clear button and\n // caret — which is where custom actions belong.\n suffix = (\n <>\n {suffix}\n {validationIcon}\n {actions ? (\n <TriggerActions\n type={type}\n theme={paintedTheme}\n isDisabled={isDisabled \|\| isLoading}\n >\n {actions}\n </TriggerActions>\n ) : null}\n </>\n );\n }\n\n // Trigger element — plain JSX with no hooks.\n // The element type (ItemButton) is stable so React can reconcile efficiently.\n const triggerElement = (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n qa={qa \|\| 'FilterPicker'}\n id={id}\n type={type}\n theme={paintedTheme}\n size={size}\n shape={shape}\n isDisabled={isDisabled \|\| isLoading}\n data-input-type=\"filterpicker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n // `ClearPressResponder`: `DialogTrigger` opens the popover through a\n // `PressResponder` whose context reaches every `usePress` below it,\n // this button included — so without it, clearing also opened the\n // popover that `clearValue` had just closed.\n <ClearPressResponder>\n <ItemActionProvider\n type={type}\n // The theme the trigger is PAINTED with — see `paintedTheme` above.\n theme={paintedTheme}\n >\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"FilterPickerClearButton\"\n data-trigger-action=\"\"\n // No explicit `type`/`theme` — see `Picker`: the default `current`\n // type inherits the trigger's text color, which already carries\n // validation state.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n </ItemActionProvider>\n </ClearPressResponder>\n ) : (\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {triggerContent}\n </ItemButton>\n );\n\n // ---------------------------------------------------------------------------\n // Selection change handler\n // ---------------------------------------------------------------------------\n\n const handleSelectionChange = useEvent((selection: any) => {\n if (selectionMode === 'single') {\n // With `disallowEmptySelection`, re-selecting the current item emits a\n // duplicate event (see `allowDuplicateSelectionEvents` below). Close the\n // popover but don't propagate the unchanged selection.\n if (\n disallowEmptySelection &&\n selection != null &&\n effectiveSelectedKey != null &&\n String(selection) === String(effectiveSelectedKey)\n ) {\n handleOpenChange(false);\n return;\n }\n\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key \| null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' \| Key[] = selection;\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n normalized = processSelectionArray(selection as Set<Key>);\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n // Update latest selection ref synchronously\n if (selectionMode === 'single') {\n latestSelectionRef.current.single =\n selection != null ? String(selection) : null;\n } else {\n if (selection === 'all') {\n latestSelectionRef.current.multiple = 'all';\n } else if (Array.isArray(selection)) {\n latestSelectionRef.current.multiple = Array.from(\n new Set(processSelectionArray(selection)),\n );\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n latestSelectionRef.current.multiple = Array.from(\n new Set(processSelectionArray(selection as Set<Key>)),\n );\n } else {\n latestSelectionRef.current.multiple =\n selection === 'all'\n ? 'all'\n : Array.isArray(selection)\n ? selection.map(String)\n : [];\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n handleOpenChange(false);\n }\n });\n\n // Stable callbacks for popover content (avoid inline closures that change every render)\n const handleEscape = useEvent(() => {\n handleOpenChange(false);\n });\n\n const handleOptionClick = useEvent((key: Key) => {\n if ((selectionMode === 'multiple' && isCheckable) \|\| key === '__ALL__') {\n handleOpenChange(false);\n }\n });\n\n const filterPickerField = (\n <FilterPickerWrapper\n qa=\"FilterPickerWrapper\"\n styles={styles}\n {...filterBaseProps(otherProps, { eventProps: true })}\n >\n <DialogTrigger\n type=\"popover\"\n placement={placement}\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"FilterPickerOverlay\"\n isDismissable={false}\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidthRef.current\n ? ({\n '--overlay-min-width': `${triggerWidthRef.current}px`,\n } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <FilterListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n aria-label={`${props['aria-label'] ?? props.label ?? ''} ${t(\n 'picker.pickerAriaLabel',\n 'Picker',\n )}`}\n _internalCollection={localCollectionState.collection}\n selectedKey={\n selectionMode === 'single' ? mappedSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple' ? mappedSelectedKeys : undefined\n }\n searchPlaceholder={searchPlaceholder}\n filter={filter}\n searchValue={searchValue}\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n allowDuplicateSelectionEvents={\n selectionMode === 'single' && !!disallowEmptySelection\n }\n emptyLabel={emptyLabel}\n searchInputStyles={searchInputStyles}\n searchInputRef={searchInputRef}\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n allowsCustomValue={allowsCustomValue}\n selectionMode={selectionMode}\n isInvalid={isInvalid}\n isValid={isValid}\n isDisabled={isDisabled}\n isLoading={isLoading}\n isLoadingItems={isLoadingItems}\n stateRef={listStateRef}\n isCheckable={isCheckable}\n mods={{\n popover: true,\n }}\n size={size === 'small' ? 'medium' : size}\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n allValueProps={allValueProps}\n customValueProps={customValueProps}\n newCustomValueProps={newCustomValueProps}\n isReorderable={isReorderable}\n onSearchChange={onSearchChange}\n onReorder={onReorder}\n onEscape={handleEscape}\n onOptionClick={handleOptionClick}\n onSelectionChange={handleSelectionChange}\n >\n {\n (children\n ? (children as CollectionChildren<T>)\n : undefined) as CollectionChildren<T>\n }\n </FilterListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </FilterPickerWrapper>\n );\n\n return wrapWithField<Omit<CubeFilterPickerProps<T>, 'children' \| 'tooltip'>>(\n filterPickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubeFilterPickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & {\n Item: typeof ListBox.Item;\n Section: typeof BaseSection;\n Action: typeof ItemAction;\n};\n\nFilterPicker.Item = ListBox.Item;\n\nFilterPicker.Section = BaseSection;\n\nFilterPicker.Action = ItemAction;\n\nObject.defineProperty(FilterPicker, 'cubeInputType', {\n value: 'FilterPicker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { TextInput } from "../TextInput/TextInput.js";
 import { _FileInput } from "../FileInput/FileInput.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | 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/ListBoxPopover/ListBoxPopover.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";

package/dist/components/fields/ListBoxPopover/listNavigation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { useCallback, useEffect, useRef } from "react";
 //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

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

@@ -3,6 +3,7 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import "../../content/Item/index.js";
 import { CubeItemProps } from "../../content/Item/Item.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CubeItemButtonProps } from "../../actions/ItemButton/ItemButton.js";
 import "../../actions/index.js";
 import { CubeListBoxProps, ListBox } from "../ListBox/ListBox.js";
@@ -61,6 +62,18 @@ interface CubePickerProps<T> extends Omit<CubeListBoxProps<T>, 'size' | 'tooltip
   isClearable?: boolean;
   /** Callback called when the clear button is pressed */
   onClear?: () => void;
+  /**
+   * Custom actions rendered inside the trigger, to the left of the built-in
+   * clear button and dropdown caret. Use `Picker.Action` so they match the
+   * trigger's size and theme.
+   *
+   * Pressing one runs its handler without opening or closing the popover —
+   * including while the popover is open. Actions follow the trigger's disabled
+   * state but NOT `isReadOnly`, since a read-only field can still host an
+   * action that does not change the value; pass `isDisabled` yourself for one
+   * that does.
+   */
+  actions?: ReactNode;
   /**
    * Sort selected item(s) to the top when the popover opens.
    * Only works when using the `items` prop (data-driven mode).
@@ -76,6 +89,7 @@ declare const Picker: (<T>(props: CubePickerProps<T> & {
 }) => ReactElement) & {
   Item: typeof ListBox.Item;
   Section: typeof Section;
+  Action: typeof ItemAction;
 };
 //#endregion
 export { CubePickerProps, Picker };

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
@@ -17,12 +17,14 @@ import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { ListBox } from "../ListBox/ListBox.js";
+import { TriggerActions } from "../TriggerActions.js";
 import { processSelectionArray } from "../../../utils/selection.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FocusScope, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
+import { ClearPressResponder } from "@react-aria/interactions";
 //#region src/components/fields/Picker/Picker.tsx
 const PROP_STYLES = [
@@ -53,7 +55,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { id, qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
+	let { id, qa, label, extra, icon, rightIcon, prefix, suffix, actions, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	useWarn(isCheckable === false && selectionMode === "single", {
 		key: ["picker-checkable-single-mode"],
@@ -177,6 +179,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 			handleOpenChange(true);
 		}
 	} });
+	const shouldCloseOnInteractOutside = useEvent((element) => !element.closest("[data-trigger-action]"));
 	const clearValue = useEvent(() => {
 		if (selectionMode === "multiple") {
 			if (!isControlledMultiple) setInternalSelectedKeys([]);
@@ -224,17 +227,27 @@ const Picker = forwardRef(function Picker(props, ref) {
 		isInvalid,
 		isValid
 	});
-	if (validationIcon) suffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, validationIcon] });
+	const paintedTheme = getValidationTheme(theme, {
+		isInvalid,
+		isValid
+	});
+	if (validationIcon || actions) suffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		suffix,
+		validationIcon,
+		actions ? /* @__PURE__ */ jsx(TriggerActions, {
+			type,
+			theme: paintedTheme,
+			isDisabled: isDisabled || isLoading,
+			children: actions
+		}) : null
+	] });
 	const triggerElement = /* @__PURE__ */ jsx(_ItemButton, {
 		ref: triggerRef,
 		"data-popover-trigger": true,
 		id,
 		qa: qa || "PickerTrigger",
 		type,
-		theme: getValidationTheme(theme, {
-			isInvalid,
-			isValid
-		}),
+		theme: paintedTheme,
 		size,
 		shape,
 		isDisabled: isDisabled || isLoading,
@@ -244,20 +257,18 @@ const Picker = forwardRef(function Picker(props, ref) {
 			...externalMods
 		},
 		icon,
-		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemActionProvider, {
+		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ClearPressResponder, { children: /* @__PURE__ */ jsx(ItemActionProvider, {
 			type,
-			theme: getValidationTheme(theme, {
-				isInvalid,
-				isValid
-			}),
+			theme: paintedTheme,
 			children: /* @__PURE__ */ jsx(ItemAction, {
 				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 				size,
 				qa: "PickerClearButton",
+				"data-trigger-action": "",
 				mods: { pressed: false },
 				onPress: clearValue
 			})
-		}) : /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }),
+		}) }) : /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }),
 		prefix,
 		suffix,
 		hotkeys,
@@ -306,6 +317,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 			isOpen: isPopoverOpen,
 			containerPadding,
 			shouldFlip,
+			shouldCloseOnInteractOutside,
 			onOpenChange: handleOpenChange,
 			children: [triggerElement, () => /* @__PURE__ */ jsx(Dialog, {
 				qa: "PickerOverlay",
@@ -363,6 +375,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 });
 Picker.Item = ListBox.Item;
 Picker.Section = Section;
+Picker.Action = ItemAction;
 Object.defineProperty(Picker, "cubeInputType", {
 	value: "Picker",
 	enumerable: false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/Picker/Picker.tsx"],"sourcesContent":["import { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n CubeItemButtonProps,\n ItemAction,\n ItemActionProvider,\n ItemButton,\n} from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\n\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<\n CubeListBoxProps<T>,\n 'size' \| 'tooltip' \| 'shape' \| 'emptyLabel'\n >,\n Omit<CubeItemProps, 'children' \| 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Placeholder text when no selection is made /\n placeholder?: string;\n /* Size of the picker component /\n size?: 'small' \| 'medium' \| 'large';\n /* Custom styles for the list box popover /\n listBoxStyles?: Styles;\n /* Custom styles for the popover container /\n popoverStyles?: Styles;\n /* Custom styles for the trigger button /\n triggerStyles?: Styles;\n /* Whether to show checkboxes for multiple selection mode /\n isCheckable?: boolean;\n /* Whether to flip the popover placement /\n shouldFlip?: boolean;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n /* Tooltip for the trigger button (separate from field tooltip) /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Description for the trigger button (separate from field description) /\n triggerDescription?: CubeItemProps['description'];\n\n /\n Custom renderer for the summary shown inside the trigger when there is a selection.\n \n For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n \n For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n \n The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n /\n renderSummary?:\n \| ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' \| (string \| number)[];\n selectedLabel?: string;\n selectedKey?: string \| number \| null;\n selectionMode?: 'single' \| 'multiple';\n }) => ReactNode)\n \| false;\n\n /* Ref to access internal ListBox state /\n listStateRef?: MutableRefObject<ListState<T>>;\n /* Additional modifiers for styling the Picker /\n mods?: Record<string, boolean>;\n /* Whether the picker is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Sort selected item(s) to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Supports both single and multiple selection modes.\n * @default true when items are provided, false when using JSX children\n /\n sortSelectedToTop?: boolean;\n /* Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst PickerWrapper = tasty({\n qa: 'PickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const Picker = forwardRef(function Picker<T extends object>(\n props: CubePickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key \| null \| 'all' \| Key[]) => {\n if (props.selectionMode === 'multiple') {\n // Handle \"all\" selection and array selections\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n id,\n qa,\n label,\n extra,\n icon,\n rightIcon,\n prefix,\n suffix,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = t('picker.all', 'All'),\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n onClear,\n sortSelectedToTop,\n onOpenChange,\n listStateRef: externalListStateRef,\n ...otherProps\n } = props;\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['picker-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 // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key \| null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' \| Key[]\n >(defaultSelectedKeys ?? []);\n\n // Popover state — used as controlled prop for DialogTrigger\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n // Measured lazily on popover open instead of on every render\n const triggerWidthRef = useRef<number \| undefined>(undefined);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Ref to access internal ListBox state for collection API\n const internalListStateRef = useRef<ListState<T>>(null);\n\n // Sync internal ref with external ref if provided\n useEffect(() => {\n if (externalListStateRef && internalListStateRef.current) {\n externalListStateRef.current = internalListStateRef.current;\n }\n }, [externalListStateRef]);\n\n // Cache for sorted items array when using `items` prop\n const cachedItemsOrder = useRef<T[] \| null>(null);\n\n const latestSelectionRef = useRef<{\n single: string \| null;\n multiple: string[];\n }>({\n single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n });\n\n useEffect(() => {\n latestSelectionRef.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n };\n }, [effectiveSelectedKey, effectiveSelectedKeys, selectionMode]);\n\n const selectionWhenClosed = useRef<{\n single: string \| null;\n multiple: string[];\n }>({ single: null, multiple: [] });\n\n const sortSelectedToTopExplicit = sortSelectedToTop !== undefined;\n const shouldSortSelectedToTop = sortSelectedToTop ?? (items ? true : false);\n\n useWarn(sortSelectedToTopExplicit && shouldSortSelectedToTop && !items, {\n key: ['picker-sort-selected-to-top-children'],\n args: [\n 'Picker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.',\n ],\n });\n\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n };\n }\n }, [\n effectiveSelectedKey,\n effectiveSelectedKeys,\n isPopoverOpen,\n selectionMode,\n ]);\n\n const finalItems = useMemo(() => {\n if (!items \|\| !shouldSortSelectedToTop) return items;\n if (!isPopoverOpen) return items;\n if (cachedItemsOrder.current) return cachedItemsOrder.current;\n\n const selectedKeySet = new Set<string>();\n\n if (selectionMode === 'multiple') {\n if (\n selectionWhenClosed.current.multiple.length === 0 \|\|\n effectiveSelectedKeys === 'all'\n ) {\n return items;\n }\n selectionWhenClosed.current.multiple.forEach((k) =>\n selectedKeySet.add(k),\n );\n } else if (selectionWhenClosed.current.single) {\n selectedKeySet.add(selectionWhenClosed.current.single);\n }\n\n if (selectedKeySet.size === 0) return items;\n\n const itemsArray = Array.isArray(items) ? items : Array.from(items);\n const selectedItems: T[] = [];\n const unselectedItems: T[] = [];\n\n itemsArray.forEach((item) => {\n const key = (item as any)?.key ?? (item as any)?.id;\n if (key != null && selectedKeySet.has(String(key))) {\n selectedItems.push(item);\n } else {\n unselectedItems.push(item);\n }\n });\n\n const sorted = [...selectedItems, ...unselectedItems];\n\n cachedItemsOrder.current = sorted;\n\n return sorted;\n }, [items, shouldSortSelectedToTop, selectionMode, isPopoverOpen]);\n\n // Create local collection state for reading item data (labels, etc.)\n // This allows us to read item labels even before the popover opens\n const localCollectionState = useListState({\n children,\n items: finalItems, // Use sorted items to match what's shown in popover\n selectionMode: 'none', // Don't manage selection in this state\n });\n\n const selectedLabels = useMemo(() => {\n const collection = localCollectionState?.collection;\n\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n if (!collection) return [];\n const labels: string[] = [];\n for (const item of collection) {\n if (item.type === 'item') {\n labels.push(item.textValue \|\| String(item.key));\n }\n }\n return labels;\n }\n\n const keysToGet =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? effectiveSelectedKeys \|\| []\n : effectiveSelectedKey != null\n ? [effectiveSelectedKey]\n : [];\n\n return keysToGet\n .map((key) => {\n const item = collection?.getItem(key);\n return item?.textValue \|\| String(key);\n })\n .filter(Boolean);\n }, [\n selectionMode,\n effectiveSelectedKeys,\n effectiveSelectedKey,\n localCollectionState?.collection,\n ]);\n\n const hasSelection = selectedLabels.length > 0;\n\n // ---------------------------------------------------------------------------\n // Popover lifecycle — all effects moved out of the inline renderTrigger\n // function so they have a stable component identity and don't tear\n // down/setup on every parent re-render.\n // DialogTrigger is controlled via isOpen/onOpenChange.\n // ---------------------------------------------------------------------------\n\n const handleOpenChange = useEvent((isOpen: boolean) => {\n if (isOpen === isPopoverOpen) return;\n\n if (isOpen) {\n triggerWidthRef.current =\n triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n }\n setIsPopoverOpen(isOpen);\n if (!isOpen) {\n selectionWhenClosed.current = { ...latestSelectionRef.current };\n cachedItemsOrder.current = null;\n }\n onOpenChange?.(isOpen);\n });\n\n // Popover sync is handled by the inner `DialogTrigger` (type=\"popover\").\n\n // Keyboard handler for arrow keys to open popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n }\n },\n });\n\n // Clear handler\n const clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n handleOpenChange(false);\n triggerRef?.current?.focus?.();\n onClear?.();\n\n return false;\n });\n\n // ---------------------------------------------------------------------------\n // Trigger content\n // ---------------------------------------------------------------------------\n\n const triggerContent = useMemo((): ReactNode => {\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n return selectedLabels[0] \|\| null;\n } else if (effectiveSelectedKeys === 'all') {\n return selectAllLabel;\n } else {\n return selectedLabels.join(', ') \|\| null;\n }\n }, [\n renderSummary,\n selectionMode,\n selectedLabels,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n hasSelection,\n placeholder,\n selectAllLabel,\n ]);\n\n const showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n const validationIcon = getValidationIcon({ isInvalid, isValid });\n\n if (validationIcon) {\n suffix = (\n <>\n {suffix}\n {validationIcon}\n </>\n );\n }\n\n // Trigger element — plain JSX with no hooks.\n const triggerElement = (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n id={id}\n qa={qa \|\| 'PickerTrigger'}\n type={type}\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n size={size}\n shape={shape}\n isDisabled={isDisabled \|\| isLoading}\n data-input-type=\"picker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n <ItemActionProvider\n type={type}\n // Must be the SAME expression the trigger is painted with (above), not\n // the raw `theme`: this tells the action which surface it sits on, and\n // validation overrides the theme. With `theme=\"special\"` on an invalid\n // field the trigger renders `danger` — a light surface — so forwarding\n // `special` here would hand the action the strong dark-purple alpha\n // ramp and make hover/press read far too heavy.\n //\n // It travels through context rather than as a prop because the prop is\n // what opts an action out of `current` back to `clear`, and this one\n // needs to stay `current` so its label keeps inheriting.\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n >\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"PickerClearButton\"\n // No explicit `type`/`theme` — the default `current` type inherits\n // the trigger's own text color, which already carries validation\n // state here, so this renders exactly as the explicit theme did\n // while also following a custom theme.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n </ItemActionProvider>\n ) : (\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {triggerContent}\n </ItemButton>\n );\n\n // ---------------------------------------------------------------------------\n // Selection change handler\n // ---------------------------------------------------------------------------\n\n const handleSelectionChange = useEvent((selection: any) => {\n if (selectionMode === 'single') {\n // With `disallowEmptySelection`, re-selecting the current item emits a\n // duplicate event (see `allowDuplicateSelectionEvents` below). Close the\n // popover but don't propagate the unchanged selection.\n if (\n disallowEmptySelection &&\n selection != null &&\n effectiveSelectedKey != null &&\n String(selection) === String(effectiveSelectedKey)\n ) {\n handleOpenChange(false);\n return;\n }\n\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key \| null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' \| Key[] = selection;\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n normalized = processSelectionArray(selection as Set<Key>);\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n if (selectionMode === 'single') {\n latestSelectionRef.current.single =\n selection != null ? String(selection) : null;\n } else {\n if (selection === 'all') {\n latestSelectionRef.current.multiple = [];\n } else if (Array.isArray(selection)) {\n latestSelectionRef.current.multiple = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n latestSelectionRef.current.multiple = processSelectionArray(\n selection as Set<Key>,\n );\n } else {\n latestSelectionRef.current.multiple = [];\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n handleOpenChange(false);\n }\n });\n\n const handleEscape = useEvent(() => {\n handleOpenChange(false);\n });\n\n const handleOptionClick = useEvent((key: Key) => {\n if ((selectionMode === 'multiple' && isCheckable) \|\| key === '__ALL__') {\n handleOpenChange(false);\n }\n });\n\n const pickerField = (\n <PickerWrapper\n styles={styles}\n {...(filterBaseProps(otherProps, { eventProps: true }) as Record<\n string,\n unknown\n >)}\n >\n <DialogTrigger\n type=\"popover\"\n placement=\"bottom start\"\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"PickerOverlay\"\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidthRef.current\n ? ({\n '--overlay-min-width': `${triggerWidthRef.current}px`,\n } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <ListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n aria-label={`${props['aria-label'] ?? props.label ?? ''} ${t(\n 'picker.pickerAriaLabel',\n 'Picker',\n )}`}\n selectedKey={\n selectionMode === 'single' ? effectiveSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple'\n ? effectiveSelectedKeys\n : undefined\n }\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n allowDuplicateSelectionEvents={\n selectionMode === 'single' && !!disallowEmptySelection\n }\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n selectionMode={selectionMode}\n isInvalid={isInvalid}\n isValid={isValid}\n isDisabled={isDisabled}\n isLoading={isLoading}\n stateRef={internalListStateRef}\n isCheckable={isCheckable}\n shape=\"popover\"\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n qa={`${props.qa \|\| 'Picker'}ListBox`}\n allValueProps={allValueProps}\n onEscape={handleEscape}\n onOptionClick={handleOptionClick}\n onSelectionChange={handleSelectionChange}\n >\n {children as CollectionChildren<T>}\n </ListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </PickerWrapper>\n );\n\n return wrapWithField<Omit<CubePickerProps<T>, 'children' \| 'tooltip'>>(\n pickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubePickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & { Item: typeof ListBox.Item; Section: typeof BaseSection };\n\nPicker.Item = ListBox.Item;\n\nPicker.Section = BaseSection;\n\nObject.defineProperty(Picker, 'cubeInputType', {\n value: 'Picker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IA,MAAM,cAAc;CAAC,GAAG;CAAa,GAAG;CAAc,GAAG;CAAa;AAEtE,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,cAAc;EACd,YAAY;EACb;CACF,CAAC;AAEF,MAAa,SAAS,WAAW,SAAS,OACxC,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,cAAc,OAAO,EAC3B,mBAAmB,EAAE,OAAO,eAAe;EACzC,MAAM,aAAsC,EAAE;AAE9C,MAAI,MAAM,kBAAkB,WAC1B,YAAW,eAAe,SAAS,EAAE;MAErC,YAAW,cAAc,SAAS;AAGpC,aAAW,qBAAqB,QAAoC;AAClE,OAAI,MAAM,kBAAkB,WAE1B,KAAI,QAAQ,MACV,UAAS,MAAM;OAEf,UAAS,MAAO,MAAM,QAAQ,IAAI,GAAG,MAAM,CAAC,IAAI,GAAI,EAAE,CAAC;OAGzD,UAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK,IAAI;;AAI/C,SAAO;IAEV,CAAC;CAEF,IAAI,EACF,IACA,IACA,OACA,OACA,MACA,WACA,QACA,QACA,SACA,gBACA,oBACA,aACA,YACA,oBACA,WACA,SACA,YACA,WACA,SACA,MAAM,cACN,aACA,sBACA,aACA,OAAO,UACP,QACA,eACA,eACA,OAAO,WACP,QAAQ,WACR,OACA,aACA,iBACA,UACA,aAAa,MACb,mBAAmB,GACnB,aACA,oBACA,cACA,qBACA,cACA,mBACA,gBAAgB,UAChB,cACA,cACA,eACA,iBAAiB,EAAE,cAAc,MAAM,EACvC,OACA,QACA,QACA,cACA,cACA,eACA,eACA,aACA,eACA,YACA,cACA,eACA,eACA,SACA,wBACA,uBACA,UACA,eACA,aACA,SACA,mBACA,cACA,cAAc,sBACd,GAAG,eACD;AAEJ,UAAS,cAAc,YAAY,aAAa,OAAO;AAGvD,SAAQ,gBAAgB,SAAS,kBAAkB,UAAU;EAC3D,KAAK,CAAC,+BAA+B;EACrC,MAAM,CACJ,6HACD;EACF,CAAC;CAGF,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,sBAAsB,KACvB;CACD,MAAM,CAAC,sBAAsB,2BAA2B,SAEtD,uBAAuB,EAAE,CAAC;CAG5B,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,aAAa,OAA6C,KAAK;CAErE,MAAM,kBAAkB,OAA2B,OAAU;CAE7D,MAAM,qBAAqB,gBAAgB;CAC3C,MAAM,uBAAuB,iBAAiB;CAE9C,MAAM,uBAAuB,qBACzB,cACA;CACJ,MAAM,wBAAwB,uBAC1B,eACA;CAGJ,MAAM,uBAAuB,OAAqB,KAAK;AAGvD,iBAAgB;AACd,MAAI,wBAAwB,qBAAqB,QAC/C,sBAAqB,UAAU,qBAAqB;IAErD,CAAC,qBAAqB,CAAC;CAG1B,MAAM,mBAAmB,OAAmB,KAAK;CAEjD,MAAM,qBAAqB,OAGxB;EACD,QAAQ,wBAAwB,OAAO,OAAO,qBAAqB,GAAG;EACtE,UACE,kBAAkB,cAAc,0BAA0B,SACrD,yBAAyB,EAAE,EAAE,IAAI,OAAO,GACzC,EAAE;EACT,CAAC;AAEF,iBAAgB;AACd,qBAAmB,UAAU;GAC3B,QACE,wBAAwB,OAAO,OAAO,qBAAqB,GAAG;GAChE,UACE,kBAAkB,cAAc,0BAA0B,SACrD,yBAAyB,EAAE,EAAE,IAAI,OAAO,GACzC,EAAE;GACT;IACA;EAAC;EAAsB;EAAuB;EAAc,CAAC;CAEhE,MAAM,sBAAsB,OAGzB;EAAE,QAAQ;EAAM,UAAU,EAAE;EAAE,CAAC;CAElC,MAAM,4BAA4B,sBAAsB;CACxD,MAAM,0BAA0B,sBAAsB,QAAQ,OAAO;AAErE,SAAQ,6BAA6B,2BAA2B,CAAC,OAAO;EACtE,KAAK,CAAC,uCAAuC;EAC7C,MAAM,CACJ,6GACD;EACF,CAAC;AAEF,iBAAgB;AACd,mBAAiB,UAAU;IAC1B,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,CAAC,cACH,qBAAoB,UAAU;GAC5B,QACE,wBAAwB,OAAO,OAAO,qBAAqB,GAAG;GAChE,UACE,kBAAkB,cAAc,0BAA0B,SACrD,yBAAyB,EAAE,EAAE,IAAI,OAAO,GACzC,EAAE;GACT;IAEF;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,SAAS,CAAC,wBAAyB,QAAO;AAC/C,MAAI,CAAC,cAAe,QAAO;AAC3B,MAAI,iBAAiB,QAAS,QAAO,iBAAiB;EAEtD,MAAM,iCAAiB,IAAI,KAAa;AAExC,MAAI,kBAAkB,YAAY;AAChC,OACE,oBAAoB,QAAQ,SAAS,WAAW,KAChD,0BAA0B,MAE1B,QAAO;AAET,uBAAoB,QAAQ,SAAS,SAAS,MAC5C,eAAe,IAAI,EAAE,CACtB;aACQ,oBAAoB,QAAQ,OACrC,gBAAe,IAAI,oBAAoB,QAAQ,OAAO;AAGxD,MAAI,eAAe,SAAS,EAAG,QAAO;EAEtC,MAAM,aAAa,MAAM,QAAQ,MAAM,GAAG,QAAQ,MAAM,KAAK,MAAM;EACnE,MAAM,gBAAqB,EAAE;EAC7B,MAAM,kBAAuB,EAAE;AAE/B,aAAW,SAAS,SAAS;GAC3B,MAAM,MAAO,MAAc,OAAQ,MAAc;AACjD,OAAI,OAAO,QAAQ,eAAe,IAAI,OAAO,IAAI,CAAC,CAChD,eAAc,KAAK,KAAK;OAExB,iBAAgB,KAAK,KAAK;IAE5B;EAEF,MAAM,SAAS,CAAC,GAAG,eAAe,GAAG,gBAAgB;AAErD,mBAAiB,UAAU;AAE3B,SAAO;IACN;EAAC;EAAO;EAAyB;EAAe;EAAc,CAAC;CAIlE,MAAM,uBAAuB,aAAa;EACxC;EACA,OAAO;EACP,eAAe;EAChB,CAAC;CAEF,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAAa,sBAAsB;AAEzC,MAAI,kBAAkB,cAAc,0BAA0B,OAAO;AACnE,OAAI,CAAC,WAAY,QAAO,EAAE;GAC1B,MAAM,SAAmB,EAAE;AAC3B,QAAK,MAAM,QAAQ,WACjB,KAAI,KAAK,SAAS,OAChB,QAAO,KAAK,KAAK,aAAa,OAAO,KAAK,IAAI,CAAC;AAGnD,UAAO;;AAUT,UANE,kBAAkB,cAAc,0BAA0B,QACtD,yBAAyB,EAAE,GAC3B,wBAAwB,OACtB,CAAC,qBAAqB,GACtB,EAAE,EAGP,KAAK,QAAQ;AAEZ,WADa,YAAY,QAAQ,IAAI,GACxB,aAAa,OAAO,IAAI;IACrC,CACD,OAAO,QAAQ;IACjB;EACD;EACA;EACA;EACA,sBAAsB;EACvB,CAAC;CAEF,MAAM,eAAe,eAAe,SAAS;CAS7C,MAAM,mBAAmB,UAAU,WAAoB;AACrD,MAAI,WAAW,cAAe;AAE9B,MAAI,OACF,iBAAgB,UACd,YAAY,SAAS,mBAAmB,EAAE;AAE9C,mBAAiB,OAAO;AACxB,MAAI,CAAC,QAAQ;AACX,uBAAoB,UAAU,EAAE,GAAG,mBAAmB,SAAS;AAC/D,oBAAiB,UAAU;;AAE7B,iBAAe,OAAO;GACtB;CAKF,MAAM,EAAE,kBAAkB,YAAY,EACpC,YAAY,MAAM;AAChB,OAAK,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBAAgB,CAAC,eAAe;AACpE,KAAE,gBAAgB;AAClB,oBAAiB,KAAK;;IAG3B,CAAC;CAGF,MAAM,aAAa,eAAe;AAChC,MAAI,kBAAkB,YAAY;AAChC,OAAI,CAAC,qBACH,yBAAwB,EAAE,CAAC;AAE7B,uBAAoB,EAAE,CAAC;SAClB;AACL,OAAI,CAAC,mBACH,wBAAuB,KAAK;AAE9B,uBAAoB,KAAK;;AAG3B,mBAAiB,MAAM;AACvB,cAAY,SAAS,SAAS;AAC9B,aAAW;AAEX,SAAO;GACP;CAMF,MAAM,iBAAiB,cAAyB;AAC9C,MAAI,OAAO,kBAAkB,YAAY;AACvC,OAAI,kBAAkB,SACpB,QAAO,cAAc;IACnB,eAAe,eAAe;IAC9B,aAAa,wBAAwB;IACrC;IACA,cAAc;IACd,eAAe;IAChB,CAAC;AAGJ,UAAO,cAAc;IACnB;IACA,cAAc;IACd,eAAe;IAChB,CAAC;aACO,kBAAkB,MAC3B,QAAO;AAGT,MAAI,CAAC,aACH,QAAO,oBAACA,MAAK,yBAAa,cAA+B;WAChD,kBAAkB,SAC3B,QAAO,eAAe,MAAM;WACnB,0BAA0B,MACnC,QAAO;MAEP,QAAO,eAAe,KAAK,KAAK,IAAI;IAErC;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACJ,eAAe,gBAAgB,CAAC,cAAc,CAAC,MAAM;CAEvD,MAAM,iBAAiB,kBAAkB;EAAE;EAAW;EAAS,CAAC;AAEhE,KAAI,eACF,UACE,8CACG,QACA,kBACA;CAKP,MAAM,iBACJ,oBAACC;EACC,KAAK;EACL;EACI;EACJ,IAAI,MAAM;EACJ;EACN,OAAO,mBAAmB,OAAO;GAAE;GAAW;GAAS,CAAC;EAClD;EACC;EACP,YAAY,cAAc;EAC1B,mBAAgB;EAChB,MAAM;GACJ,aAAa,CAAC;GACd,GAAG;GACJ;EACK;EACN,WACE,YACE,oBAAC,gBAAc,GACb,cAAc,SAChB,YACE,kBACF,oBAAC;GACO;GAWN,OAAO,mBAAmB,OAAO;IAAE;IAAW;IAAS,CAAC;aAExD,oBAAC;IACC,MAAM,oBAAC,cAAY;IACb;IACN,IAAG;IAKH,MAAM,EAAE,SAAS,OAAO;IACxB,SAAS;KACT;IACiB,GAErB,oBAAC,iBAAc,IAAI,gBAAgB,QAAQ,WAAY;EAGnD;EACA;EACC;EACT,SAAS;EACT,aAAa;EACS;EACtB,QAAQ;EACR,GAAI;EACJ,cAAY,GAAG,MAAM,iBAAiB,MAAM,SAAS;YAEpD;GACU;CAOf,MAAM,wBAAwB,UAAU,cAAmB;AACzD,MAAI,kBAAkB,UAAU;AAI9B,OACE,0BACA,aAAa,QACb,wBAAwB,QACxB,OAAO,UAAU,KAAK,OAAO,qBAAqB,EAClD;AACA,qBAAiB,MAAM;AACvB;;AAGF,OAAI,CAAC,mBACH,wBAAuB,UAAwB;aAG7C,CAAC,sBAAsB;GACzB,IAAI,aAA4B;AAEhC,OAAI,cAAc,MAChB,cAAa;YACJ,MAAM,QAAQ,UAAU,CACjC,cAAa,sBAAsB,UAAU;YAE7C,aACA,OAAO,cAAc,YACrB,qBAAqB,IAErB,cAAa,sBAAsB,UAAsB;AAG3D,2BAAwB,WAAW;;AAIvC,MAAI,kBAAkB,SACpB,oBAAmB,QAAQ,SACzB,aAAa,OAAO,OAAO,UAAU,GAAG;WAEtC,cAAc,MAChB,oBAAmB,QAAQ,WAAW,EAAE;WAC/B,MAAM,QAAQ,UAAU,CACjC,oBAAmB,QAAQ,WAAW,sBAAsB,UAAU;WAEtE,aACA,OAAO,cAAc,YACrB,qBAAqB,IAErB,oBAAmB,QAAQ,WAAW,sBACpC,UACD;MAED,oBAAmB,QAAQ,WAAW,EAAE;AAI5C,sBAAoB,UAAU;AAE9B,MAAI,kBAAkB,SACpB,kBAAiB,MAAM;GAEzB;CAEF,MAAM,eAAe,eAAe;AAClC,mBAAiB,MAAM;GACvB;CAEF,MAAM,oBAAoB,UAAU,QAAa;AAC/C,MAAK,kBAAkB,cAAc,eAAgB,QAAQ,UAC3D,kBAAiB,MAAM;GAEzB;AA8FF,QAAO,cA3FL,oBAAC;EACS;EACR,GAAK,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;YAKtD,qBAAC;GACC,MAAK;GACL,WAAU;GACV,QAAQ;GACU;GACN;GACZ,cAAc;cAEb,sBAEC,oBAAC;IACC,IAAG;IACH,SAAQ;IACR,QAAQ;KACN,UAAU;KACV,OAAO;KACP,sBAAsB;KACtB,GAAG;KACJ;IACD,OACE,gBAAgB,UACX,EACC,uBAAuB,GAAG,gBAAgB,QAAQ,KACnD,GACD;cAGN,oBAAC;KAAW;eACV,oBAAC;MACC;MACA,OAAO,QAAS,aAAoC;MACpD,cAAY,GAAG,MAAM,iBAAiB,MAAM,SAAS,GAAG,GAAG,EACzD,0BACA,SACD;MACD,aACE,kBAAkB,WAAW,uBAAuB;MAEtD,cACE,kBAAkB,aACd,wBACA;MAEM;MACE;MACC;MACA;MACN;MACe;MACxB,+BACE,kBAAkB,YAAY,CAAC,CAAC;MAEpB;MACA;MACG;MACF;MACJ;MACF;MACG;MACD;MACX,UAAU;MACG;MACb,OAAM;MACS;MACC;MACR;MACA;MACM;MACA;MACd,IAAI,GAAG,MAAM,MAAM,SAAS;MACb;MACf,UAAU;MACV,eAAe;MACf,mBAAmB;MAElB;OACO;MACC;KACN;IAEG;GACF,EAKhB,KACA,MACD;EACD;AAIF,OAAO,OAAO,QAAQ;AAEtB,OAAO,UAAUC;AAEjB,OAAO,eAAe,QAAQ,iBAAiB;CAC7C,OAAO;CACP,YAAY;CACZ,cAAc;CACf,CAAC"}
1	+ {"version":3,"file":"Picker.js","names":["Text","ItemButton","BaseSection"],"sources":["../../../../src/components/fields/Picker/Picker.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\nimport { CollectionChildren, FocusableRefValue } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, ListState, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n CubeItemButtonProps,\n ItemAction,\n ItemActionProvider,\n ItemButton,\n} from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\nimport { TriggerActions } from '../TriggerActions';\n\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<\n CubeListBoxProps<T>,\n 'size' \| 'tooltip' \| 'shape' \| 'emptyLabel'\n >,\n Omit<CubeItemProps, 'children' \| 'size'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Placeholder text when no selection is made /\n placeholder?: string;\n /* Size of the picker component /\n size?: 'small' \| 'medium' \| 'large';\n /* Custom styles for the list box popover /\n listBoxStyles?: Styles;\n /* Custom styles for the popover container /\n popoverStyles?: Styles;\n /* Custom styles for the trigger button /\n triggerStyles?: Styles;\n /* Whether to show checkboxes for multiple selection mode /\n isCheckable?: boolean;\n /* Whether to flip the popover placement /\n shouldFlip?: boolean;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n /* Tooltip for the trigger button (separate from field tooltip) /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Description for the trigger button (separate from field description) /\n triggerDescription?: CubeItemProps['description'];\n\n /\n Custom renderer for the summary shown inside the trigger when there is a selection.\n \n For `selectionMode=\"multiple\"` the function receives:\n * - `selectedLabels`: array of labels of the selected items.\n * - `selectedKeys`: array of keys of the selected items or \"all\".\n \n For `selectionMode=\"single\"` the function receives:\n * - `selectedLabel`: label of the selected item.\n * - `selectedKey`: key of the selected item.\n \n The function should return a `ReactNode` that will be rendered inside the trigger.\n * Set to `false` to hide the summary text completely.\n /\n renderSummary?:\n \| ((args: {\n selectedLabels?: string[];\n selectedKeys?: 'all' \| (string \| number)[];\n selectedLabel?: string;\n selectedKey?: string \| number \| null;\n selectionMode?: 'single' \| 'multiple';\n }) => ReactNode)\n \| false;\n\n /* Ref to access internal ListBox state /\n listStateRef?: MutableRefObject<ListState<T>>;\n /* Additional modifiers for styling the Picker /\n mods?: Record<string, boolean>;\n /* Whether the picker is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Custom actions rendered inside the trigger, to the left of the built-in\n * clear button and dropdown caret. Use `Picker.Action` so they match the\n * trigger's size and theme.\n \n Pressing one runs its handler without opening or closing the popover —\n * including while the popover is open. Actions follow the trigger's disabled\n * state but NOT `isReadOnly`, since a read-only field can still host an\n * action that does not change the value; pass `isDisabled` yourself for one\n * that does.\n /\n actions?: ReactNode;\n /\n Sort selected item(s) to the top when the popover opens.\n * Only works when using the `items` prop (data-driven mode).\n * Supports both single and multiple selection modes.\n * @default true when items are provided, false when using JSX children\n /\n sortSelectedToTop?: boolean;\n /* Callback called when the popover open state changes */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst PickerWrapper = tasty({\n qa: 'PickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport const Picker = forwardRef(function Picker<T extends object>(\n props: CubePickerProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: Record<string, unknown> = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value \|\| [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: Key \| null \| 'all' \| Key[]) => {\n if (props.selectionMode === 'multiple') {\n // Handle \"all\" selection and array selections\n if (key === 'all') {\n onChange('all');\n } else {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n }\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n id,\n qa,\n label,\n extra,\n icon,\n rightIcon,\n prefix,\n suffix,\n actions,\n hotkeys,\n triggerTooltip,\n triggerDescription,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n message,\n mods: externalMods,\n description,\n descriptionPlacement,\n placeholder,\n size = 'medium',\n styles,\n listBoxStyles,\n popoverStyles,\n type = 'outline',\n theme = 'default',\n shape,\n labelSuffix,\n shouldFocusWrap,\n children,\n shouldFlip = true,\n containerPadding = 8,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n selectionMode = 'single',\n listStateRef,\n focusOnHover,\n showSelectAll,\n selectAllLabel = t('picker.all', 'All'),\n items,\n header,\n footer,\n headerStyles,\n footerStyles,\n triggerStyles,\n renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n onClear,\n sortSelectedToTop,\n onOpenChange,\n listStateRef: externalListStateRef,\n ...otherProps\n } = props;\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && selectionMode === 'single', {\n key: ['picker-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 // Internal selection state (uncontrolled scenario)\n const [internalSelectedKey, setInternalSelectedKey] = useState<Key \| null>(\n defaultSelectedKey ?? null,\n );\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n 'all' \| Key[]\n >(defaultSelectedKeys ?? []);\n\n // Popover state — used as controlled prop for DialogTrigger\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);\n // Measured lazily on popover open instead of on every render\n const triggerWidthRef = useRef<number \| undefined>(undefined);\n\n const isControlledSingle = selectedKey !== undefined;\n const isControlledMultiple = selectedKeys !== undefined;\n\n const effectiveSelectedKey = isControlledSingle\n ? selectedKey\n : internalSelectedKey;\n const effectiveSelectedKeys = isControlledMultiple\n ? selectedKeys\n : internalSelectedKeys;\n\n // Ref to access internal ListBox state for collection API\n const internalListStateRef = useRef<ListState<T>>(null);\n\n // Sync internal ref with external ref if provided\n useEffect(() => {\n if (externalListStateRef && internalListStateRef.current) {\n externalListStateRef.current = internalListStateRef.current;\n }\n }, [externalListStateRef]);\n\n // Cache for sorted items array when using `items` prop\n const cachedItemsOrder = useRef<T[] \| null>(null);\n\n const latestSelectionRef = useRef<{\n single: string \| null;\n multiple: string[];\n }>({\n single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n });\n\n useEffect(() => {\n latestSelectionRef.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n };\n }, [effectiveSelectedKey, effectiveSelectedKeys, selectionMode]);\n\n const selectionWhenClosed = useRef<{\n single: string \| null;\n multiple: string[];\n }>({ single: null, multiple: [] });\n\n const sortSelectedToTopExplicit = sortSelectedToTop !== undefined;\n const shouldSortSelectedToTop = sortSelectedToTop ?? (items ? true : false);\n\n useWarn(sortSelectedToTopExplicit && shouldSortSelectedToTop && !items, {\n key: ['picker-sort-selected-to-top-children'],\n args: [\n 'Picker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.',\n ],\n });\n\n useEffect(() => {\n cachedItemsOrder.current = null;\n }, [items]);\n\n useEffect(() => {\n if (!isPopoverOpen) {\n selectionWhenClosed.current = {\n single:\n effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,\n multiple:\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? (effectiveSelectedKeys \|\| []).map(String)\n : [],\n };\n }\n }, [\n effectiveSelectedKey,\n effectiveSelectedKeys,\n isPopoverOpen,\n selectionMode,\n ]);\n\n const finalItems = useMemo(() => {\n if (!items \|\| !shouldSortSelectedToTop) return items;\n if (!isPopoverOpen) return items;\n if (cachedItemsOrder.current) return cachedItemsOrder.current;\n\n const selectedKeySet = new Set<string>();\n\n if (selectionMode === 'multiple') {\n if (\n selectionWhenClosed.current.multiple.length === 0 \|\|\n effectiveSelectedKeys === 'all'\n ) {\n return items;\n }\n selectionWhenClosed.current.multiple.forEach((k) =>\n selectedKeySet.add(k),\n );\n } else if (selectionWhenClosed.current.single) {\n selectedKeySet.add(selectionWhenClosed.current.single);\n }\n\n if (selectedKeySet.size === 0) return items;\n\n const itemsArray = Array.isArray(items) ? items : Array.from(items);\n const selectedItems: T[] = [];\n const unselectedItems: T[] = [];\n\n itemsArray.forEach((item) => {\n const key = (item as any)?.key ?? (item as any)?.id;\n if (key != null && selectedKeySet.has(String(key))) {\n selectedItems.push(item);\n } else {\n unselectedItems.push(item);\n }\n });\n\n const sorted = [...selectedItems, ...unselectedItems];\n\n cachedItemsOrder.current = sorted;\n\n return sorted;\n }, [items, shouldSortSelectedToTop, selectionMode, isPopoverOpen]);\n\n // Create local collection state for reading item data (labels, etc.)\n // This allows us to read item labels even before the popover opens\n const localCollectionState = useListState({\n children,\n items: finalItems, // Use sorted items to match what's shown in popover\n selectionMode: 'none', // Don't manage selection in this state\n });\n\n const selectedLabels = useMemo(() => {\n const collection = localCollectionState?.collection;\n\n if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {\n if (!collection) return [];\n const labels: string[] = [];\n for (const item of collection) {\n if (item.type === 'item') {\n labels.push(item.textValue \|\| String(item.key));\n }\n }\n return labels;\n }\n\n const keysToGet =\n selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'\n ? effectiveSelectedKeys \|\| []\n : effectiveSelectedKey != null\n ? [effectiveSelectedKey]\n : [];\n\n return keysToGet\n .map((key) => {\n const item = collection?.getItem(key);\n return item?.textValue \|\| String(key);\n })\n .filter(Boolean);\n }, [\n selectionMode,\n effectiveSelectedKeys,\n effectiveSelectedKey,\n localCollectionState?.collection,\n ]);\n\n const hasSelection = selectedLabels.length > 0;\n\n // ---------------------------------------------------------------------------\n // Popover lifecycle — all effects moved out of the inline renderTrigger\n // function so they have a stable component identity and don't tear\n // down/setup on every parent re-render.\n // DialogTrigger is controlled via isOpen/onOpenChange.\n // ---------------------------------------------------------------------------\n\n const handleOpenChange = useEvent((isOpen: boolean) => {\n if (isOpen === isPopoverOpen) return;\n\n if (isOpen) {\n triggerWidthRef.current =\n triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;\n }\n setIsPopoverOpen(isOpen);\n if (!isOpen) {\n selectionWhenClosed.current = { ...latestSelectionRef.current };\n cachedItemsOrder.current = null;\n }\n onOpenChange?.(isOpen);\n });\n\n // Popover sync is handled by the inner `DialogTrigger` (type=\"popover\").\n\n // Keyboard handler for arrow keys to open popover\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n }\n },\n });\n\n // A press on the trigger's own trailing run — a custom action or the clear\n // button — must not be read as an interaction outside the popover. Without\n // this the overlay's dismiss machinery swallows the press to close itself, so\n // the first press on `Reset` while the list is open only closes the list and\n // the action never runs.\n const shouldCloseOnInteractOutside = useEvent(\n (element: Element) => !element.closest('[data-trigger-action]'),\n );\n\n // Clear handler\n const clearValue = useEvent(() => {\n if (selectionMode === 'multiple') {\n if (!isControlledMultiple) {\n setInternalSelectedKeys([]);\n }\n onSelectionChange?.([]);\n } else {\n if (!isControlledSingle) {\n setInternalSelectedKey(null);\n }\n onSelectionChange?.(null);\n }\n\n handleOpenChange(false);\n triggerRef?.current?.focus?.();\n onClear?.();\n\n return false;\n });\n\n // ---------------------------------------------------------------------------\n // Trigger content\n // ---------------------------------------------------------------------------\n\n const triggerContent = useMemo((): ReactNode => {\n if (typeof renderSummary === 'function') {\n if (selectionMode === 'single') {\n return renderSummary({\n selectedLabel: selectedLabels[0],\n selectedKey: effectiveSelectedKey ?? null,\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'single',\n });\n }\n\n return renderSummary({\n selectedLabels,\n selectedKeys: effectiveSelectedKeys,\n selectionMode: 'multiple',\n });\n } else if (renderSummary === false) {\n return null;\n }\n\n if (!hasSelection) {\n return <Text.Placeholder>{placeholder}</Text.Placeholder>;\n } else if (selectionMode === 'single') {\n return selectedLabels[0] \|\| null;\n } else if (effectiveSelectedKeys === 'all') {\n return selectAllLabel;\n } else {\n return selectedLabels.join(', ') \|\| null;\n }\n }, [\n renderSummary,\n selectionMode,\n selectedLabels,\n effectiveSelectedKey,\n effectiveSelectedKeys,\n hasSelection,\n placeholder,\n selectAllLabel,\n ]);\n\n const showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n const validationIcon = getValidationIcon({ isInvalid, isValid });\n\n // Must be the SAME expression the trigger is painted with, not the raw\n // `theme`: this tells an action which surface it sits on, and validation\n // overrides the theme. With `theme=\"special\"` on an invalid field the trigger\n // renders `danger` — a light surface — so forwarding `special` would hand the\n // action the strong dark-purple alpha ramp and make hover/press read far too\n // heavy.\n const paintedTheme = getValidationTheme(theme, { isInvalid, isValid });\n\n if (validationIcon \|\| actions) {\n // The `suffix` slot sits between the label and `rightIcon`, so actions\n // placed at its end land immediately left of the built-in clear button and\n // caret — which is where custom actions belong.\n suffix = (\n <>\n {suffix}\n {validationIcon}\n {actions ? (\n <TriggerActions\n type={type}\n theme={paintedTheme}\n isDisabled={isDisabled \|\| isLoading}\n >\n {actions}\n </TriggerActions>\n ) : null}\n </>\n );\n }\n\n // Trigger element — plain JSX with no hooks.\n const triggerElement = (\n <ItemButton\n ref={triggerRef as any}\n data-popover-trigger\n id={id}\n qa={qa \|\| 'PickerTrigger'}\n type={type}\n theme={paintedTheme}\n size={size}\n shape={shape}\n isDisabled={isDisabled \|\| isLoading}\n data-input-type=\"picker\"\n mods={{\n placeholder: !hasSelection,\n ...externalMods,\n }}\n icon={icon}\n rightIcon={\n isLoading ? (\n <LoadingIcon />\n ) : rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n // `ClearPressResponder`: `DialogTrigger` opens the popover through a\n // `PressResponder` whose context reaches every `usePress` below it,\n // this button included — so without it, clearing also opened the\n // popover that `clearValue` had just closed.\n <ClearPressResponder>\n <ItemActionProvider\n type={type}\n // The theme the trigger is PAINTED with, not the raw `theme` —\n // see `paintedTheme` above.\n //\n // It travels through context rather than as a prop because the prop is\n // what opts an action out of `current` back to `clear`, and this one\n // needs to stay `current` so its label keeps inheriting.\n theme={paintedTheme}\n >\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"PickerClearButton\"\n data-trigger-action=\"\"\n // No explicit `type`/`theme` — the default `current` type inherits\n // the trigger's own text color, which already carries validation\n // state here, so this renders exactly as the explicit theme did\n // while also following a custom theme.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n </ItemActionProvider>\n </ClearPressResponder>\n ) : (\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n )\n }\n prefix={prefix}\n suffix={suffix}\n hotkeys={hotkeys}\n tooltip={triggerTooltip}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n styles={triggerStyles}\n {...keyboardProps}\n aria-label={`${props['aria-label'] ?? props.label ?? ''}`}\n >\n {triggerContent}\n </ItemButton>\n );\n\n // ---------------------------------------------------------------------------\n // Selection change handler\n // ---------------------------------------------------------------------------\n\n const handleSelectionChange = useEvent((selection: any) => {\n if (selectionMode === 'single') {\n // With `disallowEmptySelection`, re-selecting the current item emits a\n // duplicate event (see `allowDuplicateSelectionEvents` below). Close the\n // popover but don't propagate the unchanged selection.\n if (\n disallowEmptySelection &&\n selection != null &&\n effectiveSelectedKey != null &&\n String(selection) === String(effectiveSelectedKey)\n ) {\n handleOpenChange(false);\n return;\n }\n\n if (!isControlledSingle) {\n setInternalSelectedKey(selection as Key \| null);\n }\n } else {\n if (!isControlledMultiple) {\n let normalized: 'all' \| Key[] = selection;\n\n if (selection === 'all') {\n normalized = 'all';\n } else if (Array.isArray(selection)) {\n normalized = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n normalized = processSelectionArray(selection as Set<Key>);\n }\n\n setInternalSelectedKeys(normalized);\n }\n }\n\n if (selectionMode === 'single') {\n latestSelectionRef.current.single =\n selection != null ? String(selection) : null;\n } else {\n if (selection === 'all') {\n latestSelectionRef.current.multiple = [];\n } else if (Array.isArray(selection)) {\n latestSelectionRef.current.multiple = processSelectionArray(selection);\n } else if (\n selection &&\n typeof selection === 'object' &&\n selection instanceof Set\n ) {\n latestSelectionRef.current.multiple = processSelectionArray(\n selection as Set<Key>,\n );\n } else {\n latestSelectionRef.current.multiple = [];\n }\n }\n\n onSelectionChange?.(selection);\n\n if (selectionMode === 'single') {\n handleOpenChange(false);\n }\n });\n\n const handleEscape = useEvent(() => {\n handleOpenChange(false);\n });\n\n const handleOptionClick = useEvent((key: Key) => {\n if ((selectionMode === 'multiple' && isCheckable) \|\| key === '__ALL__') {\n handleOpenChange(false);\n }\n });\n\n const pickerField = (\n <PickerWrapper\n styles={styles}\n {...(filterBaseProps(otherProps, { eventProps: true }) as Record<\n string,\n unknown\n >)}\n >\n <DialogTrigger\n type=\"popover\"\n placement=\"bottom start\"\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"PickerOverlay\"\n display=\"grid\"\n styles={{\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n ...popoverStyles,\n }}\n style={\n triggerWidthRef.current\n ? ({\n '--overlay-min-width': `${triggerWidthRef.current}px`,\n } as any)\n : undefined\n }\n >\n <FocusScope restoreFocus>\n <ListBox\n autoFocus\n items={items ? (finalItems as typeof props.items) : undefined}\n aria-label={`${props['aria-label'] ?? props.label ?? ''} ${t(\n 'picker.pickerAriaLabel',\n 'Picker',\n )}`}\n selectedKey={\n selectionMode === 'single' ? effectiveSelectedKey : undefined\n }\n selectedKeys={\n selectionMode === 'multiple'\n ? effectiveSelectedKeys\n : undefined\n }\n listStyles={listStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n listRef={listRef}\n disallowEmptySelection={disallowEmptySelection}\n allowDuplicateSelectionEvents={\n selectionMode === 'single' && !!disallowEmptySelection\n }\n disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n selectionMode={selectionMode}\n isInvalid={isInvalid}\n isValid={isValid}\n isDisabled={isDisabled}\n isLoading={isLoading}\n stateRef={internalListStateRef}\n isCheckable={isCheckable}\n shape=\"popover\"\n showSelectAll={showSelectAll}\n selectAllLabel={selectAllLabel}\n header={header}\n footer={footer}\n headerStyles={headerStyles}\n footerStyles={footerStyles}\n qa={`${props.qa \|\| 'Picker'}ListBox`}\n allValueProps={allValueProps}\n onEscape={handleEscape}\n onOptionClick={handleOptionClick}\n onSelectionChange={handleSelectionChange}\n >\n {children as CollectionChildren<T>}\n </ListBox>\n </FocusScope>\n </Dialog>\n )}\n </DialogTrigger>\n </PickerWrapper>\n );\n\n return wrapWithField<Omit<CubePickerProps<T>, 'children' \| 'tooltip'>>(\n pickerField,\n ref as any,\n props,\n );\n}) as unknown as (<T>(\n props: CubePickerProps<T> & { ref?: ForwardedRef<HTMLElement> },\n) => ReactElement) & {\n Item: typeof ListBox.Item;\n Section: typeof BaseSection;\n Action: typeof ItemAction;\n};\n\nPicker.Item = ListBox.Item;\n\nPicker.Section = BaseSection;\n\nPicker.Action = ItemAction;\n\nObject.defineProperty(Picker, 'cubeInputType', {\n value: 'Picker',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | 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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";

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

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