npm - @cube-dev/ui-kit - Versions diffs - 0.192.1 → 0.193.1 - Mend

@cube-dev/ui-kit 0.192.1 → 0.193.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","names":["CollectionChildren","FocusableRefValue","BASE_STYLES","BasePropsWithoutChildren","BaseStyleProps","COLOR_STYLES","ColorStyleProps","filterBaseProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","MutableRefObject","ReactElement","ReactNode","RefObject","useEffect","useMemo","useRef","useState","FocusScope","Key","Placement","Section","BaseSection","ListState","useListState","useEvent","useWarn","useI18n","CloseIcon","DirectionIcon","LoadingIcon","allowEscapeToPropagate","isTextOnly","processSelectionArray","extractStyles","mergeStyleLayers","CubeItemButtonProps","ItemAction","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","CubeListBoxProps","ListBox","TriggerActions","TriggerIcon","KeyboardEvent","RAKeyboardEvent","FieldBaseProps","CubePickerProps","Omit","T","Pick","placeholder","size","listBoxStyles","popoverStyles","triggerStyles","isCheckable","shouldFlip","targetRef","HTMLElement","placement","containerPadding","triggerTooltip","triggerDescription","renderSummary","args","selectedLabels","selectedKeys","selectedLabel","selectedKey","selectionMode","listStateRef","mods","Record","isClearable","clearLabel","onClear","actions","sortSelectedToTop","onOpenChange","isOpen","PROP_STYLES","PickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","Picker","props","ref","t","valuePropsMapper","value","onChange","fieldProps","onSelectionChange","key","Array","isArray","id","label","ariaLabel","extra","icon","rightIcon","prefix","suffix","hotkeys","labelStyles","isRequired","necessityIndicator","isInvalid","isValid","isDisabled","isLoading","message","externalMods","description","descriptionPlacement","type","theme","shape","labelSuffix","shouldFocusWrap","children","defaultSelectedKey","defaultSelectedKeys","disabledKeys","focusOnHover","showSelectAll","selectAllLabel","items","header","footer","headerStyles","footerStyles","allValueProps","listStyles","optionStyles","sectionStyles","headingStyles","listGap","listRef","disallowEmptySelection","shouldUseVirtualFocus","onEscape","onOptionClick","externalListStateRef","otherProps","internalSelectedKey","setInternalSelectedKey","internalSelectedKeys","setInternalSelectedKeys","isPopoverOpen","setIsPopoverOpen","triggerRef","HTMLButtonElement","triggerAriaLabel","String","pickerAriaLabel","trim","triggerWidthRef","undefined","isControlledSingle","isControlledMultiple","effectiveSelectedKey","effectiveSelectedKeys","internalListStateRef","current","cachedItemsOrder","latestSelectionRef","single","multiple","map","selectionWhenClosed","sortSelectedToTopExplicit","shouldSortSelectedToTop","finalItems","selectedKeySet","Set","length","forEach","k","add","itemsArray","from","selectedItems","unselectedItems","item","has","push","sorted","localCollectionState","collection","labels","textValue","keysToGet","getItem","filter","Boolean","hasSelection","handleOpenChange","UNSAFE_getDOMNode","offsetWidth","keyboardProps","onKeyDown","e","preventDefault","clearValue","focus","triggerContent","join","showClearButton","isReadOnly","validationIcon","paintedTheme","hasCustomRightIcon","triggerRightIcon","hasTriggerActions","triggerActions","pressed","triggerElement","handleSelectionChange","selection","normalized","handleEscape","handleOptionClick","pickerField","eventProps","width","Item","Action","Object","defineProperty","enumerable","configurable"],"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 RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, Placement } 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 { allowEscapeToPropagate } from '../../../utils/react/escapePropagation';\nimport { isTextOnly } from '../../../utils/react/isTextOnly';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles, mergeStyleLayers } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemAction, ItemButton } 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 } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\nimport { TriggerActions, TriggerIcon } from '../TriggerActions';\n\nimport type { KeyboardEvent as RAKeyboardEvent } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<\n CubeListBoxProps<T>,\n 'size' \| 'shape' \| 'emptyLabel' \| 'isFocusWithin'\n >,\n // `tooltip` is the trigger's, and on a picker the trigger's is spelled\n // `triggerTooltip`; the label's info badge is `labelTooltip`.\n Omit<CubeItemProps, 'children' \| 'size' \| 'tooltip'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n FieldBaseProps<\n string \| number \| readonly (string \| number)[] \| null \| undefined\n >,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Accessible name for the picker trigger when there is no visible label. /\n 'aria-label'?: string;\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 The ref of the element the popover should visually attach itself to.\n * Defaults to the trigger button.\n \n Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n * dismissal treats as the trigger. The popover's `minWidth` stays tied to the\n * trigger button, not to this element.\n /\n targetRef?: RefObject<HTMLElement \| null>;\n /\n Placement of the popover relative to the anchor.\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 `labelTooltip`) /\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 /* Accessible name for the built-in clear button. Defaults to a localized \"Clear value\". /\n clearLabel?: string;\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 'aria-label': ariaLabel,\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 targetRef,\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 renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listGap,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n clearLabel,\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 const triggerAriaLabel =\n ariaLabel ??\n (isTextOnly(label)\n ? String(label ?? '')\n : t('picker.pickerAriaLabel', 'Picker'));\n const pickerAriaLabel =\n `${ariaLabel ?? (isTextOnly(label) ? String(label ?? '') : '')} ${t('picker.pickerAriaLabel', 'Picker')}`.trim();\n\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 // Deliberately NOT `useKeyboard`. `ItemButton` already runs whatever\n // `onKeyDown` it is given through `useFocusable`'s own `useKeyboard`, and a\n // second wrapper here would leave `continuePropagation()` releasing only the\n // inner one while the outer still stopped the event — `Escape` reached the\n // trigger and died there (CUB-4839). Handed over plain, this IS the outer\n // wrapper's handler, so the opt-out applies to the event that travels.\n const keyboardProps = {\n onKeyDown: (e: RAKeyboardEvent) => {\n allowEscapeToPropagate(e);\n\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n\n return;\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 // 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 // It reaches the trailing actions through `ItemButton`'s wrapper, which is\n // what provides `ItemActionContext` for a run rendered outside the button —\n // so passing it as the trigger's `theme` is all that is needed.\n\n if (validationIcon) {\n suffix = (\n <>\n {suffix}\n {validationIcon}\n </>\n );\n }\n\n // A caller's `rightIcon` keeps the `rightIcon` slot: it accepts a render\n // function resolved against the trigger's mods, which only that slot does, and\n // it is also what a caller's `RightIcon` styles target. It replaces the\n // built-in control, exactly as before — including under `isLoading`, where the\n // spinner replaces it in turn.\n const hasCustomRightIcon = rightIcon !== undefined;\n const triggerRightIcon = hasCustomRightIcon ? (\n isLoading ? (\n <LoadingIcon />\n ) : (\n rightIcon\n )\n ) : undefined;\n\n // With a caller's own `rightIcon` the built-in control moves into that slot,\n // leaving the run with whatever the caller passed — possibly nothing. `null`\n // rather than nothing at all: the run stays in the markup, so the trigger does\n // not restructure if actions arrive later, but the row stops counting it as\n // end content. That is what keeps an icon-only trigger with `rightIcon={null}`\n // square, as it was before the run existed.\n const hasTriggerActions = !hasCustomRightIcon \|\| !!actions;\n\n // Everything trailing that is NOT the caller's own icon goes into the actions\n // run — a sibling of the `<button>`, so the clear button is no longer nested\n // inside one. See `TriggerActions`.\n const triggerActions = (\n <TriggerActions\n actions={actions}\n builtIn={\n hasCustomRightIcon ? null : isLoading ? (\n <TriggerIcon>\n <LoadingIcon />\n </TriggerIcon>\n ) : showClearButton ? (\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"PickerClearButton\"\n // See `Select`: `ItemAction` names itself from `aria-label` or a\n // string `tooltip`, and warns for neither.\n aria-label={clearLabel ?? t('picker.clearValue', 'Clear value')}\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 ) : (\n <TriggerIcon>\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n </TriggerIcon>\n )\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={triggerRightIcon}\n actions={hasTriggerActions ? triggerActions : null}\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={triggerAriaLabel}\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={placement}\n targetRef={targetRef}\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"PickerOverlay\"\n aria-label={pickerAriaLabel}\n display=\"grid\"\n styles={mergeStyleLayers(\n {\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n },\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={pickerAriaLabel}\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 listGap={listGap}\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'>>(\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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"}
1	+ {"version":3,"file":"Picker.js","names":["CollectionChildren","FocusableRefValue","BASE_STYLES","BasePropsWithoutChildren","BaseStyleProps","COLOR_STYLES","ColorStyleProps","filterBaseProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","MutableRefObject","ReactElement","ReactNode","RefObject","useEffect","useMemo","useRef","useState","FocusScope","Key","Placement","Section","BaseSection","ListState","useListState","useEvent","useWarn","useI18n","CloseIcon","DirectionIcon","LoadingIcon","isTextOnly","allowOverlayKeysToPropagate","processSelectionArray","extractStyles","mergeStyleLayers","CubeItemButtonProps","ItemAction","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","CubeListBoxProps","ListBox","TriggerActions","TriggerIcon","KeyboardEvent","RAKeyboardEvent","FieldBaseProps","CubePickerProps","Omit","T","Pick","placeholder","size","listBoxStyles","popoverStyles","triggerStyles","isCheckable","shouldFlip","targetRef","HTMLElement","placement","containerPadding","triggerTooltip","triggerDescription","renderSummary","args","selectedLabels","selectedKeys","selectedLabel","selectedKey","selectionMode","listStateRef","mods","Record","isClearable","clearLabel","onClear","actions","sortSelectedToTop","onOpenChange","isOpen","PROP_STYLES","PickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","Picker","props","ref","t","valuePropsMapper","value","onChange","fieldProps","onSelectionChange","key","Array","isArray","id","label","ariaLabel","extra","icon","rightIcon","prefix","suffix","hotkeys","labelStyles","isRequired","necessityIndicator","isInvalid","isValid","isDisabled","isLoading","message","externalMods","description","descriptionPlacement","type","theme","shape","labelSuffix","shouldFocusWrap","children","defaultSelectedKey","defaultSelectedKeys","disabledKeys","focusOnHover","showSelectAll","selectAllLabel","items","header","footer","headerStyles","footerStyles","allValueProps","listStyles","optionStyles","sectionStyles","headingStyles","listGap","listRef","disallowEmptySelection","shouldUseVirtualFocus","onEscape","onOptionClick","externalListStateRef","otherProps","internalSelectedKey","setInternalSelectedKey","internalSelectedKeys","setInternalSelectedKeys","isPopoverOpen","setIsPopoverOpen","triggerRef","HTMLButtonElement","triggerAriaLabel","String","pickerAriaLabel","trim","triggerWidthRef","undefined","isControlledSingle","isControlledMultiple","effectiveSelectedKey","effectiveSelectedKeys","internalListStateRef","current","cachedItemsOrder","latestSelectionRef","single","multiple","map","selectionWhenClosed","sortSelectedToTopExplicit","shouldSortSelectedToTop","finalItems","selectedKeySet","Set","length","forEach","k","add","itemsArray","from","selectedItems","unselectedItems","item","has","push","sorted","localCollectionState","collection","labels","textValue","keysToGet","getItem","filter","Boolean","hasSelection","handleOpenChange","UNSAFE_getDOMNode","offsetWidth","keyboardProps","onKeyDown","e","preventDefault","clearValue","focus","triggerContent","join","showClearButton","isReadOnly","validationIcon","paintedTheme","hasCustomRightIcon","triggerRightIcon","hasTriggerActions","triggerActions","pressed","triggerElement","handleSelectionChange","selection","normalized","handleEscape","handleOptionClick","pickerField","eventProps","width","Item","Action","Object","defineProperty","enumerable","configurable"],"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 RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FocusScope, Key, Placement } 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 { isTextOnly } from '../../../utils/react/isTextOnly';\nimport { allowOverlayKeysToPropagate } from '../../../utils/react/overlayKeyPropagation';\nimport { processSelectionArray } from '../../../utils/selection';\nimport { extractStyles, mergeStyleLayers } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemAction, ItemButton } 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 } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { CubeListBoxProps, ListBox } from '../ListBox/ListBox';\nimport { TriggerActions, TriggerIcon } from '../TriggerActions';\n\nimport type { KeyboardEvent as RAKeyboardEvent } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\nexport interface CubePickerProps<T>\n extends Omit<\n CubeListBoxProps<T>,\n 'size' \| 'shape' \| 'emptyLabel' \| 'isFocusWithin'\n >,\n // `tooltip` is the trigger's, and on a picker the trigger's is spelled\n // `triggerTooltip`; the label's info badge is `labelTooltip`.\n Omit<CubeItemProps, 'children' \| 'size' \| 'tooltip'>,\n BasePropsWithoutChildren,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n FieldBaseProps<\n string \| number \| readonly (string \| number)[] \| null \| undefined\n >,\n Pick<\n CubeItemButtonProps,\n \| 'type'\n \| 'theme'\n \| 'icon'\n \| 'rightIcon'\n \| 'prefix'\n \| 'suffix'\n \| 'hotkeys'\n \| 'shape'\n > {\n /** Accessible name for the picker trigger when there is no visible label. /\n 'aria-label'?: string;\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 The ref of the element the popover should visually attach itself to.\n * Defaults to the trigger button.\n \n Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n * dismissal treats as the trigger. The popover's `minWidth` stays tied to the\n * trigger button, not to this element.\n /\n targetRef?: RefObject<HTMLElement \| null>;\n /\n Placement of the popover relative to the anchor.\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 `labelTooltip`) /\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 /* Accessible name for the built-in clear button. Defaults to a localized \"Clear value\". /\n clearLabel?: string;\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 'aria-label': ariaLabel,\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 targetRef,\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 renderSummary,\n isCheckable,\n allValueProps,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listGap,\n listRef,\n disallowEmptySelection,\n shouldUseVirtualFocus,\n onEscape,\n onOptionClick,\n isClearable,\n clearLabel,\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 const triggerAriaLabel =\n ariaLabel ??\n (isTextOnly(label)\n ? String(label ?? '')\n : t('picker.pickerAriaLabel', 'Picker'));\n const pickerAriaLabel =\n `${ariaLabel ?? (isTextOnly(label) ? String(label ?? '') : '')} ${t('picker.pickerAriaLabel', 'Picker')}`.trim();\n\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 // Deliberately NOT `useKeyboard`. `ItemButton` already runs whatever\n // `onKeyDown` it is given through `useFocusable`'s own `useKeyboard`, and a\n // second wrapper here would leave `continuePropagation()` releasing only the\n // inner one while the outer still stopped the event — `Escape` reached the\n // trigger and died there (CUB-4839). Handed over plain, this IS the outer\n // wrapper's handler, so the opt-out applies to the event that travels.\n const keyboardProps = {\n onKeyDown: (e: RAKeyboardEvent) => {\n allowOverlayKeysToPropagate(e);\n\n if ((e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') && !isPopoverOpen) {\n e.preventDefault();\n handleOpenChange(true);\n\n return;\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 // 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 // It reaches the trailing actions through `ItemButton`'s wrapper, which is\n // what provides `ItemActionContext` for a run rendered outside the button —\n // so passing it as the trigger's `theme` is all that is needed.\n\n if (validationIcon) {\n suffix = (\n <>\n {suffix}\n {validationIcon}\n </>\n );\n }\n\n // A caller's `rightIcon` keeps the `rightIcon` slot: it accepts a render\n // function resolved against the trigger's mods, which only that slot does, and\n // it is also what a caller's `RightIcon` styles target. It replaces the\n // built-in control, exactly as before — including under `isLoading`, where the\n // spinner replaces it in turn.\n const hasCustomRightIcon = rightIcon !== undefined;\n const triggerRightIcon = hasCustomRightIcon ? (\n isLoading ? (\n <LoadingIcon />\n ) : (\n rightIcon\n )\n ) : undefined;\n\n // With a caller's own `rightIcon` the built-in control moves into that slot,\n // leaving the run with whatever the caller passed — possibly nothing. `null`\n // rather than nothing at all: the run stays in the markup, so the trigger does\n // not restructure if actions arrive later, but the row stops counting it as\n // end content. That is what keeps an icon-only trigger with `rightIcon={null}`\n // square, as it was before the run existed.\n const hasTriggerActions = !hasCustomRightIcon \|\| !!actions;\n\n // Everything trailing that is NOT the caller's own icon goes into the actions\n // run — a sibling of the `<button>`, so the clear button is no longer nested\n // inside one. See `TriggerActions`.\n const triggerActions = (\n <TriggerActions\n actions={actions}\n builtIn={\n hasCustomRightIcon ? null : isLoading ? (\n <TriggerIcon>\n <LoadingIcon />\n </TriggerIcon>\n ) : showClearButton ? (\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"PickerClearButton\"\n // See `Select`: `ItemAction` names itself from `aria-label` or a\n // string `tooltip`, and warns for neither.\n aria-label={clearLabel ?? t('picker.clearValue', 'Clear value')}\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 ) : (\n <TriggerIcon>\n <DirectionIcon to={isPopoverOpen ? 'top' : 'bottom'} />\n </TriggerIcon>\n )\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={triggerRightIcon}\n actions={hasTriggerActions ? triggerActions : null}\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={triggerAriaLabel}\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={placement}\n targetRef={targetRef}\n isOpen={isPopoverOpen}\n containerPadding={containerPadding}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {() => (\n <Dialog\n qa=\"PickerOverlay\"\n aria-label={pickerAriaLabel}\n display=\"grid\"\n styles={mergeStyleLayers(\n {\n gridRows: '1sf',\n width: 'max($overlay-min-width, 30x) max-content 50vw',\n '$overlay-min-width': '30x',\n },\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={pickerAriaLabel}\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 listGap={listGap}\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'>>(\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiLA,MAAM4F,cAAc;CAAC,GAAG1F;CAAa,GAAGM;CAAc,GAAGH;CAAa;AAEtE,MAAMwF,gBAAgBlF,MAAM;CAC1BmF,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;EACd;CACD,CAAC;AAEF,MAAaC,SAASxF,WAAW,SAASwF,OACxCC,OACAC,KACA;CACA,MAAM,EAAEC,MAAMzE,SAAS;AAEvBuE,SAAQvD,cAAcuD,OAAO,EAC3BG,mBAAmB,EAAEC,OAAOC,eAAe;EACzC,MAAMC,aAAsC,EAAE;AAE9C,MAAIN,MAAMrB,kBAAkB,WAC1B2B,YAAW9B,eAAe4B,SAAS,EAAE;MAErCE,YAAW5B,cAAc0B,SAAS;AAGpCE,aAAWC,qBAAqBC,QAAoC;AAClE,OAAIR,MAAMrB,kBAAkB,WAE1B,KAAI6B,QAAQ,MACVH,UAAS,MAAM;OAEfA,UAASG,MAAOC,MAAMC,QAAQF,IAAI,GAAGA,MAAM,CAACA,IAAI,GAAI,EAAE,CAAC;OAGzDH,UAASI,MAAMC,QAAQF,IAAI,GAAGA,IAAI,KAAKA,IAAI;;AAI/C,SAAOF;IAEV,CAAC;CAEF,IAAI,EACFK,IACAnB,IACAoB,OACA,cAAcC,WACdC,OACAC,MACAC,WACAC,QACAC,QACAhC,SACAiC,SACAhD,gBACAC,oBACAgD,aACAC,YACAC,oBACAC,WACAC,SACAC,YACAC,WACAC,SACA9C,MAAM+C,cACNC,aACAC,sBACAtE,aACAC,OAAO,UACPgC,QACA/B,eACAC,eACAoE,OAAO,WACPC,QAAQ,WACRC,OACAC,aACAC,iBACAC,UACAtE,aAAa,MACbC,WACAE,YAAY,gBACZC,mBAAmB,GACnBQ,aACA2D,oBACA7D,cACA8D,qBACAC,cACAhC,mBACA5B,gBAAgB,UAChBC,cACA4D,cACAC,eACAC,iBAAiBxC,EAAE,cAAc,MAAM,EACvCyC,OACAC,QACAC,QACAC,cACAC,cACAnF,eACAS,eACAR,aACAmF,eACAC,YACAC,cACAC,eACAC,eACAC,SACAC,SACAC,wBACAC,uBACAC,UACAC,eACA3E,aACAC,YACAC,SACAE,mBACAC,cACAR,cAAc+E,sBACd,GAAGC,eACD5D;AAEJP,UAASzD,cAAc4H,YAAYtE,aAAaG,OAAO;AAGvDjE,SAAQqC,gBAAgB,SAASc,kBAAkB,UAAU;EAC3D6B,KAAK,CAAC,+BAA+B;EACrClC,MAAM,CACJ,6HAA4H;EAE/H,CAAC;CAGF,MAAM,CAACuF,qBAAqBC,0BAA0B/I,SACpDsH,sBAAsB,KACvB;CACD,MAAM,CAAC0B,sBAAsBC,2BAA2BjJ,SAEtDuH,uBAAuB,EAAE,CAAC;CAG5B,MAAM,CAAC2B,eAAeC,oBAAoBnJ,SAAS,MAAM;CACzD,MAAMoJ,aAAarJ,OAA6C,KAAK;CACrE,MAAMuJ,mBACJxD,cACChF,WAAW+E,MAAM,GACd0D,OAAO1D,SAAS,GAAG,GACnBV,EAAE,0BAA0B,SAAS;CAC3C,MAAMqE,kBACJ,GAAG1D,cAAchF,WAAW+E,MAAM,GAAG0D,OAAO1D,SAAS,GAAG,GAAG,IAAG,GAAIV,EAAE,0BAA0B,SAAS,GAAGsE,MAAM;CAGlH,MAAMC,kBAAkB3J,OAA2B4J,OAAU;CAE7D,MAAMC,qBAAqBjG,gBAAgBgG;CAC3C,MAAME,uBAAuBpG,iBAAiBkG;CAE9C,MAAMG,uBAAuBF,qBACzBjG,cACAmF;CACJ,MAAMiB,wBAAwBF,uBAC1BpG,eACAuF;CAGJ,MAAMgB,uBAAuBjK,OAAqB,KAAK;AAGvDF,iBAAgB;AACd,MAAI+I,wBAAwBoB,qBAAqBC,QAC/CrB,sBAAqBqB,UAAUD,qBAAqBC;IAErD,CAACrB,qBAAqB,CAAC;CAG1B,MAAMsB,mBAAmBnK,OAAmB,KAAK;CAEjD,MAAMoK,qBAAqBpK,OAGxB;EACDqK,QAAQN,wBAAwB,OAAOP,OAAOO,qBAAqB,GAAG;EACtEO,UACEzG,kBAAkB,cAAcmG,0BAA0B,SACrDA,yBAAyB,EAAE,EAAEO,IAAIf,OAAO,GACzC,EAAA;EACP,CAAC;AAEF1J,iBAAgB;AACdsK,qBAAmBF,UAAU;GAC3BG,QACEN,wBAAwB,OAAOP,OAAOO,qBAAqB,GAAG;GAChEO,UACEzG,kBAAkB,cAAcmG,0BAA0B,SACrDA,yBAAyB,EAAE,EAAEO,IAAIf,OAAO,GACzC,EAAA;GACP;IACA;EAACO;EAAsBC;EAAuBnG;EAAc,CAAC;CAEhE,MAAM2G,sBAAsBxK,OAGzB;EAAEqK,QAAQ;EAAMC,UAAU,EAAA;EAAI,CAAC;CAElC,MAAMG,4BAA4BpG,sBAAsBuF;CACxD,MAAMc,0BAA0BrG,sBAAsBwD,QAAQ,OAAO;AAErEnH,SAAQ+J,6BAA6BC,2BAA2B,CAAC7C,OAAO;EACtEnC,KAAK,CAAC,uCAAuC;EAC7ClC,MAAM,CACJ,6GAA4G;EAE/G,CAAC;AAEF1D,iBAAgB;AACdqK,mBAAiBD,UAAU;IAC1B,CAACrC,MAAM,CAAC;AAEX/H,iBAAgB;AACd,MAAI,CAACqJ,cACHqB,qBAAoBN,UAAU;GAC5BG,QACEN,wBAAwB,OAAOP,OAAOO,qBAAqB,GAAG;GAChEO,UACEzG,kBAAkB,cAAcmG,0BAA0B,SACrDA,yBAAyB,EAAE,EAAEO,IAAIf,OAAO,GACzC,EAAA;GACP;IAEF;EACDO;EACAC;EACAb;EACAtF;EACD,CAAC;CAEF,MAAM8G,aAAa5K,cAAc;AAC/B,MAAI,CAAC8H,SAAS,CAAC6C,wBAAyB,QAAO7C;AAC/C,MAAI,CAACsB,cAAe,QAAOtB;AAC3B,MAAIsC,iBAAiBD,QAAS,QAAOC,iBAAiBD;EAEtD,MAAMU,iCAAiB,IAAIC,KAAa;AAExC,MAAIhH,kBAAkB,YAAY;AAChC,OACE2G,oBAAoBN,QAAQI,SAASQ,WAAW,KAChDd,0BAA0B,MAE1B,QAAOnC;AAET2C,uBAAoBN,QAAQI,SAASS,SAASC,MAC5CJ,eAAeK,IAAID,EACrB,CAAC;aACQR,oBAAoBN,QAAQG,OACrCO,gBAAeK,IAAIT,oBAAoBN,QAAQG,OAAO;AAGxD,MAAIO,eAAejI,SAAS,EAAG,QAAOkF;EAEtC,MAAMqD,aAAavF,MAAMC,QAAQiC,MAAM,GAAGA,QAAQlC,MAAMwF,KAAKtD,MAAM;EACnE,MAAMuD,gBAAqB,EAAE;EAC7B,MAAMC,kBAAuB,EAAE;AAE/BH,aAAWH,SAASO,SAAS;GAC3B,MAAM5F,QAAO4F,MAAc5F,OAAQ4F,MAAczF;AACjD,OAAIH,SAAO,QAAQkF,eAAeW,IAAI/B,OAAO9D,MAAI,CAAC,CAChD0F,eAAcI,KAAKF,KAAK;OAExBD,iBAAgBG,KAAKF,KAAK;IAE5B;EAEF,MAAMG,SAAS,CAAC,GAAGL,eAAe,GAAGC,gBAAgB;AAErDlB,mBAAiBD,UAAUuB;AAE3B,SAAOA;IACN;EAAC5D;EAAO6C;EAAyB7G;EAAesF;EAAc,CAAC;CAIlE,MAAMuC,uBAAuBlL,aAAa;EACxC8G;EACAO,OAAO8C;EACP9G,eAAe;EAChB,CAAC;CAEF,MAAMJ,iBAAiB1D,cAAc;EACnC,MAAM4L,aAAaD,sBAAsBC;AAEzC,MAAI9H,kBAAkB,cAAcmG,0BAA0B,OAAO;AACnE,OAAI,CAAC2B,WAAY,QAAO,EAAE;GAC1B,MAAMC,SAAmB,EAAE;AAC3B,QAAK,MAAMN,UAAQK,WACjB,KAAIL,OAAKrE,SAAS,OAChB2E,QAAOJ,KAAKF,OAAKO,aAAarC,OAAO8B,OAAK5F,IAAI,CAAC;AAGnD,UAAOkG;;AAUT,UANE/H,kBAAkB,cAAcmG,0BAA0B,QACtDA,yBAAyB,EAAE,GAC3BD,wBAAwB,OACtB,CAACA,qBAAqB,GACtB,EAAE,EAGPQ,KAAK7E,UAAQ;AAEZ,WADaiG,YAAYI,QAAQrG,MAAI,GACxBmG,aAAarC,OAAO9D,MAAI;IACrC,CACDsG,OAAOC,QAAQ;IACjB;EACDpI;EACAmG;EACAD;EACA2B,sBAAsBC;EACvB,CAAC;CAEF,MAAMO,eAAezI,eAAeqH,SAAS;CAS7C,MAAMqB,mBAAmB1L,UAAU8D,WAAoB;AACrD,MAAIA,WAAW4E,cAAe;AAE9B,MAAI5E,OACFoF,iBAAgBO,UACdb,YAAYa,SAASkC,mBAAmB,EAAEC;AAE9CjD,mBAAiB7E,OAAO;AACxB,MAAI,CAACA,QAAQ;AACXiG,uBAAoBN,UAAU,EAAE,GAAGE,mBAAmBF,SAAS;AAC/DC,oBAAiBD,UAAU;;AAE7B5F,iBAAeC,OAAO;GACtB;CAWF,MAAM+H,gBAAgB,EACpBC,YAAYC,MAAuB;AACjCxL,8BAA4BwL,EAAE;AAE9B,OAAKA,EAAE9G,QAAQ,aAAa8G,EAAE9G,QAAQ,gBAAgB,CAACyD,eAAe;AACpEqD,KAAEC,gBAAgB;AAClBN,oBAAiB,KAAK;AAEtB;;IAGL;CAGD,MAAMO,aAAajM,eAAe;AAChC,MAAIoD,kBAAkB,YAAY;AAChC,OAAI,CAACiG,qBACHZ,yBAAwB,EAAE,CAAC;AAE7BzD,uBAAoB,EAAE,CAAC;SAClB;AACL,OAAI,CAACoE,mBACHb,wBAAuB,KAAK;AAE9BvD,uBAAoB,KAAK;;AAG3B0G,mBAAiB,MAAM;AACvB9C,cAAYa,SAASyC,SAAS;AAC9BxI,aAAW;AAEX,SAAO;GACP;CAMF,MAAMyI,iBAAiB7M,cAAyB;AAC9C,MAAI,OAAOwD,kBAAkB,YAAY;AACvC,OAAIM,kBAAkB,SACpB,QAAON,cAAc;IACnBI,eAAeF,eAAe;IAC9BG,aAAamG,wBAAwB;IACrCtG;IACAC,cAAcsG;IACdnG,eAAe;IAChB,CAAC;AAGJ,UAAON,cAAc;IACnBE;IACAC,cAAcsG;IACdnG,eAAe;IAChB,CAAC;aACON,kBAAkB,MAC3B,QAAO;AAGT,MAAI,CAAC2I,aACH,QAAO,oBAAC,MAAK,yBAAaxJ,cAA+B;WAChDmB,kBAAkB,SAC3B,QAAOJ,eAAe,MAAM;WACnBuG,0BAA0B,MACnC,QAAOpC;MAEP,QAAOnE,eAAeoJ,KAAK,KAAK,IAAI;IAErC;EACDtJ;EACAM;EACAJ;EACAsG;EACAC;EACAkC;EACAxJ;EACAkF;EACD,CAAC;CAEF,MAAMkF,kBACJ7I,eAAeiI,gBAAgB,CAACvF,cAAc,CAACzB,MAAM6H;CAEvD,MAAMC,iBAAiBvL,kBAAkB;EAAEgF;EAAWC;EAAS,CAAC;CAQhE,MAAMuG,eAAevL,mBAAmBwF,OAAO;EAAET;EAAWC;EAAS,CAAC;AAMtE,KAAIsG,eACF5G,UACE,8CACGA,QACA4G,kBAEJ;CAQH,MAAME,qBAAqBhH,cAAc0D;CACzC,MAAMuD,mBAAmBD,qBACvBtG,YACE,oBAAC,gBAAc,GAEfV,YAEA0D;CAQJ,MAAMwD,oBAAoB,CAACF,sBAAsB,CAAC,CAAC9I;CAKnD,MAAMiJ,iBACJ,oBAAC;EACUjJ;EACT,SACE8I,qBAAqB,OAAOtG,YAC1B,oBAAC,4BACC,oBAAC,gBAAW,GACA,GACZkG,kBACF,oBAAC;GACC,MAAM,oBAAC,cAAY;GACbnK;GACN,IAAG;GAGH,cAAYuB,cAAckB,EAAE,qBAAqB,cAAc;GAK/D,MAAM,EAAEkI,SAAS,OAAO;GACxB,SAASZ;IACT,GAEF,oBAAC,4BACC,oBAAC,iBAAc,IAAIvD,gBAAgB,QAAQ,WAAS,GAG1D;GAEH;CAGD,MAAMoE,iBACJ,oBAAC;EACC,KAAKlE;EACL;EACIxD;EACJ,IAAInB,MAAM;EACJuC;EACN,OAAOgG;EACDtK;EACCwE;EACP,YAAYR,cAAcC;EAC1B,mBAAgB;EAChB,MAAM;GACJlE,aAAa,CAACwJ;GACd,GAAGpF;GACJ;EACKb;EACN,WAAWkH;EACX,SAASC,oBAAoBC,iBAAiB;EACtClH;EACAC;EACCC;EACT,SAAShD;EACT,aAAaC;EACS0D;EACtB,QAAQlE;EACR,GAAIwJ;EACJ,cAAY/C;YAEXqD;GAEJ;CAMD,MAAMY,wBAAwB/M,UAAUgN,cAAmB;AACzD,MAAI5J,kBAAkB,UAAU;AAI9B,OACE4E,0BACAgF,aAAa,QACb1D,wBAAwB,QACxBP,OAAOiE,UAAU,KAAKjE,OAAOO,qBAAqB,EAClD;AACAoC,qBAAiB,MAAM;AACvB;;AAGF,OAAI,CAACtC,mBACHb,wBAAuByE,UAAwB;aAG7C,CAAC3D,sBAAsB;GACzB,IAAI4D,aAA4BD;AAEhC,OAAIA,cAAc,MAChBC,cAAa;YACJ/H,MAAMC,QAAQ6H,UAAU,CACjCC,cAAazM,sBAAsBwM,UAAU;YAE7CA,aACA,OAAOA,cAAc,YACrBA,qBAAqB5C,IAErB6C,cAAazM,sBAAsBwM,UAAsB;AAG3DvE,2BAAwBwE,WAAW;;AAIvC,MAAI7J,kBAAkB,SACpBuG,oBAAmBF,QAAQG,SACzBoD,aAAa,OAAOjE,OAAOiE,UAAU,GAAG;WAEtCA,cAAc,MAChBrD,oBAAmBF,QAAQI,WAAW,EAAE;WAC/B3E,MAAMC,QAAQ6H,UAAU,CACjCrD,oBAAmBF,QAAQI,WAAWrJ,sBAAsBwM,UAAU;WAEtEA,aACA,OAAOA,cAAc,YACrBA,qBAAqB5C,IAErBT,oBAAmBF,QAAQI,WAAWrJ,sBACpCwM,UACD;MAEDrD,oBAAmBF,QAAQI,WAAW,EAAE;AAI5C7E,sBAAoBgI,UAAU;AAE9B,MAAI5J,kBAAkB,SACpBsI,kBAAiB,MAAM;GAEzB;CAEF,MAAMwB,eAAelN,eAAe;AAClC0L,mBAAiB,MAAM;GACvB;CAEF,MAAMyB,oBAAoBnN,UAAUiF,UAAa;AAC/C,MAAK7B,kBAAkB,cAAcd,eAAgB2C,UAAQ,UAC3DyG,kBAAiB,MAAM;GAEzB;AAgGF,QAAOvK,cA7FL,oBAAC;EACS+C;EACR,GAAKxF,gBAAgB2J,YAAY,EAAEgF,YAAY,MAAM,CAAC;YAKtD,qBAAC;GACC,MAAK;GACM3K;GACAF;GACX,QAAQkG;GACU/F;GACNJ;GACZ,cAAcmJ;cAEboB,sBAEC,oBAAC;IACC,IAAG;IACH,cAAY9D;IACZ,SAAQ;IACR,QAAQtI,iBACN;KACE2D,UAAU;KACViJ,OAAO;KACP,sBAAsB;KACvB,EACDlL,cACD;IACD,OACE8G,gBAAgBO,UACX,EACC,uBAAuB,GAAGP,gBAAgBO,QAAO,KAClD,GACDN;cAGN,oBAAC;KAAW;eACV,oBAAC;MACC;MACA,OAAO/B,QAAS8C,aAAoCf;MACpD,cAAYH;MACZ,aACE5F,kBAAkB,WAAWkG,uBAAuBH;MAEtD,cACE/F,kBAAkB,aACdmG,wBACAJ;MAEMzB;MACEC;MACCC;MACAC;MACNC;MACAC;MACeC;MACxB,+BACE5E,kBAAkB,YAAY,CAAC,CAAC4E;MAEpBhB;MACAC;MACGL;MACFxD;MACJ4C;MACFC;MACGC;MACDC;MACX,UAAUqD;MACGlH;MACb,OAAM;MACS4E;MACCC;MACRE;MACAC;MACMC;MACAC;MACd,IAAI,GAAG/C,MAAMR,MAAM,SAAQ;MACZwD;MACf,UAAUyF;MACV,eAAeC;MACf,mBAAmBJ;MAElBlG;OACM;MACC;KAEf;IACY;GAElB,EAICnC,KACAD,MACD;EACD;AAQFD,OAAO+I,OAAOhM,QAAQgM;AAEtB/I,OAAO5E,UAAUC;AAEjB2E,OAAOgJ,SAAS5M;AAEhB6M,OAAOC,eAAelJ,QAAQ,iBAAiB;CAC7CK,OAAO;CACP8I,YAAY;CACZC,cAAc;CACf,CAAC"}

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.192.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
+import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
@@ -145,6 +146,42 @@ const RadioNormalElement = tasty({ styles: {
 	}
 } });
 const RadioCircleElement = /* @__PURE__ */ jsx("div", { "data-element": "RadioCircle" });
