@cube-dev/ui-kit 0.189.0 → 0.190.1

package/dist/components/data/TableBase/use-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/components/data/TableBase/use-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { c } from "react-compiler-runtime";

package/dist/components/data/TableBase/use-table-sorts.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { sortRows } from "./use-table-sort.js";
 import { c } from "react-compiler-runtime";

package/dist/components/data/TableBase/use-table-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 
 //#region src/components/data/TableBase/use-table-storage.ts

package/dist/components/data/TableBase/use-table-tree-state.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react-compiler-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
@@ -91,7 +91,7 @@ function Checkbox(allProps, ref) {
 		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,
 		...labelStyles
 	}), [groupState, labelStyles]);
-	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
+	let { isFocused, focusProps } = useFocus$1(true);
 	let { hoverProps, isHovered } = useHover({ isDisabled });
 	let inputRef = useRef(null);
 	let domRef = useFocusableRef(ref, inputRef);

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","useFocus","castNullableIsSelected","WithNullableSelected","extractStyles","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","form","name","inputStyles","isIndeterminate","value","tooltip","Omit","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","isRequired","children","label","isInvalid","isValid","labelProps","labelStyles","labelPosition","isHidden","otherProps","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","inputProps","undefined","trim","markIcon","key","console","warn","mods","checked","indeterminate","hovered","renderCheckbox","tooltipFocusProps","checkboxField","tooltipTriggerProps","tooltipRef","pointerProps","element","HTMLLabelElement","current","HTMLElement","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  /**\n   * The form instance. Redeclared so that it wins over react-aria's DOM\n   * `form: string` attribute when a consumer resolves react-aria's types for\n   * real; `Omit<AriaCheckboxProps, 'form'>` would erase every other prop\n   * in-repo, where those types resolve to `any` (see tsconfig.json).\n   */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. 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\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    tooltip,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Triggered by the wrapper rather than the input, so a disabled checkbox —\n  // whose input ignores the pointer — still shows it.\n  let { renderWithTooltip } = useAutoTooltip({ tooltip, children: null });\n\n  const toggleState = useToggleState(props);\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.\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          form: undefined,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          form: undefined,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\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  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            styles={styles}\n            isHidden={isHidden}\n            mods={mods}\n            {...pointerProps}\n            ref={tooltipRef}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    return wrapWithField(checkboxField as ReactElement, domRef, {\n      ...props,\n      tooltip: undefined,\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        styles={styles}\n        isHidden={isHidden}\n        {...mergeProps(hoverProps, pointerProps)}\n        {...filterBaseProps(otherProps)}\n        ref={\n          tooltipRef\n            ? // Written only when React attaches the node, never during render.\n              (element: HTMLLabelElement | null) => {\n                (domRef as { current: HTMLElement | null }).current = element;\n                (tooltipRef as { current: HTMLElement | null }).current =\n                  element;\n              }\n            : domRef\n        }\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {label ?? children ? (\n          <Element\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","useFocus","castNullableIsSelected","WithNullableSelected","extractStyles","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","form","name","inputStyles","isIndeterminate","value","tooltip","Omit","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","isRequired","children","label","isInvalid","isValid","labelProps","labelStyles","labelPosition","isHidden","otherProps","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","inputProps","undefined","trim","markIcon","key","console","warn","mods","checked","indeterminate","hovered","renderCheckbox","tooltipFocusProps","checkboxField","tooltipTriggerProps","tooltipRef","pointerProps","element","HTMLLabelElement","current","HTMLElement","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  /**\n   * The form instance. Redeclared so that it wins over react-aria's DOM\n   * `form: string` attribute when a consumer resolves react-aria's types for\n   * real; `Omit<AriaCheckboxProps, 'form'>` would erase every other prop\n   * in-repo, where those types resolve to `any` (see tsconfig.json).\n   */\n  form?: FieldBaseProps['form'];\n  /** Field name; modern forms also accept nested tuple paths. */\n  name?: FieldBaseProps['name'];\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. 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\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    tooltip,\n    // Pulled out so it stays off the `<label>` spread below. The Aria hooks read\n    // it from `props` directly; `filterBaseProps` already dropped it at runtime,\n    // but it typed as a DOM `FormEventHandler` there, which it is not.\n    onChange,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // Triggered by the wrapper rather than the input, so a disabled checkbox —\n  // whose input ignores the pointer — still shows it.\n  let { renderWithTooltip } = useAutoTooltip({ tooltip, children: null });\n\n  const toggleState = useToggleState(props);\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.\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          form: undefined,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          form: undefined,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\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  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            styles={styles}\n            isHidden={isHidden}\n            mods={mods}\n            {...pointerProps}\n            ref={tooltipRef}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    return wrapWithField(checkboxField as ReactElement, domRef, {\n      ...props,\n      tooltip: undefined,\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        styles={styles}\n        isHidden={isHidden}\n        {...mergeProps(hoverProps, pointerProps)}\n        {...filterBaseProps(otherProps)}\n        ref={\n          tooltipRef\n            ? // Written only when React attaches the node, never during render.\n              (element: HTMLLabelElement | null) => {\n                (domRef as { current: HTMLElement | null }).current = element;\n                (tooltipRef as { current: HTMLElement | null }).current =\n                  element;\n              }\n            : domRef\n        }\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {label ?? children ? (\n          <Element\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ColorInput/ColorInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

