npm - @cube-dev/ui-kit - Versions diffs - 0.168.0 → 0.169.0 - Mend

@cube-dev/ui-kit 0.168.0 → 0.169.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 (680) hide show

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, DirectionIcon, LoadingIcon } from '../../../icons/index';\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';\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 /* 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 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 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 // 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 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 },\n {\n Item: CollectionItem,\n Section: SelectSectionComponent,\n },\n);\n\n(__Select as any).displayName = 'Select';\n\nexport { __Select as Select };\n\nexport type { AriaSelectProps };\nexport { useSelectState };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,UAAU;GACV,iBAAiB;GAClB;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACT,SAAS;GACT,UAAU;GACX;EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,KAAK;EACL,MAAM;EACN,QAAQ;EACR,SAAS;EACT,WAAW;EACX,WAAW;EAMX,SAAS;EACV;CACF,CAAC;AAGF,MAAM,aAAa,MAAMA,OAAM;CAC7B,IAAI;CACJ,qBAAqB;CACrB,IAAI;CACJ,QAAQ,EACN,wBAAwB,OACzB;CACF,CAAC;AAEF,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,UAAU;EACV,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YACE;EACF,WAAW;GACT,IAAI;GACJ,mCAAiC;GACjC,oCAAkC;GAClC,4DAA0D;GAC1D,6DAA2D;GAC5D;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACF;CACF,CAAC;AAwFF,MAAM,cAAc;CAAC,GAAG;CAAa,GAAG;CAAc,GAAG;CAAa;AAEtE,SAAS,OACP,OACA,KACA;AACA,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,aAAa,SAAS;GACtB,mBAAmB;GACpB;EACF,CAAC;CAEF,IAAI,EACF,IACA,OACA,OACA,MACA,WACA,aACA,YACA,oBACA,WACA,SACA,QACA,aAAa,MAAM,aAAa,OAChC,WACA,YACA,YACA,YACA,YACA,WACA,kBACA,gBAAgB,GAChB,aACA,eACA,cACA,eACA,eACA,QACA,SACA,oBACA,sBACA,SACA,YAAY,UACZ,aAAa,MACb,mBAAmB,GACnB,aACA,SACA,OAAO,UACP,OACA,QACA,OAAO,WACP,QAAQ,WACR,aACA,iBAAiB,UACjB,aACA,cACA,MACA,GAAG,eACD;CACJ,IAAI,QAAQ,eAAe,MAAM;CAGjC,MAAM,WAAW,cAAc,kBAAkB,EAAE,EAAE,CAAC;AAGtD,iBAAgB;AACd,iBAAe,MAAM,OAAO;IAC3B,CAAC,MAAM,OAAO,CAAC;AAElB,UAAS,cAAc,YAAY,aAAa,OAAO;AAEvD,OAAM,gBAAgB,IAAI;AAC1B,cAAa,gBAAgB,WAAW;AACxC,cAAa,gBAAgB,WAAW;AACxC,cAAa,gBAAgB,WAAW;AAExC,gBAAe;EACb,QAAQ;EACR,QAAQ,MAAM;EACd,eAAe,MAAM,OAAO;EAChB;EACZ,cAAc;EACf,CAAC;CAEF,IAAI,EAAE,YAAY,cAAc,YAAY,cAAc,UACxD,OACA,OACA,WACD;CAED,IAAI,EAAE,cAAc,cAAc,mBAAmB;EACnD,WAAW;EACX,YAAY;EACZ,WAAW;EACX,WAAW,GAAG,UAAU;EACZ;EACZ,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ;EACU;EACnB,CAAC;CAEF,IAAI,EAAE,WAAW,eAAeC,WAAS,EAAE,YAAY,EAAE,KAAK;CAC9D,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAGxD,IAAI,EAAE,gBAAgB,UAAU,cAAc,WAAW;CAEzD,IAAI,iBAAiB,kBAAkB;EAAE;EAAW;EAAS,CAAC;CAG9D,IAAI,eAAe,MAAM,gBAAgB;CACzC,IAAI,kBACF,eAAe,gBAAgB,CAAC,cAAc,CAAC,MAAM;CAGvD,IAAI,aAAa,eAAe;AAC9B,QAAM,oBAAoB,KAAK;AAC/B,QAAM,eAAe,KAAK;AAE1B,MAAI,MAAM,OACR,OAAM,OAAO;AAGf,aAAW,SAAS,SAAS;AAE7B,QAAM,WAAW;GACjB;CAEF,IAAI,eAAe,YAAY,SAAS;CAExC,MAAM,kBAAkB,CAAC,CAAC,aAAa,MAAM,IAAI,CAAC,MAAM;CAExD,MAAM,YAAY,eACT;EACL,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,UAAU;EACV,SAAS;EACT,SAAS;EACT,SAAS;EACT,aAAa;EACb,QAAQ,CAAC,CAAC;EACV,QAAQ;EACT,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,UAAS,cAAc;AACrB,MAAI,CAAC,UAAU,CAAC,eACd,QAAO;AAGT,SACE,8CACG,QACA,kBACA;IAEJ,CAAC,QAAQ,eAAe,CAAC;AA0G5B,QAAO,cAvGL,qBAAC;EACC,MAAM;EACE;EACR,aAAW;EACX,aAAW;EACX,cAAY;;GAEZ,oBAAC;IACQ;IACK;IACZ,OAAO,MAAM;IACb,MAAM,MAAM;KACZ;GACF,oBAACD;IACC,IAAG;IACH,IAAI,MAAM;IACV,mBAAgB;IAChB,GAAIE,aAAW,aAAa,YAAY,WAAW;IACnD,KAAK;IACL;IACA,QAAQ;KAAE,GAAG;KAAa,GAAG;KAAe;IACrC;IACD;IACC;IAEP,UAAS;IAEH;IACN,MAAM;IACE;IACA;IACF;IACN,WACE,cAAc,SACZ,YACE,kBACF,oBAAC;KACO;KAcC;eAEP,oBAAC;MACC,MAAM,oBAAC,cAAY;MACnB,IAAG;MASH,MAAM,EAAE,SAAS,OAAO;MACxB,SAAS;OACT;MACiB,GACnB,YACF,oBAAC,gBAAc,GAEf,oBAAC,iBAAc,IAAI,MAAM,SAAS,OAAO,SAAU;IAGvD,aAAa;IACS;IACb;IACA;IACT,YAAY;cAEX,MAAM,eACL,MAAM,aAAa,WACjB,cACF,oBAACC,MAAK,yBAAa,cAA+B,GAChD;KACC;GACP,oBAAC;IACC,GAAI;IACQ;IACA;IACE;IACH;IACJ;IACQ;IACA;IACD;IACd,UAAU;IACE;IACA;KACZ;;GACmB,EAKvB,KACAD,aACE,EACE,GAAG,OACJ,EACD,EAAE,YAAY,CACf,CACF;;AAGH,SAAgB,aAAa,EAC3B,OACA,YACA,YACA,eACA,eACA,cACA,cAAc,oBACd,wBAAwB,OACxB,WACA,UACA,OAAO,SACP,YACA,YACA,GAAG,cACF;CAGD,MAAM,eAAe,SAAS,UAAU,WAAW;CAGnD,IAAI,EAAE,iBAAiB,WACrB;EACE,WAAW,MAAM,iBAAiB;EAClC;EACA,GAAG;EACJ,EACD,OACA,WACD;CAID,IAAI,EAAE,iBAAiB,WACrB;EACE,eAAe,MAAM,OAAO;EAC5B,mBAAmB;EACnB,QAAQ,MAAM;EACd,eAAe;EACf,+BAA+B,OAAO;GACpC,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,OAAI,CAAC,eAAe;AAClB,QAAI,GAAG,QAAQ,sBAAsB,CAAE,QAAO;AAK9C,QAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,sBAAiB,MAAM,OAAO,EAAE,EAAE;AAClC,YAAO;;AAET,WAAO;;AAGT,OAAI,kBAAkB,YAAY,QAAS,QAAO;AAElD,UAAO;;EAEV,EACD,WACD;CAGD,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM;AAoBvD,QACE,oBAAC,oBACC,oBAAC;EAAkB,SAAS,MAAM,UAAU,CAAC;aACzC,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC;GACC,GAAI;GACJ,GAAI;GACJ,KAAK;GACL,OAAO,oBAAoB;aAE3B,oBAAC;IACC,KAAK;IACL,kBAAgB;IAChB,cAAY;IACZ,MAAM,EACJ,MAAM,SACP;IACD,QAAQ;IACR,OAAO,EACL,uBAAuB,WAAW,GAAG,SAAS,MAAM,WACrD;cAED,qBAAC;KAAW;KAAU;;MACpB,oBAAC,iBAAc,iBAAiB,MAAM,OAAO,GAAI;aACzC;OACN,MAAM,gBAAmC,EAAE;OAC3C,IAAI,iBAAiB;AAErB,YAAK,MAAM,QAAQ,MAAM,WACvB,KAAI,KAAK,SAAS,WAAW;AAC3B,YAAI,CAAC,eACH,eAAc,KACZ,oBAACE;SAEC,IAAG;SACH,MAAK;SACL,oBAAiB;WAHZ,WAAW,OAAO,KAAK,IAAI,GAIhC,CACH;AAGH,sBAAc,KACZ,oBAAC;SAEO;SACC;SACO;SACd,eAAe;SACQ;SACvB,MAAM;WAND,KAAK,IAOV,CACH;AAED,yBAAiB;aAEjB,eAAc,KACZ,oBAAC;QAEO;QACC;QACP,QAAQ;QACe;QACvB,MAAM;UALD,KAAK,IAMV,CACH;AAIL,cACE,oBAAC;QACC,QAAQ;QACR,GAAI;QACJ,KAAK;kBAEJ;SACc;UAEjB;MACJ,oBAAC,iBAAc,iBAAiB,MAAM,OAAO,GAAI;;MACtC;KACE;IACI;GAEP,GACb;;AAIb,SAAS,OAAO,EAAE,MAAM,OAAO,QAAQ,uBAAuB,QAAQ;CACpE,IAAI,MAAM,OAAsB,KAAK;CACrC,IAAI,aAAa,MAAM,aAAa,IAAI,KAAK,IAAI;CACjD,IAAI,aAAa,MAAM,iBAAiB,WAAW,KAAK,IAAI;CAC5D,IAAI,mBAAmB,MAAM,iBAAiB,eAAe,KAAK;CAElE,IAAI,EAAE,aAAa,WAAW,YAAY,qBAAqB,UAC7D;EACE,KAAK,KAAK;EACV;EACA;EACA,uBAAuB;EACvB,oBAAoB;EACpB;EACD,EACD,OACA,IACD;CAID,IAAI,EAAE,WAAW,eAAeH,WAAS,EAAE,YAAY,CAAC;CAGxD,MAAM,oBAAoB,0BAA0B,KAAK,MAAM;AAE/D,QACE,oBAAC;EACC,GAAIC,aAAW,aAAa,YAAY,kBAAkB;EACrD;EACL,MAAM;GACJ,aAAa;GACb,UAAU;GACV,SAAS,wBAAwB,mBAAmB;GACpD,UAAU;GACV,SAAS;GACV;EACD,aAAW;EACX,QAAQ;GACN,GAAI;GACJ,GAAI,kBAAkB;GACvB;EACW;EACM;EAClB,yBAAwB;YAEvB,KAAK;GACK;;AAcjB,SAAS,cAAiB,OAA8B;CACtD,MAAM,EACJ,MACA,OACA,cACA,eACA,eACA,uBACA,SACE;CAEJ,MAAM,UAAU,KAAK;CAErB,MAAM,EAAE,WAAW,cAAc,eAAe,kBAAkB;EAChE;EACA,cAAc,KAAK;EACpB,CAAC;AAEF,QACE,qBAACG;EAAmB,GAAI;EAAW,QAAQ;aACxC,WACC,oBAACC;GACC,GAAI;GACE;GACN,QAAQ;IAAE,GAAG;IAAe,wBAAwB;IAAO;aAE1D;IACkB,EAEvB,oBAAC;GAAe,GAAI;GAAY,MAAM,EAAE,SAAS,MAAM;aACpD,CAAC,GAAG,KAAK,WAAW,CAClB,QAAQ,SAAc,MAAM,WAAW,QAAQ,KAAK,IAAI,CAAC,CACzD,KAAK,SACJ,oBAAC;IAEC,MAAM;IACC;IACP,QAAQ;IACe;IACjB;MALD,KAAK,IAMV,CACF;IACW;GACE;;AAIzB,MAAM,UAAU,uBAAuB,OAAO;AAE9C,AAAC,QAAgB,gBAAgB;AAIjC,MAAM,yBAAyB,OAAO,OAAOC,SAAa,EACxD,aAAa,WACd,CAAC;AAEF,MAAM,WAAW,OAAO,OACtB,SAIA;CACE,MAAMC;CACN,SAAS;CACV,CACF;AAED,AAAC,SAAiB,cAAc"}
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';\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 /* 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 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 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 // 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 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 },\n {\n Item: CollectionItem,\n Section: SelectSectionComponent,\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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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,14 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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";
 import { _Text } from "../../content/Text.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n ToggleSelectionProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n ToggleSelectionProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
 import { useAutoSizeTextArea } from "../TextInput/useAutoSizeTextArea.js";
 import { forwardRef, useRef } from "react";

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "./TextInputBase.js";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/TextInput/TextInputBase.d.ts CHANGED Viewed