+/**
+* The tab stop `useRadio` gives an enabled radio and drops for a disabled one:
+* the selected radio or, with nothing selected, every radio until one of them
+* takes focus, so Tab enters the group from either end.
+*/
+function getRovingTabIndex(state, value) {
+	if (state.selectedValue != null) return state.selectedValue === value ? 0 : -1;
+	return state.lastFocusedValue == null || state.lastFocusedValue === value ? 0 : -1;
+}
+/**
+* React reports a click on an inert radio as a change: the browser checks it
+* before the click is cancelled. Kept as a handler rather than dropped, or
+* React would warn about a `checked` input without one.
+*/
+function ignoreChange(event) {
+	event.stopPropagation();
+}
+/**
+* Tab leaves the group from a focused disabled radio, as it does from the
+* group's tab stop, the selected radio. Left to itself the browser would stop
+* on the selected radio first when it lies ahead, so that radio gives up its
+* tab stop for this one key. Focusing it on the way out instead would open its
+* tooltip and scroll to it.
+*/
+function leaveGroupOnTab(event, selectedValue) {
+	let input = event.currentTarget;
+	if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey || selectedValue == null || input.value === selectedValue) return;
+	let radios = input.closest("[role=\"radiogroup\"]")?.querySelectorAll("input[type=\"radio\"]");
+	let selected = Array.from(radios ?? []).find((radio) => radio.value === selectedValue);
+	if (!selected || selected.disabled || selected.tabIndex < 0) return;
+	let { tabIndex } = selected;
+	selected.tabIndex = -1;
+	setTimeout(() => {
+		if (selected.checked) selected.tabIndex = tabIndex;
+	});
+}
 const RadioLabelElement = tasty({
 	qa: "RadioLabel",
 	styles: INLINE_LABEL_STYLES
@@ -193,7 +230,7 @@ const ITEM_PROPS = [
 	"labelRef"
 ];
 function Radio(props, ref) {
-	const $ = c(72);
+	const $ = c(79);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { defaultValidationTrigger: "onChange" };
@@ -266,38 +303,64 @@ function Radio(props, ref) {
 		$[7] = t5;
 		$[8] = t6;
 	} else t6 = $[8];
-	const { labelRef: tooltipLabelRef, renderWithTooltip } = useAutoTooltip(t6);
+	const { labelRef: tooltipLabelRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t6);
 	const inputRef = useRef(null);
 	const domRef = useFocusableRef(ref, inputRef);
-	const t7 = props.value ?? "";
-	let t8;
-	if ($[9] !== effectiveIsDisabled || $[10] !== name || $[11] !== props || $[12] !== t7) {
-		t8 = {
+	const value = props.value ?? "";
+	let t7;
+	if ($[9] !== effectiveIsDisabled || $[10] !== name || $[11] !== props || $[12] !== value) {
+		t7 = {
 			name,
 			...props,
 			isDisabled: effectiveIsDisabled,
-			value: t7
+			value
 		};
 		$[9] = effectiveIsDisabled;
 		$[10] = name;
 		$[11] = props;
-		$[12] = t7;
-		$[13] = t8;
-	} else t8 = $[13];
-	const { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected } = useRadio$1(t8, state, inputRef);
+		$[12] = value;
+		$[13] = t7;
+	} else t7 = $[13];
+	const { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected } = useRadio$1(t7, state, inputRef);
+	let t8;
+	if ($[14] !== inputProps || $[15] !== isRadioDisabled || $[16] !== state || $[17] !== value) {
+		t8 = (hasActiveTooltip) => {
+			const { isInert, inertProps } = getDisabledElementProps({
+				isDisabled: isRadioDisabled,
+				keepEvents: hasActiveTooltip,
+				as: "input"
+			});
+			if (!isInert) return inputProps;
+			return mergeProps$1({
+				...omitActivationEventProps(inputProps),
+				disabled: false,
+				tabIndex: getRovingTabIndex(state, value),
+				onChange: ignoreChange
+			}, {
+				onFocus: () => state.setLastFocusedValue(value),
+				onKeyDown: (event) => leaveGroupOnTab(event, state.selectedValue)
+			}, inertProps);
+		};
+		$[14] = inputProps;
+		$[15] = isRadioDisabled;
+		$[16] = state;
+		$[17] = value;
+		$[18] = t8;
+	} else t8 = $[18];
+	const getInputProps = t8;
 	let t9;
-	if ($[14] !== isInvalid || $[15] !== isValid) {
+	if ($[19] !== isInvalid || $[20] !== isValid) {
 		t9 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[14] = isInvalid;
-		$[15] = isValid;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[19] = isInvalid;
+		$[20] = isValid;
+		$[21] = t9;
+	} else t9 = $[21];
 	const t10 = effectiveType === "tabs";
 	let t11;
-	if ($[17] !== isButton || $[18] !== isFocused || $[19] !== isHovered || $[20] !== isRadioDisabled || $[21] !== isRadioSelected || $[22] !== t10 || $[23] !== t9) {
+	if ($[22] !== isButton || $[23] !== isFocused || $[24] !== isHovered || $[25] !== isRadioDisabled || $[26] !== isRadioSelected || $[27] !== t10 || $[28] !== t9) {
 		t11 = {
 			checked: isRadioSelected,
 			...t9,
@@ -307,75 +370,75 @@ function Radio(props, ref) {
 			focused: isFocused,
 			tabs: t10
 		};
-		$[17] = isButton;
-		$[18] = isFocused;
-		$[19] = isHovered;
-		$[20] = isRadioDisabled;
-		$[21] = isRadioSelected;
-		$[22] = t10;
-		$[23] = t9;
-		$[24] = t11;
-	} else t11 = $[24];
+		$[22] = isButton;
+		$[23] = isFocused;
+		$[24] = isHovered;
+		$[25] = isRadioDisabled;
+		$[26] = isRadioSelected;
+		$[27] = t10;
+		$[28] = t9;
+		$[29] = t11;
+	} else t11 = $[29];
 	const mods = t11;
 	if (isButton) {
 		const t12 = effectiveButtonType;
 		let t13;
-		if ($[25] !== isInvalid || $[26] !== isValid) {
+		if ($[30] !== isInvalid || $[31] !== isValid) {
 			t13 = getValidationTheme("default", {
 				isInvalid,
 				isValid
 			}, { includeValid: true });
-			$[25] = isInvalid;
-			$[26] = isValid;
-			$[27] = t13;
-		} else t13 = $[27];
+			$[30] = isInvalid;
+			$[31] = isValid;
+			$[32] = t13;
+		} else t13 = $[32];
 		const t14 = effectiveSize;
 		let t15;
-		if ($[28] !== forceSelectedMod || $[29] !== isRadioDisabled) {
+		if ($[33] !== forceSelectedMod || $[34] !== isRadioDisabled) {
 			t15 = forceSelectedMod && !isRadioDisabled ? { selected: true } : {};
-			$[28] = forceSelectedMod;
-			$[29] = isRadioDisabled;
-			$[30] = t15;
-		} else t15 = $[30];
+			$[33] = forceSelectedMod;
+			$[34] = isRadioDisabled;
+			$[35] = t15;
+		} else t15 = $[35];
 		let t16;
-		if ($[31] !== mods || $[32] !== t15) {
+		if ($[36] !== mods || $[37] !== t15) {
 			t16 = {
 				...mods,
 				...t15
 			};
-			$[31] = mods;
-			$[32] = t15;
-			$[33] = t16;
-		} else t16 = $[33];
+			$[36] = mods;
+			$[37] = t15;
+			$[38] = t16;
+		} else t16 = $[38];
 		let t17;
-		if ($[34] !== focusProps || $[35] !== hoverProps) {
+		if ($[39] !== focusProps || $[40] !== hoverProps) {
 			t17 = mergeProps$1(hoverProps, focusProps);
-			$[34] = focusProps;
-			$[35] = hoverProps;
-			$[36] = t17;
-		} else t17 = $[36];
+			$[39] = focusProps;
+			$[40] = hoverProps;
+			$[41] = t17;
+		} else t17 = $[41];
 		let t18;
-		if ($[37] !== ariaLabel || $[38] !== inputProps || $[39] !== isButton || $[40] !== isRadioDisabled || $[41] !== qa) {
-			t18 = (tooltipFocusProps) => /* @__PURE__ */ jsx(HiddenInput, {
+		if ($[42] !== ariaLabel || $[43] !== getInputProps || $[44] !== isButton || $[45] !== isRadioDisabled || $[46] !== qa) {
+			t18 = (tooltipFocusProps, isItemTooltipActive) => /* @__PURE__ */ jsx(HiddenInput, {
 				qa: qa || "Radio",
 				"data-input-type": "radio",
 				"aria-label": ariaLabel,
-				...mergeTooltipFocusProps(inputProps, tooltipFocusProps),
+				...mergeTooltipFocusProps(getInputProps(isItemTooltipActive), tooltipFocusProps),
 				ref: inputRef,
 				mods: {
 					button: isButton,
 					disabled: isRadioDisabled
 				}
 			});
-			$[37] = ariaLabel;
-			$[38] = inputProps;
-			$[39] = isButton;
-			$[40] = isRadioDisabled;
-			$[41] = qa;
-			$[42] = t18;
-		} else t18 = $[42];
+			$[42] = ariaLabel;
+			$[43] = getInputProps;
+			$[44] = isButton;
+			$[45] = isRadioDisabled;
+			$[46] = qa;
+			$[47] = t18;
+		} else t18 = $[47];
 		let t19;
-		if ($[43] !== domRef || $[44] !== effectiveButtonType || $[45] !== effectiveSize || $[46] !== isRadioDisabled || $[47] !== isRadioSelected || $[48] !== itemProps || $[49] !== label || $[50] !== styles || $[51] !== t13 || $[52] !== t16 || $[53] !== t17 || $[54] !== t18) {
+		if ($[48] !== domRef || $[49] !== effectiveButtonType || $[50] !== effectiveSize || $[51] !== isRadioDisabled || $[52] !== isRadioSelected || $[53] !== itemProps || $[54] !== label || $[55] !== styles || $[56] !== t13 || $[57] !== t16 || $[58] !== t17 || $[59] !== t18) {
 			t19 = /* @__PURE__ */ jsx(RadioButtonElement, {
 				ref: domRef,
 				type: t12,
@@ -391,24 +454,24 @@ function Radio(props, ref) {
 				hiddenContent: t18,
 				children: label
 			});
-			$[43] = domRef;
-			$[44] = effectiveButtonType;
-			$[45] = effectiveSize;
-			$[46] = isRadioDisabled;
-			$[47] = isRadioSelected;
-			$[48] = itemProps;
-			$[49] = label;
-			$[50] = styles;
-			$[51] = t13;
-			$[52] = t16;
-			$[53] = t17;
-			$[54] = t18;
-			$[55] = t19;
-		} else t19 = $[55];
+			$[48] = domRef;
+			$[49] = effectiveButtonType;
+			$[50] = effectiveSize;
+			$[51] = isRadioDisabled;
+			$[52] = isRadioSelected;
+			$[53] = itemProps;
+			$[54] = label;
+			$[55] = styles;
+			$[56] = t13;
+			$[57] = t16;
+			$[58] = t17;
+			$[59] = t18;
+			$[60] = t19;
+		} else t19 = $[60];
 		return t19;
 	}
 	let t12;
-	if ($[56] !== ariaLabel || $[57] !== domRef || $[58] !== focusProps || $[59] !== hoverProps || $[60] !== inputProps || $[61] !== isButton || $[62] !== label || $[63] !== labelProps || $[64] !== labelStyles || $[65] !== mods || $[66] !== qa || $[67] !== renderWithTooltip || $[68] !== styles || $[69] !== tooltipLabelRef || $[70] !== type) {
+	if ($[61] !== ariaLabel || $[62] !== domRef || $[63] !== focusProps || $[64] !== getInputProps || $[65] !== hoverProps || $[66] !== isButton || $[67] !== isRadioDisabled || $[68] !== isTooltipActive || $[69] !== label || $[70] !== labelProps || $[71] !== labelStyles || $[72] !== mods || $[73] !== qa || $[74] !== renderWithTooltip || $[75] !== styles || $[76] !== tooltipLabelRef || $[77] !== type) {
 		t12 = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
 			const { pointerProps, focusProps: tooltipFocusProps_0 } = splitTooltipTriggerProps(tooltipTriggerProps);
 			return /* @__PURE__ */ jsxs(RadioWrapperElement, {
@@ -425,9 +488,12 @@ function Radio(props, ref) {
 						qa: qa || "Radio",
 						"data-input-type": "radio",
 						"aria-label": ariaLabel,
-						...mergeTooltipFocusProps(mergeProps$1(inputProps, focusProps), tooltipFocusProps_0),
+						...mergeTooltipFocusProps(mergeProps$1(getInputProps(isTooltipActive), focusProps), tooltipFocusProps_0),
 						ref: inputRef,
-						mods: { button: isButton }
+						mods: {
+							button: isButton,
+							disabled: isRadioDisabled
+						}
 					}),
 					/* @__PURE__ */ jsx(RadioNormalElement, {
 						"data-element": "Input",
@@ -445,23 +511,25 @@ function Radio(props, ref) {
 				]
 			});
 		}, "top");
-		$[56] = ariaLabel;
-		$[57] = domRef;
-		$[58] = focusProps;
-		$[59] = hoverProps;
-		$[60] = inputProps;
-		$[61] = isButton;
-		$[62] = label;
-		$[63] = labelProps;
-		$[64] = labelStyles;
-		$[65] = mods;
-		$[66] = qa;
-		$[67] = renderWithTooltip;
-		$[68] = styles;
-		$[69] = tooltipLabelRef;
-		$[70] = type;
-		$[71] = t12;
-	} else t12 = $[71];
+		$[61] = ariaLabel;
+		$[62] = domRef;
+		$[63] = focusProps;
+		$[64] = getInputProps;
+		$[65] = hoverProps;
+		$[66] = isButton;
+		$[67] = isRadioDisabled;
+		$[68] = isTooltipActive;
+		$[69] = label;
+		$[70] = labelProps;
+		$[71] = labelStyles;
+		$[72] = mods;
+		$[73] = qa;
+		$[74] = renderWithTooltip;
+		$[75] = styles;
+		$[76] = tooltipLabelRef;
+		$[77] = type;
+		$[78] = t12;
+	} else t12 = $[78];
 	return t12;
 }
 /**