npm - @cube-dev/ui-kit - Versions diffs - 0.163.0 → 0.165.0 - Mend

@cube-dev/ui-kit 0.163.0 → 0.165.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 (676) 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 getValidationTheme,\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 theme={getValidationTheme(theme, { isInvalid, isValid })}\n >\n <ItemAction\n icon={<CloseIcon />}\n qa=\"SelectClearButton\"\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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"}
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":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -16,6 +16,18 @@ const HUE_STOPS = [
 const HUE_SATURATION = 80;
 const HUE_LIGHTNESS = 50;
 const HUE_GRADIENT = HUE_STOPS.map((h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`).join(", ");
+/**
+* A hue is an angle, so the value label says so.
+*
+* `unitDisplay: 'narrow'` is what turns `23 deg` into `23°`. Left to the plain
+* number, a caller who wanted the unit had to put it in the label — which then
+* repeated the value the slider already prints beside it.
+*/
+const HUE_FORMAT_OPTIONS = {
+	style: "unit",
+	unit: "degree",
+	unitDisplay: "narrow"
+};
 const horizontalTrackStyles = {
 	image: `linear-gradient(to right, ${HUE_GRADIENT})`,
 	Fill: false
@@ -25,7 +37,7 @@ const verticalTrackStyles = {
 	Fill: false
 };
 function HueSlider(props, ref) {
-	const { value, defaultValue = 0, onChange, orientation = "horizontal", thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
+	const { value, defaultValue = 0, onChange, orientation = "horizontal", formatOptions = HUE_FORMAT_OPTIONS, thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const currentHue = value ?? internalValue;
 	const handleChange = useCallback((newValue) => {
@@ -43,6 +55,7 @@ function HueSlider(props, ref) {
 		defaultValue,
 		orientation,
 		maxValue: 359,
+		formatOptions,
 		thumbStyles: useMemo(() => ({
 			outline: {
 				"": "1bw #slider-thumb-hovered.0",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HueSlider.js","names":["Slider"],"sources":["../../../../src/components/fields/Slider/HueSlider.tsx"],"sourcesContent":["import { Styles, Tokens } from '@tenphi/tasty';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\n\nimport { CubeSliderProps, Slider } from './Slider';\n\nimport type { FocusableRef } from '@react-types/shared';\n\n// Generate 7 hue stops (0, 60, 120, 180, 240, 300, 359) for full color spectrum\nconst HUE_STOPS = [0, 60, 120, 180, 240, 300, 359];\nconst HUE_SATURATION = 80;\nconst HUE_LIGHTNESS = 50;\n\nconst HUE_GRADIENT = HUE_STOPS.map(\n (h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,\n).join(', ');\n\nconst horizontalTrackStyles: Styles = {\n image: `linear-gradient(to right, ${HUE_GRADIENT})`,\n Fill: false,\n};\n\nconst verticalTrackStyles: Styles = {\n image: `linear-gradient(to top, ${HUE_GRADIENT})`,\n Fill: false,\n};\n\nexport interface CubeHueSliderProps\n extends Omit<CubeSliderProps, 'minValue' \| 'maxValue' \| 'step'> {\n /** The current hue value (0-359) /\n value?: number;\n /* The default hue value (0-359) */\n defaultValue?: number;\n}\n\nfunction HueSlider(\n props: CubeHueSliderProps,\n ref: FocusableRef<HTMLDivElement>,\n) {\n const {\n value,\n defaultValue = 0,\n onChange,\n orientation = 'horizontal',\n thumbTokens: userThumbTokens,\n thumbStyles: userThumbStyles,\n trackStyles: userTrackStyles,\n ...rest\n } = props;\n\n // Track internal value for uncontrolled mode\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled value if provided, otherwise use internal state\n const currentHue = value ?? internalValue;\n\n // Handle onChange to update internal state in uncontrolled mode\n const handleChange = useCallback(\n (newValue: number) => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(newValue);\n },\n [value, onChange],\n );\n\n // Create dynamic thumb tokens with the current hue color\n const thumbTokens: Tokens = useMemo(\n () => ({\n '#slider-thumb': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,\n '#slider-thumb-hovered': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS - 10}%)`,\n ...userThumbTokens,\n }),\n [currentHue, userThumbTokens],\n );\n const thumbStyles: Styles = useMemo(\n () => ({\n outline: {\n '': '1bw #slider-thumb-hovered.0',\n focused: '1bw #slider-thumb-hovered',\n },\n ...userThumbStyles,\n }),\n [userThumbStyles],\n );\n\n const trackStyles: Styles = useMemo(\n () => ({\n ...(orientation === 'vertical'\n ? verticalTrackStyles\n : horizontalTrackStyles),\n ...userTrackStyles,\n }),\n [orientation, userTrackStyles],\n );\n\n return (\n <Slider\n ref={ref}\n value={value}\n defaultValue={defaultValue}\n orientation={orientation}\n maxValue={359}\n thumbStyles={thumbStyles}\n trackStyles={trackStyles}\n thumbTokens={thumbTokens}\n onChange={handleChange}\n {...rest}\n />\n );\n}\n\nconst _HueSlider = forwardRef(HueSlider);\n\nconst __HueSlider = Object.assign(_HueSlider as typeof _HueSlider, {\n cubeInputType: 'Number',\n displayName: 'HueSlider',\n});\n\nexport { __HueSlider as HueSlider };\n"],"mappings":";;;;;;AAQA,MAAM,YAAY;CAAC;CAAG;CAAI;CAAK;CAAK;CAAK;CAAK;CAAI;AAClD,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AAEtB,MAAM,eAAe,UAAU,KAC5B,MAAM,SAAS,EAAE,GAAG,eAAe,IAAI,cAAc,IACvD,CAAC,KAAK,KAAK;~~AAEZ~~,MAAM,wBAAgC;CACpC,OAAO,6BAA6B,aAAa;CACjD,MAAM;CACP;AAED,MAAM,sBAA8B;CAClC,OAAO,2BAA2B,aAAa;CAC/C,MAAM;CACP;AAUD,SAAS,UACP,OACA,KACA;CACA,MAAM,EACJ,OACA,eAAe,GACf,UACA,cAAc,cACd,aAAa,iBACb,aAAa,iBACb,aAAa,iBACb,GAAG,SACD;CAGJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAGhE,MAAM,aAAa,SAAS;CAG5B,MAAM,eAAe,aAClB,aAAqB;AACpB,MAAI,UAAU,OACZ,kBAAiB,SAAS;AAE5B,aAAW,SAAS;IAEtB,CAAC,OAAO,SAAS,CAClB;CAGD,MAAM,cAAsB,eACnB;EACL,iBAAiB,SAAS,WAAW,GAAG,eAAe,IAAI,cAAc;EACzE,yBAAyB,SAAS,WAAW,GAAG,eAAe,IAAI,gBAAgB,GAAG;EACtF,GAAG;EACJ,GACD,CAAC,YAAY,gBAAgB,CAC9B;AAsBD,QACE,oBAACA;EACM;EACE;EACO;EACD;EACb,UAAU;~~EACV~~,~~aA5BwB~~,eACnB;GACL,SAAS;IACP,IAAI;IACJ,SAAS;IACV;GACD,GAAG;GACJ,GACD,CAAC,gBAAgB,CAClB;~~EAoBG~~,~~aAlBwB~~,eACnB;GACL,GAAI,gBAAgB,aAChB,sBACA;GACJ,GAAG;GACJ,GACD,CAAC,aAAa,gBAAgB,CAC/B;~~EAWgB~~;EACb,UAAU;EACV,GAAI;GACJ;;AAIN,MAAM,aAAa,WAAW,UAAU;AAExC,MAAM,cAAc,OAAO,OAAO,YAAiC;CACjE,eAAe;CACf,aAAa;CACd,CAAC"}
