@cube-dev/ui-kit 0.197.0 → 0.198.0

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.js","names":["createFocusableRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","FocusEventHandler","forwardRef","MouseEvent","ReactElement","ReactNode","RefObject","useImperativeHandle","useMemo","useRef","AriaNumberFieldProps","AriaTextFieldProps","useHover","FieldBaseProps","TextFieldKeyboardProps","mergeProps","useCombinedRefs","useFocus","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","wrapWithField","Props","ADD_STYLES","$","display","placeContent","placeItems","gridRows","flow","gap","cursor","opacity","disabled","INPUT_WRAPPER_STYLES","position","gridColumns","prefix","suffix","fill","border","valid","invalid","focused","preset","radius","color","zIndex","boxSizing","transition","backgroundClip","height","multiline","$size","Prefix","Suffix","State","InputIcon","width","fontSize","ValidationIcon","InputWrapperElement","qa","styles","PROP_STYLES","DEFAULT_INPUT_STYLES","recipe","placeSelf","padding","textAlign","flexGrow","margin","resize","userSelect","Placeholder","InputElement","INTERACTIVE_ELEMENTS","focusInputOnBoxPress","event","HTMLElement","input","HTMLInputElement","HTMLTextAreaElement","button","defaultPrevented","box","currentTarget","target","Element","contains","interactive","closest","preventDefault","focus","CubeTextInputBaseProps","Omit","validate","onFocus","onBlur","icon","suffixPosition","actions","multiLine","autoFocus","inputProps","wrapperProps","inputRef","wrapperRef","HTMLDivElement","isLoading","loadingIndicator","inputStyles","rows","size","autoComplete","autocomplete","CubeBufferedValueProps","isBuffered","_TextInputBase","props","ref","mods","isInvalid","isValid","isDisabled","value","maxLength","minLength","form","otherProps","type","ElementType","isFocused","focusProps","hoverProps","isHovered","domRef","select","current","getInputElement","showValidationIndicator","placeholder","modifiers","loadable","hovered","resolvedAutoComplete","resolvedAutoFocus","hasTextSecurity","textSecurityStyles","length","fontFamily","textField","onMouseDown","undefined","TextInputBase"],"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  FocusEventHandler,\n  forwardRef,\n  MouseEvent,\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, TextFieldKeyboardProps } 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\nconst INTERACTIVE_ELEMENTS =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]';\n\n/**\n * A press inside the field box but outside the input — the prefix or suffix area, an icon, a\n * textarea's margins — focuses the input, as a press anywhere in a native field does. Presses on\n * the input itself and on interactive children, such as a clear button or the steppers, stay\n * theirs.\n */\nfunction focusInputOnBoxPress(\n  event: MouseEvent<HTMLElement>,\n  input: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n) {\n  if (event.button !== 0 || event.defaultPrevented) return;\n  if (!input || input.disabled) return;\n\n  const box = event.currentTarget;\n  const target = event.target as Element;\n\n  // React bubbles presses from a portal (a popover opened from a field action)\n  // through the box; those belong to the portal.\n  if (!box.contains(target)) return;\n\n  const interactive = target.closest(INTERACTIVE_ELEMENTS);\n\n  if (interactive && box.contains(interactive)) return;\n\n  // The default action would move focus to the press target first, blurring the input.\n  event.preventDefault();\n  input.focus();\n}\n\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<\n      AriaTextFieldProps<HTMLInputElement | HTMLTextAreaElement>,\n      | 'validate'\n      | 'form'\n      | 'name'\n      | 'errorMessage'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    TextFieldKeyboardProps,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\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  /**\n   * Controls placed last in the suffix, after the validation and loading\n   * statuses and after `suffix` whatever its position, such as a popover\n   * trigger.\n   */\n  actions?: ReactNode;\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Direct input props. The explicit props above (`isDisabled`, `maxLength`, `minLength`,\n   * `autoFocus`, `rows`, `autoComplete`) win over the same attributes here when they are set; an\n   * unset one leaves the value given here in place.\n   */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement | null>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** Rendered in place of the default loading icon while `isLoading` is set */\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    actions,\n    wrapperRef,\n    rows,\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();\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 || !!actions,\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      actions,\n    ],\n  );\n\n  // The explicit props win when they are set; an unset one falls back to the merged `inputProps`\n  // instead of overwriting it with `undefined`. For `autoComplete` that keeps both a caller's\n  // `inputProps={{ autoComplete }}` and `useNumberField`'s own `off`. `autocomplete` is the\n  // deprecated alias.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\n  const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;\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      {...mergeProps(wrapperProps, {\n        onMouseDown: (event: MouseEvent<HTMLElement>) =>\n          focusInputOnBoxPress(event, inputRef?.current),\n      })}\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 ?? inputProps.rows ?? 1 : inputProps.rows}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={resolvedAutoFocus ? '' : undefined}\n        autoFocus={resolvedAutoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!(isDisabled ?? inputProps.disabled)}\n        maxLength={maxLength ?? inputProps.maxLength}\n        minLength={minLength ?? inputProps.minLength}\n      />\n      {showValidationIndicator || suffix || actions ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {isLoading && loadingIndicator ? (\n            <div data-element=\"State\">{loadingIndicator}</div>\n          ) : (\n            <ValidationIndicator\n              isInvalid={isInvalid}\n              isValid={isValid}\n              isLoading={isLoading}\n            />\n          )}\n          {suffixPosition === 'after' ? suffix : null}\n          {actions}\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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"}
+{"version":3,"file":"TextInputBase.js","names":["useObjectRef","createFocusableRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","FocusEventHandler","forwardRef","MouseEvent","ReactElement","ReactNode","RefObject","useImperativeHandle","useMemo","AriaNumberFieldProps","AriaTextFieldProps","useHover","FieldBaseProps","TextFieldKeyboardProps","mergeProps","useCombinedRefs","useFocus","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","wrapWithField","Props","ADD_STYLES","$","display","placeContent","placeItems","gridRows","flow","gap","cursor","opacity","disabled","INPUT_WRAPPER_STYLES","position","gridColumns","prefix","suffix","fill","border","valid","invalid","focused","preset","radius","color","zIndex","boxSizing","transition","backgroundClip","height","multiline","$size","Prefix","Suffix","State","InputIcon","width","fontSize","ValidationIcon","InputWrapperElement","qa","styles","PROP_STYLES","DEFAULT_INPUT_STYLES","recipe","placeSelf","padding","textAlign","flexGrow","margin","resize","userSelect","Placeholder","InputElement","INTERACTIVE_ELEMENTS","focusInputOnBoxPress","event","HTMLElement","input","HTMLInputElement","HTMLTextAreaElement","button","defaultPrevented","box","currentTarget","target","Element","contains","interactive","closest","preventDefault","focus","CubeTextInputBaseProps","Omit","validate","onFocus","onBlur","icon","suffixPosition","actions","multiLine","autoFocus","inputProps","wrapperProps","inputRef","wrapperRef","HTMLDivElement","isLoading","loadingIndicator","inputStyles","rows","size","autoComplete","autocomplete","CubeBufferedValueProps","isBuffered","_TextInputBase","props","ref","mods","isInvalid","isValid","isDisabled","value","maxLength","minLength","form","otherProps","type","ElementType","isFocused","focusProps","hoverProps","isHovered","domRef","select","current","getInputElement","showValidationIndicator","placeholder","modifiers","loadable","hovered","resolvedAutoComplete","resolvedAutoFocus","hasTextSecurity","textSecurityStyles","length","fontFamily","textField","onMouseDown","undefined","TextInputBase","useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { 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  FocusEventHandler,\n  forwardRef,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps, TextFieldKeyboardProps } 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\nconst INTERACTIVE_ELEMENTS =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]';\n\n/**\n * A press inside the field box but outside the input — the prefix or suffix area, an icon, a\n * textarea's margins — focuses the input, as a press anywhere in a native field does. Presses on\n * the input itself and on interactive children, such as a clear button or the steppers, stay\n * theirs.\n */\nfunction focusInputOnBoxPress(\n  event: MouseEvent<HTMLElement>,\n  input: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n) {\n  if (event.button !== 0 || event.defaultPrevented) return;\n  if (!input || input.disabled) return;\n\n  const box = event.currentTarget;\n  const target = event.target as Element;\n\n  // React bubbles presses from a portal (a popover opened from a field action)\n  // through the box; those belong to the portal.\n  if (!box.contains(target)) return;\n\n  const interactive = target.closest(INTERACTIVE_ELEMENTS);\n\n  if (interactive && box.contains(interactive)) return;\n\n  // The default action would move focus to the press target first, blurring the input.\n  event.preventDefault();\n  input.focus();\n}\n\nexport interface CubeTextInputBaseProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<\n      AriaTextFieldProps<HTMLInputElement | HTMLTextAreaElement>,\n      | 'validate'\n      | 'form'\n      | 'name'\n      | 'errorMessage'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    TextFieldKeyboardProps,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\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  /**\n   * Controls placed last in the suffix, after the validation and loading\n   * statuses and after `suffix` whatever its position, such as a popover\n   * trigger.\n   */\n  actions?: ReactNode;\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Direct input props. The explicit props above (`isDisabled`, `maxLength`, `minLength`,\n   * `autoFocus`, `rows`, `autoComplete`) win over the same attributes here when they are set; an\n   * unset one leaves the value given here in place.\n   */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement | null>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** Rendered in place of the default loading icon while `isLoading` is set */\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    actions,\n    wrapperRef,\n    rows,\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();\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  // The input box, with or without the field chrome, so the field's ref never\n  // resolves to `null`; `wrapperRef` reaches the same element.\n  let domRef = useObjectRef(wrapperRef);\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 || !!actions,\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      actions,\n    ],\n  );\n\n  // The explicit props win when they are set; an unset one falls back to the merged `inputProps`\n  // instead of overwriting it with `undefined`. For `autoComplete` that keeps both a caller's\n  // `inputProps={{ autoComplete }}` and `useNumberField`'s own `off`. `autocomplete` is the\n  // deprecated alias.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\n  const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;\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={domRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...mergeProps(wrapperProps, {\n        onMouseDown: (event: MouseEvent<HTMLElement>) =>\n          focusInputOnBoxPress(event, inputRef?.current),\n      })}\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 ?? inputProps.rows ?? 1) : inputProps.rows}\n        mods={modifiers}\n        style={textSecurityStyles}\n        {...(resolvedAutoFocus ? { 'data-autofocus': '' } : undefined)}\n        autoFocus={resolvedAutoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!(isDisabled ?? inputProps.disabled)}\n        maxLength={maxLength ?? inputProps.maxLength}\n        minLength={minLength ?? inputProps.minLength}\n      />\n      {showValidationIndicator || suffix || actions ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {isLoading && loadingIndicator ? (\n            <div data-element=\"State\">{loadingIndicator}</div>\n          ) : (\n            <ValidationIndicator\n              isInvalid={isInvalid}\n              isValid={isValid}\n              isLoading={isLoading}\n            />\n          )}\n          {suffixPosition === 'after' ? suffix : null}\n          {actions}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

package/dist/components/fields/TextInput/displayed-validation.js

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
-
 //#region src/components/fields/TextInput/displayed-validation.ts
 /**
 * The validation the field chrome shows. React Aria runs `validate` from the first render and sets
@@ -44,7 +43,7 @@ function useDisplayedValidation() {
 	} else t1 = $[2];
 	return t1;
 }
-
 //#endregion
 export { useDisplayedValidation };
+
 //# sourceMappingURL=displayed-validation.js.map

package/dist/components/fields/TextInput/displayed-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"displayed-validation.js","names":["useState","chain","ValidationResult","ReactNode","ValidationTriggers","onChange","args","onBlur","useDisplayedValidation","$","_c","isTouched","setIsTouched","t0","Symbol","for","touch","t1","trackTouched","props","getDisplayedValidation","t2","validation","isInvalid","errorMessage","isShown","undefined","validationErrors","length","join"],"sources":["../../../../src/components/fields/TextInput/displayed-validation.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { chain } from '../../../utils/react/chain';\n\nimport type { ValidationResult } from '@react-types/shared';\nimport type { ReactNode } from 'react';\n\ninterface ValidationTriggers {\n  onChange?: (...args: any[]) => void;\n  onBlur?: (...args: any[]) => void;\n}\n\n/**\n * The validation the field chrome shows. React Aria runs `validate` from the first render and sets\n * `aria-invalid` from it, so an untouched field would open with the invalid style and the message\n * for its empty value. Both wait until the user has changed the value or left the field. An explicit\n * `isInvalid`, which a form's validation also sets, shows at once, and a caller's `errorMessage`\n * still wins over the errors `validate` returns.\n */\nexport function useDisplayedValidation() {\n  let [isTouched, setIsTouched] = useState(false);\n  let touch = () => setIsTouched(true);\n\n  return {\n    /** Wraps the React Aria hook's props so its first `onChange` or `onBlur` marks the field touched. */\n    trackTouched<P extends ValidationTriggers>(props: P): P {\n      return {\n        ...props,\n        onChange: chain(props.onChange, touch),\n        onBlur: chain(props.onBlur, touch),\n      };\n    },\n    getDisplayedValidation(\n      {\n        isInvalid,\n        errorMessage,\n      }: { isInvalid?: boolean; errorMessage?: ReactNode },\n      validation: ValidationResult,\n    ) {\n      let isShown = isTouched || isInvalid !== undefined;\n\n      return {\n        isInvalid: isShown && validation.isInvalid,\n        errorMessage:\n          errorMessage === undefined &&\n          isShown &&\n          validation.validationErrors.length\n            ? validation.validationErrors.join(' ')\n            : errorMessage,\n      };\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,SAAOQ,yBAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,CAAAC,WAAAC,gBAAgCZ,SAAS,MAAM;CAAC,IAAAa;AAAA,KAAAJ,EAAA,OAAAK,OAAAC,IAAA,4BAAA,EAAA;AACpCF,aAAMD,aAAa,KAAK;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAApC,MAAAO,QAAYH;CAAyB,IAAAI;AAAA,KAAAR,EAAA,OAAAE,WAAA;AAE9BM,OAAA;GAAAC,aAAAC,OAAA;AAAA,WAGI;KAAA,GACFA;KAAKd,UACEJ,MAAMkB,MAAKd,UAAWW,MAAM;KAAAT,QAC9BN,MAAMkB,MAAKZ,QAASS,MAAK;KAClC;;GAAAI,uBAAAC,IAAAC,YAAA;IAGD,MAAA,EAAAC,WAAAC,iBAAAH;IAMA,MAAAI,UAAcd,aAAaY,cAAcG;AAAU,WAE5C;KAAAH,WACME,WAAWH,WAAUC;KAAUC,cAExCA,iBAAiBE,UAAjBD,WAEAH,WAAUK,iBAAiBC,SACvBN,WAAUK,iBAAiBE,KAAM,IACrB,GAJhBL;KAKH;;GAEJ;AAAAf,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QA5BMQ"}
+{"version":3,"file":"displayed-validation.js","names":["useState","chain","ValidationResult","ReactNode","ValidationTriggers","onChange","args","onBlur","useDisplayedValidation","$","_c","isTouched","setIsTouched","t0","Symbol","for","touch","t1","trackTouched","props","getDisplayedValidation","t2","validation","isInvalid","errorMessage","isShown","undefined","validationErrors","length","join","_c"],"sources":["../../../../src/components/fields/TextInput/displayed-validation.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { chain } from '../../../utils/react/chain';\n\nimport type { ValidationResult } from '@react-types/shared';\nimport type { ReactNode } from 'react';\n\ninterface ValidationTriggers {\n  onChange?: (...args: any[]) => void;\n  onBlur?: (...args: any[]) => void;\n}\n\n/**\n * The validation the field chrome shows. React Aria runs `validate` from the first render and sets\n * `aria-invalid` from it, so an untouched field would open with the invalid style and the message\n * for its empty value. Both wait until the user has changed the value or left the field. An explicit\n * `isInvalid`, which a form's validation also sets, shows at once, and a caller's `errorMessage`\n * still wins over the errors `validate` returns.\n */\nexport function useDisplayedValidation() {\n  let [isTouched, setIsTouched] = useState(false);\n  let touch = () => setIsTouched(true);\n\n  return {\n    /** Wraps the React Aria hook's props so its first `onChange` or `onBlur` marks the field touched. */\n    trackTouched<P extends ValidationTriggers>(props: P): P {\n      return {\n        ...props,\n        onChange: chain(props.onChange, touch),\n        onBlur: chain(props.onBlur, touch),\n      };\n    },\n    getDisplayedValidation(\n      {\n        isInvalid,\n        errorMessage,\n      }: { isInvalid?: boolean; errorMessage?: ReactNode },\n      validation: ValidationResult,\n    ) {\n      let isShown = isTouched || isInvalid !== undefined;\n\n      return {\n        isInvalid: isShown && validation.isInvalid,\n        errorMessage:\n          errorMessage === undefined &&\n          isShown &&\n          validation.validationErrors.length\n            ? validation.validationErrors.join(' ')\n            : errorMessage,\n      };\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAOQ,yBAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACL,MAAA,CAAAC,WAAAC,gBAAgCZ,SAAS,KAAK;CAAE,IAAAa;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACpCF,WAAMD,aAAa,IAAI;EAACH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAApC,MAAAO,QAAYH;CAAyB,IAAAI;CAAA,IAAAR,EAAA,OAAAE,WAAA;EAE9BM,KAAA;GAAAC,aAAAC,OAAA;IAAA,OAGI;KAAA,GACFA;KAAKd,UACEJ,MAAMkB,MAAKd,UAAWW,KAAK;KAACT,QAC9BN,MAAMkB,MAAKZ,QAASS,KAAK;IACnC;GAAC;GAAAI,uBAAAC,IAAAC,YAAA;IAGD,MAAA,EAAAC,WAAAC,iBAAAH;IAMA,MAAAI,UAAcd,aAAaY,cAAcG,KAAAA;IAAU,OAE5C;KAAAH,WACME,WAAWH,WAAUC;KAAUC,cAExCA,iBAAiBE,KAAAA,KAAjBD,WAEAH,WAAUK,iBAAiBC,SACvBN,WAAUK,iBAAiBE,KAAM,GACtB,IAJfL;IAKJ;GAAC;EAEL;EAACf,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OA5BMQ;AA4BN"}

package/dist/components/fields/TextInput/index.d.ts

@@ -1,3 +1,4 @@
 
 import { AriaTextFieldProps, CubeBufferedValueProps, CubeTextInputBaseProps, DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, TextInputBase } from "./TextInputBase.js";
-import { CubeTextInputProps, TextInput, useTextField } from "./TextInput.js";
+import { CubeTextInputProps, TextInput, useTextField } from "./TextInput.js";
+export { type AriaTextFieldProps, CubeBufferedValueProps, CubeTextInputBaseProps, CubeTextInputProps, DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, TextInput, TextInputBase, useTextField };

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.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.
@@ -140,7 +139,7 @@ function useAutoSizeTextArea({ inputRef, autoSize, rows, maxRows, value }) {
 	}, []);
 	return adjustHeight;
 }
-
 //#endregion
 export { useAutoSizeTextArea };
+
 //# sourceMappingURL=useAutoSizeTextArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAutoSizeTextArea.js","names":["RefObject","useEffect","useLayoutEffect","useRef","useEvent","MIRROR_TYPOGRAPHY_PROPS","const","FALLBACK_LINE_HEIGHT","createMirror","HTMLTextAreaElement","mirror","document","createElement","setAttribute","readOnly","rows","Object","assign","style","position","top","left","boxSizing","margin","padding","border","height","minHeight","maxHeight","overflow","resize","visibility","pointerEvents","getContentWidth","textarea","CSSStyleDeclaration","paddingLeft","parseFloat","paddingRight","borderLeft","borderLeftWidth","borderRight","borderRightWidth","scrollbar","Math","max","round","offsetWidth","clientWidth","getBoundingClientRect","width","getLineHeight","parsed","lineHeight","Number","isFinite","previousValue","value","measured","scrollHeight","AutoSizeTextAreaOptions","inputRef","autoSize","maxRows","useAutoSizeTextArea","mirrorRef","adjustHeight","current","body","appendChild","getComputedStyle","contentWidth","prop","contentRows","targetRows","min","paddingTop","paddingBottom","borderTop","borderTopWidth","borderBottom","borderBottomWidth","box","nextHeight","useEnvironmentalEffect","window","resizeObserver","ResizeObserver","observe","disconnect","remove"],"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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"}
+{"version":3,"file":"useAutoSizeTextArea.js","names":["RefObject","useEffect","useLayoutEffect","useRef","useEvent","MIRROR_TYPOGRAPHY_PROPS","const","FALLBACK_LINE_HEIGHT","createMirror","HTMLTextAreaElement","mirror","document","createElement","setAttribute","readOnly","rows","Object","assign","style","position","top","left","boxSizing","margin","padding","border","height","minHeight","maxHeight","overflow","resize","visibility","pointerEvents","getContentWidth","textarea","CSSStyleDeclaration","paddingLeft","parseFloat","paddingRight","borderLeft","borderLeftWidth","borderRight","borderRightWidth","scrollbar","Math","max","round","offsetWidth","clientWidth","getBoundingClientRect","width","getLineHeight","parsed","lineHeight","Number","isFinite","previousValue","value","measured","scrollHeight","AutoSizeTextAreaOptions","inputRef","autoSize","maxRows","useAutoSizeTextArea","mirrorRef","adjustHeight","current","body","appendChild","getComputedStyle","contentWidth","prop","contentRows","targetRows","min","paddingTop","paddingBottom","borderTop","borderTopWidth","borderBottom","borderBottomWidth","box","nextHeight","useEnvironmentalEffect","window","resizeObserver","ResizeObserver","observe","disconnect","remove"],"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.d.ts

@@ -1,11 +1,9 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import * as react from "react";
 import { ComponentType } from "react";
-
 //#region src/components/fields/TextInputMapper/TextInputMapper.d.ts
-interface CubeTextInputMapperProps extends FieldBaseProps<Record<string, string> | null | undefined> {
+export interface CubeTextInputMapperProps extends FieldBaseProps<Record<string, string> | null | undefined> {
   qa?: string;
   actionLabel?: string;
   isDisabled?: boolean;
@@ -18,7 +16,7 @@ interface CubeTextInputMapperProps extends FieldBaseProps<Record<string, string>
   allowsCustomValue?: boolean;
   size?: 'small' | 'medium' | 'large' | (string & {});
 }
-interface CubeTextInputMapperInputProps {
+export interface CubeTextInputMapperInputProps {
   id: number;
   fieldType: 'key' | 'value';
   inputType?: 'input' | 'combobox' | 'password' | 'textarea';
@@ -39,7 +37,7 @@ interface CubeTextInputMapperInputProps {
    */
   autoComplete?: string;
 }
-declare const _TextInputMapper: react.ForwardRefExoticComponent<CubeTextInputMapperProps & react.RefAttributes<HTMLDivElement>>;
+declare const _TextInputMapper: import("react").ForwardRefExoticComponent<CubeTextInputMapperProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
-export { CubeTextInputMapperInputProps, CubeTextInputMapperProps, _TextInputMapper };
+export { _TextInputMapper as TextInputMapper };
 //# sourceMappingURL=TextInputMapper.d.ts.map

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

@@ -1,6 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.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 { useI18n } from "../../../i18n/useI18n.js";
@@ -11,15 +10,14 @@ 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 { _PasswordInput } from "../PasswordInput/PasswordInput.js";
-import { _TextArea } from "../TextArea/TextArea.js";
+import { PasswordInput as _PasswordInput } from "../PasswordInput/PasswordInput.js";
+import { TextArea as _TextArea } from "../TextArea/TextArea.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { ComboBox } from "../ComboBox/ComboBox.js";
 import { PlusIcon } from "../../../icons/PlusIcon.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/fields/TextInputMapper/TextInputMapper.tsx
 const PROPS_GRID_HACK = { styles: { InputArea: { gridColumn: {
 	"": "auto",
@@ -35,7 +33,6 @@ function removeDuplicates(mappings) {
 }
 function TextInputMapper(props, ref) {
 	const { t } = useI18n();
-	ref = useCombinedRefs(ref);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -166,7 +163,7 @@ function TextInputMapper(props, ref) {
 		isInvalid,
 		isValid
 	]);
-	return wrapWithField(/* @__PURE__ */ jsxs(Flow, {
+	const element = /* @__PURE__ */ jsxs(Flow, {
 		ref,
 		role: "group",
 		"aria-label": ariaLabel,
@@ -192,7 +189,8 @@ function TextInputMapper(props, ref) {
 				children: actionLabel ? actionLabel : t("textInputMapper.mapping", "Mapping")
 			})]
 		}) : null]
-	}), ref, {
+	});
+	return wrapWithField(element, {
 		...props,
 		labelProps: mergeProps(props.labelProps, { id: labelId })
 	});
@@ -325,7 +323,7 @@ function _temp(option) {
 }
 const _TextInputMapper = forwardRef(TextInputMapper);
 _TextInputMapper.displayName = "TextInputMapper";
-
 //#endregion
-export { _TextInputMapper };
+export { _TextInputMapper as TextInputMapper };
+
 //# sourceMappingURL=TextInputMapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputMapper.js","names":["ComponentType","ForwardedRef","forwardRef","KeyboardEvent","useEffect","useMemo","useRef","useState","useEvent","useI18n","CloseIcon","PlusIcon","FieldBaseProps","mergeProps","useCombinedRefs","Button","Block","useFieldProps","wrapWithField","Flow","Grid","Space","ComboBox","PasswordInput","TextArea","TextInput","AriaLabelingProps","Mapping","key","value","id","CubeTextInputMapperProps","Record","qa","actionLabel","isDisabled","onChange","KeyComponent","CubeTextInputMapperInputProps","ValueComponent","keyProps","Partial","valueProps","allowsCustomValue","size","PROPS_GRID_HACK","styles","InputArea","gridColumn","removeDuplicates","mappings","keys","Set","filter","has","add","TextInputMapper","props","ref","HTMLDivElement","t","defaultValidationTrigger","valuePropsMapper","counterRef","isInvalid","isValid","form","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelId","labelProps","extractLocalValues","localValues","valueKeys","Object","localKeys","map","forEach","includes","k","entries","exist","find","push","current","setMappings","JSON","stringify","onMappingsChange","newMappings","newValue","reduce","acc","trim","length","undefined","updatedMappings","addNewMapping","prev","showNewButton","some","TextInputMapperInput","onKeyChange","mapping","onValueChange","onSubmit","onKeyDown","e","ctrlKey","metaKey","renderedMappings","index","m","element","label","overflow","width","fieldType","inputType","options","placeholder","autoFocus","autoComplete","$","_c","t0","t1","rest","t2","t3","onBlur","t4","newValue_0","onSelectionChange","t5","Symbol","for","input","textarea","password","Component","t6","t7","val","t8","t9","_temp","t10","t11","option","_TextInputMapper","displayName"],"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\nimport type { AriaLabelingProps } from '@react-types/shared';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps\n  extends FieldBaseProps<Record<string, string> | null | undefined> {\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    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props as typeof props & AriaLabelingProps;\n\n  // The rows are one field, so they form a group that the label, or the\n  // caller's `aria-label`, names and the field's description and message\n  // describe. A `<label for>` cannot name a group, so the label gets an id,\n  // unless the caller gave it one.\n  const labelId = props.labelProps?.id ?? `${props.id}-label`;\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      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy ?? (props.label ? labelId : undefined)}\n      aria-describedby={ariaDescribedBy}\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' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel\n              ? actionLabel\n              : t('textInputMapper.mapping', 'Mapping')}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, ref, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, { id: labelId }),\n  });\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        isBare\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      isBare\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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"}
+{"version":3,"file":"TextInputMapper.js","names":["ComponentType","ForwardedRef","forwardRef","KeyboardEvent","useEffect","useMemo","useRef","useState","useEvent","useI18n","CloseIcon","PlusIcon","FieldBaseProps","mergeProps","Button","Block","useFieldProps","wrapWithField","Flow","Grid","Space","ComboBox","PasswordInput","TextArea","TextInput","AriaLabelingProps","Mapping","key","value","id","CubeTextInputMapperProps","Record","qa","actionLabel","isDisabled","onChange","KeyComponent","CubeTextInputMapperInputProps","ValueComponent","keyProps","Partial","valueProps","allowsCustomValue","size","PROPS_GRID_HACK","styles","InputArea","gridColumn","removeDuplicates","mappings","keys","Set","filter","has","add","TextInputMapper","props","ref","HTMLDivElement","t","defaultValidationTrigger","valuePropsMapper","counterRef","isInvalid","isValid","form","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelId","labelProps","extractLocalValues","localValues","valueKeys","Object","localKeys","map","forEach","includes","k","entries","exist","find","push","current","setMappings","JSON","stringify","onMappingsChange","newMappings","newValue","reduce","acc","trim","length","undefined","updatedMappings","addNewMapping","prev","showNewButton","some","TextInputMapperInput","onKeyChange","mapping","onValueChange","onSubmit","onKeyDown","e","ctrlKey","metaKey","renderedMappings","index","m","element","label","overflow","width","fieldType","inputType","options","placeholder","autoFocus","autoComplete","$","_c","t0","t1","rest","t2","t3","onBlur","t4","newValue_0","onSelectionChange","t5","Symbol","for","input","textarea","password","Component","t6","t7","val","t8","t9","_temp","t10","t11","option","_TextInputMapper","displayName","_c","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 } 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\nimport type { AriaLabelingProps } from '@react-types/shared';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps<\n  Record<string, string> | null | undefined\n> {\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  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    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props as typeof props & AriaLabelingProps;\n\n  // The rows are one field, so they form a group that the label, or the\n  // caller's `aria-label`, names and the field's description and message\n  // describe. A `<label for>` cannot name a group, so the label gets an id,\n  // unless the caller gave it one.\n  const labelId = props.labelProps?.id ?? `${props.id}-label`;\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      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy ?? (props.label ? labelId : undefined)}\n      aria-describedby={ariaDescribedBy}\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' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel\n              ? actionLabel\n              : t('textInputMapper.mapping', 'Mapping')}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, { id: labelId }),\n  });\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        isBare\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      isBare\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/TextInputMapper/index.d.ts

@@ -1,2 +1,3 @@
 
-import { CubeTextInputMapperInputProps, CubeTextInputMapperProps, _TextInputMapper } from "./TextInputMapper.js";
+import { CubeTextInputMapperInputProps, CubeTextInputMapperProps, TextInputMapper as _TextInputMapper } from "./TextInputMapper.js";
+export { CubeTextInputMapperInputProps, CubeTextInputMapperProps, _TextInputMapper as TextInputMapper };

package/dist/components/fields/TriggerActions.js

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsxs } from "react/jsx-runtime";
-
 //#region src/components/fields/TriggerActions.tsx
 function TriggerActions(props) {
 	const $ = c(3);
@@ -16,7 +15,7 @@ function TriggerActions(props) {
 	} else t0 = $[2];
 	return t0;
 }
-
 //#endregion
-export { TriggerActions };
+export { TriggerActions, ItemActionIcon as TriggerIcon };
+
 //# sourceMappingURL=TriggerActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TriggerActions.js","names":["ItemActionIcon","ReactNode","TriggerActionsProps","actions","builtIn","TriggerActions","props","$","_c","t0","TriggerIcon"],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { ReactNode } from 'react';\n\n/**\n * The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n *\n * It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n *\n * The run isolates its children's presses from the trigger and identifies them\n * to the overlay as the trigger's own — both in `ItemActionsWrapper`, so every\n * row that has actions gets them and not only these three.\n */\nexport interface TriggerActionsProps {\n  /** The caller's custom actions. They come first — leftmost in LTR. */\n  actions?: ReactNode;\n  /** The built-in control: spinner, clear button, or caret. */\n  builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { actions, builtIn } = props;\n\n  return (\n    <>\n      {actions}\n      {builtIn}\n    </>\n  );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;;AA4BA,SAAOK,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAL,SAAAC,YAA6BE;CAAM,IAAAG;AAAA,KAAAF,EAAA,OAAAJ,WAAAI,EAAA,OAAAH,SAAA;AAGjCK,OAAA,4CACGN,SACAC,WACA;AAAAG,IAAA,KAAAJ;AAAAI,IAAA,KAAAH;AAAAG,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAHHE"}
+{"version":3,"file":"TriggerActions.js","names":["ItemActionIcon","ReactNode","TriggerActionsProps","actions","builtIn","TriggerActions","props","$","_c","t0","TriggerIcon","_c"],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { ReactNode } from 'react';\n\n/**\n * The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n *\n * It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n *\n * The run isolates its children's presses from the trigger and identifies them\n * to the overlay as the trigger's own — both in `ItemActionsWrapper`, so every\n * row that has actions gets them and not only these three.\n */\nexport interface TriggerActionsProps {\n  /** The caller's custom actions. They come first — leftmost in LTR. */\n  actions?: ReactNode;\n  /** The built-in control: spinner, clear button, or caret. */\n  builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { actions, builtIn } = props;\n\n  return (\n    <>\n      {actions}\n      {builtIn}\n    </>\n  );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;AA4BA,SAAOK,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACL,MAAA,EAAAL,SAAAC,YAA6BE;CAAM,IAAAG;CAAA,IAAAF,EAAA,OAAAJ,WAAAI,EAAA,OAAAH,SAAA;EAGjCK,KAAA,qBAAA,UAAA,EAAA,UAAA,CACGN,SACAC,OAAO,EAAA,CAAA;EACPG,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAHHE;AAGG"}

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

@@ -1,14 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
-import { __Radio } from "../RadioGroup/Radio.js";
-import { __Slider } from "../Slider/Slider.js";
+import { Radio as __Radio } from "../RadioGroup/Radio.js";
+import { Slider as __Slider } from "../Slider/Slider.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/fields/color/ColorPanel.tsx
 const PanelElement = tasty({
 	qa: "ColorPanel",
@@ -335,7 +334,7 @@ function _temp(item) {
 		children: COLOR_SPACE_LABELS[item]
 	}, item);
 }
-
 //#endregion
 export { ColorPanel };
+
 //# sourceMappingURL=ColorPanel.js.map

package/dist/components/fields/color/ColorPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","useI18n","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","t","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  /** Optional value field rendered above the preview. */\n  input?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          isBare\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n  const { t } = useI18n();\n\n  const colorTokens = {\n    '--color-picker-color': toHex(color),\n    '--color-picker-contrast-color': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        isBare\n        aria-label={t('colorPicker.colorSpace', 'Color space')}\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","useI18n","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","t","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item","_c","Slider","Radio"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  /** Optional value field rendered above the preview. */\n  input?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          isBare\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n  const { t } = useI18n();\n\n  const colorTokens = {\n    '--color-picker-color': toHex(color),\n    '--color-picker-contrast-color': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        isBare\n        aria-label={t('colorPicker.colorSpace', 'Color space')}\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":"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"}