npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-2ef7bcb → 0.0.0-canary-daad5bf - Mend

@cube-dev/ui-kit 0.0.0-canary-2ef7bcb → 0.0.0-canary-daad5bf

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

Files changed (649) hide show

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -10,19 +10,19 @@ import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
-import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _CollectionItem, filterCollectionItemProps } from "../../CollectionItem.js";
 import { _Item } from "../../content/Item/Item.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { StyledDivider, StyledSection, StyledSectionHeading } from "../../actions/Menu/styled.js";
 import { generateRandomId } from "../../../utils/random.js";
+import { ItemActionIcon, ItemActionsWrapper } from "../../actions/ItemActionsWrapper.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { getValidationMods } 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 { TriggerActions } from "../TriggerActions.js";
+import { TRIGGER_ACTIONS_PROPS, TriggerActions } from "../TriggerActions.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import React, { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -196,26 +196,21 @@ function Select(props, ref) {
 		prefix
 	]);
 	suffix = useMemo(() => {
-		if (!suffix && !validationIcon && !actions) return null;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			suffix,
-			validationIcon,
-			actions ? /* @__PURE__ */ jsx(TriggerActions, {
-				type,
-				theme,
-				isDisabled: isDisabled || isLoading,
-				children: actions
-			}) : null
-		] });
-	}, [
-		suffix,
-		validationIcon,
+		if (!suffix && !validationIcon) return null;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, validationIcon] });
+	}, [suffix, validationIcon]);
+	const hasCustomRightIcon = rightIcon !== void 0;
+	const triggerRightIcon = hasCustomRightIcon ? isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon : void 0;
+	const triggerActions = /* @__PURE__ */ jsx(TriggerActions, {
 		actions,
-		type,
-		theme,
-		isDisabled,
-		isLoading
-	]);
+		builtIn: hasCustomRightIcon ? null : showClearButton ? /* @__PURE__ */ jsx(ItemAction, {
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+			size,
+			qa: "SelectClearButton",
+			mods: { pressed: false },
+			onPress: clearValue
+		}) : isLoading ? /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(LoadingIcon, {}) }) : /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(DirectionIcon, { to: state.isOpen ? "up" : "down" }) })
+	});
 	return wrapWithField(/* @__PURE__ */ jsxs(SelectWrapperElement, {
 		mods: modifiers,
 		styles,
@@ -229,43 +224,45 @@ function Select(props, ref) {
 				label: props.label,
 				name: props.name
 			}),
-			/* @__PURE__ */ jsx(_Item, {
-				as: "button",
-				qa: qa || "Select",
-				"data-input-type": "select",
-				...mergeProps$1(buttonProps, hoverProps, focusProps),
-				ref: triggerRef,
-				"data-popover-trigger": true,
-				styles: {
-					...inputStyles,
-					...triggerStyles
-				},
+			/* @__PURE__ */ jsx(ItemActionsWrapper, {
+				type,
 				theme,
 				size,
-				shape,
-				htmlType: "button",
-				type,
+				isDisabled: isDisabled || isLoading,
 				mods: modifiers,
-				prefix,
-				suffix,
-				icon,
-				rightIcon: rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemActionProvider, {
-					type,
+				actions: triggerActions,
+				actionsProps: TRIGGER_ACTIONS_PROPS,
+				children: ({ showActions }) => /* @__PURE__ */ jsx(_Item, {
+					actions: true,
+					insideWrapper: true,
+					as: "button",
+					qa: qa || "Select",
+					"data-input-type": "select",
+					...mergeProps$1(buttonProps, hoverProps, focusProps),
+					ref: triggerRef,
+					"data-popover-trigger": true,
+					showActions,
+					styles: {
+						...inputStyles,
+						...triggerStyles
+					},
 					theme,
-					children: /* @__PURE__ */ jsx(ItemAction, {
-						icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-						qa: "SelectClearButton",
-						"data-trigger-action": "",
-						mods: { pressed: false },
-						onPress: clearValue
-					})
-				}) : isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DirectionIcon, { to: state.isOpen ? "up" : "down" }),
-				description: triggerDescription,
-				descriptionPlacement,
-				hotkeys,
-				tooltip,
-				labelProps: valueProps,
-				children: state.selectedItem ? state.selectedItem.rendered : placeholder ? /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder }) : null
+					size,
+					shape,
+					htmlType: "button",
+					type,
+					mods: modifiers,
+					prefix,
+					suffix,
+					icon,
+					rightIcon: triggerRightIcon,
+					description: triggerDescription,
+					descriptionPlacement,
+					hotkeys,
+					tooltip,
+					labelProps: valueProps,
+					children: state.selectedItem ? state.selectedItem.rendered : placeholder ? /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder }) : null
+				})
 			}),
 			/* @__PURE__ */ jsx(ListBoxPopup, {
 				...menuProps,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","names":["Item","useFocus","mergeProps","Text","ListDivider","ListSectionWrapper","ListSectionHeading","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/Select/Select.tsx"],"sourcesContent":["import {\n AriaLabelingProps,\n CollectionBase,\n DOMRef,\n Key,\n} from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport React, {\n cloneElement,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport {\n AriaSelectProps,\n DismissButton,\n FocusScope,\n HiddenSelect,\n useButton,\n useHover,\n useListBox,\n useListBoxSection,\n useOption,\n useOverlay,\n useOverlayPosition,\n useSelect,\n} from 'react-aria';\nimport { Section as BaseSection, useSelectState } from 'react-stately';\nimport { CubeTooltipProviderProps } from 'src/components/overlays/Tooltip/TooltipProvider';\n\nimport { useEvent } from '../../../_internal';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps } from '../../../shared/index';\nimport { generateRandomId } from '../../../utils/random';\nimport {\n forwardRefWithGenerics,\n mergeProps,\n useCombinedRefs,\n} from '../../../utils/react/index';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport {\n StyledDivider as ListDivider,\n StyledSectionHeading as ListSectionHeading,\n StyledSection as ListSectionWrapper,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationMods,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { DisplayTransition } from '../../helpers';\nimport { Portal } from '../../portal';\nimport { TriggerActions } from '../TriggerActions';\n\nimport type { Props } from '../../../props';\n\nconst SelectWrapperElement = tasty({\n qa: 'SelectWrapper',\n styles: {\n display: 'grid',\n position: 'relative',\n radius: true,\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n 'theme=special': '#clear',\n },\n color: {\n '': '#dark.85',\n focused: '#dark.85',\n invalid: '#danger-text',\n disabled: '#disabled-surface-text',\n },\n },\n});\n\nexport const ListBoxElement = tasty({\n qa: 'ListBox',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '1bw',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n scrollbar: 'styled',\n // The listbox is programmatically focused when the popover opens\n // (so keyboard nav works immediately) but it should never display a\n // focus ring — only the focused option does. Without this, the\n // browser draws its native outline around the whole listbox when\n // it receives focus.\n outline: 0,\n },\n});\n\n// Use Item for options to unify item visuals and reduce custom styling\nconst OptionItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n qa: 'Option',\n styles: {\n '$inline-compensation': '0px',\n },\n});\n\nconst SelectOverlayWrapper = tasty({\n qa: 'SelectOverlayWrapper',\n styles: {\n position: 'absolute',\n zIndex: 1000,\n },\n});\n\nconst OverlayElement = tasty({\n qa: 'SelectOverlay',\n styles: {\n width: 'min $overlay-min-width',\n display: 'grid',\n gridRows: '1sf',\n height: 'initial max-content (50vh - 5x)',\n overflow: 'auto',\n fill: '#surface',\n radius: '1cr',\n shadow: true,\n padding: '.5x',\n border: true,\n boxSizing: 'border-box',\n transition:\n 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n translate: {\n '': '0 0',\n 'open & [data-placement=\"top\"]': '0 0',\n '!open & [data-placement=\"top\"]': '0 1x',\n 'open & ([data-placement=\"bottom\"] \| ![data-placement])': '0 0',\n '!open & ([data-placement=\"bottom\"] \| ![data-placement])': '0 -1x',\n },\n transformOrigin: {\n '': 'top center',\n '[data-placement=\"top\"]': 'bottom center',\n },\n scale: {\n '': '1 1',\n '!open': '1 .9',\n },\n opacity: {\n '': 1,\n '!open': 0.001,\n },\n },\n});\n\nexport interface CubeSelectBaseProps<T>\n extends BasePropsWithoutChildren,\n AriaLabelingProps,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n CollectionBase<T>,\n Omit<\n AriaSelectProps<T>,\n \| 'errorMessage'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'onSelectionChange'\n > {\n /** The currently selected key in the collection (controlled). /\n selectedKey?: Key \| null;\n /* The initial selected key in the collection (uncontrolled). /\n defaultSelectedKey?: Key;\n /* Handler that is called when the selection changes. /\n onSelectionChange?: (key: Key \| null) => void;\n icon?: ReactElement;\n rightIcon?: ReactNode;\n prefix?: ReactNode;\n suffix?: ReactNode;\n /* Description text for the trigger. Note: Different from field-level description. /\n triggerDescription?: ReactNode;\n descriptionPlacement?: 'inline' \| 'block';\n /* Keyboard shortcut that triggers the select when pressed /\n hotkeys?: string;\n /\n Tooltip content and configuration for the trigger:\n * - string: simple tooltip text\n * - true: auto tooltip on overflow (shows selected value as tooltip when truncated)\n * - object: advanced configuration with optional auto property\n /\n tooltip?:\n \| string\n \| boolean\n \| (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n triggerRef?: RefObject<HTMLButtonElement>;\n isLoading?: boolean;\n loadingIndicator?: ReactNode;\n overlayOffset?: number;\n hideTrigger?: boolean;\n /\n @deprecated Use `triggerStyles` instead\n /\n inputStyles?: Styles;\n optionStyles?: Styles;\n triggerStyles?: Styles;\n listBoxStyles?: Styles;\n overlayStyles?: Styles;\n direction?: 'top' \| 'bottom';\n shouldFlip?: boolean;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n inputProps?: Props;\n type?: 'outline' \| 'outline-2' \| 'clear' \| 'primary' \| (string & {});\n /\n Shape of the trigger's border radius.\n * - `card` - Card shape with larger border radius (`1cr`)\n * - `button` - Button shape with default border radius (default)\n * - `sharp` - Sharp corners with no border radius (`0`)\n * - `pill` - Pill shape with fully rounded ends (`round`)\n * @default \"button\"\n /\n shape?: 'card' \| 'button' \| 'sharp' \| 'pill';\n suffixPosition?: 'before' \| 'after';\n theme?: 'default' \| 'special';\n /* Whether the select is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Custom actions rendered inside the trigger, to the left of the built-in\n * clear button and dropdown caret. Use `Select.Action` so they match the\n * trigger's size and theme.\n \n Pressing one runs its handler without opening or closing the popover —\n * including while the popover is open. Actions follow the trigger's disabled\n * state but NOT `isReadOnly`, since a read-only field can still host an\n * action that does not change the value; pass `isDisabled` yourself for one\n * that does.\n /\n actions?: ReactNode;\n /* Callback called when the popover open state changes /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {\n popoverRef?: RefObject<HTMLInputElement>;\n /* The ref for the list box. */\n listBoxRef?: RefObject<HTMLElement>;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n placeholder?: string;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nfunction Select<T extends object>(\n props: CubeSelectProps<T>,\n ref: DOMRef<HTMLDivElement>,\n) {\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n }),\n });\n\n let {\n qa,\n label,\n extra,\n icon,\n rightIcon,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n prefix,\n isDisabled = props.isLoading \|\| false,\n autoFocus,\n inputProps,\n triggerRef,\n popoverRef,\n listBoxRef,\n isLoading,\n loadingIndicator,\n overlayOffset = 8,\n inputStyles,\n triggerStyles,\n optionStyles,\n listBoxStyles,\n overlayStyles,\n suffix,\n actions,\n message,\n triggerDescription,\n descriptionPlacement,\n hotkeys,\n direction = 'bottom',\n shouldFlip = true,\n containerPadding = 8,\n placeholder,\n tooltip,\n size = 'medium',\n shape,\n styles,\n type = 'outline',\n theme = 'default',\n labelSuffix,\n suffixPosition = 'before',\n isClearable,\n onOpenChange,\n form,\n ...otherProps\n } = props;\n let state = useSelectState(props);\n\n // Generate a unique ID for this select instance\n const selectId = useMemo(() => generateRandomId(), []);\n\n // Call onOpenChange when open state changes\n useEffect(() => {\n onOpenChange?.(state.isOpen);\n }, [state.isOpen]);\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n triggerRef = useCombinedRefs(triggerRef);\n popoverRef = useCombinedRefs(popoverRef);\n listBoxRef = useCombinedRefs(listBoxRef);\n\n usePopoverSync({\n menuId: selectId,\n isOpen: state.isOpen,\n onClose: () => state.close(),\n triggerRef: triggerRef as RefObject<HTMLElement \| null>,\n containerRef: popoverRef as RefObject<HTMLElement \| null>,\n });\n\n let { labelProps, triggerProps, valueProps, menuProps } = useSelect(\n props,\n state,\n triggerRef,\n );\n\n let { overlayProps, placement } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef: popoverRef,\n scrollRef: listBoxRef,\n placement: `${direction} end`,\n shouldFlip: shouldFlip,\n isOpen: state.isOpen,\n onClose: state.close,\n offset: overlayOffset,\n containerPadding: containerPadding,\n });\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n // Get props for the button based on the trigger props from useSelect\n let { buttonProps } = useButton(triggerProps, triggerRef);\n\n let validationIcon = getValidationIcon({ isInvalid, isValid });\n\n // Clear button logic\n let hasSelection = state.selectedItem != null;\n let showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n // Clear function\n let clearValue = useEvent(() => {\n props.onSelectionChange?.(null);\n state.setSelectedKey(null);\n // Close the popup if it's open\n if (state.isOpen) {\n state.close();\n }\n // Return focus to the trigger for better UX\n triggerRef.current?.focus?.();\n\n props.onClear?.();\n });\n\n let triggerWidth = triggerRef?.current?.offsetWidth;\n\n const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n disabled: isDisabled,\n loading: isLoading,\n hovered: isHovered,\n focused: isFocused,\n placeholder: showPlaceholder,\n prefix: !!prefix,\n suffix: true,\n }),\n [\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n isHovered,\n isFocused,\n showPlaceholder,\n prefix,\n ],\n );\n\n suffix = useMemo(() => {\n if (!suffix && !validationIcon && !actions) {\n return null;\n }\n\n return (\n <>\n {suffix}\n {validationIcon}\n {actions ? (\n // The `suffix` slot sits between the label and `rightIcon`, so actions\n // placed at its end land immediately left of the built-in clear button\n // and caret — which is where custom actions belong.\n //\n // The RAW theme, like the clear button below — this trigger paints\n // with the raw theme and surfaces validation through the wrapper.\n <TriggerActions\n type={type}\n theme={theme}\n isDisabled={isDisabled \|\| isLoading}\n >\n {actions}\n </TriggerActions>\n ) : null}\n </>\n );\n }, [suffix, validationIcon, actions, type, theme, isDisabled, isLoading]);\n\n let selectField = (\n <SelectWrapperElement\n mods={modifiers}\n styles={styles}\n data-size={size}\n data-type={type}\n data-theme={theme}\n >\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n label={props.label}\n name={props.name}\n />\n <Item\n as=\"button\"\n qa={qa \|\| 'Select'}\n data-input-type=\"select\"\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n ref={triggerRef}\n data-popover-trigger\n styles={{ ...inputStyles, ...triggerStyles }}\n theme={theme}\n size={size}\n shape={shape}\n // Ensure this button never submits a surrounding form in tests or runtime\n htmlType=\"button\"\n // Preserve visual variant via data attribute instead of conflicting with HTML attribute\n type={type}\n mods={modifiers}\n prefix={prefix}\n suffix={suffix}\n icon={icon}\n rightIcon={\n rightIcon !== undefined ? (\n rightIcon\n ) : showClearButton ? (\n <ItemActionProvider\n type={type}\n // Forwarded so a `special` trigger tells its action which SURFACE it\n // sits on: `CURRENT_ITEM_STYLES` only steps up to the stronger alpha\n // ramp on `theme=special`, and against that dark purple base the\n // light-scheme alphas are almost invisible. It travels through\n // context rather than as a prop because the prop is what opts an\n // action out of `current` back to `clear`, and this one needs to stay\n // `current` so its label keeps inheriting.\n //\n // The RAW theme, unlike `Picker` / `FilterPicker` which forward\n // `getValidationTheme(...)`: this trigger is painted with the raw\n // theme too (see above), and surfaces validation through the wrapper\n // rather than by switching theme. Forwarding must always match what\n // the trigger paints with.\n theme={theme}\n >\n <ItemAction\n icon={<CloseIcon />}\n qa=\"SelectClearButton\"\n data-trigger-action=\"\"\n // No explicit `type`/`theme`: the default `current` type paints\n // from the trigger's own inherited text color, so the button\n // matches whatever the field is showing instead of one palette.\n //\n // NOTE: this trigger keeps NEUTRAL label text when invalid, so\n // the button reads neutral there too. `Picker` and `FilterPicker`\n // are also `Item`-based but do tint theirs, which is the actual\n // inconsistency to fix — in `Select`, not here.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n </ItemActionProvider>\n ) : isLoading ? (\n <LoadingIcon />\n ) : (\n <DirectionIcon to={state.isOpen ? 'up' : 'down'} />\n )\n }\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n hotkeys={hotkeys}\n tooltip={tooltip}\n labelProps={valueProps}\n >\n {state.selectedItem ? (\n state.selectedItem.rendered\n ) : placeholder ? (\n <Text.Placeholder>{placeholder}</Text.Placeholder>\n ) : null}\n </Item>\n <ListBoxPopup\n {...menuProps}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n overlayProps={overlayProps}\n placement={placement}\n state={state}\n listBoxStyles={listBoxStyles}\n overlayStyles={overlayStyles}\n optionStyles={optionStyles}\n minWidth={triggerWidth}\n triggerRef={triggerRef}\n isDisabled={isDisabled}\n />\n </SelectWrapperElement>\n );\n\n return wrapWithField<Omit<CubeSelectProps<T>, 'children'>>(\n selectField,\n ref,\n mergeProps(\n {\n ...props,\n },\n { labelProps },\n ),\n );\n}\n\nexport function ListBoxPopup({\n state,\n popoverRef,\n listBoxRef,\n listBoxStyles,\n overlayStyles,\n optionStyles,\n overlayProps: parentOverlayProps,\n shouldUseVirtualFocus = false,\n placement,\n minWidth,\n size = 'small',\n triggerRef,\n isDisabled,\n ...otherProps\n}) {\n // For trigger+popover components, map 'small' size to 'medium' for list items\n // while preserving 'medium' and 'large' sizes\n const listItemSize = size === 'small' ? 'medium' : size;\n\n // Get props for the listbox\n let { listBoxProps } = useListBox(\n {\n autoFocus: state.focusStrategy \|\| true,\n shouldUseVirtualFocus,\n ...otherProps,\n },\n state,\n listBoxRef,\n );\n\n // Handle events that should cause the popup to close,\n // e.g. blur, clicking outside, or pressing the escape key.\n let { overlayProps } = useOverlay(\n {\n onClose: () => state.close(),\n shouldCloseOnBlur: true,\n isOpen: state.isOpen,\n isDismissable: true,\n shouldCloseOnInteractOutside: (el) => {\n // The trigger owns interactive controls of its own — the clear button\n // and any custom `actions`. They live INSIDE the trigger element, so\n // the lookup below would read them as a press on our own trigger and\n // dismiss, swallowing the press: the first press on `Reset` while the\n // list was open only closed the list and the action never ran. Same\n // guard as `DialogTrigger`, which `Picker` / `FilterPicker` go through.\n if (el.closest('[data-trigger-action]')) return false;\n\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) {\n if (el.closest('[data-popover-keep]')) return false;\n // Plain interactive controls (Button, ItemButton) opt in via\n // `data-popover-dismiss` to dismiss us without losing their click\n // to useOverlay's stopPropagation. Schedule the close after the\n // click finishes so the button's onPress runs first.\n if (el.closest('[data-popover-dismiss]')) {\n setTimeout(() => state.close(), 0);\n return false;\n }\n return true;\n }\n // If the same trigger that opened this select was clicked, allow closing\n if (menuTriggerEl === triggerRef?.current) return true;\n // Otherwise, don't close (let event mechanism handle it)\n return false;\n },\n },\n popoverRef,\n );\n\n // Extract primary placement direction for consistent styling\n const placementDirection = placement?.split(' ')[0] \|\| 'bottom';\n\n // Wrap in <FocusScope> so that focus is restored back to the\n // trigger when the popup is closed. In addition, add hidden\n // <DismissButton> components at the start and end of the list\n // to allow screen reader users to dismiss the popup easily.\n //\n // `autoFocus` is required because `ListBoxPopup` is rendered\n // unconditionally (not gated on `state.isOpen`), so by the time the\n // popover actually opens, react-aria's `useSelectableCollection`\n // autoFocus has already been consumed (its useRef captures the\n // initial value on mount, when the listbox isn't in the DOM yet).\n // Setting `autoFocus` on the FocusScope itself runs each time the\n // FocusScope mounts (every time the popover opens, since the inner\n // tree is unmounted between opens) and explicitly focuses the\n // first tabbable element (the listbox). This also registers the\n // FocusScope as the active scope, so an outer contained Dialog\n // FocusScope (e.g. a popover Dialog wrapping the Select) correctly\n // recognises focus moving into the Select popover and doesn't yank\n // it back to the trigger.\n return (\n <Portal>\n <DisplayTransition isShown={state.isOpen && !isDisabled}>\n {({ phase, isShown, ref: transitionRef }) => (\n <SelectOverlayWrapper\n {...overlayProps}\n {...parentOverlayProps}\n ref={popoverRef}\n style={parentOverlayProps?.style}\n >\n <OverlayElement\n ref={transitionRef}\n data-placement={placementDirection}\n data-phase={phase}\n mods={{\n open: isShown,\n }}\n styles={overlayStyles}\n style={{\n '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',\n }}\n >\n <FocusScope autoFocus restoreFocus>\n <DismissButton onDismiss={() => state.close()} />\n {(() => {\n const renderedItems: React.ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of state.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <ListDivider\n key={`divider-${String(item.key)}`}\n as=\"li\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <SelectSection\n key={item.key}\n item={item}\n state={state}\n optionStyles={optionStyles}\n sectionStyles={undefined}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={listItemSize}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n item={item}\n state={state}\n styles={optionStyles}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={listItemSize}\n />,\n );\n }\n }\n\n return (\n <ListBoxElement\n styles={listBoxStyles}\n {...listBoxProps}\n ref={listBoxRef}\n >\n {renderedItems}\n </ListBoxElement>\n );\n })()}\n <DismissButton onDismiss={() => state.close()} />\n </FocusScope>\n </OverlayElement>\n </SelectOverlayWrapper>\n )}\n </DisplayTransition>\n </Portal>\n );\n}\n\nfunction Option({ item, state, styles, shouldUseVirtualFocus, size }) {\n let ref = useRef<HTMLLIElement>(null);\n let isDisabled = state.disabledKeys.has(item.key);\n let isSelected = state.selectionManager.isSelected(item.key);\n let isVirtualFocused = state.selectionManager.focusedKey === item.key;\n\n let { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n shouldUseVirtualFocus,\n },\n state,\n ref,\n );\n\n // Handle focus events, so we can apply highlighted\n // style to the focused option\n let { isFocused, focusProps } = useFocus({ isDisabled });\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n return (\n <OptionItem\n {...mergeProps(optionProps, focusProps, filteredItemProps)}\n ref={ref}\n mods={{\n listboxitem: true,\n selected: isSelected,\n focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,\n disabled: isDisabled,\n pressed: isPressed,\n }}\n data-size={size}\n styles={{\n ...(styles as Styles),\n ...(filteredItemProps.styles as Styles),\n }}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n defaultTooltipPlacement=\"right\"\n >\n {item.rendered}\n </OptionItem>\n );\n}\n\ninterface SelectSectionProps<T> {\n item: any; // react-stately Node<T>\n state: any; // TreeState<T>\n optionStyles?: Styles;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n shouldUseVirtualFocus?: boolean;\n size?: string;\n}\n\nfunction SelectSection<T>(props: SelectSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n headingStyles,\n sectionStyles,\n shouldUseVirtualFocus,\n size,\n } = props;\n\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <ListSectionWrapper {...itemProps} styles={sectionStyles}>\n {heading && (\n <ListSectionHeading\n {...headingProps}\n size={size}\n styles={{ ...headingStyles, '$inline-compensation': '0px' }}\n >\n {heading}\n </ListSectionHeading>\n )}\n <ListBoxElement {...groupProps} mods={{ section: true }}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n item={node}\n state={state}\n styles={optionStyles}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={size}\n />\n ))}\n </ListBoxElement>\n </ListSectionWrapper>\n );\n}\n\nconst _Select = forwardRefWithGenerics(Select);\n\n(_Select as any).cubeInputType = 'Select';\n\ntype SectionComponent = typeof BaseSection;\n\nconst SelectSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nconst __Select = Object.assign(\n _Select as typeof _Select & {\n Item: typeof CollectionItem;\n Section: typeof SelectSectionComponent;\n Action: typeof ItemAction;\n },\n {\n Item: CollectionItem,\n Section: SelectSectionComponent,\n Action: ItemAction,\n },\n);\n\n(__Select as any).displayName = 'Select';\n\nexport { __Select as Select };\n\nexport type { AriaSelectProps };\nexport { useSelectState };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","names":["Item","useFocus","TriggerIcon","mergeProps","Text","ListDivider","ListSectionWrapper","ListSectionHeading","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/Select/Select.tsx"],"sourcesContent":["import {\n AriaLabelingProps,\n CollectionBase,\n DOMRef,\n Key,\n} from '@react-types/shared';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport React, {\n cloneElement,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport {\n AriaSelectProps,\n DismissButton,\n FocusScope,\n HiddenSelect,\n useButton,\n useHover,\n useListBox,\n useListBoxSection,\n useOption,\n useOverlay,\n useOverlayPosition,\n useSelect,\n} from 'react-aria';\nimport { Section as BaseSection, useSelectState } from 'react-stately';\nimport { CubeTooltipProviderProps } from 'src/components/overlays/Tooltip/TooltipProvider';\n\nimport { useEvent } from '../../../_internal';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps } from '../../../shared/index';\nimport { generateRandomId } from '../../../utils/random';\nimport {\n forwardRefWithGenerics,\n mergeProps,\n useCombinedRefs,\n} from '../../../utils/react/index';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions';\nimport { ItemActionsWrapper } from '../../actions/ItemActionsWrapper';\nimport {\n StyledDivider as ListDivider,\n StyledSectionHeading as ListSectionHeading,\n StyledSection as ListSectionWrapper,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationMods,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { DisplayTransition } from '../../helpers';\nimport { Portal } from '../../portal';\nimport {\n TRIGGER_ACTIONS_PROPS,\n TriggerActions,\n TriggerIcon,\n} from '../TriggerActions';\n\nimport type { Props } from '../../../props';\n\nconst SelectWrapperElement = tasty({\n qa: 'SelectWrapper',\n styles: {\n display: 'grid',\n position: 'relative',\n radius: true,\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n 'theme=special': '#clear',\n },\n color: {\n '': '#dark.85',\n focused: '#dark.85',\n invalid: '#danger-text',\n disabled: '#disabled-surface-text',\n },\n },\n});\n\nexport const ListBoxElement = tasty({\n qa: 'ListBox',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '1bw',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n scrollbar: 'styled',\n // The listbox is programmatically focused when the popover opens\n // (so keyboard nav works immediately) but it should never display a\n // focus ring — only the focused option does. Without this, the\n // browser draws its native outline around the whole listbox when\n // it receives focus.\n outline: 0,\n },\n});\n\n// Use Item for options to unify item visuals and reduce custom styling\nconst OptionItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n qa: 'Option',\n styles: {\n '$inline-compensation': '0px',\n },\n});\n\nconst SelectOverlayWrapper = tasty({\n qa: 'SelectOverlayWrapper',\n styles: {\n position: 'absolute',\n zIndex: 1000,\n },\n});\n\nconst OverlayElement = tasty({\n qa: 'SelectOverlay',\n styles: {\n width: 'min $overlay-min-width',\n display: 'grid',\n gridRows: '1sf',\n height: 'initial max-content (50vh - 5x)',\n overflow: 'auto',\n fill: '#surface',\n radius: '1cr',\n shadow: true,\n padding: '.5x',\n border: true,\n boxSizing: 'border-box',\n transition:\n 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n translate: {\n '': '0 0',\n 'open & [data-placement=\"top\"]': '0 0',\n '!open & [data-placement=\"top\"]': '0 1x',\n 'open & ([data-placement=\"bottom\"] \| ![data-placement])': '0 0',\n '!open & ([data-placement=\"bottom\"] \| ![data-placement])': '0 -1x',\n },\n transformOrigin: {\n '': 'top center',\n '[data-placement=\"top\"]': 'bottom center',\n },\n scale: {\n '': '1 1',\n '!open': '1 .9',\n },\n opacity: {\n '': 1,\n '!open': 0.001,\n },\n },\n});\n\nexport interface CubeSelectBaseProps<T>\n extends BasePropsWithoutChildren,\n AriaLabelingProps,\n BaseStyleProps,\n OuterStyleProps,\n ColorStyleProps,\n Omit<FieldBaseProps, 'tooltip'>,\n CollectionBase<T>,\n Omit<\n AriaSelectProps<T>,\n \| 'errorMessage'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'onSelectionChange'\n > {\n /** The currently selected key in the collection (controlled). /\n selectedKey?: Key \| null;\n /* The initial selected key in the collection (uncontrolled). /\n defaultSelectedKey?: Key;\n /* Handler that is called when the selection changes. /\n onSelectionChange?: (key: Key \| null) => void;\n icon?: ReactElement;\n rightIcon?: ReactNode;\n prefix?: ReactNode;\n suffix?: ReactNode;\n /* Description text for the trigger. Note: Different from field-level description. /\n triggerDescription?: ReactNode;\n descriptionPlacement?: 'inline' \| 'block';\n /* Keyboard shortcut that triggers the select when pressed /\n hotkeys?: string;\n /\n Tooltip content and configuration for the trigger:\n * - string: simple tooltip text\n * - true: auto tooltip on overflow (shows selected value as tooltip when truncated)\n * - object: advanced configuration with optional auto property\n /\n tooltip?:\n \| string\n \| boolean\n \| (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n triggerRef?: RefObject<HTMLButtonElement>;\n isLoading?: boolean;\n loadingIndicator?: ReactNode;\n overlayOffset?: number;\n hideTrigger?: boolean;\n /\n @deprecated Use `triggerStyles` instead\n /\n inputStyles?: Styles;\n optionStyles?: Styles;\n triggerStyles?: Styles;\n listBoxStyles?: Styles;\n overlayStyles?: Styles;\n direction?: 'top' \| 'bottom';\n shouldFlip?: boolean;\n /* Minimum padding in pixels between the popover and viewport edges /\n containerPadding?: number;\n inputProps?: Props;\n type?: 'outline' \| 'outline-2' \| 'clear' \| 'primary' \| (string & {});\n /\n Shape of the trigger's border radius.\n * - `card` - Card shape with larger border radius (`1cr`)\n * - `button` - Button shape with default border radius (default)\n * - `sharp` - Sharp corners with no border radius (`0`)\n * - `pill` - Pill shape with fully rounded ends (`round`)\n * @default \"button\"\n /\n shape?: 'card' \| 'button' \| 'sharp' \| 'pill';\n suffixPosition?: 'before' \| 'after';\n theme?: 'default' \| 'special';\n /* Whether the select is clearable using a clear button in the rightIcon slot /\n isClearable?: boolean;\n /* Callback called when the clear button is pressed /\n onClear?: () => void;\n /\n Custom actions rendered inside the trigger, to the left of the built-in\n * clear button and dropdown caret. Use `Select.Action` so they match the\n * trigger's size and theme.\n \n Pressing one runs its handler without opening or closing the popover —\n * including while the popover is open. Actions follow the trigger's disabled\n * state but NOT `isReadOnly`, since a read-only field can still host an\n * action that does not change the value; pass `isDisabled` yourself for one\n * that does.\n /\n actions?: ReactNode;\n /* Callback called when the popover open state changes /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {\n popoverRef?: RefObject<HTMLInputElement>;\n /* The ref for the list box. /\n listBoxRef?: RefObject<HTMLElement>;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n placeholder?: string;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nfunction Select<T extends object>(\n props: CubeSelectProps<T>,\n ref: DOMRef<HTMLDivElement>,\n) {\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n }),\n });\n\n let {\n qa,\n label,\n extra,\n icon,\n rightIcon,\n labelStyles,\n isRequired,\n necessityIndicator,\n isInvalid,\n isValid,\n prefix,\n isDisabled = props.isLoading \|\| false,\n autoFocus,\n inputProps,\n triggerRef,\n popoverRef,\n listBoxRef,\n isLoading,\n loadingIndicator,\n overlayOffset = 8,\n inputStyles,\n triggerStyles,\n optionStyles,\n listBoxStyles,\n overlayStyles,\n suffix,\n actions,\n message,\n triggerDescription,\n descriptionPlacement,\n hotkeys,\n direction = 'bottom',\n shouldFlip = true,\n containerPadding = 8,\n placeholder,\n tooltip,\n size = 'medium',\n shape,\n styles,\n type = 'outline',\n theme = 'default',\n labelSuffix,\n suffixPosition = 'before',\n isClearable,\n onOpenChange,\n form,\n ...otherProps\n } = props;\n let state = useSelectState(props);\n\n // Generate a unique ID for this select instance\n const selectId = useMemo(() => generateRandomId(), []);\n\n // Call onOpenChange when open state changes\n useEffect(() => {\n onOpenChange?.(state.isOpen);\n }, [state.isOpen]);\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n triggerRef = useCombinedRefs(triggerRef);\n popoverRef = useCombinedRefs(popoverRef);\n listBoxRef = useCombinedRefs(listBoxRef);\n\n usePopoverSync({\n menuId: selectId,\n isOpen: state.isOpen,\n onClose: () => state.close(),\n triggerRef: triggerRef as RefObject<HTMLElement \| null>,\n containerRef: popoverRef as RefObject<HTMLElement \| null>,\n });\n\n let { labelProps, triggerProps, valueProps, menuProps } = useSelect(\n props,\n state,\n triggerRef,\n );\n\n let { overlayProps, placement } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef: popoverRef,\n scrollRef: listBoxRef,\n placement: `${direction} end`,\n shouldFlip: shouldFlip,\n isOpen: state.isOpen,\n onClose: state.close,\n offset: overlayOffset,\n containerPadding: containerPadding,\n });\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n // Get props for the button based on the trigger props from useSelect\n let { buttonProps } = useButton(triggerProps, triggerRef);\n\n let validationIcon = getValidationIcon({ isInvalid, isValid });\n\n // Clear button logic\n let hasSelection = state.selectedItem != null;\n let showClearButton =\n isClearable && hasSelection && !isDisabled && !props.isReadOnly;\n\n // Clear function\n let clearValue = useEvent(() => {\n props.onSelectionChange?.(null);\n state.setSelectedKey(null);\n // Close the popup if it's open\n if (state.isOpen) {\n state.close();\n }\n // Return focus to the trigger for better UX\n triggerRef.current?.focus?.();\n\n props.onClear?.();\n });\n\n let triggerWidth = triggerRef?.current?.offsetWidth;\n\n const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n disabled: isDisabled,\n loading: isLoading,\n hovered: isHovered,\n focused: isFocused,\n placeholder: showPlaceholder,\n prefix: !!prefix,\n suffix: true,\n }),\n [\n isInvalid,\n isValid,\n isDisabled,\n isLoading,\n isHovered,\n isFocused,\n showPlaceholder,\n prefix,\n ],\n );\n\n suffix = useMemo(() => {\n if (!suffix && !validationIcon) {\n return null;\n }\n\n return (\n <>\n {suffix}\n {validationIcon}\n </>\n );\n }, [suffix, validationIcon]);\n\n // A caller's `rightIcon` keeps the `rightIcon` slot: it accepts a render\n // function resolved against the trigger's mods, which only that slot does, and\n // it is also what a caller's `RightIcon` styles target. It replaces the\n // built-in control, exactly as before.\n const hasCustomRightIcon = rightIcon !== undefined;\n const triggerRightIcon = hasCustomRightIcon ? (\n isLoading ? (\n <LoadingIcon />\n ) : (\n rightIcon\n )\n ) : undefined;\n\n // Everything trailing that is NOT the caller's own icon goes into the actions\n // run — a sibling of the `<button>`, so the clear button is no longer nested\n // inside one. See `TriggerActions`.\n const triggerActions = (\n <TriggerActions\n actions={actions}\n builtIn={\n hasCustomRightIcon ? null : showClearButton ? (\n <ItemAction\n icon={<CloseIcon />}\n size={size}\n qa=\"SelectClearButton\"\n // No explicit `type`/`theme`: the default `current` type paints\n // from the trigger's own inherited text color, so the button\n // matches whatever the field is showing instead of one palette.\n //\n // NOTE: this trigger keeps NEUTRAL label text when invalid, so\n // the button reads neutral there too. `Picker` and `FilterPicker`\n // are also `Item`-based but do tint theirs, which is the actual\n // inconsistency to fix — in `Select`, not here.\n mods={{ pressed: false }}\n onPress={clearValue}\n />\n ) : isLoading ? (\n <TriggerIcon>\n <LoadingIcon />\n </TriggerIcon>\n ) : (\n <TriggerIcon>\n <DirectionIcon to={state.isOpen ? 'up' : 'down'} />\n </TriggerIcon>\n )\n }\n />\n );\n\n let selectField = (\n <SelectWrapperElement\n mods={modifiers}\n styles={styles}\n data-size={size}\n data-type={type}\n data-theme={theme}\n >\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n label={props.label}\n name={props.name}\n />\n {/\n The trigger's trailing controls are rendered as a SIBLING of the\n `<button>` — the same layout `ItemButton` uses for its actions, shared\n through `ItemActionsWrapper`. `Select` builds its trigger from `Item`\n rather than `ItemButton` because `useSelect`/`useButton` already own the\n button props, so it reaches for the wrapper directly.\n\n The RAW theme, unlike `Picker` / `FilterPicker` which forward\n `getValidationTheme(...)`: this trigger is painted with the raw theme too\n and surfaces validation through `SelectWrapperElement` rather than by\n switching theme. What the wrapper hands its actions must always match\n what the trigger paints with.\n */}\n <ItemActionsWrapper\n type={type}\n theme={theme}\n size={size}\n isDisabled={isDisabled \|\| isLoading}\n mods={modifiers}\n actions={triggerActions}\n actionsProps={TRIGGER_ACTIONS_PROPS}\n >\n {({ showActions }) => (\n <Item\n actions\n insideWrapper\n as=\"button\"\n qa={qa \|\| 'Select'}\n data-input-type=\"select\"\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n ref={triggerRef}\n data-popover-trigger\n showActions={showActions}\n styles={{ ...inputStyles, ...triggerStyles }}\n theme={theme}\n size={size}\n shape={shape}\n // Ensure this button never submits a surrounding form in tests or runtime\n htmlType=\"button\"\n // Preserve visual variant via data attribute instead of conflicting with HTML attribute\n type={type}\n mods={modifiers}\n prefix={prefix}\n suffix={suffix}\n icon={icon}\n rightIcon={triggerRightIcon}\n description={triggerDescription}\n descriptionPlacement={descriptionPlacement}\n hotkeys={hotkeys}\n tooltip={tooltip}\n labelProps={valueProps}\n >\n {state.selectedItem ? (\n state.selectedItem.rendered\n ) : placeholder ? (\n <Text.Placeholder>{placeholder}</Text.Placeholder>\n ) : null}\n </Item>\n )}\n </ItemActionsWrapper>\n <ListBoxPopup\n {...menuProps}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n overlayProps={overlayProps}\n placement={placement}\n state={state}\n listBoxStyles={listBoxStyles}\n overlayStyles={overlayStyles}\n optionStyles={optionStyles}\n minWidth={triggerWidth}\n triggerRef={triggerRef}\n isDisabled={isDisabled}\n />\n </SelectWrapperElement>\n );\n\n return wrapWithField<Omit<CubeSelectProps<T>, 'children'>>(\n selectField,\n ref,\n mergeProps(\n {\n ...props,\n },\n { labelProps },\n ),\n );\n}\n\nexport function ListBoxPopup({\n state,\n popoverRef,\n listBoxRef,\n listBoxStyles,\n overlayStyles,\n optionStyles,\n overlayProps: parentOverlayProps,\n shouldUseVirtualFocus = false,\n placement,\n minWidth,\n size = 'small',\n triggerRef,\n isDisabled,\n ...otherProps\n}) {\n // For trigger+popover components, map 'small' size to 'medium' for list items\n // while preserving 'medium' and 'large' sizes\n const listItemSize = size === 'small' ? 'medium' : size;\n\n // Get props for the listbox\n let { listBoxProps } = useListBox(\n {\n autoFocus: state.focusStrategy \|\| true,\n shouldUseVirtualFocus,\n ...otherProps,\n },\n state,\n listBoxRef,\n );\n\n // Handle events that should cause the popup to close,\n // e.g. blur, clicking outside, or pressing the escape key.\n let { overlayProps } = useOverlay(\n {\n onClose: () => state.close(),\n shouldCloseOnBlur: true,\n isOpen: state.isOpen,\n isDismissable: true,\n shouldCloseOnInteractOutside: (el) => {\n // The trigger owns interactive controls of its own — the clear button\n // and any custom `actions`. They live INSIDE the trigger element, so\n // the lookup below would read them as a press on our own trigger and\n // dismiss, swallowing the press: the first press on `Reset` while the\n // list was open only closed the list and the action never ran. Same\n // guard as `DialogTrigger`, which `Picker` / `FilterPicker` go through.\n if (el.closest('[data-trigger-action]')) return false;\n\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) {\n if (el.closest('[data-popover-keep]')) return false;\n // Plain interactive controls (Button, ItemButton) opt in via\n // `data-popover-dismiss` to dismiss us without losing their click\n // to useOverlay's stopPropagation. Schedule the close after the\n // click finishes so the button's onPress runs first.\n if (el.closest('[data-popover-dismiss]')) {\n setTimeout(() => state.close(), 0);\n return false;\n }\n return true;\n }\n // If the same trigger that opened this select was clicked, allow closing\n if (menuTriggerEl === triggerRef?.current) return true;\n // Otherwise, don't close (let event mechanism handle it)\n return false;\n },\n },\n popoverRef,\n );\n\n // Extract primary placement direction for consistent styling\n const placementDirection = placement?.split(' ')[0] \|\| 'bottom';\n\n // Wrap in <FocusScope> so that focus is restored back to the\n // trigger when the popup is closed. In addition, add hidden\n // <DismissButton> components at the start and end of the list\n // to allow screen reader users to dismiss the popup easily.\n //\n // `autoFocus` is required because `ListBoxPopup` is rendered\n // unconditionally (not gated on `state.isOpen`), so by the time the\n // popover actually opens, react-aria's `useSelectableCollection`\n // autoFocus has already been consumed (its useRef captures the\n // initial value on mount, when the listbox isn't in the DOM yet).\n // Setting `autoFocus` on the FocusScope itself runs each time the\n // FocusScope mounts (every time the popover opens, since the inner\n // tree is unmounted between opens) and explicitly focuses the\n // first tabbable element (the listbox). This also registers the\n // FocusScope as the active scope, so an outer contained Dialog\n // FocusScope (e.g. a popover Dialog wrapping the Select) correctly\n // recognises focus moving into the Select popover and doesn't yank\n // it back to the trigger.\n return (\n <Portal>\n <DisplayTransition isShown={state.isOpen && !isDisabled}>\n {({ phase, isShown, ref: transitionRef }) => (\n <SelectOverlayWrapper\n {...overlayProps}\n {...parentOverlayProps}\n ref={popoverRef}\n style={parentOverlayProps?.style}\n >\n <OverlayElement\n ref={transitionRef}\n data-placement={placementDirection}\n data-phase={phase}\n mods={{\n open: isShown,\n }}\n styles={overlayStyles}\n style={{\n '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',\n }}\n >\n <FocusScope autoFocus restoreFocus>\n <DismissButton onDismiss={() => state.close()} />\n {(() => {\n const renderedItems: React.ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of state.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <ListDivider\n key={`divider-${String(item.key)}`}\n as=\"li\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <SelectSection\n key={item.key}\n item={item}\n state={state}\n optionStyles={optionStyles}\n sectionStyles={undefined}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={listItemSize}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n item={item}\n state={state}\n styles={optionStyles}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={listItemSize}\n />,\n );\n }\n }\n\n return (\n <ListBoxElement\n styles={listBoxStyles}\n {...listBoxProps}\n ref={listBoxRef}\n >\n {renderedItems}\n </ListBoxElement>\n );\n })()}\n <DismissButton onDismiss={() => state.close()} />\n </FocusScope>\n </OverlayElement>\n </SelectOverlayWrapper>\n )}\n </DisplayTransition>\n </Portal>\n );\n}\n\nfunction Option({ item, state, styles, shouldUseVirtualFocus, size }) {\n let ref = useRef<HTMLLIElement>(null);\n let isDisabled = state.disabledKeys.has(item.key);\n let isSelected = state.selectionManager.isSelected(item.key);\n let isVirtualFocused = state.selectionManager.focusedKey === item.key;\n\n let { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n shouldUseVirtualFocus,\n },\n state,\n ref,\n );\n\n // Handle focus events, so we can apply highlighted\n // style to the focused option\n let { isFocused, focusProps } = useFocus({ isDisabled });\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n return (\n <OptionItem\n {...mergeProps(optionProps, focusProps, filteredItemProps)}\n ref={ref}\n mods={{\n listboxitem: true,\n selected: isSelected,\n focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,\n disabled: isDisabled,\n pressed: isPressed,\n }}\n data-size={size}\n styles={{\n ...(styles as Styles),\n ...(filteredItemProps.styles as Styles),\n }}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n defaultTooltipPlacement=\"right\"\n >\n {item.rendered}\n </OptionItem>\n );\n}\n\ninterface SelectSectionProps<T> {\n item: any; // react-stately Node<T>\n state: any; // TreeState<T>\n optionStyles?: Styles;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n shouldUseVirtualFocus?: boolean;\n size?: string;\n}\n\nfunction SelectSection<T>(props: SelectSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n headingStyles,\n sectionStyles,\n shouldUseVirtualFocus,\n size,\n } = props;\n\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <ListSectionWrapper {...itemProps} styles={sectionStyles}>\n {heading && (\n <ListSectionHeading\n {...headingProps}\n size={size}\n styles={{ ...headingStyles, '$inline-compensation': '0px' }}\n >\n {heading}\n </ListSectionHeading>\n )}\n <ListBoxElement {...groupProps} mods={{ section: true }}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n item={node}\n state={state}\n styles={optionStyles}\n shouldUseVirtualFocus={shouldUseVirtualFocus}\n size={size}\n />\n ))}\n </ListBoxElement>\n </ListSectionWrapper>\n );\n}\n\nconst _Select = forwardRefWithGenerics(Select);\n\n(_Select as any).cubeInputType = 'Select';\n\ntype SectionComponent = typeof BaseSection;\n\nconst SelectSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nconst __Select = Object.assign(\n _Select as typeof _Select & {\n Item: typeof CollectionItem;\n Section: typeof SelectSectionComponent;\n Action: typeof ItemAction;\n },\n {\n Item: CollectionItem,\n Section: SelectSectionComponent,\n Action: ItemAction,\n },\n);\n\n(__Select as any).displayName = 'Select';\n\nexport { __Select as Select };\n\nexport type { AriaSelectProps };\nexport { useSelectState };\n"],"mappings":"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"}

package/dist/components/fields/Slider/Gradation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/HueSlider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/RangeSlider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";

package/dist/components/fields/Slider/SliderBase.js CHANGED Viewed

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

package/dist/components/fields/Slider/SliderThumb.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderThumbElement } from "./elements.js";

package/dist/components/fields/Slider/SliderTrack.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";

package/dist/components/fields/Slider/elements.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

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

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

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

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

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

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

package/dist/components/fields/TextInput/TextInputBase.js CHANGED Viewed

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

package/dist/components/fields/TextInput/useAutoSizeTextArea.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

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

@@ -1,64 +1,23 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
-import { ItemActionProvider } from "../actions/ItemActionContext.js";
-import { tasty } from "@tenphi/tasty";
-import { jsx } from "react/jsx-runtime";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
+import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
+import { jsxs } from "react/jsx-runtime";
 import { ClearPressResponder } from "@react-aria/interactions";
 //#region src/components/fields/TriggerActions.tsx
 /**
-* `Item`'s own `Actions` slot stops these so a press on an action never reaches
-* the row behind it. The custom actions of a picker trigger sit in the `suffix`
-* slot instead — left of the built-in clear button and caret, which live in
-* `rightIcon` — so they have to repeat the guard themselves. See
-* `ACTIONS_EVENT_HANDLERS` in `Item`.
-*/
-const STOP_PROPAGATION_HANDLERS = {
-	onClick: (e) => e.stopPropagation(),
-	onPointerDown: (e) => e.stopPropagation(),
-	onPointerUp: (e) => e.stopPropagation(),
-	onMouseDown: (e) => e.stopPropagation(),
-	onMouseUp: (e) => e.stopPropagation(),
-	onKeyDown: (e) => {
-		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
-	}
-};
-const TriggerActionsElement = tasty({
-	qa: "TriggerActions",
-	styles: {
-		display: "grid",
-		flow: "column",
-		placeItems: "center",
-		placeContent: "center",
-		gap: "1bw",
-		margin: "0 (1bw - $side-padding) 0 0",
-		"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
-		"$side-padding": "(($size - $action-size - 2bw) / 2)"
-	}
-});
-/**
-* Custom actions rendered inside a `Select` / `Picker` / `FilterPicker` trigger,
-* to the left of the built-in clear button and dropdown caret.
-*
-* `ClearPressResponder` is the point of this wrapper. These triggers open their
-* popover through a `PressResponder` that `DialogTrigger` puts in context, and
-* that context reaches *every* `usePress` below it — so without this, pressing a
-* custom action (or the built-in clear button) would also toggle the popover.
+* Spread on the run's container. It marks every control in the run as belonging
+* to the trigger, which is what lets an overlay's dismiss predicate tell
+* "pressed one of this trigger's own actions" from "pressed outside" — without
+* it, running an action while the popover is open dismissed the popover and
+* swallowed the press. See `DialogTrigger`'s
+* `resolveShouldCloseOnInteractOutside` and `Select`'s `useOverlay` predicate.
 */
+const TRIGGER_ACTIONS_PROPS = { "data-trigger-action": "" };
 function TriggerActions(props) {
-	const { children, type, theme, isDisabled } = props;
-	return /* @__PURE__ */ jsx(ClearPressResponder, { children: /* @__PURE__ */ jsx(TriggerActionsElement, {
-		"data-element": "TriggerActions",
-		"data-trigger-action": "",
-		...STOP_PROPAGATION_HANDLERS,
-		children: /* @__PURE__ */ jsx(ItemActionProvider, {
-			type,
-			theme,
-			isDisabled,
-			children
-		})
-	}) });
+	const { actions, builtIn } = props;
+	return /* @__PURE__ */ jsxs(ClearPressResponder, { children: [actions, builtIn] });
 }
 //#endregion
-export { TriggerActions };
+export { TRIGGER_ACTIONS_PROPS, TriggerActions };
 //# sourceMappingURL=TriggerActions.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TriggerActions.js","names":[],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\~~nimport { tasty } from '@tenphi/tasty';\~~n\nimport { ~~ItemActionProvider~~ } from '../actions/~~ItemActionContext~~';\n\nimport type { ~~KeyboardEvent~~, ~~MouseEvent, PointerEvent,~~ ReactNode } from 'react';\n\n~~/\~~n ~~Why~~ ~~this~~ ~~file exists rather than `ItemButton`'s `actions` slot, which is~~ the\n * kit's ~~purpose-built~~ ~~home~~ ~~for~~ ~~exactly~~ ~~this:~~ ~~that~~ ~~slot~~ ~~renders its~~ run as an\n * ~~absolutely~~ ~~positioned SIBLING of~~ the ~~button~~, so a ~~row~~ ~~action~~ ~~cannot~~ ~~activate\n * the row. A picker~~'s ~~built-ins~~ ~~have~~ ~~to be rightmost, so putting custom actions~~\n * ~~to their left means the caret joins that run — and a caret outside the button~~\n * ~~stops~~ ~~opening~~ ~~the~~ ~~popover,~~ ~~`pointer-events: none` included (the hit just\n * lands on the~~ actions ~~container, which is outside the button too). `Select` is~~\n * a second blocker: it builds its trigger from ~~`Item as=\"button~~\"`, ~~not~~\n * ~~`ItemButton`.\n \n Migrating the three triggers properly is tracked in~~\n * ~~https://github.com/cube-js/cube-ui-kit/issues/1398~~, ~~which~~ ~~carries~~ ~~the\n~~ * ~~measurements~~ — ~~a migrated `Picker`~~ is ~~pixel-identical~~ to ~~this~~ ~~one~~ — and ~~the~~\n * ~~`Item`~~ ~~changes~~ ~~it needs~~. ~~Until~~ then the run is built here.\n /\n\n/\n `~~Item~~`'s ~~own `Actions` slot stops these so a press on an action never reaches~~\n * ~~the row behind it. The custom actions of a picker trigger sit in the~~ `~~suffix`\n~~ * slot instead — left of the built-in clear button and caret, which live in\n * `~~rightIcon~~` — so they have to repeat the guard themselves. See\n * `~~ACTIONS_EVENT_HANDLERS~~` ~~in `Item`.\~~n /\~~nconst~~ ~~STOP_PROPAGATION_HANDLERS~~ = {\n onClick: (e: MouseEvent) => e.stopPropagation(),\n onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === '~~Enter~~' ~~\|\| e.key ===~~ ' '~~) {\n e.stopPropagation();\n }\n }~~,\n}~~;\n\nconst~~ ~~TriggerActionsElement~~ ~~= tasty({\~~n ~~qa: 'TriggerActions',\n styles: {~~\n ~~display: 'grid',\~~n ~~flow:~~ ~~'column',\n placeItems:~~ ~~'center',\n placeContent:~~ ~~'center',\n //~~ ~~What~~ ~~separates~~ ~~two~~ ~~adjacent actions everywhere else in the kit — see\n //~~ `~~ItemButton~~`'s ~~`ActionsWrapper`~~ ~~and~~ `~~Item~~`'s ~~own~~ `~~Actions~~` ~~slot.\n gap~~: ~~'1bw',\n~~\n // ~~The~~ ~~built-in~~ ~~clear~~ ~~button~~ / ~~caret~~ ~~is NOT a sibling~~ in ~~this~~ ~~run:~~ it ~~lives\n //~~ in the ~~`RightIcon` slot, a `($size - 2bw)` square that centres a~~\n // ~~`$action-size`~~ ~~control~~ ~~and~~ so ~~already~~ ~~puts~~ ~~`$side-padding` to its left~~.\n // ~~Left~~ ~~alone~~ ~~that~~ ~~reads~~ as a ~~much~~ ~~wider~~ ~~gap~~ ~~before~~ the ~~built-in than~~\n // ~~between~~ ~~two~~ ~~custom~~ ~~actions~~ ~~(`.5x`~~ vs ~~`1bw`~~ ~~at `medium`). Pull~~ the ~~run\n //~~ ~~right~~ by ~~the~~ ~~difference~~ so ~~the whole trailing cluster~~ is ~~evenly spaced,\~~n // ~~and~~ ~~`$side-padding`~~ ~~survives~~ ~~only~~ ~~where~~ it ~~belongs~~ — at ~~the~~ ~~outer~~ ~~edge,\n // between the built-~~in ~~and~~ ~~the trigger's border.\~~n ~~//\n //~~ ~~This~~ ~~assumes~~ ~~the `RightIcon` slot is occupied, which~~ it is ~~for~~ ~~every\n //~~ ~~trigger state (loading, clear,~~ caret). A ~~caller~~ ~~who empties it with\n //~~ `~~rightIcon={null}`~~ ~~gets~~ the run ~~sitting~~ ~~`$side-padding~~ - ~~1bw` closer to~~\n // ~~the~~ ~~border,~~ ~~inside~~ ~~the~~ ~~padding~~ ~~`Suffix`~~ ~~regains~~ ~~when~~ ~~`has-right-icon`\n //~~ ~~goes~~ ~~away.\n margin:~~ '0 ~~(1bw~~ - ~~$side-padding)~~ 0 ~~0',\n~~\n // ~~`$size`~~ is ~~inherited~~ ~~from~~ the ~~trigger;~~ ~~these~~ ~~two~~ ~~are~~ ~~re-derived~~ ~~from~~ it\n // ~~the~~ ~~same~~ ~~way~~ ~~`Item`'s~~ `~~Actions~~` slot ~~does, because `ItemAction` defines\n // them on itself and a parent cannot read a child's custom property~~.\n ~~'$action-size':~~ ~~'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n '$side-padding': '(($size - $action-size - 2bw) / 2)',\n },\n});\n\~~nexport interface TriggerActionsProps {\n /* The ~~actions~~ to ~~render~~. /\n children: ReactNode;\n /* ~~The~~ ~~`type`~~ ~~the~~ ~~host~~ ~~trigger is painted with~~. /\n ~~type~~?: ~~string~~;\n /\n The ~~theme~~ ~~the~~ ~~host~~ ~~trigger~~ ~~is PAINTED with~~, ~~which~~ ~~is not always its `theme`\n * prop — a validation state overrides it~~. ~~Actions default to the `current`\n * theme and read this only to know which surface they sit on.\n~~ /\n ~~theme~~?: ~~string~~;\n /* ~~Whether~~ ~~the~~ ~~host~~ ~~trigger~~ is ~~disabled (or loading~~, ~~which~~ ~~reads~~ as ~~disabled). /\n isDisabled?: boolean~~;\n}\n~~\n/\n~~ Custom actions rendered inside a `~~Select` / `~~Picker` / `FilterPicker` ~~trigger,\n * to the left of the built-in clear button and dropdown caret.\n \n `ClearPressResponder` is the point of this wrapper. These triggers~~ open their\n * popover through a `PressResponder` that `DialogTrigger` puts in context, and\n * that context reaches every `usePress` below it — so without this, pressing a\n * custom action (or the built-in clear button) would also toggle the popover.\n */\nexport ~~function~~ ~~TriggerActions(props:~~ ~~TriggerActionsProps)~~ {\n ~~const~~ { ~~children,~~ ~~type,~~ ~~theme,~~ ~~isDisabled~~ } = ~~props;\~~n\n return (\n <ClearPressResponder>\n ~~<TriggerActionsElement\n data-element=\"TriggerActions\"\n data-trigger-action=\"\"\n~~ {~~...STOP_PROPAGATION_HANDLERS~~}\n ~~>\n <ItemActionProvider type=~~{~~type~~} ~~theme={theme} isDisabled={isDisabled}>\n {children}~~\n ~~</ItemActionProvider>\n </TriggerActionsElement>\n~~ </ClearPressResponder>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;~~AA+BA~~,~~MAAM~~,4BAA4B;CAChC,UAAU,MAAkB,EAAE,iBAAiB;CAC/C,gBAAgB,MAAoB,EAAE,iBAAiB;CACvD,cAAc,MAAoB,EAAE,iBAAiB;CACrD,cAAc,MAAkB,EAAE,iBAAiB;CACnD,YAAY,MAAkB,EAAE,iBAAiB;CACjD,YAAY,MAAqB;AAC/B,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,GAAE,iBAAiB;;CAGxB;AAED,MAAM,wBAAwB,~~MAAM;CAClC~~,~~IAAI;CACJ~~,~~QAAQ~~;~~EACN~~,~~SAAS;EACT,MAAM;EACN,YAAY;EACZ,cAAc;EAGd,KAAK;EAgBL,QAAQ;EAKR,gBAAgB;EAChB,iBAAiB;EAClB;CACF,CAAC;;;;;;;;;;AA0BF,~~SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,~~UAAU~~,~~MAAM,OAAO,eAAe~~;~~AAE9C~~,QACE,~~oBAAC~~,~~iCACC~~,~~oBAAC;EACC~~,~~gBAAa;EACb,uBAAoB;EACpB,GAAI;YAEJ,oBAAC;GAAyB;GAAa;GAAmB;GACvD;IACkB;GACC,GACJ~~"}
1	+ {"version":3,"file":"TriggerActions.js","names":[],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\n\nimport { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\n/*\n Spread on the run's container. It marks every control in the run as belonging\n * to the trigger, which is what lets an overlay's dismiss predicate tell\n * \"pressed one of this trigger's own actions\" from \"pressed outside\" — without\n * it, running an action while the popover is open dismissed the popover and\n * swallowed the press. See `DialogTrigger`'s\n * `resolveShouldCloseOnInteractOutside` and `Select`'s `useOverlay` predicate.\n /\nexport const TRIGGER_ACTIONS_PROPS = {\n 'data-trigger-action': '',\n} as HTMLAttributes<HTMLDivElement>;\n\n/\n The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n \n It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n /\nexport interface TriggerActionsProps {\n /* The caller's custom actions. They come first — leftmost in LTR. /\n actions?: ReactNode;\n /* The built-in control: spinner, clear button, or caret. /\n builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n const { actions, builtIn } = props;\n\n // `Picker` and `FilterPicker` open their popover through a `PressResponder`\n // that `DialogTrigger` puts in context, and that context reaches every*\n // `usePress` below it — so without this, pressing a custom action (or the\n // built-in clear button) would also toggle the popover. `Select` drives its\n // own trigger and needs no such guard, but shares this run rather than keeping\n // a second one that differs by a wrapper with no DOM.\n return (\n <ClearPressResponder>\n {actions}\n {builtIn}\n </ClearPressResponder>\n );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,wBAAwB,EACnC,uBAAuB,IACxB;AAsBD,SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,SAAS,YAAY;AAQ7B,QACE,qBAAC,kCACE,SACA,WACmB"}

package/dist/components/fields/color/ColorPanel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";

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

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

package/dist/components/form/FieldWrapper/FieldWrapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

package/dist/components/form/Form/Field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-daad5bf | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Form.js CHANGED Viewed

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