@cube-dev/ui-kit 0.207.0 → 0.208.0

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

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
-import { RangeSlider as __RangeSlider } from "./RangeSlider.js";
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { Slider as __Slider } from "./Slider.js";
+import { RangeSlider as __RangeSlider } from "./RangeSlider.js";
 import { HueSlider as __HueSlider } from "./HueSlider.js";
 import { useSliderState as useSliderState$1 } from "react-stately";
 export { __HueSlider as HueSlider, __RangeSlider as RangeSlider, __Slider as Slider, useSliderState$1 as useSliderState };

package/dist/components/fields/Slider/types.d.ts

@@ -1,6 +1,5 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
 import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { BasePropsWithoutChildren, Styles } from "@tenphi/tasty";
 import { AriaSliderProps } from "react-aria";

package/dist/components/fields/Switch/Switch.d.ts

@@ -1,6 +1,5 @@
 
 import { FieldBaseProps, ToggleSelectionProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
 import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
 import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { BaseProps, Styles } from "@tenphi/tasty";

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

@@ -1,18 +1,18 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Text as _Text } from "../../content/Text.js";
-import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
 import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { splitFieldLayout } from "../../form/field-layout.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["useFocusableRef","BaseProps","Styles","tasty","forwardRef","ReactElement","useRef","AriaSwitchProps","useHover","useSwitch","useToggleState","LoadingIcon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","getDisabledElementProps","getInertInputProps","useFocus","castNullableIsSelected","WithNullableSelected","useId","Text","useAutoTooltip","getValidationMods","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","CubeTooltipProviderProps","SwitchWrapperElement","as","styles","display","position","placeItems","gap","width","color","SwitchElement","boxSizing","verticalAlign","placeSelf","radius","fill","checked","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","cursor","Thumb","top","left","CubeSwitchProps","Omit","inputStyles","isLoading","size","tooltip","Switch","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","qa","isDisabled","t2","isReadOnly","t3","children","label","insideForm","labelPosition","isInvalid","isValid","t4","undefined","id","field","isFocused","focusProps","t5","t6","hoverProps","isHovered","inputRef","domRef","t7","renderWithTooltip","isTooltipActive","t8","t9","form","inputProps","t10","isInputDisabled","keepEvents","isInert","excludeFromTabOrder","mods","hovered","switchField","tooltipTriggerProps","tooltipRef","pointerProps","tooltipFocusProps","autoFocus","labelProps","value","onChange","isSelected","isIndeterminate","_Switch","cubeInputType","displayName","_c","useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { Text } from '../../content/Text';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n      'readonly & checked': '#dark-02',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      readonly: '#dark-05',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nexport interface CubeSwitchProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<boolean | null | undefined>,\n    ToggleSelectionProps,\n    Omit<AriaSwitchProps, 'form' | 'name'> {\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n  /**\n   * The switch's own tooltip, shown on hover over the switch and its inline\n   * label and on keyboard focus, also while the switch is disabled: a disabled\n   * switch with a tooltip stays focusable. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nfunction Switch(rawProps: WithNullableSelected<CubeSwitchProps>, ref) {\n  rawProps = castNullableIsSelected(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    isReadOnly = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n    tooltip,\n  } = props;\n\n  const id = useId(props.id);\n\n  const { styles, field } = splitFieldLayout(props);\n\n  let { isFocused, focusProps } = useFocus(true);\n  // A read-only switch takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a switch with no visible label; a\n  // field `label` is one, named through its `<label for>`.\n  let { inputProps, isDisabled: isInputDisabled } = useSwitch(\n    { ...props, form: undefined, children: children ?? label },\n    useToggleState(props),\n    inputRef,\n  );\n\n  // A disabled switch with a tooltip keeps its focus, as `Checkbox` does: the\n  // tooltip is usually the reason it is disabled, and focus is how the keyboard\n  // opens it. It is `aria-disabled` and inert instead.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  // It shares the field's ref, which is the wrapper with or without chrome.\n  const switchField = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <SwitchWrapperElement\n        ref={tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef}\n        qa=\"SwitchWrapper\"\n        mods={mods}\n        data-size={size}\n        styles={styles}\n        {...mergeProps(hoverProps, pointerProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Switch'}\n          data-input-type=\"switch\"\n          // For a dialog kept mounted while closed, as on `Button`.\n          {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n          {...mergeTooltipFocusProps(\n            mergeProps(inputProps, focusProps),\n            tooltipFocusProps,\n          )}\n          ref={inputRef}\n          id={id}\n          // Not left to the native `disabled`, which an inert input drops.\n          mods={{ disabled: isInputDisabled }}\n        />\n        <SwitchElement\n          data-element=\"Input\"\n          mods={mods}\n          data-size={size}\n          styles={inputStyles}\n        >\n          <div data-element=\"Thumb\" aria-hidden=\"true\" />\n        </SwitchElement>\n        {/*\n          Not `nowrap`: it inherits, so no label could wrap and a long one ran out\n          of its container. The label inherits the wrapper's font and color, so\n          a caller's `styles` reach it.\n        */}\n        {children ? <Text>{children}</Text> : null}\n        {isLoading ? (\n          <>\n            {label ? <>&nbsp;</> : null}\n            <LoadingIcon />\n          </>\n        ) : null}\n      </SwitchWrapperElement>\n    );\n  }, 'top');\n\n  // `renderWithTooltip` is typed for any node; here it returns an element.\n  return wrapWithField(switchField as ReactElement, {\n    ...props,\n    ...field,\n    // The switch's own, not the legacy spelling of `labelTooltip`.\n    tooltip: undefined,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["useFocusableRef","BaseProps","Styles","tasty","forwardRef","ReactElement","useRef","AriaSwitchProps","useHover","useSwitch","useToggleState","LoadingIcon","FieldBaseProps","ToggleSelectionProps","getDisabledElementProps","getInertInputProps","useFocus","mergeProps","castNullableIsSelected","WithNullableSelected","mergeRefs","useId","Text","useAutoTooltip","FieldLayoutStyleProps","splitFieldLayout","useFieldProps","getValidationMods","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","CubeTooltipProviderProps","SwitchWrapperElement","as","styles","display","position","placeItems","gap","width","color","SwitchElement","boxSizing","verticalAlign","placeSelf","radius","fill","checked","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","cursor","Thumb","top","left","CubeSwitchProps","Omit","inputStyles","isLoading","size","tooltip","Switch","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","qa","isDisabled","t2","isReadOnly","t3","children","label","insideForm","labelPosition","isInvalid","isValid","t4","undefined","id","field","isFocused","focusProps","t5","t6","hoverProps","isHovered","inputRef","domRef","t7","renderWithTooltip","isTooltipActive","t8","t9","form","inputProps","t10","isInputDisabled","keepEvents","isInert","excludeFromTabOrder","mods","hovered","switchField","tooltipTriggerProps","tooltipRef","pointerProps","tooltipFocusProps","autoFocus","labelProps","value","onChange","isSelected","isIndeterminate","_Switch","cubeInputType","displayName","_c","useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared/form';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { mergeProps } from '../../../utils/react/mergeProps';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useId } from '../../../utils/react/useId';\nimport { Text } from '../../content/Text';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { getValidationMods } from '../../form/validation/resolve-validation-props';\nimport { wrapWithField } from '../../form/wrapper';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n      'readonly & checked': '#dark-02',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      readonly: '#dark-05',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nexport interface CubeSwitchProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<boolean | null | undefined>,\n    ToggleSelectionProps,\n    Omit<AriaSwitchProps, 'form' | 'name'> {\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n  /**\n   * The switch's own tooltip, shown on hover over the switch and its inline\n   * label and on keyboard focus, also while the switch is disabled: a disabled\n   * switch with a tooltip stays focusable. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nfunction Switch(rawProps: WithNullableSelected<CubeSwitchProps>, ref) {\n  rawProps = castNullableIsSelected(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    isReadOnly = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n    tooltip,\n  } = props;\n\n  const id = useId(props.id);\n\n  const { styles, field } = splitFieldLayout(props);\n\n  let { isFocused, focusProps } = useFocus(true);\n  // A read-only switch takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a switch with no visible label; a\n  // field `label` is one, named through its `<label for>`.\n  let { inputProps, isDisabled: isInputDisabled } = useSwitch(\n    { ...props, form: undefined, children: children ?? label },\n    useToggleState(props),\n    inputRef,\n  );\n\n  // A disabled switch with a tooltip keeps its focus, as `Checkbox` does: the\n  // tooltip is usually the reason it is disabled, and focus is how the keyboard\n  // opens it. It is `aria-disabled` and inert instead.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  // It shares the field's ref, which is the wrapper with or without chrome.\n  const switchField = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <SwitchWrapperElement\n        ref={tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef}\n        qa=\"SwitchWrapper\"\n        mods={mods}\n        data-size={size}\n        styles={styles}\n        {...mergeProps(hoverProps, pointerProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Switch'}\n          data-input-type=\"switch\"\n          // For a dialog kept mounted while closed, as on `Button`.\n          {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n          {...mergeTooltipFocusProps(\n            mergeProps(inputProps, focusProps),\n            tooltipFocusProps,\n          )}\n          ref={inputRef}\n          id={id}\n          // Not left to the native `disabled`, which an inert input drops.\n          mods={{ disabled: isInputDisabled }}\n        />\n        <SwitchElement\n          data-element=\"Input\"\n          mods={mods}\n          data-size={size}\n          styles={inputStyles}\n        >\n          <div data-element=\"Thumb\" aria-hidden=\"true\" />\n        </SwitchElement>\n        {/*\n          Not `nowrap`: it inherits, so no label could wrap and a long one ran out\n          of its container. The label inherits the wrapper's font and color, so\n          a caller's `styles` reach it.\n        */}\n        {children ? <Text>{children}</Text> : null}\n        {isLoading ? (\n          <>\n            {label ? <>&nbsp;</> : null}\n            <LoadingIcon />\n          </>\n        ) : null}\n      </SwitchWrapperElement>\n    );\n  }, 'top');\n\n  // `renderWithTooltip` is typed for any node; here it returns an element.\n  return wrapWithField(switchField as ReactElement, {\n    ...props,\n    ...field,\n    // The switch's own, not the legacy spelling of `labelTooltip`.\n    tooltip: undefined,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

package/dist/components/fields/TagInput/TagInput.js

@@ -1,23 +1,23 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { useFormatter } from "../../../i18n/useFormatter.js";
-import { DirectionIcon } from "../../../icons/DirectionIcon.js";
-import { generateRandomId } from "../../../utils/random.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.js";
+import { generateRandomId } from "../../../utils/random.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
 import { withFieldChrome } from "../../form/field-chrome.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { rendersFieldChrome, wrapWithField } from "../../form/wrapper.js";
 import { splitFieldLayout } from "../../form/field-layout.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey } from "../ListBoxPopover/listNavigation.js";
 import { TextInputBase as _TextInputBase } from "../TextInput/TextInputBase.js";
+import { useFormatter } from "../../../i18n/useFormatter.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { TagList } from "./TagList.js";