npm - @cube-dev/ui-kit - Versions diffs - 0.147.2 → 0.148.0 - Mend

@cube-dev/ui-kit 0.147.2 → 0.148.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 (563) hide show

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 { ~~useProviderProps } from '../../../provider';\nimport {~~ mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nexport interface CubePasswordInputProps\n extends WithNullableValue<CubeTextInputBaseProps> {}\n\nfunction PasswordInput(\n props: CubePasswordInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n props = castNullableStringValue(props);\n props = ~~useProviderProps(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 ...rest\n } = props;\n let localInputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n let { labelProps, inputProps } = useTextField(\n {\n ...rest,\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":"~~;;;;;;;;;;;;;;;AAkBA~~,SAAS,cACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,~~iBAAiB,MAAM;AAC/B,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,GAAG,SACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAChC,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH;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 { mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nexport interface CubePasswordInputProps\n extends WithNullableValue<CubeTextInputBaseProps> {}\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 ...rest\n } = props;\n let localInputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n let { labelProps, inputProps } = useTextField(\n {\n ...rest,\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":";;;;;;;;;;;;;;AAiBA,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,GAAG,SACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAChC,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH;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"}

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

@@ -1,17 +1,17 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
-import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
-import { useFormProps } from "../../form/Form/Form.js";
+import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
+import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
@@ -20,7 +20,7 @@ import { ListBox } from "../ListBox/ListBox.js";
 import { processSelectionArray } from "../../../utils/selection.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FocusScope, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
@@ -42,8 +42,6 @@ const PickerWrapper = tasty({
 });
 const Picker = forwardRef(function Picker(props, ref) {
 	const { t } = useI18n();
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, { valuePropsMapper: ({ value, onChange }) => {
 		const fieldProps = {};
 		if (props.selectionMode === "multiple") fieldProps.selectedKeys = value || [];
@@ -55,7 +53,7 @@ const Picker = forwardRef(function Picker(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { id, qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
+	let { id, qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = t("picker.all", "All"), items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, onOpenChange, listStateRef: externalListStateRef, ...otherProps } = props;
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	useWarn(isCheckable === false && selectionMode === "single", {
 		key: ["picker-checkable-single-mode"],
@@ -222,13 +220,21 @@ const Picker = forwardRef(function Picker(props, ref) {
 		selectAllLabel
 	]);
 	const showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+	const validationIcon = getValidationIcon({
+		isInvalid,
+		isValid
+	});
+	if (validationIcon) suffix = /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, validationIcon] });
 	const triggerElement = /* @__PURE__ */ jsx(_ItemButton, {
 		ref: triggerRef,
 		"data-popover-trigger": true,
 		id,
 		qa: qa || "PickerTrigger",
 		type,
-		theme: validationState === "invalid" ? "danger" : theme,
+		theme: getValidationTheme(theme, {
+			isInvalid,
+			isValid
+		}),
 		size,
 		shape,
 		isDisabled: isDisabled || isLoading,
@@ -240,7 +246,10 @@ const Picker = forwardRef(function Picker(props, ref) {
 		icon,
 		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemActionProvider, {
 			type,
-			theme: validationState === "invalid" ? "danger" : theme,
+			theme: getValidationTheme(theme, {
+				isInvalid,
+				isValid
+			}),
 			children: /* @__PURE__ */ jsx(ItemAction, {
 				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 				size,
@@ -323,7 +332,8 @@ const Picker = forwardRef(function Picker(props, ref) {
 						focusOnHover,
 						shouldFocusWrap,
 						selectionMode,
-						validationState,
+						isInvalid,
+						isValid,
 						isDisabled,
 						isLoading,
 						stateRef: internalListStateRef,

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 { useProviderProps } from '../../../provider';\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 { useFieldProps, useFormProps, wrapWithField } 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 = useProviderProps(props);\n props = useFormProps(props);\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 validationState,\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 // 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={validationState === 'invalid' ? 'danger' : theme}\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={validationState === 'invalid' ? 'danger' : theme}\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 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 disabledKeys={disabledKeys}\n focusOnHover={focusOnHover}\n shouldFocusWrap={shouldFocusWrap}\n selectionMode={selectionMode}\n validationState={validationState}\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 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 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 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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"}

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

@@ -14,7 +14,6 @@ interface CubeRadioProps extends BaseProps, AriaRadioProps, Omit<FieldBaseProps,
   type?: 'button' | 'radio';
   buttonType?: CubeItemProps['type'];
   value?: string;
-  isInvalid?: boolean;
   size?: Omit<CubeItemProps['size'], 'inline'>;
   icon?: CubeItemProps['icon'];
   rightIcon?: CubeItemProps['rightIcon'];

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

@@ -1,11 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.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";
-import { useProviderProps } from "../../../provider.js";
 import { _Item } from "../../content/Item/Item.js";
+import { getValidationMods, getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { INLINE_LABEL_STYLES } from "../../form/Label.js";
-import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { RADIO_SIZE_MAP } from "../../navigation/Tabs/types.js";
@@ -93,6 +92,7 @@ const RadioNormalElement = tasty({ styles: {
 		"": "#clear",
 		checked: "#primary",
 		"invalid & checked": "#danger-text",
+		"valid & checked": "#success-text",
 		"disabled | !checked": "#clear",
 		"disabled & checked": "#dark.12"
 	},
@@ -100,6 +100,7 @@ const RadioNormalElement = tasty({ styles: {
 		"": "#dark-04",
 		checked: "#primary-text",
 		invalid: "#danger-text.50",
+		valid: "#success-text.50",
 		disabled: "#dark.12"
 	},
 	width: "2x",
@@ -124,10 +125,8 @@ const RadioLabelElement = tasty({
 	styles: INLINE_LABEL_STYLES
 });
 function Radio(props, ref) {
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
-	let { qa, isDisabled, isInvalid, 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, icon, rightIcon, prefix, suffix, description, tooltip, hotkeys, "aria-label": ariaLabel, form, ...otherProps } = props;
 	label = label || children;
 	let styles = extractStyles(otherProps, OUTER_STYLES);
 	labelStyles = {
@@ -170,7 +169,10 @@ function Radio(props, ref) {
 	}, state, inputRef);
 	const mods = useMemo(() => ({
 		checked: isRadioSelected,
-		invalid: !!isInvalid,
+		...getValidationMods({
+			isInvalid,
+			isValid
+		}),
 		disabled: isRadioDisabled,
 		hovered: isHovered,
 		button: isButton,
@@ -179,6 +181,7 @@ function Radio(props, ref) {
 	}), [
 		isRadioSelected,
 		isInvalid,
+		isValid,
 		isRadioDisabled,
 		isHovered,
 		isButton,
@@ -188,7 +191,10 @@ function Radio(props, ref) {
 	if (isButton) return /* @__PURE__ */ jsxs(RadioButtonElement, {
 		ref: domRef,
 		type: effectiveButtonType,
-		theme: isInvalid ? "danger" : "default",
+		theme: getValidationTheme("default", {
+			isInvalid,
+			isValid
+		}, { includeValid: true }),
 		size: effectiveSize,
 		icon,
 		rightIcon,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","names":["Item","useFocus","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 { useProviderProps } from '../../../provider';\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 { INLINE_LABEL_STYLES, useFieldProps, useFormProps } 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',\n 'invalid & checked': '#danger-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 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: 'currentColor',\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 / Whether the radio is invalid /\n isInvalid?: boolean;\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 = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n isDisabled,\n isInvalid,\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 invalid: !!isInvalid,\n disabled: isRadioDisabled,\n hovered: isHovered,\n button: isButton,\n focused: isFocused,\n tabs: effectiveType === 'tabs',\n }),\n [\n isRadioSelected,\n isInvalid,\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={isInvalid ? 'danger' : 'default'}\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","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',\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: 'currentColor',\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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"}

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

@@ -14,7 +14,6 @@ interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'erro
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
-  isInvalid?: boolean;
   size?: Omit<CubeItemProps['size'], 'inline'>;
   buttonType?: CubeItemProps['type'];
   type?: 'radio' | 'button' | 'tabs';

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

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useProviderProps } from "../../../provider.js";
-import { FormContext, useFormProps } from "../../form/Form/Form.js";
+import { FormContext } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
@@ -52,10 +51,8 @@ const RadioGroupElement = tasty({
 function RadioGroup(props, ref) {
 	let orientation = props.orientation;
 	props = castNullableStringValue(props);
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
-	let { qa, id, isDisabled, isRequired, labelPosition = "top", isInvalid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
+	let { qa, id, isDisabled, isRequired, labelPosition = "top", isInvalid, isValid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
 	let domRef = useObjectRef(ref);
 	styles = extractStyles(otherProps, CONTAINER_STYLES, styles);
 	let state = useRadioGroupState(props);
@@ -84,6 +81,7 @@ function RadioGroup(props, ref) {
 			value: {
 				isRequired,
 				isInvalid,
+				isValid,
 				isDisabled
 			},
 			children: /* @__PURE__ */ jsx(RadioContext.Provider, {
@@ -100,7 +98,6 @@ function RadioGroup(props, ref) {
 		})
 	}), domRef, {
 		...props,
-		children: null,
 		fieldProps,
 		labelProps: mergeProps$1(baseLabelProps, labelProps)
 	});

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 { ~~useProviderProps } from '../../../provider';\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 {\n FormContext~~,\n~~ useFieldProps~~,\n useFormProps,\n~~ wrapWithField~~,\n~~} 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 /* Whether the radio group is invalid /\n isInvalid?: boolean;\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 = ~~useProviderProps(props);\n props = useFormProps(props);\n props =~~ useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n let {\n qa,\n id,\n isDisabled,\n isRequired,\n labelPosition = 'top',\n isInvalid,\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 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 ~~children: null,\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":"~~;;;;;;;;;;;;;;;;;AAkDA~~,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,~~iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,~~cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,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;~~AA0ChC~~,QAAO,~~cAvCL~~,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;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACH;GACL,EAGW,QAAQ;EACvC,GAAG;EACH~~,UAAU~~;~~EACV;~~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 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"}

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

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

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

@@ -106,8 +106,6 @@ interface CubeSearchComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyle
   isLoading?: boolean;
   /** Delay in milliseconds before the loading indicator is shown. Defaults to 1000. */
   loadingDelay?: number;
-  /** Validation state of the search combobox */
-  validationState?: 'valid' | 'invalid';
   /** Keys of disabled items */
   disabledKeys?: Iterable<Key$1>;
   /** Whether to flip the popover placement */