1	+ {"version":3,"file":"HueSlider.js","names":["Slider"],"sources":["../../../../src/components/fields/Slider/HueSlider.tsx"],"sourcesContent":["import { Styles, Tokens } from '@tenphi/tasty';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\n\nimport { CubeSliderProps, Slider } from './Slider';\n\nimport type { FocusableRef } from '@react-types/shared';\n\n// Generate 7 hue stops (0, 60, 120, 180, 240, 300, 359) for full color spectrum\nconst HUE_STOPS = [0, 60, 120, 180, 240, 300, 359];\nconst HUE_SATURATION = 80;\nconst HUE_LIGHTNESS = 50;\n\nconst HUE_GRADIENT = HUE_STOPS.map(\n (h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,\n).join(', ');\n\n/*\n A hue is an angle, so the value label says so.\n \n `unitDisplay: 'narrow'` is what turns `23 deg` into `23°`. Left to the plain\n * number, a caller who wanted the unit had to put it in the label — which then\n * repeated the value the slider already prints beside it.\n /\nconst HUE_FORMAT_OPTIONS: Intl.NumberFormatOptions = {\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n};\n\nconst horizontalTrackStyles: Styles = {\n image: `linear-gradient(to right, ${HUE_GRADIENT})`,\n Fill: false,\n};\n\nconst verticalTrackStyles: Styles = {\n image: `linear-gradient(to top, ${HUE_GRADIENT})`,\n Fill: false,\n};\n\nexport interface CubeHueSliderProps\n extends Omit<CubeSliderProps, 'minValue' \| 'maxValue' \| 'step'> {\n /* The current hue value (0-359) /\n value?: number;\n /* The default hue value (0-359) */\n defaultValue?: number;\n}\n\nfunction HueSlider(\n props: CubeHueSliderProps,\n ref: FocusableRef<HTMLDivElement>,\n) {\n const {\n value,\n defaultValue = 0,\n onChange,\n orientation = 'horizontal',\n formatOptions = HUE_FORMAT_OPTIONS,\n thumbTokens: userThumbTokens,\n thumbStyles: userThumbStyles,\n trackStyles: userTrackStyles,\n ...rest\n } = props;\n\n // Track internal value for uncontrolled mode\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled value if provided, otherwise use internal state\n const currentHue = value ?? internalValue;\n\n // Handle onChange to update internal state in uncontrolled mode\n const handleChange = useCallback(\n (newValue: number) => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(newValue);\n },\n [value, onChange],\n );\n\n // Create dynamic thumb tokens with the current hue color\n const thumbTokens: Tokens = useMemo(\n () => ({\n '#slider-thumb': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,\n '#slider-thumb-hovered': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS - 10}%)`,\n ...userThumbTokens,\n }),\n [currentHue, userThumbTokens],\n );\n const thumbStyles: Styles = useMemo(\n () => ({\n outline: {\n '': '1bw #slider-thumb-hovered.0',\n focused: '1bw #slider-thumb-hovered',\n },\n ...userThumbStyles,\n }),\n [userThumbStyles],\n );\n\n const trackStyles: Styles = useMemo(\n () => ({\n ...(orientation === 'vertical'\n ? verticalTrackStyles\n : horizontalTrackStyles),\n ...userTrackStyles,\n }),\n [orientation, userTrackStyles],\n );\n\n return (\n <Slider\n ref={ref}\n value={value}\n defaultValue={defaultValue}\n orientation={orientation}\n maxValue={359}\n formatOptions={formatOptions}\n thumbStyles={thumbStyles}\n trackStyles={trackStyles}\n thumbTokens={thumbTokens}\n onChange={handleChange}\n {...rest}\n />\n );\n}\n\nconst _HueSlider = forwardRef(HueSlider);\n\nconst __HueSlider = Object.assign(_HueSlider as typeof _HueSlider, {\n cubeInputType: 'Number',\n displayName: 'HueSlider',\n});\n\nexport { __HueSlider as HueSlider };\n"],"mappings":";;;;;;AAQA,MAAM,YAAY;CAAC;CAAG;CAAI;CAAK;CAAK;CAAK;CAAK;CAAI;AAClD,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AAEtB,MAAM,eAAe,UAAU,KAC5B,MAAM,SAAS,EAAE,GAAG,eAAe,IAAI,cAAc,IACvD,CAAC,KAAK,KAAK;;;;;;;;AASZ,MAAM,qBAA+C;CACnD,OAAO;CACP,MAAM;CACN,aAAa;CACd;AAED,MAAM,wBAAgC;CACpC,OAAO,6BAA6B,aAAa;CACjD,MAAM;CACP;AAED,MAAM,sBAA8B;CAClC,OAAO,2BAA2B,aAAa;CAC/C,MAAM;CACP;AAUD,SAAS,UACP,OACA,KACA;CACA,MAAM,EACJ,OACA,eAAe,GACf,UACA,cAAc,cACd,gBAAgB,oBAChB,aAAa,iBACb,aAAa,iBACb,aAAa,iBACb,GAAG,SACD;CAGJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAGhE,MAAM,aAAa,SAAS;CAG5B,MAAM,eAAe,aAClB,aAAqB;AACpB,MAAI,UAAU,OACZ,kBAAiB,SAAS;AAE5B,aAAW,SAAS;IAEtB,CAAC,OAAO,SAAS,CAClB;CAGD,MAAM,cAAsB,eACnB;EACL,iBAAiB,SAAS,WAAW,GAAG,eAAe,IAAI,cAAc;EACzE,yBAAyB,SAAS,WAAW,GAAG,eAAe,IAAI,gBAAgB,GAAG;EACtF,GAAG;EACJ,GACD,CAAC,YAAY,gBAAgB,CAC9B;AAsBD,QACE,oBAACA;EACM;EACE;EACO;EACD;EACb,UAAU;EACK;EACf,aA7BwB,eACnB;GACL,SAAS;IACP,IAAI;IACJ,SAAS;IACV;GACD,GAAG;GACJ,GACD,CAAC,gBAAgB,CAClB;EAqBG,aAnBwB,eACnB;GACL,GAAI,gBAAgB,aAChB,sBACA;GACJ,GAAG;GACJ,GACD,CAAC,aAAa,gBAAgB,CAC/B;EAYgB;EACb,UAAU;EACV,GAAI;GACJ;;AAIN,MAAM,aAAa,WAAW,UAAU;AAExC,MAAM,cAAc,OAAO,OAAO,YAAiC;CACjE,eAAe;CACf,aAAa;CACd,CAAC"}

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

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

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