@@ -44,6 +44,15 @@ interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleP
   resize?: Styles['resize'];
   /** The size of the input */
   size?: 'small' | 'medium' | 'large' | (string & {});
+  /**
+   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token
+   * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
+   */
+  autoComplete?: string;
+  /**
+   * @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;
+   * `autoComplete` wins when both are set.
+   */
   autocomplete?: string;
 }
 /**

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -161,7 +161,7 @@ const InputElement = tasty({
 * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).
 */
 function _TextInputBase(props, ref) {
-	let { qa, mods, isInvalid, isValid, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", wrapperRef, tooltip, rows = 1, size = "medium", autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
+	let { qa, mods, isInvalid, isValid, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", wrapperRef, tooltip, rows = 1, size = "medium", autoComplete, autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
 	let styles = extractStyles(otherProps, PROP_STYLES);
 	let type = otherProps.type;
 	if (resize) inputStyles = {
@@ -225,6 +225,7 @@ function _TextInputBase(props, ref) {
 		prefix,
 		suffix
 	]);
+	const resolvedAutoComplete = autoComplete ?? autocomplete ?? inputProps.autoComplete;
 	const textSecurityStyles = multiLine && type === "password" && inputProps.value?.length ? { fontFamily: "text-security-disc" } : {};
 	return wrapWithField(/* @__PURE__ */ jsxs(InputWrapperElement, {
 		ref: wrapperRef,
@@ -249,7 +250,7 @@ function _TextInputBase(props, ref) {
 				"data-autofocus": autoFocus ? "" : void 0,
 				autoFocus,
 				"data-size": size,
-				autoComplete: autocomplete,
+				autoComplete: resolvedAutoComplete,
 				styles: inputStyles,
 				disabled: !!isDisabled,
 				maxLength,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n getValidationMods,\n hasValidationIndicator,\n ValidationIndicator,\n wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n $: '>',\n display: 'grid',\n placeContent: 'stretch',\n placeItems: 'center',\n gridRows: '1sf',\n flow: 'column',\n gap: 0,\n cursor: 'inherit',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n display: 'grid',\n flow: 'row',\n position: 'relative',\n gridColumns: {\n '': '1sf',\n prefix: 'max-content 1sf',\n suffix: '1sf max-content',\n 'prefix & suffix': 'max-content 1sf max-content',\n },\n gridRows: '1sf',\n placeItems: 'stretch',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n border: {\n '': true,\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n focused: '#primary-text',\n 'valid & focused': '#success-text',\n 'invalid & focused': '#danger-text',\n disabled: true,\n },\n preset: 't3',\n radius: true,\n cursor: 'text',\n color: {\n '': '#dark-02',\n focused: '#dark-02',\n invalid: '#danger-text',\n disabled: '#dark.30',\n },\n zIndex: {\n '': 'initial',\n focused: 1,\n },\n boxSizing: 'border-box',\n transition: 'theme',\n backgroundClip: 'content-box',\n height: {\n '': '$size $size',\n multiline: 'min $size',\n },\n\n $size: {\n '': '$size-md',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n },\n\n Prefix: ADD_STYLES,\n\n Suffix: ADD_STYLES,\n\n State: {\n $: '> Suffix >',\n display: 'flex',\n },\n\n InputIcon: {\n display: 'grid',\n placeItems: 'center',\n width: 'min $size-sm',\n color: 'inherit',\n fontSize: '$icon-size',\n },\n\n ValidationIcon: {\n $: '> Suffix > State >',\n display: 'grid',\n placeItems: 'center',\n width: {\n '': 'min $size-sm',\n suffix: 'min $size-xs',\n },\n fontSize: '$icon-size',\n },\n};\n\nconst InputWrapperElement = tasty({\n qa: 'InputWrapper',\n styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n ...BASE_STYLES,\n ...OUTER_STYLES,\n ...BLOCK_STYLES,\n ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n recipe: 'reset input / input-autofill',\n placeSelf: 'stretch',\n width: 'initial 100% 100%',\n transition: 'theme',\n radius: true,\n padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n textAlign: 'left',\n preset: 't3',\n flexGrow: 1,\n margin: {\n '': 0,\n multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n 'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n 'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n },\n resize: 'none',\n userSelect: 'auto',\n\n Placeholder: {\n $: '&::placeholder',\n recipe: 'input-placeholder',\n },\n '&::-webkit-search-cancel-button': {\n recipe: 'input-search-cancel-button',\n },\n\n '$vertical-padding': 0,\n '$left-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n prefix: '0',\n },\n '$right-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n suffix: '0',\n },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n BaseStyleProps,\n ColorStyleProps,\n Omit<AriaTextFieldProps, 'validate'>,\n FieldBaseProps {\n validate?: AriaTextFieldProps['validate'] \| AriaNumberFieldProps['validate'];\n /** Left input icon /\n icon?: ReactElement \| null;\n /* Input decoration before the main input /\n prefix?: ReactNode;\n /* Input decoration after the main input /\n suffix?: ReactNode;\n /* Suffix position goes before or after the validation and loading statuses /\n suffixPosition?: 'before' \| 'after';\n /* Whether the input is multiline /\n multiLine?: boolean;\n /* Whether the input should have autofocus /\n autoFocus?: boolean;\n /* Direct input props /\n inputProps?: Props;\n /* Direct input wrapper props /\n wrapperProps?: Props;\n /* The input ref /\n inputRef?: RefObject<HTMLInputElement \| HTMLTextAreaElement>;\n /* The wrapper ref /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Whether the input has the loading status /\n isLoading?: boolean;\n /* The loading status indicator /\n loadingIndicator?: ReactNode;\n /* Style map for the input /\n inputStyles?: Styles;\n /* The number of rows for the input. Only applies to textarea. /\n rows?: number;\n /* The resize CSS property sets whether an element is resizable, and if so, in which directions. /\n resize?: Styles['resize'];\n /* The size of the input /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n autocomplete?: string;\n}\n\n/\n Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n /\nexport interface CubeBufferedValueProps {\n /\n Whether the typed text is held locally until the controlled `value` catches up. On by default,\n * which is what keeps the caret in place when the value round-trips through a store that\n * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n /\n isBuffered?: boolean;\n}\n\n/\n The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n let {\n qa,\n mods,\n isInvalid,\n isValid,\n prefix,\n isDisabled,\n multiLine,\n autoFocus,\n inputProps,\n wrapperProps,\n inputRef,\n isLoading,\n loadingIndicator,\n value,\n inputStyles = {},\n suffix,\n suffixPosition = 'before',\n wrapperRef,\n tooltip,\n rows = 1,\n size = 'medium',\n autocomplete,\n icon,\n maxLength,\n minLength,\n form,\n resize,\n ...otherProps\n } = props;\n\n let styles = extractStyles(otherProps, PROP_STYLES);\n let type = otherProps.type;\n\n if (resize) {\n inputStyles = { ...inputStyles, resize };\n }\n\n let ElementType: 'textarea' \| 'input' = multiLine ? 'textarea' : 'input';\n let { isFocused, focusProps } = useFocus({ isDisabled });\n let { hoverProps, isHovered } = useHover({ isDisabled });\n let domRef = useRef(null);\n\n inputRef = useCombinedRefs(inputRef);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef?.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef?.current;\n },\n }));\n\n const showValidationIndicator = hasValidationIndicator({\n isInvalid,\n isValid,\n isLoading,\n });\n\n // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n if (!inputProps?.placeholder) {\n if (!inputProps) {\n inputProps = {};\n }\n\n inputProps.placeholder = ' ';\n }\n\n if (icon) {\n icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n if (prefix) {\n prefix = (\n <>\n {icon}\n {prefix}\n </>\n );\n } else {\n prefix = icon;\n }\n }\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n loadable: !!loadingIndicator,\n focused: isFocused,\n hovered: isHovered,\n disabled: isDisabled,\n multiline: multiLine,\n prefix: !!prefix,\n suffix: showValidationIndicator \|\| !!suffix,\n ...mods,\n }),\n [\n mods,\n isInvalid,\n isValid,\n showValidationIndicator,\n loadingIndicator,\n isFocused,\n isDisabled,\n isHovered,\n multiLine,\n prefix,\n suffix,\n ],\n );\n\n const hasTextSecurity = multiLine && type === 'password';\n const textSecurityStyles =\n hasTextSecurity && inputProps.value?.length\n ? {\n fontFamily: 'text-security-disc',\n }\n : {};\n\n const textField = (\n <InputWrapperElement\n ref={wrapperRef}\n mods={modifiers}\n data-size={size}\n styles={styles}\n {...wrapperProps}\n >\n {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n <InputElement\n qa={qa \|\| 'Input'}\n as={ElementType}\n data-input-type=\"textinput\"\n {...mergeProps(inputProps, focusProps, hoverProps)}\n ref={inputRef}\n rows={multiLine ? rows : undefined}\n mods={modifiers}\n style={textSecurityStyles}\n data-autofocus={autoFocus ? '' : undefined}\n autoFocus={autoFocus}\n data-size={size}\n autoComplete={autocomplete}\n styles={inputStyles}\n disabled={!!isDisabled}\n maxLength={maxLength}\n minLength={minLength}\n />\n {showValidationIndicator \|\| suffix ? (\n <div data-element=\"Suffix\">\n {suffixPosition === 'before' ? suffix : null}\n <ValidationIndicator\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n />\n {suffixPosition === 'after' ? suffix : null}\n </div>\n ) : null}\n </InputWrapperElement>\n );\n\n return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n getValidationMods,\n hasValidationIndicator,\n ValidationIndicator,\n wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n $: '>',\n display: 'grid',\n placeContent: 'stretch',\n placeItems: 'center',\n gridRows: '1sf',\n flow: 'column',\n gap: 0,\n cursor: 'inherit',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n display: 'grid',\n flow: 'row',\n position: 'relative',\n gridColumns: {\n '': '1sf',\n prefix: 'max-content 1sf',\n suffix: '1sf max-content',\n 'prefix & suffix': 'max-content 1sf max-content',\n },\n gridRows: '1sf',\n placeItems: 'stretch',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n border: {\n '': true,\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n focused: '#primary-text',\n 'valid & focused': '#success-text',\n 'invalid & focused': '#danger-text',\n disabled: true,\n },\n preset: 't3',\n radius: true,\n cursor: 'text',\n color: {\n '': '#dark-02',\n focused: '#dark-02',\n invalid: '#danger-text',\n disabled: '#dark.30',\n },\n zIndex: {\n '': 'initial',\n focused: 1,\n },\n boxSizing: 'border-box',\n transition: 'theme',\n backgroundClip: 'content-box',\n height: {\n '': '$size $size',\n multiline: 'min $size',\n },\n\n $size: {\n '': '$size-md',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n },\n\n Prefix: ADD_STYLES,\n\n Suffix: ADD_STYLES,\n\n State: {\n $: '> Suffix >',\n display: 'flex',\n },\n\n InputIcon: {\n display: 'grid',\n placeItems: 'center',\n width: 'min $size-sm',\n color: 'inherit',\n fontSize: '$icon-size',\n },\n\n ValidationIcon: {\n $: '> Suffix > State >',\n display: 'grid',\n placeItems: 'center',\n width: {\n '': 'min $size-sm',\n suffix: 'min $size-xs',\n },\n fontSize: '$icon-size',\n },\n};\n\nconst InputWrapperElement = tasty({\n qa: 'InputWrapper',\n styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n ...BASE_STYLES,\n ...OUTER_STYLES,\n ...BLOCK_STYLES,\n ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n recipe: 'reset input / input-autofill',\n placeSelf: 'stretch',\n width: 'initial 100% 100%',\n transition: 'theme',\n radius: true,\n padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n textAlign: 'left',\n preset: 't3',\n flexGrow: 1,\n margin: {\n '': 0,\n multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n 'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n 'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n },\n resize: 'none',\n userSelect: 'auto',\n\n Placeholder: {\n $: '&::placeholder',\n recipe: 'input-placeholder',\n },\n '&::-webkit-search-cancel-button': {\n recipe: 'input-search-cancel-button',\n },\n\n '$vertical-padding': 0,\n '$left-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n prefix: '0',\n },\n '$right-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n suffix: '0',\n },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n BaseStyleProps,\n ColorStyleProps,\n Omit<AriaTextFieldProps, 'validate'>,\n FieldBaseProps {\n validate?: AriaTextFieldProps['validate'] \| AriaNumberFieldProps['validate'];\n /** Left input icon /\n icon?: ReactElement \| null;\n /* Input decoration before the main input /\n prefix?: ReactNode;\n /* Input decoration after the main input /\n suffix?: ReactNode;\n /* Suffix position goes before or after the validation and loading statuses /\n suffixPosition?: 'before' \| 'after';\n /* Whether the input is multiline /\n multiLine?: boolean;\n /* Whether the input should have autofocus /\n autoFocus?: boolean;\n /* Direct input props /\n inputProps?: Props;\n /* Direct input wrapper props /\n wrapperProps?: Props;\n /* The input ref /\n inputRef?: RefObject<HTMLInputElement \| HTMLTextAreaElement>;\n /* The wrapper ref /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Whether the input has the loading status /\n isLoading?: boolean;\n /* The loading status indicator /\n loadingIndicator?: ReactNode;\n /* Style map for the input /\n inputStyles?: Styles;\n /* The number of rows for the input. Only applies to textarea. /\n rows?: number;\n /* The resize CSS property sets whether an element is resizable, and if so, in which directions. /\n resize?: Styles['resize'];\n /* The size of the input /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n /\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n autoComplete?: string;\n /\n @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;\n * `autoComplete` wins when both are set.\n /\n autocomplete?: string;\n}\n\n/\n Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n /\nexport interface CubeBufferedValueProps {\n /\n Whether the typed text is held locally until the controlled `value` catches up. On by default,\n * which is what keeps the caret in place when the value round-trips through a store that\n * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n /\n isBuffered?: boolean;\n}\n\n/\n The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n let {\n qa,\n mods,\n isInvalid,\n isValid,\n prefix,\n isDisabled,\n multiLine,\n autoFocus,\n inputProps,\n wrapperProps,\n inputRef,\n isLoading,\n loadingIndicator,\n value,\n inputStyles = {},\n suffix,\n suffixPosition = 'before',\n wrapperRef,\n tooltip,\n rows = 1,\n size = 'medium',\n autoComplete,\n autocomplete,\n icon,\n maxLength,\n minLength,\n form,\n resize,\n ...otherProps\n } = props;\n\n let styles = extractStyles(otherProps, PROP_STYLES);\n let type = otherProps.type;\n\n if (resize) {\n inputStyles = { ...inputStyles, resize };\n }\n\n let ElementType: 'textarea' \| 'input' = multiLine ? 'textarea' : 'input';\n let { isFocused, focusProps } = useFocus({ isDisabled });\n let { hoverProps, isHovered } = useHover({ isDisabled });\n let domRef = useRef(null);\n\n inputRef = useCombinedRefs(inputRef);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef?.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef?.current;\n },\n }));\n\n const showValidationIndicator = hasValidationIndicator({\n isInvalid,\n isValid,\n isLoading,\n });\n\n // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n if (!inputProps?.placeholder) {\n if (!inputProps) {\n inputProps = {};\n }\n\n inputProps.placeholder = ' ';\n }\n\n if (icon) {\n icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n if (prefix) {\n prefix = (\n <>\n {icon}\n {prefix}\n </>\n );\n } else {\n prefix = icon;\n }\n }\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n loadable: !!loadingIndicator,\n focused: isFocused,\n hovered: isHovered,\n disabled: isDisabled,\n multiline: multiLine,\n prefix: !!prefix,\n suffix: showValidationIndicator \|\| !!suffix,\n ...mods,\n }),\n [\n mods,\n isInvalid,\n isValid,\n showValidationIndicator,\n loadingIndicator,\n isFocused,\n isDisabled,\n isHovered,\n multiLine,\n prefix,\n suffix,\n ],\n );\n\n // `autoComplete` is the prop; `autocomplete` is the deprecated alias. Falling back to\n // `inputProps` matters as much as the aliasing: this attribute is applied after the merge, so a\n // bare `autoComplete={resolved}` would overwrite whatever the React Aria hook put there —\n // `useNumberField`'s own `off`, or an `inputProps={{ autoComplete }}` passed by the caller — with\n // `undefined` whenever neither prop is set.\n const resolvedAutoComplete =\n autoComplete ?? autocomplete ?? inputProps.autoComplete;\n\n const hasTextSecurity = multiLine && type === 'password';\n const textSecurityStyles =\n hasTextSecurity && inputProps.value?.length\n ? {\n fontFamily: 'text-security-disc',\n }\n : {};\n\n const textField = (\n <InputWrapperElement\n ref={wrapperRef}\n mods={modifiers}\n data-size={size}\n styles={styles}\n {...wrapperProps}\n >\n {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n <InputElement\n qa={qa \|\| 'Input'}\n as={ElementType}\n data-input-type=\"textinput\"\n {...mergeProps(inputProps, focusProps, hoverProps)}\n ref={inputRef}\n rows={multiLine ? rows : undefined}\n mods={modifiers}\n style={textSecurityStyles}\n data-autofocus={autoFocus ? '' : undefined}\n autoFocus={autoFocus}\n data-size={size}\n autoComplete={resolvedAutoComplete}\n styles={inputStyles}\n disabled={!!isDisabled}\n maxLength={maxLength}\n minLength={minLength}\n />\n {showValidationIndicator \|\| suffix ? (\n <div data-element=\"Suffix\">\n {suffixPosition === 'before' ? suffix : null}\n <ValidationIndicator\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n />\n {suffixPosition === 'after' ? suffix : null}\n </div>\n ) : null}\n </InputWrapperElement>\n );\n\n return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

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

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

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

@@ -33,6 +33,11 @@ interface CubeTextInputMapperInputProps {
   isValid?: boolean;
   autoFocus?: boolean;
   allowsCustomValue?: boolean;
+  /**
+   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token
+   * (`off`, `email`, …). Forwarded to the underlying input component.
+   */
+  autoComplete?: string;
 }
 declare const _TextInputMapper: react.ForwardRefExoticComponent<CubeTextInputMapperProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

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

@@ -1,21 +1,21 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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";
 import { Block } from "../../Block.js";
 import { Space } from "../../layout/Space.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { CloseIcon } from "../../../icons/CloseIcon.js";
-import { PlusIcon } from "../../../icons/PlusIcon.js";
 import { Button } from "../../actions/index.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _PasswordInput } from "../PasswordInput/PasswordInput.js";
 import { _TextArea } from "../TextArea/TextArea.js";
 import { ComboBox } from "../ComboBox/ComboBox.js";
+import { PlusIcon } from "../../../icons/PlusIcon.js";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon, PlusIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n /*\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`off`, `email`, …). Forwarded to the underlying input component.\n */\n autoComplete?: string;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | 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";