package/dist/components/fields/ColorPicker/ColorPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react-compiler-runtime";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -132,7 +132,7 @@ const SwatchElement = tasty({
 	}
 });
 function Swatch(t0) {
-	const $ = c(27);
+	const $ = c(25);
 	const { colorKey, label, state, isDisabled, size, styles, mods } = t0;
 	const inputRef = useRef(null);
 	let t1;
@@ -148,78 +148,72 @@ function Swatch(t0) {
 		$[3] = t1;
 	} else t1 = $[3];
 	const { inputProps, isSelected, isDisabled: isRadioDisabled } = useRadio(t1, state, inputRef);
+	const { isFocused, focusProps } = useFocus$1(true);
 	let t2;
-	if ($[4] !== isDisabled) {
-		t2 = { isDisabled };
-		$[4] = isDisabled;
-		$[5] = t2;
-	} else t2 = $[5];
-	const { isFocused, focusProps } = useFocus$1(t2, true);
-	let t3;
-	if ($[6] !== isFocused || $[7] !== isRadioDisabled || $[8] !== isSelected || $[9] !== mods) {
-		t3 = {
+	if ($[4] !== isFocused || $[5] !== isRadioDisabled || $[6] !== isSelected || $[7] !== mods) {
+		t2 = {
 			selected: isSelected,
 			disabled: isRadioDisabled,
 			focused: isFocused,
 			...mods
 		};
-		$[6] = isFocused;
-		$[7] = isRadioDisabled;
-		$[8] = isSelected;
-		$[9] = mods;
+		$[4] = isFocused;
+		$[5] = isRadioDisabled;
+		$[6] = isSelected;
+		$[7] = mods;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== colorKey) {
+		t3 = { "--color-swatch-color": colorKey };
+		$[9] = colorKey;
 		$[10] = t3;
 	} else t3 = $[10];
 	let t4;
-	if ($[11] !== colorKey) {
-		t4 = { "--color-swatch-color": colorKey };
-		$[11] = colorKey;
-		$[12] = t4;
-	} else t4 = $[12];
+	if ($[11] !== focusProps || $[12] !== inputProps) {
+		t4 = mergeProps$1(inputProps, focusProps);
+		$[11] = focusProps;
+		$[12] = inputProps;
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
-	if ($[13] !== focusProps || $[14] !== inputProps) {
-		t5 = mergeProps$1(inputProps, focusProps);
-		$[13] = focusProps;
-		$[14] = inputProps;
-		$[15] = t5;
-	} else t5 = $[15];
-	let t6;
-	if ($[16] !== isRadioDisabled) {
-		t6 = {
+	if ($[14] !== isRadioDisabled) {
+		t5 = {
 			button: true,
 			disabled: isRadioDisabled
 		};
-		$[16] = isRadioDisabled;
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] !== t5 || $[19] !== t6) {
-		t7 = /* @__PURE__ */ jsx(HiddenInput, {
-			...t5,
+		$[14] = isRadioDisabled;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(HiddenInput, {
+			...t4,
 			ref: inputRef,
 			qa: "ColorSwatchInput",
-			mods: t6
+			mods: t5
 		});
-		$[18] = t5;
-		$[19] = t6;
-		$[20] = t7;
-	} else t7 = $[20];
-	let t8;
-	if ($[21] !== size || $[22] !== styles || $[23] !== t3 || $[24] !== t4 || $[25] !== t7) {
-		t8 = /* @__PURE__ */ jsx(SwatchElement, {
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== size || $[20] !== styles || $[21] !== t2 || $[22] !== t3 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SwatchElement, {
 			"data-size": size,
-			mods: t3,
+			mods: t2,
 			styles,
-			style: t4,
-			children: t7
+			style: t3,
+			children: t6
 		});
-		$[21] = size;
-		$[22] = styles;
-		$[23] = t3;
-		$[24] = t4;
-		$[25] = t7;
-		$[26] = t8;
-	} else t8 = $[26];
-	return t8;
+		$[19] = size;
+		$[20] = styles;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
 }
 /**
 * A grid of color swatches, one of which can be selected — the palette half of

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","t2","isFocused","focusProps","t3","t4","t5","t6","button","t7","t8","ColorSwatchGroup","allProps","ref","HTMLElement","props","defaultValidationTrigger","valuePropsMapper","isInvalid","isValid","ariaLabel","isInsidePopover","showCustom","swatches","seen","Map","key","entry","raw","parsed","has","set","undefined","values","internalValue","setInternalValue","currentValue","selectedColor","toString","selectedKey","isCustom","some","s","publish","next","handleChange","nextKey","isReadOnly","domRef","radioGroupProps","labelProps","form","orientation","group","String","map","swatch","cubeInputType"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as 2bw of\n * `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING = 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface';\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  // `size` sets the control's height; the box is pinned here as well so a flex\n  // row cannot let the button size itself to its content instead.\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n  position: 'relative',\n};\n\n/**\n * The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  position: 'absolute',\n  inset: 0,\n  width: 'auto',\n  height: 'auto',\n  radius: '1r',\n};\n\n/**\n * The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n */\nconst CUSTOM_SWATCH_SELECTED_STYLES: Styles = {\n  ...CUSTOM_SWATCH_STYLES,\n  shadow: SELECTED_RING,\n};\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    // Wrapping is the better default: it is a single row wherever there is\n    // room, and folds instead of overflowing where there is not. A fixed\n    // `columns` switches to a grid, sized to the swatches rather than to the\n    // container — `1fr` tracks would stretch them apart.\n    display: {\n      '': 'flex',\n      columns: 'grid',\n    },\n    flow: {\n      '': 'row wrap',\n      columns: 'row',\n    },\n    gap: '.5x',\n    placeItems: {\n      '': 'center start',\n      columns: 'stretch',\n    },\n    width: {\n      '': 'auto',\n      columns: 'max-content',\n    },\n    gridColumns: 'repeat($columns, max-content)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\n/**\n * Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n */\nconst RadiosElement = tasty({\n  styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected: SELECTED_RING,\n    },\n    // A 1bw offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '2bw #focus.0 / 1bw',\n      focused: '2bw #focus / 1bw',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus({ isDisabled }, true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      style={{ '--color-swatch-color': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label ? undefined : ariaLabel ?? 'Colors',\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={{\n        ...getValidationMods({ isInvalid, isValid }),\n        columns: !!columns,\n      }}\n      style={columns ? { '--columns': String(columns) } : undefined}\n    >\n      <RadiosElement {...radioGroupProps}>\n        {swatches.map((swatch) => (\n          <Swatch\n            key={swatch.key}\n            colorKey={swatch.key}\n            label={swatch.label}\n            state={state}\n            isDisabled={isDisabled}\n            size={size}\n            styles={swatchStyles}\n          />\n        ))}\n      </RadiosElement>\n      {showCustom ? (\n        <ColorPicker\n          aria-label=\"Custom color\"\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? currentValue ?? null : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={CUSTOM_TRIGGER_STYLES}\n          swatchStyles={\n            isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n          }\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","HTMLElement","props","defaultValidationTrigger","valuePropsMapper","isInvalid","isValid","ariaLabel","isInsidePopover","showCustom","swatches","seen","Map","key","entry","raw","parsed","has","set","undefined","values","internalValue","setInternalValue","currentValue","selectedColor","toString","selectedKey","isCustom","some","s","publish","next","handleChange","nextKey","isReadOnly","domRef","radioGroupProps","labelProps","form","orientation","group","String","map","swatch","cubeInputType"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as 2bw of\n * `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING = 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface';\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  // `size` sets the control's height; the box is pinned here as well so a flex\n  // row cannot let the button size itself to its content instead.\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n  position: 'relative',\n};\n\n/**\n * The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  position: 'absolute',\n  inset: 0,\n  width: 'auto',\n  height: 'auto',\n  radius: '1r',\n};\n\n/**\n * The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n */\nconst CUSTOM_SWATCH_SELECTED_STYLES: Styles = {\n  ...CUSTOM_SWATCH_STYLES,\n  shadow: SELECTED_RING,\n};\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    // Wrapping is the better default: it is a single row wherever there is\n    // room, and folds instead of overflowing where there is not. A fixed\n    // `columns` switches to a grid, sized to the swatches rather than to the\n    // container — `1fr` tracks would stretch them apart.\n    display: {\n      '': 'flex',\n      columns: 'grid',\n    },\n    flow: {\n      '': 'row wrap',\n      columns: 'row',\n    },\n    gap: '.5x',\n    placeItems: {\n      '': 'center start',\n      columns: 'stretch',\n    },\n    width: {\n      '': 'auto',\n      columns: 'max-content',\n    },\n    gridColumns: 'repeat($columns, max-content)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\n/**\n * Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n */\nconst RadiosElement = tasty({\n  styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected: SELECTED_RING,\n    },\n    // A 1bw offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '2bw #focus.0 / 1bw',\n      focused: '2bw #focus / 1bw',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus(true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      style={{ '--color-swatch-color': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label ? undefined : ariaLabel ?? 'Colors',\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={{\n        ...getValidationMods({ isInvalid, isValid }),\n        columns: !!columns,\n      }}\n      style={columns ? { '--columns': String(columns) } : undefined}\n    >\n      <RadiosElement {...radioGroupProps}>\n        {swatches.map((swatch) => (\n          <Swatch\n            key={swatch.key}\n            colorKey={swatch.key}\n            label={swatch.label}\n            state={state}\n            isDisabled={isDisabled}\n            size={size}\n            styles={swatchStyles}\n          />\n        ))}\n      </RadiosElement>\n      {showCustom ? (\n        <ColorPicker\n          aria-label=\"Custom color\"\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? currentValue ?? null : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={CUSTOM_TRIGGER_STYLES}\n          swatchStyles={\n            isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n          }\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMmC,gBAAgB;;AAGtB,MAAMC,YAAoC;CACxCE,OAAO;CACPC,QAAQ;CACRC,OAAO;CACR;;;;;;AAOD,MAAMC,wBAAgC;CAGpCC,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,QAAQ;CACRC,QAAQ;CACRC,UAAU;CACX;;;;;;AAOD,MAAMC,uBAA+B;CACnCD,UAAU;CACVE,OAAO;CACPP,OAAO;CACPC,QAAQ;CACRE,QAAQ;CACT;;;;;AAMD,MAAMK,gCAAwC;CAC5C,GAAGF;CACHG,QAAQhB;CACT;AAED,MAAMiB,eAAe7C,MAAM;CACzB8C,IAAI;CACJC,QAAQ;EAKNC,SAAS;GACP,IAAI;GACJC,SAAS;GACV;EACDC,MAAM;GACJ,IAAI;GACJD,SAAS;GACV;EACDE,KAAK;EACLC,YAAY;GACV,IAAI;GACJH,SAAS;GACV;EACDd,OAAO;GACL,IAAI;GACJc,SAAS;GACV;EACDI,aAAa;EAGb,gBAAgB;GACd,IAAI;GACJ,cAAc;GACd,cAAc;GAChB;EACF;CACD,CAAC;;;;;;;;AASF,MAAMC,gBAAgBtD,MAAM,EAC1B+C,QAAQ,EAAEC,SAAS,YAAW,EAC/B,CAAC;AAEF,MAAMO,gBAAgBvD,MAAM;CAC1BwD,IAAI;CACJV,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTI,YAAY;EACZZ,UAAU;EACVF,QAAQ;EACRmB,QAAQ;GACN,IAAI;GACJC,UAAU;GACX;EACDvB,OAAO;EACPC,QAAQ;EACRuB,MAAM;EACNC,SAAS;GACP,IAAI;GACJF,UAAU;GACX;EAIDd,QAAQ;GACN,IAAI;GACJiB,UAAUjC;GACX;EAEDkC,SAAS;GACP,IAAI;GACJC,SAAS;GACV;EACDC,YAAY;EACd;CACD,CAAC;AA0CF,SAAAe,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAgB,MAAA,EAAAP,UAAAhD,OAAAiD,OAAAC,YAAAL,MAAAzB,QAAA+B,SAAAE;CASd,MAAAG,WAAiB/E,OAAyB,KAAK;CAAC,IAAAgF;AAAA,KAAAH,EAAA,OAAAN,YAAAM,EAAA,OAAAJ,cAAAI,EAAA,OAAAtD,OAAA;AAM9CyD,OAAA;GAAAjB,OAASQ;GAAQ,cAAgBhD;GAAKkD;GAAc;AAAAI,IAAA,KAAAN;AAAAM,IAAA,KAAAJ;AAAAI,IAAA,KAAAtD;AAAAsD,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CALtD,MAAA,EAAAI,YAAAC,YAAAT,YAAAU,oBAIIjF,SACF8E,IACAR,OACAO,SACD;CAGD,MAAA,EAAAK,WAAAC,eAAkC7E,WAAS,KAAK;CAAC,IAAA8E;AAAA,KAAAT,EAAA,OAAAO,aAAAP,EAAA,OAAAM,mBAAAN,EAAA,OAAAK,cAAAL,EAAA,OAAAH,MAAA;AAKvCY,OAAA;GAAA7B,UACMyB;GAAU5B,UACV6B;GAAexB,SAChByB;GAAS,GACfV;GACJ;AAAAG,IAAA,KAAAO;AAAAP,IAAA,KAAAM;AAAAN,IAAA,KAAAK;AAAAL,IAAA,KAAAH;AAAAG,IAAA,KAAAS;OAAAA,MAAAT,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAN,UAAA;AAEMgB,OAAA,EAAA,wBAA0BhB,UAAU;AAAAM,IAAA,KAAAN;AAAAM,IAAA,MAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,QAAAQ,cAAAR,EAAA,QAAAI,YAAA;AAGrCO,OAAAjF,aAAW0E,YAAYI,WAAW;AAAAR,IAAA,MAAAQ;AAAAR,IAAA,MAAAI;AAAAJ,IAAA,MAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,QAAAM,iBAAA;AAGhCM,OAAA;GAAAC,QAAU;GAAIpC,UAAY6B;GAAiB;AAAAN,IAAA,MAAAM;AAAAN,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,QAAAW,MAAAX,EAAA,QAAAY,IAAA;AAJnDE,OAAA,oBAAC;GAAW,GACNH;GACCT,KAAAA;GACF,IAAA;GACG,MAAAU;IACN;AAAAZ,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,QAAAT,QAAAS,EAAA,QAAAlC,UAAAkC,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAc,IAAA;AAhBJC,OAAA,oBAAC;GACYxB,aAAAA;GACL,MAAAkB;GAME3C;GACD,OAAA4C;aAEPI;IAMc;AAAAd,IAAA,MAAAT;AAAAS,IAAA,MAAAlC;AAAAkC,IAAA,MAAAS;AAAAT,IAAA,MAAAU;AAAAV,IAAA,MAAAc;AAAAd,IAAA,MAAAe;OAAAA,MAAAf,EAAA;AAAA,QAjBhBe;;;;;;;;;;AA6BJ,MAAaC,mBAAmB/F,WAAW,SAAS+F,iBAClDC,UACAC,KACA;CACA,MAAME,QAAQtF,cAAcmF,UAAU;EACpCI,0BAA0B;EAC1BC,mBAAmB,EAAEpC,OAAOE,gBAAgB;GACnCF;GACPE;GACD;EACF,CAAC;CAEF,MAAM,EACJvB,IACAoB,SAAS,EAAE,EACXC,OAAAA,SACAC,cACAC,UAAAA,YACAC,SAAS,OACTrB,SACAsB,aACAC,OAAO,UACPK,YACA2B,WACAC,SACAhC,cACA,cAAciC,cACZL;CAEJ,MAAMtD,SAASlC,cAAcwF,OAAO,CAAC,GAAGxG,cAAc,GAAGF,aAAa,CAAC;CACvE,MAAMgH,kBAAkBrF,yBAAyB;CAEjD,MAAMsF,aAAarC,eAAe,CAACoC;;CAGnC,MAAME,WAAW1G,cAAc;EAC7B,MAAM2G,uBAAO,IAAIC,KAA6C;AAE9D,OAAK,MAAME,SAAS/C,QAAQ;GAE1B,MAAMiD,SAAS/F,WADH,OAAO6F,UAAU,WAAWA,QAAQA,MAAMvF,MACxB;AAE9B,OAAI,CAACyF,OAAQ;GAEb,MAAMH,MAAM3F,MAAM8F,OAAO;AAEzB,OAAIL,KAAKM,IAAIJ,IAAI,CAAE;AAEnBF,QAAKO,IAAIL,KAAK;IACZA;IACArF,QACG,OAAOsF,UAAU,WAAWK,SAAYL,MAAMtF,UAC/CR,YAAYgG,QAAQ7C,OAAM;IAC7B,CAAC;;AAGJ,SAAO,CAAC,GAAGwC,KAAKS,QAAQ,CAAC;IACxB,CAACrD,QAAQI,OAAO,CAAC;CAEpB,MAAM,CAACkD,eAAeC,oBAAoBpH,eAClC+D,gBAAgB,KACvB;CACD,MAAMsD,eAAevD,YAAUmD,SAAYnD,UAAQqD;CAEnD,MAAMG,gBAAgBvG,YAAYsG,gBAAgB,IAAIE,UAAU,CAAC;CACjE,MAAMC,cAAcF,gBAAgBtG,MAAMsG,cAAc,GAAG;CAC3D,MAAMG,WACJ,CAAC,CAACD,eAAe,CAAChB,SAASkB,MAAMC,MAAMA,EAAEhB,QAAQa,YAAY;CAE/D,MAAMI,UAAUxH,UAAUyH,SAAwB;AAChD,MAAI/D,YAAUmD,OAAWG,kBAAiBS,KAAK;AAE/C7D,eAAW6D,KAAK;GAChB;CAIF,MAAMC,eAAe1H,UAAU2H,YAA2B;EACxD,MAAMjB,WAASiB,WAAW,OAAO,OAAOhH,WAAWgH,QAAQ;AAE3DH,UAAQd,WAAShG,YAAYgG,UAAQ7C,OAAO,GAAG,KAAK;GACpD;CAEF,MAAMM,QAAQpE,mBAAmB;EAC/B2D,OAAO0D,eAAe;EACtBhD;EACAwD,YAAYhC,MAAMgC;EAClBhE,UAAU8D;EACX,CAAC;CAKF,MAAMG,SAAS7I,aAAa0G,IAAI;CAChC,MAAM,EAAEoC,iBAAiBC,eAAejI,cACtC;EACE,GAAG8F;EAGHoC,MAAMnB;EAGN,cAAcjB,MAAM1E,QAAQ2F,SAAYZ,aAAa;EACrDgC,aAAa;EACd,EACD9D,MACD;AAkDD,QAAO5D,cA/CL,qBAAC;EACC,KAAKsH;EACL,IAAIxF,MAAM;EACV,aAAW0B;EACX,mBAAgB;EACRzB;EACR,MAAM;GACJ,GAAGjC,kBAAkB;IAAE0F;IAAWC;IAAS,CAAC;GAC5CxD,SAAS,CAAC,CAACA;GACZ;EACD,OAAOA,UAAU,EAAE,aAAa2F,OAAO3F,QAAO,EAAG,GAAGqE;aAEpD,oBAAC;GAAc,GAAIiB;aAChB1B,SAASgC,KAAKC,WACb,oBAAC;IAEC,UAAUA,OAAO9B;IACjB,OAAO8B,OAAOnH;IACPiD;IACKC;IACNL;IACN,QAAQC;MANHqE,OAAO9B,IAQf,CAAC;IACW,EACdJ,aACC,oBAAC;GACC,cAAW;GACX,IAAG;GACKtC;GACR,MAAK;GACL,MAAMzC,UAAU2C,SAAS3C,UAAUG;GACnC,OAAO8F,WAAWJ,gBAAgB,OAAO;GAC7B7C;GACZ,YAAYwB,MAAMgC;GAClB,eAAenG;GACf,cACE4F,WAAWnF,gCAAgCF;GAE7C,UAAUwF;aAET;IACW,GACZ;GAEP,EAE2BK,QAAQ;EAClC,GAAGjC;EACHmC,YAAY7H,aAAW0F,MAAMmC,YAAYA,WAAU;EACpD,CAAC;EACF;AAEF,AAACvC,iBAAyB8C,gBAAgB"}

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.189.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -394,7 +394,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		items: sortedItems,
 		selectionMode: "none"
 	});
-	const { isFocused, focusProps } = useFocus$1({ isDisabled });
+	const { isFocused, focusProps } = useFocus$1();
 	const checkInputValidity = useCallback(() => {
 		if (!effectiveInputValue.trim()) return {
 			isInputValid: false,