@@ -1,12 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.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 { TextInputBase } from "../TextInput/TextInputBase.js";
-import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+import { useAutoSizeTextArea } from "../TextInput/useAutoSizeTextArea.js";
+import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTextField } from "react-aria";
@@ -25,26 +25,18 @@ function TextArea(props, ref) {
 	maxRows = Math.max(maxRows, rows);
 	let localInputRef = useRef(null);
 	let inputRef = propsInputRef ?? localInputRef;
-	const adjustHeight = useEvent(() => {
-		const textarea = inputRef.current;
-		if (!textarea || !autoSize) return;
-		textarea.style.height = "auto";
-		const computedStyle = getComputedStyle(textarea);
-		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-		const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
-		const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
-		const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
-		const lineHeight = parseInt(computedStyle.lineHeight) || 20;
-		const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
-		const computedRows = Math.ceil(contentHeight / lineHeight);
-		const totalHeight = Math.max(Math.min(computedRows, maxRows), rows) * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
-		textarea.style.height = `${totalHeight}px`;
-	});
 	const buffered = useBufferedValue(value, onChange, {
 		isBuffered,
 		isDisabled,
 		isReadOnly
 	});
+	const adjustHeight = useAutoSizeTextArea({
+		inputRef,
+		autoSize,
+		rows,
+		maxRows,
+		value: buffered.value
+	});
 	let { labelProps, inputProps } = useTextField({
 		...otherProps,
 		value: buffered.value,
@@ -56,17 +48,6 @@ function TextArea(props, ref) {
 		inputElementType: "textarea"
 	}, inputRef);
 	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
-	const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-	useEnvironmentalEffect(() => {
-		if (!autoSize || !inputRef.current) return;
-		adjustHeight();
-		const resizeObserver = new ResizeObserver(adjustHeight);
-		resizeObserver.observe(inputRef?.current);
-		return () => resizeObserver.disconnect();
-	}, [autoSize, inputRef?.current]);
-	useEnvironmentalEffect(() => {
-		if (autoSize && inputRef.current) adjustHeight();
-	}, [buffered.value]);
 	return /* @__PURE__ */ jsx(TextInputBase, {
 		ref,
 		...otherProps,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","names":["mergeProps"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import {\n ForwardedRef~~,\n~~ forwardRef~~,\n useEffect,\n useLayoutEffect,\n~~ useRef~~,\n~~} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { ~~useEvent } from '../../../_internal/index';\nimport {~~ chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport {\n CubeBufferedValueProps,\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput';\n\nexport interface CubeTextAreaProps\n extends CubeTextInputBaseProps,\n CubeBufferedValueProps {\n /** Whether the textarea should change its size depends on the content /\n autoSize?: boolean;\n /* Max number of visible rows when autoSize is `true`. Defaults to 10 /\n maxRows?: number;\n /* The `rows` attribute in HTML is used to specify the number of visible text lines for the\n * control i.e. the number of rows to display. Defaults to 3 /\n rows?: number;\n}\n\nfunction TextArea(\n props: WithNullableValue<CubeTextAreaProps>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n let {\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n isBuffered,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n let localInputRef = useRef<HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n ~~const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n\n if (!textarea \|\| !autoSize) return;\n\n~~ // ~~Reset~~ ~~height to get~~ the ~~correct~~ ~~scrollHeight\n textarea.style.height~~ = ~~'auto';\n\n //~~ ~~Get~~ ~~computed~~ ~~styles~~ to ~~account~~ ~~for~~ ~~padding\n const~~ ~~computedStyle = getComputedStyle(textarea);\~~n const ~~paddingTop~~ = ~~parseFloat~~(~~computedStyle.paddingTop)~~ \|\| ~~0;\~~n ~~const paddingBottom = parseFloat(computedStyle.paddingBottom) \|\| 0;\~~n ~~const borderTop = parseFloat(computedStyle.borderTopWidth) \|\| 0;\~~n ~~const borderBottom = parseFloat(computedStyle.borderBottomWidth~~) ~~\|\| 0~~;\n\n ~~// Calculate line height (approximately)\n~~ const ~~lineHeight~~ = ~~parseInt~~(~~computedStyle.lineHeight) \|\| 20;\n~~\n ~~// Calculate content height (excluding padding and border)\~~n ~~const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\~~n\n ~~// Calculate~~ rows ~~based on content height\~~n ~~const computedRows = Math.ceil(contentHeight / lineHeight);\~~n\n // ~~Apply~~ ~~min/max~~ ~~constraints\n const~~ ~~targetRows~~ ~~= Math.max(Math.min(computedRows~~, ~~maxRows),~~ ~~rows);\n\n // Set~~ the ~~height~~ ~~including~~ ~~padding~~ ~~and~~ ~~border\n const~~ ~~totalHeight~~ =\n ~~targetRows lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n\n~~ ~~textarea.style.height = `${totalHeight}px`;\n });\n\n // Hold the typed text locally until the controlled~~ value ~~catches up — see `useBufferedValue`.\n const~~ buffered ~~= useBufferedValue(~~value~~, onChange, {\n isBuffered~~,\n ~~isDisabled,\n isReadOnly,\n~~ });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value: buffered.value,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(buffered.onChange, adjustHeight),\n onBlur: chain(otherProps.onBlur, buffered.reset),\n inputElementType: 'textarea',\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n // Also call adjustHeight on element resize as that can affect wrapping\n useEnvironmentalEffect(() => {\n if (!autoSize \|\| !inputRef.current) return~~;\n\n adjustHeight();\n\n const~~ ~~resizeObserver = new ResizeObserver~~(~~adjustHeight);\n~~\n resizeObserver.observe(inputRef?.current);\n\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef?.current]);\n\n // Adjust height when value changes programmatically (controlled mode with autoSize).\n // Keyed on the rendered value, not the prop, so a buffered draft is measured.\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [buffered.value]);\n\n return (\n <TextInputBase\n ref={ref}\n {...otherProps}\n multiLine\n inputRef={inputRef}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n}\n\n/*\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":";;;;;;;;;;;;;~~AAkCA~~,SAAS,SACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CACF,IAAI,EACF,WAAW,OACX,aAAa,OACb,aAAa,OACb,aAAa,OACb,UACA,UAAU,IACV,OAAO,GACP,YAAY,gBACZ,UAAU,eACV,OACA,YACA,GAAG,eACD;AAEJ,QAAO,KAAK,IAAI,MAAM,EAAE;AACxB,WAAU,KAAK,IAAI,SAAS,KAAK;CAEjC,IAAI,gBAAgB,OAA4B,KAAK;CACrD,IAAI,WAAW,iBAAiB;~~CAEhC~~,MAAM,~~eAAe,eAAe;EAClC,MAAM,~~WAAW,~~SAAS;AAE1B,MAAI,CAAC,YAAY,CAAC,SAAU;AAG5B,WAAS,MAAM,SAAS;EAGxB,MAAM,gBAAgB,~~iBAAiB,~~SAAS;EAChD~~,~~MAAM,aAAa,WAAW,cAAc,WAAW,IAAI~~;~~EAC3D,MAAM,gBAAgB,WAAW,cAAc,cAAc,IAAI~~;~~EACjE,MAAM,YAAY,WAAW,cAAc,eAAe,IAAI~~;~~EAC9D,MAAM,eAAe,WAAW,cAAc,kBAAkB,IAAI~~;~~EAGpE~~,~~MAAM,aAAa,SAAS,cAAc,WAAW,IAAI~~;~~EAGzD~~,MAAM,~~gBAAgB,SAAS,~~eAAe,~~aAAa~~;~~EAG3D,MAAM,eAAe,KAAK,KAAK,gBAAgB,WAAW~~;~~EAM1D,MAAM,cAHa,KAAK,IAAI,KAAK,IAAI,cAAc,QAAQ,EAAE,KAAK,GAInD,aACb,aACA,gBACA,YACA~~;~~AAEF,WAAS,MAAM,SAAS,GAAG,YAAY~~;~~GACvC~~;~~CAGF~~,~~MAAM,WAAW,iBAAiB,~~OAAO,~~UAAU~~;~~EACjD;EACA;EACA;EACD~~,CAAC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH,OAAO,SAAS;EAChB;EACA;EACA;EACA,UAAU,MAAM,SAAS,UAAU,aAAa;EAChD,QAAQ,MAAM,WAAW,QAAQ,SAAS,MAAM;EAChD,kBAAkB;EACnB,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;~~CAE~~/D,MAAM,yBACJ,OAAO,WAAW,cAAc,kBAAkB;AAGpD,8BAA6B;AAC3B,MAAI,CAAC,YAAY,CAAC,SAAS,QAAS;AAEpC,gBAAc;EAEd,MAAM,iBAAiB,IAAI,eAAe,aAAa;AAEvD,iBAAe,QAAQ,UAAU,QAAQ;AAEzC,eAAa,eAAe,YAAY;IACvC,CAAC,UAAU,UAAU,QAAQ,CAAC;AAIjC,8BAA6B;AAC3B,MAAI,YAAY,SAAS,QACvB,eAAc;IAEf,CAAC,SAAS,MAAM,CAAC;AAEpB,QACE,oBAAC;EACM;EACL,GAAI;EACJ;EACU;EACV,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAY;EAChD;EACA;EACA;EACN;GACN;;;;;;;AASN,MAAM,YAAY,WAAW,SAAS;AAEtC,AAAC,UAAkB,gBAAgB;AACnC,UAAU,cAAc"}
1	+ {"version":3,"file":"TextArea.js","names":["mergeProps"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport {\n CubeBufferedValueProps,\n CubeTextInputBaseProps,\n TextInputBase,\n} from '../TextInput';\nimport { useAutoSizeTextArea } from '../TextInput/useAutoSizeTextArea';\n\nexport interface CubeTextAreaProps\n extends CubeTextInputBaseProps,\n CubeBufferedValueProps {\n /** Whether the textarea should change its size depends on the content /\n autoSize?: boolean;\n /* Max number of visible rows when autoSize is `true`. Defaults to 10 /\n maxRows?: number;\n /* The `rows` attribute in HTML is used to specify the number of visible text lines for the\n * control i.e. the number of rows to display. Defaults to 3 /\n rows?: number;\n}\n\nfunction TextArea(\n props: WithNullableValue<CubeTextAreaProps>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n let {\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n isBuffered,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n let localInputRef = useRef<HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n const buffered = useBufferedValue(value, onChange, {\n isBuffered,\n isDisabled,\n isReadOnly,\n });\n\n const adjustHeight = useAutoSizeTextArea({\n inputRef,\n autoSize,\n rows,\n maxRows,\n // Keyed on the rendered value, not the prop, so a buffered draft is measured.\n value: buffered.value,\n });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value: buffered.value,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(buffered.onChange, adjustHeight),\n onBlur: chain(otherProps.onBlur, buffered.reset),\n inputElementType: 'textarea',\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n return (\n <TextInputBase\n ref={ref}\n {...otherProps}\n multiLine\n inputRef={inputRef}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n}\n\n/\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAS,SACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CACF,IAAI,EACF,WAAW,OACX,aAAa,OACb,aAAa,OACb,aAAa,OACb,UACA,UAAU,IACV,OAAO,GACP,YAAY,gBACZ,UAAU,eACV,OACA,YACA,GAAG,eACD;AAEJ,QAAO,KAAK,IAAI,MAAM,EAAE;AACxB,WAAU,KAAK,IAAI,SAAS,KAAK;CAEjC,IAAI,gBAAgB,OAA4B,KAAK;CACrD,IAAI,WAAW,iBAAiB;CAGhC,MAAM,WAAW,iBAAiB,OAAO,UAAU;EACjD;EACA;EACA;EACD,CAAC;CAEF,MAAM,eAAe,oBAAoB;EACvC;EACA;EACA;EACA;EAEA,OAAO,SAAS;EACjB,CAAC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH,OAAO,SAAS;EAChB;EACA;EACA;EACA,UAAU,MAAM,SAAS,UAAU,aAAa;EAChD,QAAQ,MAAM,WAAW,QAAQ,SAAS,MAAM;EAChD,kBAAkB;EACnB,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;AAE/D,QACE,oBAAC;EACM;EACL,GAAI;EACJ;EACU;EACV,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAY;EAChD;EACA;EACA;EACN;GACN;;;;;;;AASN,MAAM,YAAY,WAAW,SAAS;AAEtC,AAAC,UAAkB,gBAAgB;AACnC,UAAU,cAAc"}

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

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

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

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

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

@@ -0,0 +1,146 @@
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useEffect, useLayoutEffect, useRef } from "react";
+//#region src/components/fields/TextInput/useAutoSizeTextArea.ts
+/**
+* Computed properties that decide where text wraps and how tall a line box is.
+* Copied onto the mirror so it wraps exactly like the live textarea.
+*/
+const MIRROR_TYPOGRAPHY_PROPS = [
+	"direction",
+	"fontFamily",
+	"fontFeatureSettings",
+	"fontKerning",
+	"fontSize",
+	"fontStretch",
+	"fontStyle",
+	"fontVariant",
+	"fontVariationSettings",
+	"fontWeight",
+	"letterSpacing",
+	"lineHeight",
+	"overflowWrap",
+	"tabSize",
+	"textIndent",
+	"textTransform",
+	"whiteSpace",
+	"wordBreak",
+	"wordSpacing"
+];
+const FALLBACK_LINE_HEIGHT = 20;
+/**
+* An off-screen textarea used to measure how tall the content wants to be.
+*
+* It carries no padding and no border, and its width is set to the live
+* element's *content* width, so `scrollHeight` is the content height and
+* nothing else. `height: 0` is what makes shrinking measurable: a textarea's
+* `scrollHeight` never drops below its own client height, so measuring the live
+* element can only ever report "at least what it already is".
+*/
+function createMirror() {
+	const mirror = document.createElement("textarea");
+	mirror.setAttribute("aria-hidden", "true");
+	mirror.setAttribute("tabindex", "-1");
+	mirror.readOnly = true;
+	mirror.rows = 1;
+	Object.assign(mirror.style, {
+		position: "absolute",
+		top: "0",
+		left: "-9999px",
+		boxSizing: "content-box",
+		margin: "0",
+		padding: "0",
+		border: "0",
+		height: "0",
+		minHeight: "0",
+		maxHeight: "none",
+		overflow: "hidden",
+		resize: "none",
+		visibility: "hidden",
+		pointerEvents: "none"
+	});
+	return mirror;
+}
+/** The width the text actually has to wrap in, scrollbar and padding removed. */
+function getContentWidth(textarea, style) {
+	const paddingLeft = parseFloat(style.paddingLeft) || 0;
+	const paddingRight = parseFloat(style.paddingRight) || 0;
+	const borderLeft = parseFloat(style.borderLeftWidth) || 0;
+	const borderRight = parseFloat(style.borderRightWidth) || 0;
+	const scrollbar = Math.max(0, Math.round(textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight));
+	return Math.max(0, textarea.getBoundingClientRect().width - borderLeft - borderRight - scrollbar - paddingLeft - paddingRight);
+}
+/** `line-height: normal` has no px value to read, so measure one line instead. */
+function getLineHeight(style, mirror) {
+	const parsed = parseFloat(style.lineHeight);
+	if (Number.isFinite(parsed) && parsed > 0) return parsed;
+	const previousValue = mirror.value;
+	mirror.value = "x";
+	const measured = mirror.scrollHeight;
+	mirror.value = previousValue;
+	return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;
+}
+/**
+* Keeps an `autoSize` textarea's height in step with its content, and returns
+* the `adjustHeight` callback so a change handler can resize in the same tick
+* as the keystroke.
+*
+* The height is derived from an off-screen mirror rather than from the live
+* element. Measuring the live element — `height: auto`, read `scrollHeight`,
+* restore — re-lays out every ancestor mid-keystroke: in a chat-style column
+* the input box collapses to one row and the scroll viewport grows by the
+* difference, and the browser's scroll anchoring has to undo that. It does so
+* imperfectly, which is visible as the whole conversation bouncing by a pixel
+* on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so
+* there is nothing to undo.
+*/
+function useAutoSizeTextArea({ inputRef, autoSize, rows, maxRows, value }) {
+	const mirrorRef = useRef(null);
+	const adjustHeight = useEvent(() => {
+		const textarea = inputRef.current;
+		if (!textarea || !autoSize) return;
+		let mirror = mirrorRef.current;
+		if (!mirror) {
+			mirror = createMirror();
+			mirrorRef.current = mirror;
+			document.body.appendChild(mirror);
+		}
+		const style = getComputedStyle(textarea);
+		const contentWidth = getContentWidth(textarea, style);
+		if (contentWidth === 0) return;
+		for (const prop of MIRROR_TYPOGRAPHY_PROPS) mirror.style[prop] = style[prop];
+		mirror.style.width = `${contentWidth}px`;
+		mirror.value = textarea.value;
+		const lineHeight = getLineHeight(style, mirror);
+		const contentRows = Math.max(1, Math.round(mirror.scrollHeight / lineHeight));
+		const targetRows = Math.max(Math.min(contentRows, maxRows), rows);
+		const paddingTop = parseFloat(style.paddingTop) || 0;
+		const paddingBottom = parseFloat(style.paddingBottom) || 0;
+		const borderTop = parseFloat(style.borderTopWidth) || 0;
+		const borderBottom = parseFloat(style.borderBottomWidth) || 0;
+		const box = style.boxSizing === "border-box" ? paddingTop + paddingBottom + borderTop + borderBottom : 0;
+		const nextHeight = `${targetRows * lineHeight + box}px`;
+		if (textarea.style.height !== nextHeight) textarea.style.height = nextHeight;
+	});
+	const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+	useEnvironmentalEffect(() => {
+		if (!autoSize || !inputRef.current) return;
+		adjustHeight();
+		const resizeObserver = new ResizeObserver(adjustHeight);
+		resizeObserver.observe(inputRef.current);
+		return () => resizeObserver.disconnect();
+	}, [autoSize, inputRef.current]);
+	useEnvironmentalEffect(() => {
+		if (autoSize && inputRef.current) adjustHeight();
+	}, [value]);
+	useEffect(() => () => {
+		mirrorRef.current?.remove();
+		mirrorRef.current = null;
+	}, []);
+	return adjustHeight;
+}
+//#endregion
+export { useAutoSizeTextArea };
+//# sourceMappingURL=useAutoSizeTextArea.js.map

package/dist/components/fields/TextInput/useAutoSizeTextArea.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAutoSizeTextArea.js","names":[],"sources":["../../../../src/components/fields/TextInput/useAutoSizeTextArea.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/index';\n\n/**\n * Computed properties that decide where text wraps and how tall a line box is.\n * Copied onto the mirror so it wraps exactly like the live textarea.\n */\nconst MIRROR_TYPOGRAPHY_PROPS = [\n 'direction',\n 'fontFamily',\n 'fontFeatureSettings',\n 'fontKerning',\n 'fontSize',\n 'fontStretch',\n 'fontStyle',\n 'fontVariant',\n 'fontVariationSettings',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'overflowWrap',\n 'tabSize',\n 'textIndent',\n 'textTransform',\n 'whiteSpace',\n 'wordBreak',\n 'wordSpacing',\n] as const;\n\nconst FALLBACK_LINE_HEIGHT = 20;\n\n/**\n * An off-screen textarea used to measure how tall the content wants to be.\n *\n * It carries no padding and no border, and its width is set to the live\n * element's *content* width, so `scrollHeight` is the content height and\n * nothing else. `height: 0` is what makes shrinking measurable: a textarea's\n * `scrollHeight` never drops below its own client height, so measuring the live\n * element can only ever report \"at least what it already is\".\n */\nfunction createMirror(): HTMLTextAreaElement {\n const mirror = document.createElement('textarea');\n\n mirror.setAttribute('aria-hidden', 'true');\n mirror.setAttribute('tabindex', '-1');\n mirror.readOnly = true;\n mirror.rows = 1;\n\n Object.assign(mirror.style, {\n position: 'absolute',\n top: '0',\n left: '-9999px',\n boxSizing: 'content-box',\n margin: '0',\n padding: '0',\n border: '0',\n height: '0',\n minHeight: '0',\n maxHeight: 'none',\n overflow: 'hidden',\n resize: 'none',\n visibility: 'hidden',\n pointerEvents: 'none',\n });\n\n return mirror;\n}\n\n/** The width the text actually has to wrap in, scrollbar and padding removed. */\nfunction getContentWidth(\n textarea: HTMLTextAreaElement,\n style: CSSStyleDeclaration,\n): number {\n const paddingLeft = parseFloat(style.paddingLeft) || 0;\n const paddingRight = parseFloat(style.paddingRight) || 0;\n const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n const borderRight = parseFloat(style.borderRightWidth) || 0;\n // A classic (space-taking) scrollbar narrows the text; overlay scrollbars\n // report 0 here.\n const scrollbar = Math.max(\n 0,\n Math.round(\n textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight,\n ),\n );\n\n return Math.max(\n 0,\n textarea.getBoundingClientRect().width -\n borderLeft -\n borderRight -\n scrollbar -\n paddingLeft -\n paddingRight,\n );\n}\n\n/** `line-height: normal` has no px value to read, so measure one line instead. */\nfunction getLineHeight(\n style: CSSStyleDeclaration,\n mirror: HTMLTextAreaElement,\n): number {\n const parsed = parseFloat(style.lineHeight);\n\n if (Number.isFinite(parsed) && parsed > 0) return parsed;\n\n const previousValue = mirror.value;\n\n mirror.value = 'x';\n\n const measured = mirror.scrollHeight;\n\n mirror.value = previousValue;\n\n return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;\n}\n\nexport interface AutoSizeTextAreaOptions {\n inputRef: RefObject<HTMLTextAreaElement | null>;\n /** Whether the textarea resizes to fit its content. */\n autoSize: boolean;\n /** Minimum number of visible rows. */\n rows: number;\n /** Maximum number of visible rows. */\n maxRows: number;\n /** The rendered value. A change re-measures, so buffered drafts count too. */\n value: unknown;\n}\n\n/**\n * Keeps an `autoSize` textarea's height in step with its content, and returns\n * the `adjustHeight` callback so a change handler can resize in the same tick\n * as the keystroke.\n *\n * The height is derived from an off-screen mirror rather than from the live\n * element. Measuring the live element — `height: auto`, read `scrollHeight`,\n * restore — re-lays out every ancestor mid-keystroke: in a chat-style column\n * the input box collapses to one row and the scroll viewport grows by the\n * difference, and the browser's scroll anchoring has to undo that. It does so\n * imperfectly, which is visible as the whole conversation bouncing by a pixel\n * on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so\n * there is nothing to undo.\n */\nexport function useAutoSizeTextArea({\n inputRef,\n autoSize,\n rows,\n maxRows,\n value,\n}: AutoSizeTextAreaOptions) {\n const mirrorRef = useRef<HTMLTextAreaElement | null>(null);\n\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n\n if (!textarea || !autoSize) return;\n\n let mirror = mirrorRef.current;\n\n if (!mirror) {\n mirror = createMirror();\n mirrorRef.current = mirror;\n document.body.appendChild(mirror);\n }\n\n const style = getComputedStyle(textarea);\n const contentWidth = getContentWidth(textarea, style);\n\n // Nothing to wrap into: the field is display:none, or has not been laid out\n // yet. Measuring at zero width would wrap every character onto its own line\n // and pin the height at `maxRows`; keep the current height instead and wait\n // for the ResizeObserver to report a real one.\n if (contentWidth === 0) return;\n\n for (const prop of MIRROR_TYPOGRAPHY_PROPS) {\n mirror.style[prop] = style[prop];\n }\n\n mirror.style.width = `${contentWidth}px`;\n mirror.value = textarea.value;\n\n const lineHeight = getLineHeight(style, mirror);\n // A textarea lays every line out at `line-height`, so the content height is\n // a whole number of lines — `round` keeps a fractional line height (a zoomed\n // page, a percentage preset) from adding a phantom row.\n const contentRows = Math.max(\n 1,\n Math.round(mirror.scrollHeight / lineHeight),\n );\n const targetRows = Math.max(Math.min(contentRows, maxRows), rows);\n\n const paddingTop = parseFloat(style.paddingTop) || 0;\n const paddingBottom = parseFloat(style.paddingBottom) || 0;\n const borderTop = parseFloat(style.borderTopWidth) || 0;\n const borderBottom = parseFloat(style.borderBottomWidth) || 0;\n // `height` covers padding and border under `border-box` only.\n const box =\n style.boxSizing === 'border-box'\n ? paddingTop + paddingBottom + borderTop + borderBottom\n : 0;\n\n const nextHeight = `${targetRows * lineHeight + box}px`;\n\n // Writing an unchanged height would wake the ResizeObserver below for\n // nothing.\n if (textarea.style.height !== nextHeight) {\n textarea.style.height = nextHeight;\n }\n });\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n // Re-measure on element resize as that can affect wrapping.\n useEnvironmentalEffect(() => {\n if (!autoSize || !inputRef.current) return;\n\n adjustHeight();\n\n const resizeObserver = new ResizeObserver(adjustHeight);\n\n resizeObserver.observe(inputRef.current);\n\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef.current]);\n\n // Adjust when the value changes programmatically (controlled mode).\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [value]);\n\n useEffect(\n () => () => {\n mirrorRef.current?.remove();\n mirrorRef.current = null;\n },\n [],\n );\n\n return adjustHeight;\n}\n"],"mappings":"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"}

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 //#region src/components/fields/color/channels.ts