@cube-dev/ui-kit 0.195.0 → 0.196.0

package/dist/components/data/TableBase/TreeGridTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";

package/dist/components/data/TableBase/column-header.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
 import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
 import { TableHeaderItem } from "./styled.js";

package/dist/components/data/TableBase/column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { __Menu } from "../../actions/Menu/Menu.js";
 import { normalizeMenuAction } from "./row-menu.js";
 import { Children, cloneElement, isValidElement } from "react";

package/dist/components/data/TableBase/column-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { computeStyles, resolveRecipes } from "@tenphi/tasty";
 
 //#region src/components/data/TableBase/column-styles.ts

package/dist/components/data/TableBase/column-tint.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { getPaletteConfig } from "../../../tokens/palette-config.js";
 import { hashString } from "../../../tokens/color-theme.js";
 

package/dist/components/data/TableBase/row-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { Children, Fragment, isValidElement } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts

package/dist/components/data/TableBase/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { keyframes, tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/components/data/TableBase/table-tree.ts
 /** Build identity and parent/child indexes without modifying consumer rows. */
 function buildTableTree(rows, getChildren, getKey) {

package/dist/components/data/TableBase/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/components/data/TableBase/types.ts
 /**
 * `asc | desc` rather than React Aria's `ascending | descending`: we do not use

package/dist/components/data/TableBase/use-column-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/TableBase/use-column-order.js

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

package/dist/components/data/TableBase/use-column-window.js

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

package/dist/components/data/TableBase/use-container-width.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 

package/dist/components/data/TableBase/use-row-move-animation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef } from "react";
 

package/dist/components/data/TableBase/use-scrollability.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 
 //#region src/components/data/TableBase/use-table-columns.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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-tooltip-refresh.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { refreshAutoTooltipsWithin } from "../../content/use-auto-tooltip.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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";
@@ -124,7 +124,7 @@ function Checkbox(allProps, ref) {
 			"isSelected",
 			"defaultSelected",
 			"isEmphasized"
-		]) if (originalProps[key] != null) console.warn(`CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
+		]) if (allProps[key] != null) console.warn(`CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
 		if (props.value == null) console.warn("CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
 	}
 	const mods = {

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","Omit","inputStyles","isIndeterminate","value","tooltip","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","children","label","isInvalid","isValid","labelProps","labelStyles","labelPosition","isHidden","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","ariaProps","form","undefined","inputProps","isRequired","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","renderCheckbox","tooltipFocusProps","checkboxField","tooltipTriggerProps","tooltipRef","pointerProps","for","id","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    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\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  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    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\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. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\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(ariaProps, toggleState, inputRef);\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\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 wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\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 data-element=\"Input\" 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            {...wrapperProps}\n            {...mergeProps(hoverProps, 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    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, domRef, {\n      ...props,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\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","Omit","inputStyles","isIndeterminate","value","tooltip","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","children","label","isInvalid","isValid","labelProps","labelStyles","labelPosition","isHidden","isFocused","focusProps","hoverProps","isHovered","inputRef","domRef","renderWithTooltip","toggleState","ariaProps","form","undefined","inputProps","isRequired","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","renderCheckbox","tooltipFocusProps","checkboxField","tooltipTriggerProps","tooltipRef","pointerProps","for","id","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    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\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  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    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\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. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\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(ariaProps, toggleState, inputRef);\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[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 wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\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 data-element=\"Input\" 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            {...wrapperProps}\n            {...mergeProps(hoverProps, 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    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, domRef, {\n      ...props,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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";
@@ -52,7 +52,7 @@ function CheckboxGroup(rawProps, ref) {
 	const { id, isDisabled, isRequired, necessityIndicator, label, extra, isInvalid, isValid, children, orientation: t2, message, description, labelStyles, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
 	const orientation = t2 === void 0 ? "vertical" : t2;
 	const domRef = useObjectRef(ref);
-	extractStyles(otherProps, CONTAINER_STYLES);
+	const styles = extractStyles(otherProps, CONTAINER_STYLES, inputStyles);
 	const state = useCheckboxGroupState(props);
 	let t3;
 	if ($[3] !== props) {
@@ -104,17 +104,17 @@ function CheckboxGroup(rawProps, ref) {
 		$[16] = t8;
 	} else t8 = $[16];
 	let t9;
-	if ($[17] !== groupProps || $[18] !== id || $[19] !== inputStyles || $[20] !== t5 || $[21] !== t8) {
+	if ($[17] !== groupProps || $[18] !== id || $[19] !== styles || $[20] !== t5 || $[21] !== t8) {
 		t9 = /* @__PURE__ */ jsx(CheckGroupElement, {
 			...groupProps,
 			id,
-			styles: inputStyles,
+			styles,
 			mods: t5,
 			children: t8
 		});
 		$[17] = groupProps;
 		$[18] = id;
-		$[19] = inputStyles;
+		$[19] = styles;
 		$[20] = t5;
 		$[21] = t8;
 		$[22] = t9;

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","extractStyles","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isRequired","necessityIndicator","label","extra","isInvalid","isValid","children","t2","message","description","labelStyles","labelProps","baseLabelProps","labelSuffix","form","otherProps","undefined","domRef","state","t3","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","t10","value","onChange","_CheckboxGroup","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    ContainerStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  // The group semantics go on the group itself, as in `RadioGroup`, not on the\n  // field wrapper: that is only rendered with a label, and an `aria-label`-only\n  // group would lose its role, name and description with it.\n  let radioGroup = (\n    <CheckGroupElement\n      {...groupProps}\n      id={id}\n      styles={inputStyles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        <CheckboxGroupContext.Provider value={state}>\n          {children}\n        </CheckboxGroupContext.Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select any number of options from a list.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMmB,oBAAoBd,MAAM;CAC9Be,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,YAAY;EACZC,cAAc;EACdC,MAAM;GACJ,IAAI;GACJC,YAAY;GACb;EACDC,KAAK;GACH,IAAI;GACJD,YAAY;GACd;EACF;CACD,CAAC;AAWF,SAAAM,cAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,UAAA;AAIaI,OAAAzB,uBAAuBqB,SAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAA3CF,YAAWA;CAAH,IAAAK;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AAC4BF,OAAA;GAAAG,0BACR;GAAUC,kBAClBC;GAInB;AAAAR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAND,MAAAS,QAAY5B,cAAciB,UAAUK,GAMlC;CAEF,MAAA,EAAAO,IAAAC,YAAAC,YAAAC,oBAAAC,OAAAC,OAAAC,WAAAC,SAAAC,UAAAvB,aAAAwB,IAAAC,SAAAC,aAAAC,aAAAC,YAAAC,gBAAAC,aAAA7B,aAAA8B,MAAA,GAAAC,eAmBIlB;CATF,MAAAd,cAAAwB,OAAAS,SAAA,aAAAT;CAUF,MAAAU,SAAahE,aAAakC,IAAI;AAEjBpB,eAAcgD,YAAY5D,iBAAiB;CAExD,MAAA+D,QAAYxD,sBAAsBmC,MAAM;CAAC,IAAAsB;AAAA,KAAA/B,EAAA,OAAAS,OAAA;AAIvCsB,OAAA;GAAA,GAAKtB;GAAKiB,MAAQE;GAAW;AAAA5B,IAAA,KAAAS;AAAAT,IAAA,KAAA+B;OAAAA,MAAA/B,EAAA;CAD/B,MAAA,EAAAgC,YAAAT,eAAiClD,iBAC/B0D,IACAD,MACD;CAWiB,MAAAG,KAAAtC,gBAAgB;CAAY,IAAAuC;AAAA,KAAAlC,EAAA,OAAAiC,IAAA;AADpCC,OAAA,EAAA3C,YACQ0C,IACb;AAAAjC,IAAA,KAAAiC;AAAAjC,IAAA,KAAAkC;OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;AAAA,KAAAnC,EAAA,OAAAW,cAAAX,EAAA,OAAAgB,aAAAhB,EAAA,OAAAiB,SAAA;AAGQkB,OAAA;GAAAxB;GAAAK;GAAAC;GAIN;AAAAjB,IAAA,KAAAW;AAAAX,IAAA,KAAAgB;AAAAhB,IAAA,KAAAiB;AAAAjB,IAAA,MAAAmC;OAAAA,MAAAnC,EAAA;CAAA,IAAAoC;AAAA,KAAApC,EAAA,QAAAkB,YAAAlB,EAAA,QAAA8B,OAAA;AAEDM,OAAA,oBAAA,qBAAA;GAAsCN,OAAAA;GACnCZ;IAC6B;AAAAlB,IAAA,MAAAkB;AAAAlB,IAAA,MAAA8B;AAAA9B,IAAA,MAAAoC;OAAAA,MAAApC,EAAA;CAAA,IAAAqC;AAAA,KAAArC,EAAA,QAAAmC,MAAAnC,EAAA,QAAAoC,IAAA;AATlCC,OAAA,oBAAC;GACQ,OAAAF;aAMPC;IAGc;AAAApC,IAAA,MAAAmC;AAAAnC,IAAA,MAAAoC;AAAApC,IAAA,MAAAqC;OAAAA,MAAArC,EAAA;CAAA,IAAAsC;AAAA,KAAAtC,EAAA,QAAAgC,cAAAhC,EAAA,QAAAU,MAAAV,EAAA,QAAAJ,eAAAI,EAAA,QAAAkC,MAAAlC,EAAA,QAAAqC,IAAA;AAlBlBC,OAAA,oBAAC;GAAiB,GACZN;GACAtB;GACId,QAAAA;GACF,MAAAsC;aAING;IAWkB;AAAArC,IAAA,MAAAgC;AAAAhC,IAAA,MAAAU;AAAAV,IAAA,MAAAJ;AAAAI,IAAA,MAAAkC;AAAAlC,IAAA,MAAAqC;AAAArC,IAAA,MAAAsC;OAAAA,MAAAtC,EAAA;CApBtB,MAAAuC,aACED;CAoBA,IAAAE;AAAA,KAAAxC,EAAA,QAAAwB,kBAAAxB,EAAA,QAAA6B,UAAA7B,EAAA,QAAAuB,cAAAvB,EAAA,QAAAS,SAAAT,EAAA,QAAAuC,YAAA;AAEKC,QAAA1D,cAAcyD,YAAYV,QAAQ;GAAA,GACpCpB;GAAKc,YACI/C,aAAWgD,gBAAgBD,WAAU;GAClD,CAAC;AAAAvB,IAAA,MAAAwB;AAAAxB,IAAA,MAAA6B;AAAA7B,IAAA,MAAAuB;AAAAvB,IAAA,MAAAS;AAAAT,IAAA,MAAAuC;AAAAvC,IAAA,MAAAwC;OAAAA,OAAAxC,EAAA;AAAA,QAHKwC;;;;;;AAvET,SAAAhC,MAAAN,IAAA;CAOuB,MAAA,EAAAuC,OAAAC,aAAAxC;AAAmB,QAAM;EAAAuC,OACnCA,SAAS,OAATA,QAAA,EAA0B;EAAAC;EAElC;;AAuEL,MAAMC,iBAAiBxE,WAAW0B,cAAc;AAEhD,AAAC8C,eAAuBC,gBAAgB;AACxCD,eAAeE,cAAc"}
+{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","extractStyles","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isRequired","necessityIndicator","label","extra","isInvalid","isValid","children","t2","message","description","labelStyles","labelProps","baseLabelProps","labelSuffix","form","otherProps","undefined","domRef","state","t3","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","t10","value","onChange","_CheckboxGroup","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    ContainerStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  // `inputStyles` styles the group too; `styles` and the style props go over it.\n  let styles = extractStyles(otherProps, CONTAINER_STYLES, inputStyles);\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  // The group owns its semantics in both presentations: `isBare` omits the\n  // field wrapper, so putting them there would lose its role and name.\n  let radioGroup = (\n    <CheckGroupElement\n      {...groupProps}\n      id={id}\n      styles={styles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        <CheckboxGroupContext.Provider value={state}>\n          {children}\n        </CheckboxGroupContext.Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select any number of options from a list.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { _Text } from "../../content/Text.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -156,6 +156,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 						isDisabled: isEditingDisabled || isReadOnly,
 						previewFormat: format,
 						input: /* @__PURE__ */ jsx(ColorInput, {
+							isBare: true,
 							"aria-label": t("colorPicker.colorValue", "Color value"),
 							format,
 							value: colorText,
@@ -164,6 +165,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 							onChange: handleValueChange
 						}),
 						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
+							isBare: true,
 							"aria-label": t("colorPicker.palette", "Palette"),
 							styles: PALETTE_STYLES,
 							colors: swatches,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","t","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from `labelTooltip`. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\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    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', 'Color picker')}\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","t","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from `labelTooltip`. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\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    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', 'Color picker')}\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAMuC,iBAAyB,EAAEC,UAAU,QAAQ;;;;;;AAOnD,MAAMC,iBAAyB;CAC7BC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACR;;AAGD,MAAMC,iBAA6B;CAAEC,GAAG;CAAKC,GAAG;CAAKC,GAAG;CAAK;AAE7D,MAAMC,qBAAqB3C,MAAM;CAC/B4C,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;EACd;CACD,CAAC;;;;;;AAsEF,MAAawB,cAAcxE,WAAW,SAASwE,YAC7CC,UACAC,KACA;CACA,MAAM,EAAEC,MAAMnE,SAAS;CACvB,MAAMoE,QAAQ5D,cAAcyD,UAAU;EACpCI,0BAA0B;EAC1BC,mBAAmB,EAAE5B,OAAOE,gBAAgB;GACnCF;GACPE;GACD;EACF,CAAC;CAEF,MAAM,EACJV,IACAqC,IACA7B,OAAAA,SACAC,cACAC,UAAAA,YACAC,SAAS,OACTC,eAAe,OACfC,QAAQyB,gBACRxB,aACAC,cACAC,YACAC,WACAE,YAAY,gBACZC,UACAC,cAAc,gBACdC,MACAC,OAAO,WACPC,QAAQ,WACRC,gBACAC,UACAC,eACAC,eACAC,cACAU,YACAC,YACAC,WACAC,WACAC,SACAC,WACA,cAAcC,WACd,oBAAoBC,oBAClBZ;CAEJ,MAAMjC,SAASjC,cAAckE,OAAO,CAAC,GAAGjF,cAAc,GAAGF,aAAa,CAAC;;;;;;CAOvE,MAAMgG,oBAAoBR,cAAcE;CAExC,MAAM,CAACO,OAAOC,YAAYtF,eACxBmB,YAAY0B,WAASC,gBAAgB,IAAIyC,UAAU,CACrD,CAAC;CACD,MAAM,CAACC,OAAOC,YAAYzF,SAAqBiD,aAAa;CAC5D,MAAM,CAACC,QAAQwC,WAAW1F,SAASmD,eAAe,MAAM;;CAGxD,MAAMwC,UAAU5F,OAAkC8C,QAAM;AAIxD/C,iBAAgB;AACd,MAAI+C,YAAU+C,UAAa/C,YAAU8C,QAAQE,QAAS;AAEtDF,UAAQE,UAAUhD;AAClByC,WAASnE,YAAY0B,WAAS,IAAI0C,UAAU,CAAC,CAAC;IAC7C,CAAC1C,QAAM,CAAC;CAEX,MAAMiD,oBAAoB5F,UAAU6F,SAAqB;EACvD,MAAMC,OAAO9E,YAAY6E,MAAM/C,OAAO;AAEtC2C,UAAQE,UAAUG;AAClBV,WAASS,KAAK;AACdhD,eAAWiD,KAAK;GAChB;CAEF,MAAMC,YAAYZ,QAAQnE,YAAYmE,OAAOrC,OAAO,GAAG;;;;;;CAOvD,MAAMkD,oBAAoBhG,UAAU6F,WAAwB;AAC1DJ,UAAQE,UAAUE;AAClBT,WAASS,SAAO5E,WAAW4E,OAAK,GAAG,KAAK;AACxChD,eAAWgD,OAAK;GAChB;CAEF,MAAMI,mBAAmBjG,UAAU6F,WAAkB;AACnDL,UAAQK,OAAK;AACb3C,iBAAe2C,OAAK;GACpB;CAIF,MAAMK,QACJ3C,aAAamC,SACXnC,WACE4B,QACFnE,YAAYmE,OAAOrC,OAAO,GAI1B,oBAAC,MAAK,yBAAaU,cACpB;AAuFH,QAAO9C,cApFL,oBAAC;EAA2B0B;YAC1B,qBAAC;GACC;GACA,MAAK;GACMkB;GACAF;GACX,QAAQqB,kBAAkBzB;GACdG;GACZ,cAAc8C;cAEd,oBAAC;IACC;IACIzB;IACJ,IAAIrC,MAAM;IACV,mBAAgB;IACVuB;IACN,OAAOlD,mBAAmBmD,OAAO;KAAEkB;KAAWC;KAAS,CAAC;IAClDrB;IAGN,MACE,oBAAC;KAAY,MAAK;KAAe0B;KAAO,QAAQnB;MAClD;IACA,WAAWzD,kBAAkB;KAAEsE;KAAWC;KAAS,CAAC;IACpD,SAASlB;IACT,YAAYsB,qBAAqBP;IACtBI;IACX,cAAYC;IAGZ,oBAAkBC;IAClB,MAAM,EAAEzB,aAAa,CAAC2B,OAAO;IAC7B,QAAQpB;cAEPmC;KACS,EACZ,oBAAC;IACC,cAAY9B,EAAE,2BAA2B,eAAe;IACxD,OAAM;IACN,QAAQ5C;cAIR,oBAAC,oBAAoB;KAAS,OAAO;eACnC,oBAAC;MACC,OAAO2D,SAASrD;MACTwD;MACP,YAAYJ,qBAAqBP;MACjC,eAAe7B;MACf,OACE,oBAAC;OACC;OACA,cAAYsB,EAAE,0BAA0B,cAAc;OAC9CtB;OACR,OAAOiD;OACP,YAAYb;OACAP;OACZ,UAAUqB;QAEd;MACA,UACEnC,UAAUuC,SACR,oBAAC;OACC;OACA,cAAYhC,EAAE,uBAAuB,UAAU;OAC/C,QAAQ1C;OACR,QAAQmC;OACR,SAASC;OACDhB;OACR,OAAOiD;OACP,YAAYb,qBAAqBP;OACjC,UAAUqB;QACV,GACA;MAEN,UAAUJ;MACV,eAAeL;OAAS;MAEE;KACxB;IACK;GAElB,EAEiCpB,KAAYE,MAAM;EACpD;;;;;;AAOF,AAACJ,YAAoBoC,gBAAgB"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | 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";
@@ -304,6 +304,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 				styles: swatchStyles
 			}, swatch.key))
 		}), showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
+			isBare: true,
 			"aria-label": t("colorSwatchGroup.customColor", "Custom color"),
 			qa: "ColorSwatchGroupCustom",
 			format,