npm - @cube-dev/ui-kit - Versions diffs - 0.162.0 → 0.164.0 - Mend

@cube-dev/ui-kit 0.162.0 → 0.164.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 (654) hide show

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.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,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.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";
+import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { EyeIcon } from "../../../icons/EyeIcon.js";
@@ -44,11 +45,13 @@ function PasswordInput(props, ref) {
 	const toggleType = useCallback(() => {
 		setType((type) => type === "password" ? "text" : "password");
 	}, []);
-	const wrappedSuffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, /* @__PURE__ */ jsx(ItemAction, {
-		type: "clear",
-		tooltip: t("passwordInput.toggleMasking", "Toggle masking"),
-		icon: type === "password" ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
-		onPress: toggleType
+	const wrappedSuffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, /* @__PURE__ */ jsx(ItemActionProvider, {
+		isDisabled: rest.isDisabled,
+		children: /* @__PURE__ */ jsx(ItemAction, {
+			tooltip: t("passwordInput.toggleMasking", "Toggle masking"),
+			icon: type === "password" ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
+			onPress: toggleType
+		})
 	})] });
 	return /* @__PURE__ */ jsx(TextInputBase, {
 		ref,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef, useState } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { EyeIcon, EyeInvisibleIcon } from '../../../icons';\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport {\n CubeBufferedValueProps,\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput';\n\nexport interface CubePasswordInputProps\n extends WithNullableValue<CubeTextInputBaseProps>,\n CubeBufferedValueProps {}\n\nfunction PasswordInput(\n props: CubePasswordInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value?.toString() ?? '',\n onChange,\n }),\n });\n\n let [type, setType] = useState('password');\n let {\n labelProps: userLabelProps,\n suffix,\n multiLine,\n inputRef: propsInputRef,\n isBuffered,\n ...rest\n } = props;\n let localInputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n let buffered = useBufferedValue(rest.value, rest.onChange, {\n isBuffered,\n isDisabled: rest.isDisabled,\n isReadOnly: rest.isReadOnly,\n });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...rest,\n value: buffered.value,\n onChange: buffered.onChange,\n onBlur: chain(rest.onBlur, buffered.reset),\n type,\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const toggleType = useCallback(() => {\n setType((type) => (type === 'password' ? 'text' : 'password'));\n }, []);\n\n const wrappedSuffix = (\n <>\n {suffix}\n <ItemAction\n type~~=\"clear~~\"\n tooltip={t('passwordInput.toggleMasking', 'Toggle masking')}\n icon={type === 'password' ? <EyeInvisibleIcon /> : <EyeIcon />}\n onPress={toggleType}\n />\n </>\n );\n\n return (\n <TextInputBase\n ref={ref}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'passwordinput' }}\n inputRef={inputRef}\n inputStyles={{ paddingRight: '4x' }}\n type={type}\n suffixPosition=\"after\"\n suffix={wrappedSuffix}\n multiLine={multiLine}\n {...rest}\n />\n );\n}\n\n/*\n PasswordInputs are password inputs that allow users to input passwords or code entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _PasswordInput = forwardRef(PasswordInput);\n\n(_PasswordInput as any).cubeInputType = 'Text';\n_PasswordInput.displayName = 'PasswordInput';\n\nexport { _PasswordInput as PasswordInput };\n"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAsBA,SAAS,cACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,IAAI;GAC5B;GACD;EACF,CAAC;CAEF,IAAI,CAAC,MAAM,WAAW,SAAS,WAAW;CAC1C,IAAI,EACF,YAAY,gBACZ,QACA,WACA,UAAU,eACV,YACA,GAAG,SACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAGhC,IAAI,WAAW,iBAAiB,KAAK,OAAO,KAAK,UAAU;EACzD;EACA,YAAY,KAAK;EACjB,YAAY,KAAK;EAClB,CAAC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH,OAAO,SAAS;EAChB,UAAU,SAAS;EACnB,QAAQ,MAAM,KAAK,QAAQ,SAAS,MAAM;EAC1C;EACD,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,aAAa,kBAAkB;AACnC,WAAS,SAAU,SAAS,aAAa,SAAS,WAAY;IAC7D,EAAE,CAAC;CAEN,MAAM,gBACJ,8CACG,~~QACD~~,oBAAC;~~EACC~~,~~MAAK~~;~~EACL~~,SAAS,EAAE,+BAA+B,iBAAiB;~~EAC3D~~,MAAM,SAAS,aAAa,oBAAC,qBAAmB,GAAG,oBAAC,YAAU;~~EAC9D~~,SAAS;~~GACT~~,~~IACD~~;AAGL,QACE,oBAAC;EACM;EACL,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAiB;EACvD;EACV,aAAa,EAAE,cAAc,MAAM;EAC7B;EACN,gBAAe;EACf,QAAQ;EACG;EACX,GAAI;GACJ;;;;;;;AASN,MAAM,iBAAiB,WAAW,cAAc;AAEhD,AAAC,eAAuB,gBAAgB;AACxC,eAAe,cAAc"}
1	+ {"version":3,"file":"PasswordInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef, useState } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { EyeIcon, EyeInvisibleIcon } from '../../../icons';\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport {\n CubeBufferedValueProps,\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput';\n\nexport interface CubePasswordInputProps\n extends WithNullableValue<CubeTextInputBaseProps>,\n CubeBufferedValueProps {}\n\nfunction PasswordInput(\n props: CubePasswordInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value?.toString() ?? '',\n onChange,\n }),\n });\n\n let [type, setType] = useState('password');\n let {\n labelProps: userLabelProps,\n suffix,\n multiLine,\n inputRef: propsInputRef,\n isBuffered,\n ...rest\n } = props;\n let localInputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n let buffered = useBufferedValue(rest.value, rest.onChange, {\n isBuffered,\n isDisabled: rest.isDisabled,\n isReadOnly: rest.isReadOnly,\n });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...rest,\n value: buffered.value,\n onChange: buffered.onChange,\n onBlur: chain(rest.onBlur, buffered.reset),\n type,\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const toggleType = useCallback(() => {\n setType((type) => (type === 'password' ? 'text' : 'password'));\n }, []);\n\n const wrappedSuffix = (\n <>\n {suffix}\n {/\n The disabled state travels through the provider rather than as a prop on\n the action. Both disable it, but the provider marks the state as\n INHERITED from the field, and `current` paints from the colour it\n inherits — which a disabled field has already faded — so a second fade\n would multiply the two down to roughly a tenth opacity. No `type` is\n passed, so the `context` mod stays off and the toggle keeps its margins.\n /}\n <ItemActionProvider isDisabled={rest.isDisabled}>\n <ItemAction\n // No `type` — the default `current` type inherits the input's own text\n // color, so the toggle follows the field's theme, validation state and\n // disabled state rather than staying opaque against faded text.\n tooltip={t('passwordInput.toggleMasking', 'Toggle masking')}\n icon={type === 'password' ? <EyeInvisibleIcon /> : <EyeIcon />}\n onPress={toggleType}\n />\n </ItemActionProvider>\n </>\n );\n\n return (\n <TextInputBase\n ref={ref}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'passwordinput' }}\n inputRef={inputRef}\n inputStyles={{ paddingRight: '4x' }}\n type={type}\n suffixPosition=\"after\"\n suffix={wrappedSuffix}\n multiLine={multiLine}\n {...rest}\n />\n );\n}\n\n/*\n PasswordInputs are password inputs that allow users to input passwords or code entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _PasswordInput = forwardRef(PasswordInput);\n\n(_PasswordInput as any).cubeInputType = 'Text';\n_PasswordInput.displayName = 'PasswordInput';\n\nexport { _PasswordInput as PasswordInput };\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,SAAS,cACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,OAAO,UAAU,IAAI;GAC5B;GACD;EACF,CAAC;CAEF,IAAI,CAAC,MAAM,WAAW,SAAS,WAAW;CAC1C,IAAI,EACF,YAAY,gBACZ,QACA,WACA,UAAU,eACV,YACA,GAAG,SACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAGhC,IAAI,WAAW,iBAAiB,KAAK,OAAO,KAAK,UAAU;EACzD;EACA,YAAY,KAAK;EACjB,YAAY,KAAK;EAClB,CAAC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH,OAAO,SAAS;EAChB,UAAU,SAAS;EACnB,QAAQ,MAAM,KAAK,QAAQ,SAAS,MAAM;EAC1C;EACD,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,aAAa,kBAAkB;AACnC,WAAS,SAAU,SAAS,aAAa,SAAS,WAAY;IAC7D,EAAE,CAAC;CAEN,MAAM,gBACJ,8CACG,QASD,oBAAC;EAAmB,YAAY,KAAK;YACnC,oBAAC;GAIC,SAAS,EAAE,+BAA+B,iBAAiB;GAC3D,MAAM,SAAS,aAAa,oBAAC,qBAAmB,GAAG,oBAAC,YAAU;GAC9D,SAAS;IACT;GACiB,IACpB;AAGL,QACE,oBAAC;EACM;EACL,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAiB;EACvD;EACV,aAAa,EAAE,cAAc,MAAM;EAC7B;EACN,gBAAe;EACf,QAAQ;EACG;EACX,GAAI;GACJ;;;;;;;AASN,MAAM,iBAAiB,WAAW,cAAc;AAEhD,AAAC,eAAuB,gBAAgB;AACxC,eAAe,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
@@ -301,7 +301,6 @@ const Picker = forwardRef(function Picker(props, ref) {
 		styles,
 		...filterBaseProps(otherProps, { eventProps: true }),
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
-			isDismissable: true,
 			type: "popover",
 			placement: "bottom start",
 			isOpen: isPopoverOpen,
@@ -344,7 +343,6 @@ const Picker = forwardRef(function Picker(props, ref) {
 						stateRef: internalListStateRef,
 						isCheckable,
 						shape: "popover",
-						size: "medium",
 						showSelectAll,
 						selectAllLabel,
 						header,

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, DirectionIcon, LoadingIcon } from '../../../icons';\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 theme={getValidationTheme(theme, { isInvalid, isValid })}\n >\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"PickerClearButton\"\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 isDismissable\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 size=\"medium\"\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":"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"}
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, DirectionIcon, LoadingIcon } from '../../../icons';\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":"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"}

package/dist/components/fields/RadioGroup/Radio.d.ts CHANGED Viewed

@@ -4,24 +4,46 @@ import "../../../shared/index.js";
 import { CubeItemProps } from "../../content/Item/Item.js";
 import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import { CubeRadioGroupProps, _RadioGroup } from "./RadioGroup.js";
-import { BaseProps, OuterStyleProps } from "@tenphi/tasty";
+import { BaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 import { AriaRadioProps, useRadio as useRadio$1 } from "react-aria";
 //#region src/components/fields/RadioGroup/Radio.d.ts
-interface CubeRadioProps extends BaseProps, AriaRadioProps, Omit<FieldBaseProps, 'tooltip'>, OuterStyleProps {
+/**
+ * `Item` props a button-type radio hands straight to the `Item` it renders, so
+ * `Radio.Button` accepts the same content and presentation API as an
+ * `ItemButton`. Kept as a runtime list so a new `Item` prop only has to be
+ * added in one place.
+ *
+ * Deliberately absent:
+ * - `size`, `type`, `theme`, `isSelected`, `isDisabled`, `mods`, `styles` —
+ *   owned by the radio (they come from the prop/context/validation resolution
+ *   below).
+ * - `shape` — the radius is owned by the button-group layout below, which keeps
+ *   only the outer-side radius on the first/last radio so the group reads as one
+ *   continuous control. Forwarding `shape` would have no effect.
+ * - `htmlType`, `as`, `insideWrapper`, `showActions` — internal to `Item` /
+ *   `ItemButton`.
+ * - `actions`, `autoHideActions`, `preserveActionsSpace`,
+ *   `disableActionsFocus` — a button radio renders as a `<label>`, and a click
+ *   anywhere inside a label activates its control, so nested action buttons
+ *   would select the radio (and nested interactive content is invalid inside a
+ *   label to begin with).
+ */
+declare const ITEM_PROPS: readonly ["icon", "rightIcon", "prefix", "suffix", "description", "descriptionPlacement", "descriptionProps", "tooltip", "hotkeys", "keyboardShortcutProps", "level", "isLoading", "loadingSlot", "highlight", "highlightCaseSensitive", "highlightStyles", "labelRef"];
+type RadioItemProps = Pick<CubeItemProps, (typeof ITEM_PROPS)[number]>;
+interface CubeRadioProps extends BaseProps, AriaRadioProps, Omit<FieldBaseProps, 'tooltip'>,
+/**
+ * Container style props apply to button-type radios (they style the `Item`
+ * the radio renders). A classic radio only reads the outer subset —
+ * everything else belongs to its inner circle and label.
+ */
+ContainerStyleProps, /** All of these apply to button/tabs-type radios only. */RadioItemProps {
   'aria-label'?: string;
   type?: 'button' | 'radio';
   buttonType?: CubeItemProps['type'];
   value?: string;
   size?: Omit<CubeItemProps['size'], 'inline'>;
-  icon?: CubeItemProps['icon'];
-  rightIcon?: CubeItemProps['rightIcon'];
-  prefix?: CubeItemProps['prefix'];
-  suffix?: CubeItemProps['suffix'];
-  description?: CubeItemProps['description'];
-  tooltip?: CubeItemProps['tooltip'];
-  hotkeys?: CubeItemProps['hotkeys'];
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.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";
@@ -10,7 +10,7 @@ import { HiddenInput } from "../../HiddenInput.js";
 import { RADIO_SIZE_MAP } from "../../navigation/Tabs/types.js";
 import { useRadioProvider } from "./context.js";
 import { _RadioGroup } from "./RadioGroup.js";
-import { OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHover, useRadio as useRadio$1 } from "react-aria";
@@ -24,7 +24,12 @@ const RadioButtonElement = tasty(_Item, {
 		preset: "t3m",
 		lineHeight: "1em",
 		flexGrow: 1,
-		gridTemplate: "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
+		gridTemplate: {
+			"": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
+			"description=inline": "\"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
+			"description=inline & has-label": "\"icon prefix label suffix rightIcon actions\" auto \"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
+			"description=block": "\"icon prefix label suffix rightIcon actions\" auto \"description description description description description description\" auto / max-content max-content max-content max-content max-content max-content"
+		},
 		placeContent: "center",
 		shadow: {
 			"": false,
@@ -124,11 +129,52 @@ const RadioLabelElement = tasty({
 	qa: "RadioLabel",
 	styles: INLINE_LABEL_STYLES
 });
+/**
+* `Item` props a button-type radio hands straight to the `Item` it renders, so
+* `Radio.Button` accepts the same content and presentation API as an
+* `ItemButton`. Kept as a runtime list so a new `Item` prop only has to be
+* added in one place.
+*
+* Deliberately absent:
+* - `size`, `type`, `theme`, `isSelected`, `isDisabled`, `mods`, `styles` —
+*   owned by the radio (they come from the prop/context/validation resolution
+*   below).
+* - `shape` — the radius is owned by the button-group layout below, which keeps
+*   only the outer-side radius on the first/last radio so the group reads as one
+*   continuous control. Forwarding `shape` would have no effect.
+* - `htmlType`, `as`, `insideWrapper`, `showActions` — internal to `Item` /
+*   `ItemButton`.
+* - `actions`, `autoHideActions`, `preserveActionsSpace`,
+*   `disableActionsFocus` — a button radio renders as a `<label>`, and a click
+*   anywhere inside a label activates its control, so nested action buttons
+*   would select the radio (and nested interactive content is invalid inside a
+*   label to begin with).
+*/
+const ITEM_PROPS = [
+	"icon",
+	"rightIcon",
+	"prefix",
+	"suffix",
+	"description",
+	"descriptionPlacement",
+	"descriptionProps",
+	"tooltip",
+	"hotkeys",
+	"keyboardShortcutProps",
+	"level",
+	"isLoading",
+	"loadingSlot",
+	"highlight",
+	"highlightCaseSensitive",
+	"highlightStyles",
+	"labelRef"
+];
 function Radio(props, ref) {
 	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
-	let { qa, isDisabled, isInvalid, isValid, children, label, autoFocus, labelStyles, labelProps, type, buttonType, size, icon, rightIcon, prefix, suffix, description, tooltip, hotkeys, "aria-label": ariaLabel, form, ...otherProps } = props;
+	let { qa, isDisabled, isInvalid, isValid, children, label, autoFocus, labelStyles, labelProps, type, buttonType, size, "aria-label": ariaLabel, form, ...otherProps } = props;
 	label = label || children;
-	let styles = extractStyles(otherProps, OUTER_STYLES);
+	const itemProps = {};
+	for (const itemPropName of ITEM_PROPS) if (itemPropName in props) itemProps[itemPropName] = props[itemPropName];
 	labelStyles = {
 		...INLINE_LABEL_STYLES,
 		...labelStyles
@@ -143,6 +189,7 @@ function Radio(props, ref) {
 	if (!state) throw new Error("CubeUI: The Radio button is used outside the RadioGroup.");
 	let effectiveType = type ?? contextType ?? "radio";
 	let isButton = effectiveType === "button" || effectiveType === "tabs";
+	let styles = extractStyles(otherProps, isButton ? CONTAINER_STYLES : OUTER_STYLES);
 	let effectiveSize = size ?? contextSize ?? "medium";
 	if (effectiveType === "tabs" && isButton) effectiveSize = RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"];
 	let effectiveButtonType;
@@ -157,7 +204,9 @@ function Radio(props, ref) {
 		}
 		else effectiveButtonType = baseButtonType;
 	}
-	let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;
+	let baseIsDisabled = isDisabled ?? contextIsDisabled ?? false;
+	let isLoadingButton = isButton && props.isLoading === true;
+	let effectiveIsDisabled = baseIsDisabled === true || isLoadingButton && isDisabled !== false;
 	let { isFocused, focusProps } = useFocus$1({ isDisabled: effectiveIsDisabled }, true);
 	let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });
 	let inputRef = useRef(null);
@@ -196,18 +245,12 @@ function Radio(props, ref) {
 			isValid
 		}, { includeValid: true }),
 		size: effectiveSize,
-		icon,
-		rightIcon,
-		prefix,
-		suffix,
-		description,
-		tooltip,
-		hotkeys,
+		...itemProps,
 		isSelected: isRadioSelected,
 		isDisabled: isRadioDisabled,
 		mods: {
 			...mods,
-			...forceSelectedMod ? { selected: true } : {}
+			...forceSelectedMod && !isRadioDisabled ? { selected: true } : {}
 		},
 		styles,
 		...mergeProps$1(hoverProps, focusProps),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","names":["Item","useFocus","useRadio","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n filterBaseProps,\n OUTER_STYLES,\n OuterStyleProps,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n getValidationMods,\n getValidationTheme,\n INLINE_LABEL_STYLES,\n useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n qa: 'RadioButton',\n as: 'label',\n styles: {\n preset: 't3m',\n lineHeight: '1em',\n flexGrow: 1,\n gridTemplate:\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n placeContent: 'center',\n shadow: {\n '': false,\n 'tabs & selected': '$item-shadow',\n 'tabs & selected & disabled': false,\n },\n fill: {\n 'selected & tabs': '#surface',\n 'selected & tabs & disabled': '#surface.6',\n },\n color: {\n 'selected & tabs': '#dark',\n 'selected & tabs & disabled': '#dark.3',\n },\n\n // Mirror the ButtonSplit grouping: the corner radius is shared so the\n // first/last items keep only their outer-side radius and middle items go\n // square; a -1bw left margin overlaps adjacent borders into a single\n // continuous edge. The selected button is bumped above its siblings so its\n // brand-tinted border is visible from all four sides — without the bump\n // the right edge of an adjacent sibling would paint over the selected\n // button's left edge (and vice-versa). Hover / focus-visible bump higher\n // still so they always read on top of the selected highlight.\n radius: {\n '': true,\n '!tabs & !:last-child': '1r left',\n '!tabs & !:first-child': '1r right',\n '!tabs & !:first-child & !:last-child': 0,\n },\n margin: {\n '': 0,\n '!tabs & !:first-child': '-1bw left',\n },\n zIndex: {\n '!tabs & selected': 1,\n },\n\n Label: {\n placeSelf: {\n '': 'center start',\n '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n },\n },\n },\n});\n\nconst RadioWrapperElement = tasty({\n as: 'label',\n qa: 'RadioWrapper',\n styles: {\n position: 'relative',\n display: 'grid',\n placeItems: 'center start',\n placeContent: 'center start',\n gap: '1x',\n flow: 'column',\n preset: 'default',\n width: 'min-content',\n radius: true,\n margin: {\n '': '1x right',\n button: '0',\n },\n zIndex: {\n '': 'initial',\n checked: 1,\n },\n flexGrow: 1,\n },\n});\n\nconst RadioNormalElement = tasty({\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n color: {\n '': '#clear',\n checked: '#primary-text',\n 'invalid & checked': '#danger-text',\n 'valid & checked': '#success-text',\n 'disabled \| !checked': '#clear',\n 'disabled & checked': '#dark.12',\n },\n border: {\n '': '#dark-04',\n checked: '#primary-text',\n invalid: '#danger-text.50',\n valid: '#success-text.50',\n disabled: '#dark.12',\n },\n width: '2x',\n height: '2x',\n outline: {\n '': '#primary-text.0 / 1bw',\n focused: '1bw #primary-text / 1bw',\n },\n transition: 'theme',\n whiteSpace: 'nowrap',\n\n RadioCircle: {\n display: 'block',\n radius: 'round',\n width: '1x',\n height: '1x',\n fill: '#current',\n },\n },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n qa: 'RadioLabel',\n styles: INLINE_LABEL_STYLES,\n});\n\nexport interface CubeRadioProps\n extends BaseProps,\n AriaRadioProps,\n Omit<FieldBaseProps, 'tooltip'>,\n OuterStyleProps {\n 'aria-label'?: string;\n /* The visual type of the radio button /\n type?: 'button' \| 'radio';\n buttonType?: CubeItemProps['type'];\n value?: string;\n / Size of the button (for button type only) /\n size?: Omit<CubeItemProps['size'], 'inline'>;\n / Icon to display (for button type only) /\n icon?: CubeItemProps['icon'];\n / Icon to display on the right (for button type only) /\n rightIcon?: CubeItemProps['rightIcon'];\n / Prefix element (for button type only) /\n prefix?: CubeItemProps['prefix'];\n / Suffix element (for button type only) /\n suffix?: CubeItemProps['suffix'];\n / Description text (for button type only) /\n description?: CubeItemProps['description'];\n / Tooltip configuration (for button type only) /\n tooltip?: CubeItemProps['tooltip'];\n / Keyboard shortcut (for button type only) /\n hotkeys?: CubeItemProps['hotkeys'];\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n children,\n label,\n autoFocus,\n labelStyles,\n labelProps,\n type,\n buttonType,\n size,\n icon,\n rightIcon,\n prefix,\n suffix,\n description,\n tooltip,\n hotkeys,\n 'aria-label': ariaLabel,\n form,\n ...otherProps\n } = props;\n\n label = label \|\| children;\n\n let styles = extractStyles(otherProps, OUTER_STYLES);\n\n labelStyles = {\n ...INLINE_LABEL_STYLES,\n ...labelStyles,\n };\n\n let radioGroupProps = useRadioProvider();\n\n let state = radioGroupProps && radioGroupProps.state;\n let name = radioGroupProps && radioGroupProps.name;\n let contextSize = radioGroupProps?.size;\n let contextButtonType = radioGroupProps?.buttonType;\n let contextType = radioGroupProps?.type;\n let contextIsDisabled = radioGroupProps?.isDisabled;\n\n if (!state) {\n throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n }\n\n // Determine effective type from props or context\n let effectiveType = type ?? contextType ?? 'radio';\n let isButton = effectiveType === 'button' \|\| effectiveType === 'tabs';\n\n // Determine effective size with priority: prop > context > default\n let effectiveSize: CubeItemProps['size'] = (size ??\n contextSize ??\n 'medium') as CubeItemProps['size'];\n\n // Apply size mapping for tabs mode button radios.\n // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n if (effectiveType === 'tabs' && isButton) {\n effectiveSize =\n RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n }\n\n // Determine effective button type\n // In tabs mode, always use 'clear' and ignore buttonType prop.\n let effectiveButtonType: string;\n // When buttonType is 'primary', non-selected radios use 'outline' with a\n // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n // outline+selected look — this is the only place mods.selected intentionally\n // decouples from the aria/isSelected state.\n let forceSelectedMod = false;\n if (effectiveType === 'tabs') {\n effectiveButtonType = 'clear';\n } else {\n const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n if (baseButtonType === 'primary') {\n if (state.selectedValue === props.value) {\n effectiveButtonType = 'primary';\n } else {\n effectiveButtonType = 'outline';\n forceSelectedMod = true;\n }\n } else {\n effectiveButtonType = baseButtonType;\n }\n }\n\n // Use context isDisabled if prop isDisabled is not explicitly set\n let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n let { isFocused, focusProps } = useFocus(\n { isDisabled: effectiveIsDisabled },\n true,\n );\n let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {\n inputProps,\n isDisabled: isRadioDisabled,\n isSelected: isRadioSelected,\n } = useRadio(\n {\n name,\n ...props,\n isDisabled: effectiveIsDisabled,\n },\n state,\n inputRef,\n );\n\n const mods = useMemo(\n () => ({\n checked: isRadioSelected,\n ...getValidationMods({ isInvalid, isValid }),\n disabled: isRadioDisabled,\n hovered: isHovered,\n button: isButton,\n focused: isFocused,\n tabs: effectiveType === 'tabs',\n }),\n [\n isRadioSelected,\n isInvalid,\n isValid,\n isRadioDisabled,\n isHovered,\n isButton,\n isFocused,\n effectiveType,\n ],\n );\n\n // Render button type using Item\n if (isButton) {\n return (\n <RadioButtonElement\n ref={domRef}\n type={effectiveButtonType}\n theme={getValidationTheme(\n 'default',\n { isInvalid, isValid },\n { includeValid: true },\n )}\n size={effectiveSize}\n icon={icon}\n rightIcon={rightIcon}\n prefix={prefix}\n suffix={suffix}\n description={description}\n tooltip={tooltip}\n hotkeys={hotkeys}\n isSelected={isRadioSelected}\n isDisabled={isRadioDisabled}\n mods={{ ...mods, ...(forceSelectedMod ? { selected: true } : {}) }}\n styles={styles}\n {...mergeProps(hoverProps, focusProps)}\n >\n <HiddenInput\n qa={qa \|\| 'Radio'}\n data-input-type=\"radio\"\n aria-label={ariaLabel}\n {...inputProps}\n ref={inputRef}\n form={null}\n mods={{ button: isButton, disabled: isRadioDisabled }}\n />\n {label}\n </RadioButtonElement>\n );\n }\n\n // Render classic radio type\n return (\n <RadioWrapperElement\n styles={styles}\n {...hoverProps}\n ref={domRef}\n mods={mods}\n data-type={type}\n >\n <HiddenInput\n qa={qa \|\| 'Radio'}\n data-input-type=\"radio\"\n aria-label={ariaLabel}\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n mods={{ button: isButton }}\n />\n <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n {RadioCircleElement}\n </RadioNormalElement>\n {label && (\n <RadioLabelElement\n mods={mods}\n styles={labelStyles}\n {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n >\n {label}\n </RadioLabelElement>\n )}\n </RadioWrapperElement>\n );\n}\n\n/\n Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n type: 'button',\n});\n\nconst __Radio = Object.assign(\n _Radio as typeof _Radio & {\n Group: typeof RadioGroup;\n Tabs: typeof Tabs;\n ButtonGroup: typeof ButtonGroup;\n Button: typeof _Radio;\n },\n {\n Group: RadioGroup,\n Tabs,\n ButtonGroup,\n Button: _Radio,\n },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.js","names":["Item","useFocus","useRadio","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n OUTER_STYLES,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n getValidationMods,\n getValidationTheme,\n INLINE_LABEL_STYLES,\n useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n qa: 'RadioButton',\n as: 'label',\n styles: {\n preset: 't3m',\n lineHeight: '1em',\n flexGrow: 1,\n // Same areas as `Item`, but every column is `max-content` — a radio button\n // is sized by its content, not stretched like a list item. The\n // `description` rows have to be repeated here because a plain string would\n // replace `Item`'s whole state map and leave the description without a\n // grid area to land in.\n gridTemplate: {\n '': '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n 'description=inline':\n '\"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n 'description=inline & has-label':\n '\"icon prefix label suffix rightIcon actions\" auto \"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n 'description=block':\n '\"icon prefix label suffix rightIcon actions\" auto \"description description description description description description\" auto / max-content max-content max-content max-content max-content max-content',\n },\n placeContent: 'center',\n shadow: {\n '': false,\n 'tabs & selected': '$item-shadow',\n 'tabs & selected & disabled': false,\n },\n fill: {\n 'selected & tabs': '#surface',\n 'selected & tabs & disabled': '#surface.6',\n },\n color: {\n 'selected & tabs': '#dark',\n 'selected & tabs & disabled': '#dark.3',\n },\n\n // Mirror the ButtonSplit grouping: the corner radius is shared so the\n // first/last items keep only their outer-side radius and middle items go\n // square; a -1bw left margin overlaps adjacent borders into a single\n // continuous edge. The selected button is bumped above its siblings so its\n // brand-tinted border is visible from all four sides — without the bump\n // the right edge of an adjacent sibling would paint over the selected\n // button's left edge (and vice-versa). Hover / focus-visible bump higher\n // still so they always read on top of the selected highlight.\n radius: {\n '': true,\n '!tabs & !:last-child': '1r left',\n '!tabs & !:first-child': '1r right',\n '!tabs & !:first-child & !:last-child': 0,\n },\n margin: {\n '': 0,\n '!tabs & !:first-child': '-1bw left',\n },\n zIndex: {\n '!tabs & selected': 1,\n },\n\n Label: {\n placeSelf: {\n '': 'center start',\n '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n },\n },\n },\n});\n\nconst RadioWrapperElement = tasty({\n as: 'label',\n qa: 'RadioWrapper',\n styles: {\n position: 'relative',\n display: 'grid',\n placeItems: 'center start',\n placeContent: 'center start',\n gap: '1x',\n flow: 'column',\n preset: 'default',\n width: 'min-content',\n radius: true,\n margin: {\n '': '1x right',\n button: '0',\n },\n zIndex: {\n '': 'initial',\n checked: 1,\n },\n flexGrow: 1,\n },\n});\n\nconst RadioNormalElement = tasty({\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n color: {\n '': '#clear',\n checked: '#primary-text',\n 'invalid & checked': '#danger-text',\n 'valid & checked': '#success-text',\n 'disabled \| !checked': '#clear',\n 'disabled & checked': '#dark.12',\n },\n border: {\n '': '#dark-04',\n checked: '#primary-text',\n invalid: '#danger-text.50',\n valid: '#success-text.50',\n disabled: '#dark.12',\n },\n width: '2x',\n height: '2x',\n outline: {\n '': '#primary-text.0 / 1bw',\n focused: '1bw #primary-text / 1bw',\n },\n transition: 'theme',\n whiteSpace: 'nowrap',\n\n RadioCircle: {\n display: 'block',\n radius: 'round',\n width: '1x',\n height: '1x',\n fill: '#current',\n },\n },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n qa: 'RadioLabel',\n styles: INLINE_LABEL_STYLES,\n});\n\n/*\n `Item` props a button-type radio hands straight to the `Item` it renders, so\n * `Radio.Button` accepts the same content and presentation API as an\n * `ItemButton`. Kept as a runtime list so a new `Item` prop only has to be\n * added in one place.\n \n Deliberately absent:\n * - `size`, `type`, `theme`, `isSelected`, `isDisabled`, `mods`, `styles` —\n * owned by the radio (they come from the prop/context/validation resolution\n * below).\n * - `shape` — the radius is owned by the button-group layout below, which keeps\n * only the outer-side radius on the first/last radio so the group reads as one\n * continuous control. Forwarding `shape` would have no effect.\n * - `htmlType`, `as`, `insideWrapper`, `showActions` — internal to `Item` /\n * `ItemButton`.\n * - `actions`, `autoHideActions`, `preserveActionsSpace`,\n * `disableActionsFocus` — a button radio renders as a `<label>`, and a click\n * anywhere inside a label activates its control, so nested action buttons\n * would select the radio (and nested interactive content is invalid inside a\n * label to begin with).\n /\nconst ITEM_PROPS = [\n 'icon',\n 'rightIcon',\n 'prefix',\n 'suffix',\n 'description',\n 'descriptionPlacement',\n 'descriptionProps',\n 'tooltip',\n 'hotkeys',\n 'keyboardShortcutProps',\n 'level',\n 'isLoading',\n 'loadingSlot',\n 'highlight',\n 'highlightCaseSensitive',\n 'highlightStyles',\n 'labelRef',\n] as const;\n\ntype RadioItemProps = Pick<CubeItemProps, (typeof ITEM_PROPS)[number]>;\n\nexport interface CubeRadioProps\n extends BaseProps,\n AriaRadioProps,\n Omit<FieldBaseProps, 'tooltip'>,\n /\n Container style props apply to button-type radios (they style the `Item`\n * the radio renders). A classic radio only reads the outer subset —\n * everything else belongs to its inner circle and label.\n /\n ContainerStyleProps,\n /* All of these apply to button/tabs-type radios only. /\n RadioItemProps {\n 'aria-label'?: string;\n / The visual type of the radio button /\n type?: 'button' \| 'radio';\n buttonType?: CubeItemProps['type'];\n value?: string;\n / Size of the button (for button type only) /\n size?: Omit<CubeItemProps['size'], 'inline'>;\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n children,\n label,\n autoFocus,\n labelStyles,\n labelProps,\n type,\n buttonType,\n size,\n 'aria-label': ariaLabel,\n form,\n ...otherProps\n } = props;\n\n label = label \|\| children;\n\n // Only the props the caller actually passed, so an unset one keeps `Item`'s\n // own default instead of being overridden with `undefined`.\n const itemProps: Record<string, unknown> = {};\n\n for (const itemPropName of ITEM_PROPS) {\n if (itemPropName in props) {\n itemProps[itemPropName] = (props as Record<string, unknown>)[\n itemPropName\n ];\n }\n }\n\n labelStyles = {\n ...INLINE_LABEL_STYLES,\n ...labelStyles,\n };\n\n let radioGroupProps = useRadioProvider();\n\n let state = radioGroupProps && radioGroupProps.state;\n let name = radioGroupProps && radioGroupProps.name;\n let contextSize = radioGroupProps?.size;\n let contextButtonType = radioGroupProps?.buttonType;\n let contextType = radioGroupProps?.type;\n let contextIsDisabled = radioGroupProps?.isDisabled;\n\n if (!state) {\n throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n }\n\n // Determine effective type from props or context\n let effectiveType = type ?? contextType ?? 'radio';\n let isButton = effectiveType === 'button' \|\| effectiveType === 'tabs';\n\n // A button radio is* an `Item`, so it takes the same container style props an\n // `ItemButton` does. A classic radio only exposes the outer subset: the rest\n // would land on the wrapper that holds the circle and the label, where\n // `padding` / `fill` / `preset` mean something entirely different.\n let styles = extractStyles(\n otherProps,\n isButton ? CONTAINER_STYLES : OUTER_STYLES,\n );\n\n // Determine effective size with priority: prop > context > default\n let effectiveSize: CubeItemProps['size'] = (size ??\n contextSize ??\n 'medium') as CubeItemProps['size'];\n\n // Apply size mapping for tabs mode button radios.\n // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n if (effectiveType === 'tabs' && isButton) {\n effectiveSize =\n RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n }\n\n // Determine effective button type\n // In tabs mode, always use 'clear' and ignore buttonType prop.\n let effectiveButtonType: string;\n // When buttonType is 'primary', non-selected radios use 'outline' with a\n // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n // outline+selected look — this is the only place mods.selected intentionally\n // decouples from the aria/isSelected state. Suppressed while disabled: the\n // real selected radio is then painted with the brand-tinted disabled chip\n // (`accent-disabled-surface`), and faking `selected` on its siblings would\n // give them the outline variant of that same chip and erase the distinction.\n let forceSelectedMod = false;\n if (effectiveType === 'tabs') {\n effectiveButtonType = 'clear';\n } else {\n const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n if (baseButtonType === 'primary') {\n if (state.selectedValue === props.value) {\n effectiveButtonType = 'primary';\n } else {\n effectiveButtonType = 'outline';\n forceSelectedMod = true;\n }\n } else {\n effectiveButtonType = baseButtonType;\n }\n }\n\n // Use context isDisabled if prop isDisabled is not explicitly set\n let baseIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n // Loading has to disable the radio here, not inside `Item`. `useRadio` and the\n // `HiddenInput` covering the button own the actual selection, so leaving it to\n // `Item` would render a spinner on an option that still takes clicks and arrow\n // keys. And because this component always passes a resolved `isDisabled` down,\n // an unresolved `isLoading` would additionally read to `Item` as an explicit\n // `isDisabled={false}` and cancel its own loading-disables-the-item rule.\n //\n // Same precedence as `Item` / `ItemButton`: an explicit `isDisabled={false}`\n // still wins over loading. Button-type only — a classic radio has no spinner,\n // so disabling it on `isLoading` would leave no visible reason why.\n let isLoadingButton = isButton && props.isLoading === true;\n let effectiveIsDisabled =\n baseIsDisabled === true \|\| (isLoadingButton && isDisabled !== false);\n\n let { isFocused, focusProps } = useFocus(\n { isDisabled: effectiveIsDisabled },\n true,\n );\n let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {\n inputProps,\n isDisabled: isRadioDisabled,\n isSelected: isRadioSelected,\n } = useRadio(\n {\n name,\n ...props,\n isDisabled: effectiveIsDisabled,\n },\n state,\n inputRef,\n );\n\n const mods = useMemo(\n () => ({\n checked: isRadioSelected,\n ...getValidationMods({ isInvalid, isValid }),\n disabled: isRadioDisabled,\n hovered: isHovered,\n button: isButton,\n focused: isFocused,\n tabs: effectiveType === 'tabs',\n }),\n [\n isRadioSelected,\n isInvalid,\n isValid,\n isRadioDisabled,\n isHovered,\n isButton,\n isFocused,\n effectiveType,\n ],\n );\n\n // Render button type using Item\n if (isButton) {\n return (\n <RadioButtonElement\n ref={domRef}\n type={effectiveButtonType}\n theme={getValidationTheme(\n 'default',\n { isInvalid, isValid },\n { includeValid: true },\n )}\n size={effectiveSize}\n {...itemProps}\n isSelected={isRadioSelected}\n isDisabled={isRadioDisabled}\n mods={{\n ...mods,\n ...(forceSelectedMod && !isRadioDisabled ? { selected: true } : {}),\n }}\n styles={styles}\n {...mergeProps(hoverProps, focusProps)}\n >\n <HiddenInput\n qa={qa \|\| 'Radio'}\n data-input-type=\"radio\"\n aria-label={ariaLabel}\n {...inputProps}\n ref={inputRef}\n form={null}\n mods={{ button: isButton, disabled: isRadioDisabled }}\n />\n {label}\n </RadioButtonElement>\n );\n }\n\n // Render classic radio type\n return (\n <RadioWrapperElement\n styles={styles}\n {...hoverProps}\n ref={domRef}\n mods={mods}\n data-type={type}\n >\n <HiddenInput\n qa={qa \|\| 'Radio'}\n data-input-type=\"radio\"\n aria-label={ariaLabel}\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n mods={{ button: isButton }}\n />\n <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n {RadioCircleElement}\n </RadioNormalElement>\n {label && (\n <RadioLabelElement\n mods={mods}\n styles={labelStyles}\n {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n >\n {label}\n </RadioLabelElement>\n )}\n </RadioWrapperElement>\n );\n}\n\n/*\n Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n type: 'button',\n});\n\nconst __Radio = Object.assign(\n _Radio as typeof _Radio & {\n Group: typeof RadioGroup;\n Tabs: typeof Tabs;\n ButtonGroup: typeof ButtonGroup;\n Button: typeof _Radio;\n },\n {\n Group: RadioGroup,\n Tabs,\n ButtonGroup,\n Button: _Radio,\n },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.162.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";
@@ -29,6 +29,7 @@ const RadioGroupElement = tasty({
 			"": "0",
 			tabs: ".5x"
 		},
+		boxSizing: "border-box",
 		radius: true,
 		fill: {
 			"": "#clear",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormContext, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n extends BaseProps,\n Omit<AriaRadioGroupProps, 'errorMessage'>,\n ContainerStyleProps,\n FieldBaseProps {\n groupStyles?: Styles;\n orientation?: 'horizontal' \| 'vertical';\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /* Size for all radio buttons in the group /\n size?: Omit<CubeItemProps['size'], 'inline'>;\n / Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance /\n buttonType?: CubeItemProps['type'];\n / Visual type for all radios in the group: radio (default), button, or tabs /\n type?: 'radio' \| 'button' \| 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n qa: 'RadioGroup',\n styles: {\n display: 'flex',\n placeItems: 'stretch',\n placeContent: 'stretch',\n flow: {\n '': 'column',\n horizontal: 'row wrap',\n 'horizontal & tabs': 'row',\n },\n padding: {\n '': '0',\n tabs: '.5x',\n },\n radius: true,\n fill: {\n '': '#clear',\n 'tabs \| disabled': '#surface-4',\n },\n width: 'max-content max-content initial',\n flexShrink: 0,\n gap: {\n '': '1x',\n button: 0,\n tabs: '.5x',\n },\n whiteSpace: 'nowrap',\n // Keyboard focus ring on the group, shown only for button/tabs layouts\n // where individual items are visually merged (button-group) or share a\n // single chrome (tabs) — the classic vertical radio list already shows\n // a per-item focus ring on the radio circle.\n outline: {\n '': '1bw #primary-text.0 / 1bw',\n 'focused & (button \| tabs)': '1bw #primary-text / 1bw',\n },\n },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n let orientation = props.orientation;\n\n props = castNullableStringValue(props);\n props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n id,\n isDisabled,\n isRequired,\n labelPosition = 'top',\n isInvalid,\n isValid,\n children,\n styles,\n groupStyles,\n insideForm,\n // orientation, // ignore orientation since it came from the form context\n labelProps: baseLabelProps,\n size,\n buttonType,\n type,\n form,\n ...otherProps\n } = props;\n let domRef = useObjectRef(ref);\n\n styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n let state = useRadioGroupState(props);\n\n // Set default orientation based on type\n if (orientation == null) {\n orientation =\n type === 'button' \|\| type === 'tabs' ? 'horizontal' : 'vertical';\n }\n\n let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n { ...props, orientation },\n state,\n );\n\n // Keyboard-only focus ring on the group container (button/tabs layouts).\n // `within: true` tracks focus on any descendant radio. We read\n // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n // clicks on a radio focus the input but leave `isFocusVisible` false.\n let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n useFocusRing({ within: true });\n\n let radioGroup = (\n <RadioGroupElement\n id={id}\n qa={qa \|\| 'RadioGroup'}\n styles={styles}\n data-input-type=\"radiogroup\"\n data-radio-button-group={type === 'button' ? '' : undefined}\n mods={{\n horizontal: orientation === 'horizontal',\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n button: type === 'button',\n tabs: type === 'tabs',\n focused: isFocusWithinVisible,\n }}\n {...groupFocusProps}\n >\n <FormContext.Provider\n value={{\n isRequired,\n isInvalid,\n isValid,\n isDisabled,\n }}\n >\n <RadioContext.Provider\n value={{\n state,\n name: props.name,\n size,\n buttonType,\n type,\n isDisabled,\n }}\n >\n {children}\n </RadioContext.Provider>\n </FormContext.Provider>\n </RadioGroupElement>\n );\n\n return wrapWithField(radioGroup, domRef, {\n ...props,\n fieldProps,\n labelProps: mergeProps(baseLabelProps, labelProps),\n });\n}\n\n/\n Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;~~EACD~~,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}
1	+ {"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormContext, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n extends BaseProps,\n Omit<AriaRadioGroupProps, 'errorMessage'>,\n ContainerStyleProps,\n FieldBaseProps {\n groupStyles?: Styles;\n orientation?: 'horizontal' \| 'vertical';\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /* Size for all radio buttons in the group /\n size?: Omit<CubeItemProps['size'], 'inline'>;\n / Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance /\n buttonType?: CubeItemProps['type'];\n / Visual type for all radios in the group: radio (default), button, or tabs /\n type?: 'radio' \| 'button' \| 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n qa: 'RadioGroup',\n styles: {\n display: 'flex',\n placeItems: 'stretch',\n placeContent: 'stretch',\n flow: {\n '': 'column',\n horizontal: 'row wrap',\n 'horizontal & tabs': 'row',\n },\n padding: {\n '': '0',\n tabs: '.5x',\n },\n // The tabs layout is the only one with padding, and a caller that gives the\n // group an explicit width (`width: 100%` inside a popover, say) means the\n // box it can see. Without this the padding is added on top and the group\n // overhangs its container by `1x`.\n boxSizing: 'border-box',\n radius: true,\n fill: {\n '': '#clear',\n 'tabs \| disabled': '#surface-4',\n },\n width: 'max-content max-content initial',\n flexShrink: 0,\n gap: {\n '': '1x',\n button: 0,\n tabs: '.5x',\n },\n whiteSpace: 'nowrap',\n // Keyboard focus ring on the group, shown only for button/tabs layouts\n // where individual items are visually merged (button-group) or share a\n // single chrome (tabs) — the classic vertical radio list already shows\n // a per-item focus ring on the radio circle.\n outline: {\n '': '1bw #primary-text.0 / 1bw',\n 'focused & (button \| tabs)': '1bw #primary-text / 1bw',\n },\n },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n let orientation = props.orientation;\n\n props = castNullableStringValue(props);\n props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n id,\n isDisabled,\n isRequired,\n labelPosition = 'top',\n isInvalid,\n isValid,\n children,\n styles,\n groupStyles,\n insideForm,\n // orientation, // ignore orientation since it came from the form context\n labelProps: baseLabelProps,\n size,\n buttonType,\n type,\n form,\n ...otherProps\n } = props;\n let domRef = useObjectRef(ref);\n\n styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n let state = useRadioGroupState(props);\n\n // Set default orientation based on type\n if (orientation == null) {\n orientation =\n type === 'button' \|\| type === 'tabs' ? 'horizontal' : 'vertical';\n }\n\n let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n { ...props, orientation },\n state,\n );\n\n // Keyboard-only focus ring on the group container (button/tabs layouts).\n // `within: true` tracks focus on any descendant radio. We read\n // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n // clicks on a radio focus the input but leave `isFocusVisible` false.\n let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n useFocusRing({ within: true });\n\n let radioGroup = (\n <RadioGroupElement\n id={id}\n qa={qa \|\| 'RadioGroup'}\n styles={styles}\n data-input-type=\"radiogroup\"\n data-radio-button-group={type === 'button' ? '' : undefined}\n mods={{\n horizontal: orientation === 'horizontal',\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n button: type === 'button',\n tabs: type === 'tabs',\n focused: isFocusWithinVisible,\n }}\n {...groupFocusProps}\n >\n <FormContext.Provider\n value={{\n isRequired,\n isInvalid,\n isValid,\n isDisabled,\n }}\n >\n <RadioContext.Provider\n value={{\n state,\n name: props.name,\n size,\n buttonType,\n type,\n isDisabled,\n }}\n >\n {children}\n </RadioContext.Provider>\n </FormContext.Provider>\n </RadioGroupElement>\n );\n\n return wrapWithField(radioGroup, domRef, {\n ...props,\n fieldProps,\n labelProps: mergeProps(baseLabelProps, labelProps),\n });\n}\n\n/\n Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EAKD,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}

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

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