@cube-dev/ui-kit 0.163.0 → 0.165.0

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

@@ -1 +1 @@
-{"version":3,"file":"use-table-selection.js","names":[],"sources":["../../../../src/components/data/TableBase/use-table-selection.ts"],"sourcesContent":["import { SelectionManager } from '@react-stately/selection';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport { RowCollection } from './RowCollection';\n\nimport type { Key, Selection } from '@react-types/shared';\nimport type { CubeTableSelectAllMode, CubeTableSelectionMode } from './types';\n\n/**\n * Reserved key for the checkbox column. Prefixed so it cannot collide with a\n * real data key, and structural so the value pipeline, sorting and search all\n * skip it.\n */\nexport const SELECTION_COLUMN_KEY = '__cube-selection__';\n\n/** Reserved key for the row-number column. Structural, like the checkbox. */\nexport const ROW_NUMBER_COLUMN_KEY = '__cube-row-number__';\n\n/** Square-ish, so the checkbox sits centred without stealing content width. */\nexport const SELECTION_COLUMN_WIDTH: Record<string, number> = {\n  xsmall: 32,\n  small: 36,\n  medium: 44,\n  large: 48,\n  xlarge: 52,\n};\n\nexport interface UseTableSelectionOptions<T> {\n  /** Rows currently on screen — one page, or everything when unpaginated. */\n  rows: readonly T[];\n  /**\n   * Every row passing the current search/filter, across pages. Only differs\n   * from `rows` under client pagination, and only `selectAllMode=\"filtered\"`\n   * reads it.\n   */\n  filteredRows: readonly T[];\n  getRowKey: (row: T, index: number) => Key;\n  selectionMode: CubeTableSelectionMode;\n  selectedKeys?: Key[] | 'all';\n  defaultSelectedKeys?: Key[] | 'all';\n  onSelectionChange?: (keys: Key[] | 'all', rows: T[]) => void;\n  selectAllMode: CubeTableSelectAllMode;\n  isRowSelectable?: (row: T) => boolean;\n  disabledKeys?: Key[];\n}\n\nexport type CubeTableSelectAllState = 'none' | 'some' | 'all';\n\nfunction toSelection(keys: Key[] | 'all' | undefined): Selection | undefined {\n  if (keys === undefined) return undefined;\n\n  return keys === 'all' ? 'all' : new Set(keys);\n}\n\nexport function useTableSelection<T>(options: UseTableSelectionOptions<T>) {\n  const {\n    rows,\n    filteredRows,\n    getRowKey,\n    selectionMode,\n    selectedKeys: selectedKeysProp,\n    defaultSelectedKeys,\n    onSelectionChange,\n    selectAllMode,\n    isRowSelectable,\n    disabledKeys,\n  } = options;\n\n  const isEnabled = selectionMode !== 'none';\n\n  /**\n   * Two distinct notions of \"not available\", deliberately kept apart:\n   *\n   * - `disabledKeys` — the row is inert. Not focusable, not interactive. This\n   *   is React Aria's standard meaning.\n   * - `isRowSelectable` — the row is fully interactive, only its checkbox is\n   *   inert. This is what Cloud's tables do today.\n   *\n   * A `SelectionManager` has one `disabledBehavior`, so it gets the union under\n   * `'selection'` (neither kind can be selected) and the hard-disabled set is\n   * tracked separately for focus and interaction.\n   */\n  const hardDisabledKeys = useMemo(\n    () => new Set(disabledKeys ?? []),\n    [disabledKeys],\n  );\n\n  const unselectableKeys = useMemo(() => {\n    const keys = new Set(hardDisabledKeys);\n\n    if (isRowSelectable) {\n      // Scanned over the filtered set, not just the page: a select-all that\n      // reaches beyond the page must respect it there too.\n      filteredRows.forEach((row, index) => {\n        if (!isRowSelectable(row)) keys.add(getRowKey(row, index));\n      });\n    }\n\n    return keys;\n  }, [hardDisabledKeys, isRowSelectable, filteredRows, getRowKey]);\n\n  const collection = useMemo(\n    () => new RowCollection(rows, getRowKey, unselectableKeys),\n    [rows, getRowKey, unselectableKeys],\n  );\n\n  const rowByKey = useMemo(() => {\n    const map = new Map<Key, T>();\n\n    // The page first, then the wider filtered set, so a key present in both\n    // resolves to the row the user can actually see.\n    filteredRows.forEach((row, index) => map.set(getRowKey(row, index), row));\n    rows.forEach((row, index) => map.set(getRowKey(row, index), row));\n\n    return map;\n  }, [rows, filteredRows, getRowKey]);\n\n  const rowByKeyRef = useRef(rowByKey);\n\n  rowByKeyRef.current = rowByKey;\n\n  /**\n   * Where a shift-range starts, and how far it currently reaches.\n   *\n   * React Aria's `SelectionManager.extendSelection` keeps this on the `Selection`\n   * object itself (`selectedKeys.anchorKey`), which cannot survive our public\n   * API: `selectedKeys` is `Key[]`, and `useMultipleSelectionState` rebuilds\n   * whatever it is given with `new Selection(value)` — a constructor that only\n   * copies the anchor when the input is already a `Selection`, a class no\n   * package exports. A controlled table would silently reset the anchor to the\n   * clicked row and turn every shift-click into a plain toggle.\n   *\n   * So the range is computed here instead, over `RowCollection`'s index. The\n   * semantics match `extendSelection` exactly: the previous range is removed\n   * before the new one is added, so shift-clicking back shrinks the range\n   * rather than leaving the overshoot selected.\n   */\n  const anchorRef = useRef<Key | null>(null);\n  const extentRef = useRef<Key | null>(null);\n\n  const handleSelectionChange = useEvent((keys: Selection) => {\n    if (!onSelectionChange) return;\n\n    if (keys === 'all') {\n      // The sentinel means \"everything, including rows the client has not\n      // loaded\", so the row list can only ever be what is loaded.\n      onSelectionChange('all', [...rowByKeyRef.current.values()]);\n\n      return;\n    }\n\n    const list = [...keys];\n\n    onSelectionChange(\n      list,\n      list\n        .map((key) => rowByKeyRef.current.get(key))\n        .filter((row): row is T => row !== undefined),\n    );\n  });\n\n  const controlledSelection = useMemo(\n    () => toSelection(selectedKeysProp),\n    [selectedKeysProp],\n  );\n  const defaultSelection = useMemo(\n    () => toSelection(defaultSelectedKeys),\n    [defaultSelectedKeys],\n  );\n\n  const state = useMultipleSelectionState({\n    selectionMode,\n    selectedKeys: controlledSelection,\n    defaultSelectedKeys: defaultSelection,\n    disabledKeys: unselectableKeys,\n    disabledBehavior: 'selection',\n    onSelectionChange: handleSelectionChange,\n  });\n\n  const selectionManager = useMemo(\n    () => new SelectionManager(collection, state),\n    [collection, state],\n  );\n\n  const selectedKeys = state.selectedKeys;\n  const isAll = selectedKeys === 'all';\n\n  const canSelect = useCallback(\n    (key: Key) => isEnabled && !unselectableKeys.has(key),\n    [isEnabled, unselectableKeys],\n  );\n\n  const isSelected = useCallback(\n    (key: Key) =>\n      isAll ? canSelect(key) : (selectedKeys as Set<Key>).has(key),\n    [isAll, selectedKeys, canSelect],\n  );\n\n  /** Keys the header checkbox acts on, which is what `selectAllMode` decides. */\n  const scopeKeys = useMemo(() => {\n    if (!isEnabled || selectionMode === 'single') return [];\n\n    const source = selectAllMode === 'page' ? rows : filteredRows;\n\n    return source\n      .map((row, index) => getRowKey(row, index))\n      .filter((key) => !unselectableKeys.has(key));\n  }, [\n    isEnabled,\n    selectionMode,\n    selectAllMode,\n    rows,\n    filteredRows,\n    getRowKey,\n    unselectableKeys,\n  ]);\n\n  const selectAllState: CubeTableSelectAllState = useMemo(() => {\n    if (isAll) return 'all';\n    if (!scopeKeys.length) return 'none';\n\n    const set = selectedKeys as Set<Key>;\n    let count = 0;\n\n    for (const key of scopeKeys) if (set.has(key)) count++;\n\n    return count === 0 ? 'none' : count === scopeKeys.length ? 'all' : 'some';\n  }, [isAll, selectedKeys, scopeKeys]);\n\n  const toggleSelectAll = useEvent(() => {\n    anchorRef.current = null;\n    extentRef.current = null;\n\n    if (selectAllState === 'all') {\n      // Clearing drops the whole selection, not just the scope: leaving keys\n      // selected on other pages after the user clicked an unchecked-looking\n      // box is the kind of thing nobody discovers until they delete something.\n      state.setSelectedKeys(new Set());\n\n      return;\n    }\n\n    if (selectAllMode === 'all') {\n      state.setSelectedKeys('all');\n\n      return;\n    }\n\n    const next = new Set(isAll ? [] : (selectedKeys as Set<Key>));\n\n    scopeKeys.forEach((key) => next.add(key));\n    state.setSelectedKeys(next);\n  });\n\n  const clearSelection = useEvent(() => {\n    anchorRef.current = null;\n    extentRef.current = null;\n    state.setSelectedKeys(new Set());\n  });\n\n  /**\n   * Shift held on the press that produced this change. `Checkbox` reports only\n   * the next value, so the modifier is captured from the pointer/key event on\n   * the cell and read back here.\n   */\n  const shiftRef = useRef(false);\n\n  const captureShift = useCallback((event: { shiftKey: boolean }) => {\n    shiftRef.current = event.shiftKey;\n  }, []);\n\n  /** Selectable keys between two rows, inclusive, in either direction. */\n  const keysBetween = useCallback(\n    (from: Key, to: Key) => {\n      const fromIndex = collection.indexOf(from);\n      const toIndex = collection.indexOf(to);\n\n      if (fromIndex < 0 || toIndex < 0) return [];\n\n      const [lo, hi] =\n        fromIndex <= toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];\n      const all = collection.getKeys();\n      const range: Key[] = [];\n\n      for (let i = lo; i <= hi; i++) range.push(all[i]);\n\n      return range;\n    },\n    [collection],\n  );\n\n  const toggleRow = useEvent((key: Key) => {\n    if (!canSelect(key)) return;\n\n    if (selectionMode === 'single') {\n      state.setSelectedKeys(isSelected(key) ? new Set() : new Set([key]));\n\n      return;\n    }\n\n    const anchor = anchorRef.current;\n\n    if (shiftRef.current && anchor != null && collection.indexOf(anchor) >= 0) {\n      const next = new Set(isAll ? scopeKeys : (selectedKeys as Set<Key>));\n\n      // Drop the range this shift-click supersedes before drawing the new one,\n      // so clicking back toward the anchor shrinks the selection.\n      if (extentRef.current != null) {\n        keysBetween(anchor, extentRef.current).forEach((k) => next.delete(k));\n      }\n\n      keysBetween(anchor, key).forEach((k) => {\n        if (canSelect(k)) next.add(k);\n      });\n\n      extentRef.current = key;\n      state.setSelectedKeys(next);\n\n      return;\n    }\n\n    anchorRef.current = key;\n    extentRef.current = null;\n    selectionManager.toggleSelection(key);\n  });\n\n  const selectedRows = useMemo(() => {\n    if (isAll) return [...rowByKey.values()];\n\n    return [...(selectedKeys as Set<Key>)]\n      .map((key) => rowByKey.get(key))\n      .filter((row): row is T => row !== undefined);\n  }, [isAll, selectedKeys, rowByKey]);\n\n  return {\n    isEnabled,\n    selectionMode,\n    selectionManager,\n    collection,\n    isSelected,\n    canSelect,\n    isRowDisabled: useCallback(\n      (key: Key) => hardDisabledKeys.has(key),\n      [hardDisabledKeys],\n    ),\n    toggleRow,\n    captureShift,\n    selectAllState,\n    toggleSelectAll,\n    clearSelection,\n    selectedRows,\n    selectedCount: isAll ? rowByKey.size : (selectedKeys as Set<Key>).size,\n    selectedKeys: (isAll ? 'all' : [...(selectedKeys as Set<Key>)]) as\n      | Key[]\n      | 'all',\n  };\n}\n\nexport type CubeTableSelectionState<T> = ReturnType<\n  typeof useTableSelection<T>\n>;\n"],"mappings":"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"}
+{"version":3,"file":"use-table-selection.js","names":[],"sources":["../../../../src/components/data/TableBase/use-table-selection.ts"],"sourcesContent":["import { SelectionManager } from '@react-stately/selection';\nimport { useCallback, useMemo, useRef } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport { RowCollection } from './RowCollection';\n\nimport type { Key, Selection } from '@react-types/shared';\nimport type { CubeTableSelectAllMode, CubeTableSelectionMode } from './types';\n\n/**\n * Reserved key for the checkbox column. Prefixed so it cannot collide with a\n * real data key, and structural so the value pipeline, sorting and search all\n * skip it.\n */\nexport const SELECTION_COLUMN_KEY = '__cube-selection__';\n\n/** Reserved key for the row-number column. Structural, like the checkbox. */\nexport const ROW_NUMBER_COLUMN_KEY = '__cube-row-number__';\n\n/** Square-ish, so the checkbox sits centred without stealing content width. */\nexport const SELECTION_COLUMN_WIDTH: Record<string, number> = {\n  xsmall: 32,\n  small: 36,\n  medium: 44,\n  large: 48,\n  xlarge: 52,\n};\n\nexport interface UseTableSelectionOptions<T> {\n  /** Rows currently on screen — one page, or everything when unpaginated. */\n  rows: readonly T[];\n  /** Stable keys parallel to `rows`, used by tree mode. */\n  rowKeys?: readonly Key[];\n  /** Full current-page subtree; defaults to `rows`. */\n  pageRows?: readonly T[];\n  /** Stable keys parallel to `pageRows`. */\n  pageRowKeys?: readonly Key[];\n  /**\n   * Every row passing the current search/filter, across pages. Only differs\n   * from `rows` under client pagination, and only `selectAllMode=\"filtered\"`\n   * reads it.\n   */\n  filteredRows: readonly T[];\n  /** Stable keys parallel to `filteredRows`. */\n  filteredRowKeys?: readonly Key[];\n  getRowKey: (row: T, index: number) => Key;\n  selectionMode: CubeTableSelectionMode;\n  selectedKeys?: Key[] | 'all';\n  defaultSelectedKeys?: Key[] | 'all';\n  onSelectionChange?: (keys: Key[] | 'all', rows: T[]) => void;\n  selectAllMode: CubeTableSelectAllMode;\n  isRowSelectable?: (row: T) => boolean;\n  disabledKeys?: Key[];\n  tree?: {\n    rootKeys: readonly Key[];\n    childrenOf: ReadonlyMap<Key, readonly Key[]>;\n    parentOf: ReadonlyMap<Key, Key | null>;\n    behavior: 'cascade' | 'independent';\n  };\n}\n\nexport type CubeTableSelectAllState = 'none' | 'some' | 'all';\n\nfunction toSelection(keys: Key[] | 'all' | undefined): Selection | undefined {\n  if (keys === undefined) return undefined;\n\n  return keys === 'all' ? 'all' : new Set(keys);\n}\n\nfunction deriveTreeSelection(\n  source: ReadonlySet<Key>,\n  rootKeys: readonly Key[],\n  childrenOf: ReadonlyMap<Key, readonly Key[]>,\n  isEligible: (key: Key) => boolean,\n) {\n  const checked = new Set(source);\n  const indeterminate = new Set<Key>();\n\n  const visit = (\n    key: Key,\n  ): { all: boolean; any: boolean; eligible: boolean } => {\n    const children = childrenOf.get(key) ?? [];\n    const eligible = isEligible(key);\n    const explicitlySelected = eligible && source.has(key);\n\n    if (explicitlySelected) checked.add(key);\n\n    if (!children.length) {\n      const selected = eligible && checked.has(key);\n      if (!eligible) checked.delete(key);\n      return { all: !eligible || selected, any: selected, eligible };\n    }\n\n    let all = true;\n    let any = false;\n    let hasEligible = false;\n\n    for (const child of children) {\n      const result = visit(child);\n      if (result.eligible) hasEligible = true;\n      if (!result.all) all = false;\n      if (result.any) any = true;\n    }\n\n    if (!eligible) {\n      checked.delete(key);\n      indeterminate.delete(key);\n    } else if (hasEligible && all) {\n      checked.add(key);\n      indeterminate.delete(key);\n    } else if (hasEligible && any) {\n      checked.delete(key);\n      indeterminate.add(key);\n    } else if (hasEligible) {\n      // Branch keys in the public set are a normalized reflection of their\n      // descendants, not an enduring wildcard. This matters when a search\n      // hid siblings: restoring the full tree must not make those siblings\n      // selected merely because the filtered parent had been checked.\n      checked.delete(key);\n      indeterminate.delete(key);\n    } else if (!checked.has(key)) {\n      indeterminate.delete(key);\n    }\n\n    return {\n      all: !eligible || (checked.has(key) && all),\n      any: any || checked.has(key),\n      eligible: eligible || hasEligible,\n    };\n  };\n\n  rootKeys.forEach((key) => visit(key));\n  return { checked, indeterminate };\n}\n\nexport function useTableSelection<T>(options: UseTableSelectionOptions<T>) {\n  const {\n    rows,\n    rowKeys,\n    pageRows = rows,\n    pageRowKeys,\n    filteredRows,\n    filteredRowKeys,\n    getRowKey,\n    selectionMode,\n    selectedKeys: selectedKeysProp,\n    defaultSelectedKeys,\n    onSelectionChange,\n    selectAllMode,\n    isRowSelectable,\n    disabledKeys,\n    tree,\n  } = options;\n\n  const isEnabled = selectionMode !== 'none';\n\n  /**\n   * Two distinct notions of \"not available\", deliberately kept apart:\n   *\n   * - `disabledKeys` — the row is inert. Not focusable, not interactive. This\n   *   is React Aria's standard meaning.\n   * - `isRowSelectable` — the row is fully interactive, only its checkbox is\n   *   inert. This is what Cloud's tables do today.\n   *\n   * A `SelectionManager` has one `disabledBehavior`, so it gets the union under\n   * `'selection'` (neither kind can be selected) and the hard-disabled set is\n   * tracked separately for focus and interaction.\n   */\n  const hardDisabledKeys = useMemo(\n    () => new Set(disabledKeys ?? []),\n    [disabledKeys],\n  );\n\n  const unselectableKeys = useMemo(() => {\n    const keys = new Set(hardDisabledKeys);\n\n    if (isRowSelectable) {\n      // Scanned over the filtered set, not just the page: a select-all that\n      // reaches beyond the page must respect it there too.\n      filteredRows.forEach((row, index) => {\n        if (!isRowSelectable(row)) {\n          keys.add(filteredRowKeys?.[index] ?? getRowKey(row, index));\n        }\n      });\n    }\n\n    return keys;\n  }, [\n    hardDisabledKeys,\n    isRowSelectable,\n    filteredRows,\n    filteredRowKeys,\n    getRowKey,\n  ]);\n\n  const visibleGetRowKey = useCallback(\n    (row: T, index: number) => rowKeys?.[index] ?? getRowKey(row, index),\n    [rowKeys, getRowKey],\n  );\n\n  const collection = useMemo(\n    () => new RowCollection(rows, visibleGetRowKey, unselectableKeys),\n    [rows, visibleGetRowKey, unselectableKeys],\n  );\n\n  const rowByKey = useMemo(() => {\n    const map = new Map<Key, T>();\n\n    // The page first, then the wider filtered set, so a key present in both\n    // resolves to the row the user can actually see.\n    filteredRows.forEach((row, index) =>\n      map.set(filteredRowKeys?.[index] ?? getRowKey(row, index), row),\n    );\n    rows.forEach((row, index) =>\n      map.set(rowKeys?.[index] ?? getRowKey(row, index), row),\n    );\n\n    return map;\n  }, [rows, rowKeys, filteredRows, filteredRowKeys, getRowKey]);\n\n  const rowByKeyRef = useRef(rowByKey);\n\n  rowByKeyRef.current = rowByKey;\n\n  /**\n   * Where a shift-range starts, and how far it currently reaches.\n   *\n   * React Aria's `SelectionManager.extendSelection` keeps this on the `Selection`\n   * object itself (`selectedKeys.anchorKey`), which cannot survive our public\n   * API: `selectedKeys` is `Key[]`, and `useMultipleSelectionState` rebuilds\n   * whatever it is given with `new Selection(value)` — a constructor that only\n   * copies the anchor when the input is already a `Selection`, a class no\n   * package exports. A controlled table would silently reset the anchor to the\n   * clicked row and turn every shift-click into a plain toggle.\n   *\n   * So the range is computed here instead, over `RowCollection`'s index. The\n   * semantics match `extendSelection` exactly: the previous range is removed\n   * before the new one is added, so shift-clicking back shrinks the range\n   * rather than leaving the overshoot selected.\n   */\n  const anchorRef = useRef<Key | null>(null);\n  const extentRef = useRef<Key | null>(null);\n\n  const handleSelectionChange = useEvent((keys: Selection) => {\n    if (!onSelectionChange) return;\n\n    if (keys === 'all') {\n      // The sentinel means \"everything, including rows the client has not\n      // loaded\", so the row list can only ever be what is loaded.\n      onSelectionChange('all', [...rowByKeyRef.current.values()]);\n\n      return;\n    }\n\n    const list = [...keys];\n\n    onSelectionChange(\n      list,\n      list\n        .map((key) => rowByKeyRef.current.get(key))\n        .filter((row): row is T => row !== undefined),\n    );\n  });\n\n  const controlledSelection = useMemo(\n    () => toSelection(selectedKeysProp),\n    [selectedKeysProp],\n  );\n  const defaultSelection = useMemo(\n    () => toSelection(defaultSelectedKeys),\n    [defaultSelectedKeys],\n  );\n\n  const state = useMultipleSelectionState({\n    selectionMode,\n    selectedKeys: controlledSelection,\n    defaultSelectedKeys: defaultSelection,\n    disabledKeys: unselectableKeys,\n    disabledBehavior: 'selection',\n    onSelectionChange: handleSelectionChange,\n  });\n\n  const selectionManager = useMemo(\n    () => new SelectionManager(collection, state),\n    [collection, state],\n  );\n\n  const selectedKeys = state.selectedKeys;\n  const isAll = selectedKeys === 'all';\n  const isCascade =\n    tree?.behavior === 'cascade' && selectionMode === 'multiple';\n\n  const derivedSelection = useMemo(() => {\n    if (isAll) {\n      return {\n        checked: new Set(\n          [...rowByKey.keys()].filter((key) => !unselectableKeys.has(key)),\n        ),\n        indeterminate: new Set<Key>(),\n      };\n    }\n\n    if (!isCascade || !tree) {\n      return {\n        checked: new Set(selectedKeys as Set<Key>),\n        indeterminate: new Set<Key>(),\n      };\n    }\n\n    return deriveTreeSelection(\n      selectedKeys as Set<Key>,\n      tree.rootKeys,\n      tree.childrenOf,\n      (key) => !unselectableKeys.has(key),\n    );\n  }, [isAll, isCascade, selectedKeys, tree, rowByKey, unselectableKeys]);\n\n  const canSelect = useCallback(\n    (key: Key) => isEnabled && !unselectableKeys.has(key),\n    [isEnabled, unselectableKeys],\n  );\n\n  const isSelected = useCallback(\n    (key: Key) => (isAll ? canSelect(key) : derivedSelection.checked.has(key)),\n    [isAll, derivedSelection, canSelect],\n  );\n\n  const isIndeterminate = useCallback(\n    (key: Key) => derivedSelection.indeterminate.has(key),\n    [derivedSelection],\n  );\n\n  /** Keys the header checkbox acts on, which is what `selectAllMode` decides. */\n  const scopeKeys = useMemo(() => {\n    if (!isEnabled || selectionMode === 'single') return [];\n\n    const source = selectAllMode === 'page' ? pageRows : filteredRows;\n    const sourceKeys = selectAllMode === 'page' ? pageRowKeys : filteredRowKeys;\n\n    return source\n      .map((row, index) => sourceKeys?.[index] ?? getRowKey(row, index))\n      .filter((key) => !unselectableKeys.has(key));\n  }, [\n    isEnabled,\n    selectionMode,\n    selectAllMode,\n    pageRows,\n    pageRowKeys,\n    filteredRows,\n    filteredRowKeys,\n    getRowKey,\n    unselectableKeys,\n  ]);\n\n  const selectAllState: CubeTableSelectAllState = useMemo(() => {\n    if (isAll) return 'all';\n    if (!scopeKeys.length) return 'none';\n\n    const set = derivedSelection.checked;\n    let count = 0;\n\n    for (const key of scopeKeys) if (set.has(key)) count++;\n\n    return count === 0 ? 'none' : count === scopeKeys.length ? 'all' : 'some';\n  }, [isAll, derivedSelection, scopeKeys]);\n\n  const toggleSelectAll = useEvent(() => {\n    anchorRef.current = null;\n    extentRef.current = null;\n\n    if (selectAllState === 'all') {\n      // Clearing drops the whole selection, not just the scope: leaving keys\n      // selected on other pages after the user clicked an unchecked-looking\n      // box is the kind of thing nobody discovers until they delete something.\n      state.setSelectedKeys(new Set());\n\n      return;\n    }\n\n    if (selectAllMode === 'all') {\n      state.setSelectedKeys('all');\n\n      return;\n    }\n\n    const next = new Set(isAll ? [] : derivedSelection.checked);\n\n    scopeKeys.forEach((key) => next.add(key));\n    state.setSelectedKeys(\n      isCascade && tree\n        ? deriveTreeSelection(\n            next,\n            tree.rootKeys,\n            tree.childrenOf,\n            (key) => !unselectableKeys.has(key),\n          ).checked\n        : next,\n    );\n  });\n\n  const clearSelection = useEvent(() => {\n    anchorRef.current = null;\n    extentRef.current = null;\n    state.setSelectedKeys(new Set());\n  });\n\n  /**\n   * Shift held on the press that produced this change. `Checkbox` reports only\n   * the next value, so the modifier is captured from the pointer/key event on\n   * the cell and read back here.\n   */\n  const shiftRef = useRef(false);\n\n  const captureShift = useCallback((event: { shiftKey: boolean }) => {\n    shiftRef.current = event.shiftKey;\n  }, []);\n\n  /** Selectable keys between two rows, inclusive, in either direction. */\n  const keysBetween = useCallback(\n    (from: Key, to: Key) => {\n      const fromIndex = collection.indexOf(from);\n      const toIndex = collection.indexOf(to);\n\n      if (fromIndex < 0 || toIndex < 0) return [];\n\n      const [lo, hi] =\n        fromIndex <= toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];\n      const all = collection.getKeys();\n      const range: Key[] = [];\n\n      for (let i = lo; i <= hi; i++) range.push(all[i]);\n\n      return range;\n    },\n    [collection],\n  );\n\n  const toggleRow = useEvent((key: Key) => {\n    if (!canSelect(key)) return;\n\n    if (selectionMode === 'single') {\n      state.setSelectedKeys(isSelected(key) ? new Set() : new Set([key]));\n\n      return;\n    }\n\n    const applyCascade = (set: Set<Key>, target: Key, value: boolean) => {\n      if (!canSelect(target)) return;\n      if (value) set.add(target);\n      else {\n        set.delete(target);\n\n        // A checked ancestor in the normalized public key set means its whole\n        // branch is selected. Remove that derived marker before normalizing a\n        // partial deselection, or it would immediately select the child again.\n        if (isCascade && tree) {\n          let parent = tree.parentOf.get(target);\n          while (parent != null) {\n            set.delete(parent);\n            parent = tree.parentOf.get(parent);\n          }\n        }\n      }\n      if (!isCascade || !tree) return;\n      (tree.childrenOf.get(target) ?? []).forEach((child) =>\n        applyCascade(set, child, value),\n      );\n    };\n\n    const normalizeCascade = (set: Set<Key>) =>\n      isCascade && tree\n        ? deriveTreeSelection(\n            set,\n            tree.rootKeys,\n            tree.childrenOf,\n            (candidate) => !unselectableKeys.has(candidate),\n          ).checked\n        : set;\n\n    const anchor = anchorRef.current;\n\n    if (shiftRef.current && anchor != null && collection.indexOf(anchor) >= 0) {\n      const next = new Set(isAll ? scopeKeys : derivedSelection.checked);\n\n      // Drop the range this shift-click supersedes before drawing the new one,\n      // so clicking back toward the anchor shrinks the selection.\n      if (extentRef.current != null) {\n        keysBetween(anchor, extentRef.current).forEach((k) =>\n          applyCascade(next, k, false),\n        );\n      }\n\n      keysBetween(anchor, key).forEach((k) => {\n        applyCascade(next, k, true);\n      });\n\n      extentRef.current = key;\n      state.setSelectedKeys(normalizeCascade(next));\n\n      return;\n    }\n\n    anchorRef.current = key;\n    extentRef.current = null;\n    if (isCascade) {\n      const next = new Set(derivedSelection.checked);\n      applyCascade(next, key, !derivedSelection.checked.has(key));\n      state.setSelectedKeys(normalizeCascade(next));\n    } else {\n      selectionManager.toggleSelection(key);\n    }\n  });\n\n  const selectedRows = useMemo(() => {\n    if (isAll) return [...rowByKey.values()];\n\n    return [...derivedSelection.checked]\n      .map((key) => rowByKey.get(key))\n      .filter((row): row is T => row !== undefined);\n  }, [isAll, derivedSelection, rowByKey]);\n\n  return {\n    isEnabled,\n    selectionMode,\n    selectionManager,\n    collection,\n    isSelected,\n    isIndeterminate,\n    canSelect,\n    isRowDisabled: useCallback(\n      (key: Key) => hardDisabledKeys.has(key),\n      [hardDisabledKeys],\n    ),\n    toggleRow,\n    captureShift,\n    selectAllState,\n    toggleSelectAll,\n    clearSelection,\n    selectedRows,\n    selectedCount: isAll ? rowByKey.size : derivedSelection.checked.size,\n    selectedKeys: (isAll ? 'all' : [...derivedSelection.checked]) as\n      | Key[]\n      | 'all',\n  };\n}\n\nexport type CubeTableSelectionState<T> = ReturnType<\n  typeof useTableSelection<T>\n>;\n"],"mappings":"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"}

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { compareByColumn } from "./use-table-sort.js";
 import { useMemo } from "react";

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

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

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

@@ -0,0 +1,107 @@
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Item, useTreeState } from "react-stately";
+import { useControlledState } from "@react-stately/utils";
+
+//#region src/components/data/TableBase/use-table-tree-state.tsx
+function useTableTreeState(options) {
+	const { roots, allNodesByKey, expandedKeys: controlledExpandedKeys, defaultExpandedKeys, forcedExpandedKeys, disabledKeys, getTextValue, onExpand, ariaLabel } = options;
+	const { t } = useI18n();
+	const [baseExpandedKeys, setBaseExpandedKeys] = useControlledState(useMemo(() => controlledExpandedKeys === void 0 ? void 0 : new Set(controlledExpandedKeys), [controlledExpandedKeys]), useMemo(() => new Set(defaultExpandedKeys ?? []), [defaultExpandedKeys]));
+	const effectiveExpandedKeys = useMemo(() => {
+		const keys = new Set(baseExpandedKeys);
+		forcedExpandedKeys?.forEach((key) => keys.add(key));
+		return keys;
+	}, [baseExpandedKeys, forcedExpandedKeys]);
+	const handleExpandedChange = useEvent((next) => {
+		let toggledKey = null;
+		let expanded = false;
+		for (const key of next) if (!effectiveExpandedKeys.has(key)) {
+			toggledKey = key;
+			expanded = true;
+			break;
+		}
+		if (toggledKey == null) {
+			for (const key of effectiveExpandedKeys) if (!next.has(key)) {
+				toggledKey = key;
+				expanded = false;
+				break;
+			}
+		}
+		if (toggledKey == null) return;
+		if (!expanded && forcedExpandedKeys?.has(toggledKey)) return;
+		const nextBase = new Set(baseExpandedKeys);
+		if (expanded) nextBase.add(toggledKey);
+		else nextBase.delete(toggledKey);
+		setBaseExpandedKeys(nextBase);
+		const node = allNodesByKey.get(toggledKey);
+		if (!node) return;
+		onExpand?.([...nextBase], {
+			row: node.row,
+			rowKey: node.key,
+			level: node.level,
+			parentKey: node.parentKey,
+			expanded
+		});
+	});
+	const renderItem = useEvent((node) => /* @__PURE__ */ jsx(Item, {
+		textValue: getTextValue(node),
+		childItems: node.children,
+		children: getTextValue(node)
+	}, node.key));
+	const ariaProps = useMemo(() => ({
+		items: roots,
+		children: renderItem,
+		selectionMode: "none",
+		expandedKeys: effectiveExpandedKeys,
+		onExpandedChange: handleExpandedChange,
+		disabledKeys,
+		disabledBehavior: "all",
+		onAction: () => {},
+		"aria-label": ariaLabel ?? t("itemTable.table", "Table")
+	}), [
+		roots,
+		renderItem,
+		effectiveExpandedKeys,
+		handleExpandedChange,
+		disabledKeys,
+		ariaLabel,
+		t
+	]);
+	const baseState = useTreeState(ariaProps);
+	const state = useMemo(() => {
+		const collection = baseState.collection;
+		if (typeof collection.getChildren === "function") return baseState;
+		const patched = Object.create(collection);
+		patched.getChildren = (key) => {
+			const node = collection.getItem(key);
+			return node ? Array.from(node.childNodes) : [];
+		};
+		return {
+			...baseState,
+			collection: patched
+		};
+	}, [baseState]);
+	const visibleNodes = useMemo(() => {
+		const output = [];
+		for (const key of state.collection.getKeys()) {
+			const node = state.collection.getItem(key);
+			if (node?.type === "item") output.push(node);
+		}
+		return output;
+	}, [state.collection]);
+	return {
+		state,
+		ariaProps,
+		visibleNodes,
+		visibleEntries: useMemo(() => visibleNodes.map((node) => node.value).filter((node) => node != null), [visibleNodes]),
+		expandedKeys: effectiveExpandedKeys
+	};
+}
+
+//#endregion
+export { useTableTreeState };
+//# sourceMappingURL=use-table-tree-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-tree-state.js","names":[],"sources":["../../../../src/components/data/TableBase/use-table-tree-state.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { useMemo } from 'react';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { ReactElement } from 'react';\nimport type { TreeState } from 'react-stately';\nimport type { TableTreeNode } from './table-tree';\nimport type { CubeTableRowExpandInfo } from './types';\n\nexport interface UseTableTreeStateOptions<T> {\n  roots: TableTreeNode<T>[];\n  allNodesByKey: Map<Key, TableTreeNode<T>>;\n  expandedKeys?: Key[];\n  defaultExpandedKeys?: Key[];\n  forcedExpandedKeys?: ReadonlySet<Key>;\n  disabledKeys?: Key[];\n  getTextValue: (node: TableTreeNode<T>) => string;\n  onExpand?: (keys: Key[], info: CubeTableRowExpandInfo<T>) => void;\n  ariaLabel?: string;\n}\n\nexport interface TableTreeStateResult<T> {\n  state: TreeState<TableTreeNode<T>>;\n  /** Props consumed by `useTree` on the actual `<table>`. */\n  ariaProps: Record<string, any>;\n  visibleNodes: Node<TableTreeNode<T>>[];\n  visibleEntries: TableTreeNode<T>[];\n  expandedKeys: Set<Key>;\n}\n\nexport function useTableTreeState<T>(\n  options: UseTableTreeStateOptions<T>,\n): TableTreeStateResult<T> {\n  const {\n    roots,\n    allNodesByKey,\n    expandedKeys: controlledExpandedKeys,\n    defaultExpandedKeys,\n    forcedExpandedKeys,\n    disabledKeys,\n    getTextValue,\n    onExpand,\n    ariaLabel,\n  } = options;\n  const { t } = useI18n();\n\n  const controlledSet = useMemo(\n    () =>\n      controlledExpandedKeys === undefined\n        ? undefined\n        : new Set<Key>(controlledExpandedKeys),\n    [controlledExpandedKeys],\n  );\n  const defaultSet = useMemo(\n    () => new Set<Key>(defaultExpandedKeys ?? []),\n    [defaultExpandedKeys],\n  );\n  const [baseExpandedKeys, setBaseExpandedKeys] = useControlledState<Set<Key>>(\n    controlledSet as Set<Key>,\n    defaultSet,\n  );\n\n  const effectiveExpandedKeys = useMemo(() => {\n    const keys = new Set(baseExpandedKeys);\n    forcedExpandedKeys?.forEach((key) => keys.add(key));\n    return keys;\n  }, [baseExpandedKeys, forcedExpandedKeys]);\n\n  const handleExpandedChange = useEvent((next: Set<Key>) => {\n    let toggledKey: Key | null = null;\n    let expanded = false;\n\n    for (const key of next) {\n      if (!effectiveExpandedKeys.has(key)) {\n        toggledKey = key;\n        expanded = true;\n        break;\n      }\n    }\n\n    if (toggledKey == null) {\n      for (const key of effectiveExpandedKeys) {\n        if (!next.has(key)) {\n          toggledKey = key;\n          expanded = false;\n          break;\n        }\n      }\n    }\n\n    if (toggledKey == null) return;\n\n    // Search-owned expansions are derived and cannot be collapsed until the\n    // search clears. Crucially, they never leak into the consumer's state.\n    if (!expanded && forcedExpandedKeys?.has(toggledKey)) return;\n\n    const nextBase = new Set(baseExpandedKeys);\n    if (expanded) nextBase.add(toggledKey);\n    else nextBase.delete(toggledKey);\n    setBaseExpandedKeys(nextBase);\n\n    const node = allNodesByKey.get(toggledKey);\n    if (!node) return;\n\n    onExpand?.([...nextBase], {\n      row: node.row,\n      rowKey: node.key,\n      level: node.level,\n      parentKey: node.parentKey,\n      expanded,\n    });\n  });\n\n  const renderItem = useEvent(\n    (node: TableTreeNode<T>): ReactElement => (\n      <Item\n        key={node.key}\n        textValue={getTextValue(node)}\n        childItems={node.children}\n      >\n        {getTextValue(node)}\n      </Item>\n    ),\n  );\n\n  const ariaProps = useMemo(\n    () => ({\n      items: roots,\n      children: renderItem as any,\n      selectionMode: 'none' as const,\n      expandedKeys: effectiveExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      // Prevent `useTreeItem` from treating a row press as an implicit toggle.\n      // Tables keep row activation and expansion as separate interactions.\n      onAction: () => {},\n      'aria-label': ariaLabel ?? t('itemTable.table', 'Table'),\n    }),\n    [\n      roots,\n      renderItem,\n      effectiveExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      ariaLabel,\n      t,\n    ],\n  );\n\n  const baseState = useTreeState<TableTreeNode<T>>(ariaProps);\n\n  // Current React Stately's legacy TreeCollection omits `getChildren`, while\n  // `useTreeItem` needs it for level/set-size/expanded metadata.\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') return baseState;\n\n    const patched = Object.create(collection);\n    patched.getChildren = (key: Key) => {\n      const node = collection.getItem(key);\n      return node ? Array.from(node.childNodes) : [];\n    };\n\n    return { ...baseState, collection: patched } as typeof baseState;\n  }, [baseState]);\n\n  const visibleNodes = useMemo(() => {\n    const output: Node<TableTreeNode<T>>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node?.type === 'item') output.push(node);\n    }\n    return output;\n  }, [state.collection]);\n\n  const visibleEntries = useMemo(\n    () =>\n      visibleNodes\n        .map((node) => node.value)\n        .filter((node): node is TableTreeNode<T> => node != null),\n    [visibleNodes],\n  );\n\n  return {\n    state,\n    ariaProps,\n    visibleNodes,\n    visibleEntries,\n    expandedKeys: effectiveExpandedKeys,\n  };\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,kBACd,SACyB;CACzB,MAAM,EACJ,OACA,eACA,cAAc,wBACd,qBACA,oBACA,cACA,cACA,UACA,cACE;CACJ,MAAM,EAAE,MAAM,SAAS;CAavB,MAAM,CAAC,kBAAkB,uBAAuB,mBAX1B,cAElB,2BAA2B,SACvB,SACA,IAAI,IAAS,uBAAuB,EAC1C,CAAC,uBAAuB,CACzB,EACkB,cACX,IAAI,IAAS,uBAAuB,EAAE,CAAC,EAC7C,CAAC,oBAAoB,CACtB,CAIA;CAED,MAAM,wBAAwB,cAAc;EAC1C,MAAM,OAAO,IAAI,IAAI,iBAAiB;AACtC,sBAAoB,SAAS,QAAQ,KAAK,IAAI,IAAI,CAAC;AACnD,SAAO;IACN,CAAC,kBAAkB,mBAAmB,CAAC;CAE1C,MAAM,uBAAuB,UAAU,SAAmB;EACxD,IAAI,aAAyB;EAC7B,IAAI,WAAW;AAEf,OAAK,MAAM,OAAO,KAChB,KAAI,CAAC,sBAAsB,IAAI,IAAI,EAAE;AACnC,gBAAa;AACb,cAAW;AACX;;AAIJ,MAAI,cAAc,MAChB;QAAK,MAAM,OAAO,sBAChB,KAAI,CAAC,KAAK,IAAI,IAAI,EAAE;AAClB,iBAAa;AACb,eAAW;AACX;;;AAKN,MAAI,cAAc,KAAM;AAIxB,MAAI,CAAC,YAAY,oBAAoB,IAAI,WAAW,CAAE;EAEtD,MAAM,WAAW,IAAI,IAAI,iBAAiB;AAC1C,MAAI,SAAU,UAAS,IAAI,WAAW;MACjC,UAAS,OAAO,WAAW;AAChC,sBAAoB,SAAS;EAE7B,MAAM,OAAO,cAAc,IAAI,WAAW;AAC1C,MAAI,CAAC,KAAM;AAEX,aAAW,CAAC,GAAG,SAAS,EAAE;GACxB,KAAK,KAAK;GACV,QAAQ,KAAK;GACb,OAAO,KAAK;GACZ,WAAW,KAAK;GAChB;GACD,CAAC;GACF;CAEF,MAAM,aAAa,UAChB,SACC,oBAAC;EAEC,WAAW,aAAa,KAAK;EAC7B,YAAY,KAAK;YAEhB,aAAa,KAAK;IAJd,KAAK,IAKL,CAEV;CAED,MAAM,YAAY,eACT;EACL,OAAO;EACP,UAAU;EACV,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB;EACA,kBAAkB;EAGlB,gBAAgB;EAChB,cAAc,aAAa,EAAE,mBAAmB,QAAQ;EACzD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,YAAY,aAA+B,UAAU;CAI3D,MAAM,QAAQ,cAAc;EAC1B,MAAM,aAAa,UAAU;AAC7B,MAAI,OAAQ,WAAmB,gBAAgB,WAAY,QAAO;EAElE,MAAM,UAAU,OAAO,OAAO,WAAW;AACzC,UAAQ,eAAe,QAAa;GAClC,MAAM,OAAO,WAAW,QAAQ,IAAI;AACpC,UAAO,OAAO,MAAM,KAAK,KAAK,WAAW,GAAG,EAAE;;AAGhD,SAAO;GAAE,GAAG;GAAW,YAAY;GAAS;IAC3C,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,cAAc;EACjC,MAAM,SAAmC,EAAE;AAC3C,OAAK,MAAM,OAAO,MAAM,WAAW,SAAS,EAAE;GAC5C,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI;AAC1C,OAAI,MAAM,SAAS,OAAQ,QAAO,KAAK,KAAK;;AAE9C,SAAO;IACN,CAAC,MAAM,WAAW,CAAC;AAUtB,QAAO;EACL;EACA;EACA;EACA,gBAZqB,cAEnB,aACG,KAAK,SAAS,KAAK,MAAM,CACzB,QAAQ,SAAmC,QAAQ,KAAK,EAC7D,CAAC,aAAa,CACf;EAOC,cAAc;EACf"}

package/dist/components/data/index.d.ts

@@ -1,6 +1,6 @@
 
-import { CubeTableAlign, CubeTableCellContext, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort, CubeTableSortDirection } from "./TableBase/types.js";
-import { CubeDataTableColumn, CubeDataTableProps } from "./DataTable/types.js";
+import { CubeTableAlign, CubeTableCellContext, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableLayoutProps, CubeTableRowContext, CubeTableRowExpandInfo, CubeTableRowSection, CubeTableRowSize, CubeTableSort, CubeTableSortDirection, CubeTableTreeProps, CubeTableTreeRowState } from "./TableBase/types.js";
+import { CubeDataTableColumn, CubeDataTableColumnDefinition, CubeDataTableColumnGroup, CubeDataTableProps } from "./DataTable/types.js";
 import { _DataTable } from "./DataTable/DataTable.js";
 import "./DataTable/index.js";
 import { CubeTableRowRenderProps } from "./TableBase/TableView.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

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

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

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

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { PipetteIcon } from "../../../icons/PipetteIcon.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
@@ -8,9 +9,9 @@ import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
 import { detectFormat, formatColor, parseColor } from "../color/color.js";
-import { ColorSwatch } from "../color/ColorSwatch.js";
 import { ColorPanel } from "../color/ColorPanel.js";
 import { useIsInsideColorPopover } from "../color/context.js";
+import { ColorSwatch } from "../ColorSwatch/ColorSwatch.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -175,6 +176,7 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 		size,
 		autocomplete: "off",
 		icon: /* @__PURE__ */ jsx(ColorSwatch, {
+			size: "small",
 			color,
 			styles: swatchStyles
 		}),
@@ -202,11 +204,14 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 			isOpen: controlledOpen ?? isOpen,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
-			children: [/* @__PURE__ */ jsx(ColorInputTrigger, {
-				size,
-				"aria-label": "Open the color picker",
-				isDisabled: isDisabled || isReadOnly,
-				styles: triggerStyles
+			children: [/* @__PURE__ */ jsx(ItemActionProvider, {
+				isDisabled,
+				children: /* @__PURE__ */ jsx(ColorInputTrigger, {
+					size,
+					"aria-label": "Open the color picker",
+					isDisabled: isReadOnly && !isDisabled ? true : void 0,
+					styles: triggerStyles
+				})
 			}), /* @__PURE__ */ jsx(Dialog, {
 				"aria-label": "Color picker",
 				width: "max-content",

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  detectFormat,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorInputFormatMode = 'forced' | 'derive' | 'free';\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/** 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 ColorInputTrigger = tasty(ItemAction, {\n  qa: 'ColorInputTrigger',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\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 normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorInputFormatMode;\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 input. */\n  shouldFlip?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorInput = forwardRef(function ColorInput(\n  allProps: CubeColorInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  // Already inside a color popover: this is the value field for that popover,\n  // so it must not offer a popover of its own.\n  const isInsidePopover = useIsInsideColorPopover();\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\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\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      qa={qa || 'ColorInput'}\n      size={size}\n      autocomplete=\"off\"\n      icon={<ColorSwatch color={color} styles={swatchStyles} />}\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        isInsidePopover ? null : (\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={controlledOpen ?? isOpen}\n            shouldFlip={shouldFlip}\n            onOpenChange={handleOpenChange}\n          >\n            <ColorInputTrigger\n              size={size}\n              aria-label=\"Open the color picker\"\n              isDisabled={isDisabled || isReadOnly}\n              styles={triggerStyles}\n            />\n            <Dialog\n              aria-label=\"Color picker\"\n              width=\"max-content\"\n              styles={POPOVER_STYLES}\n            >\n              <ColorPanel\n                color={color ?? FALLBACK_COLOR}\n                space={space}\n                isDisabled={isDisabled || isReadOnly}\n                previewFormat={outputFormat(text)}\n                onChange={handleColorChange}\n                onSpaceChange={setSpace}\n              />\n            </Dialog>\n          </DialogTrigger>\n        )\n      }\n    />\n  );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  detectFormat,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorInputFormatMode = 'forced' | 'derive' | 'free';\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/** 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 ColorInputTrigger = tasty(ItemAction, {\n  qa: 'ColorInputTrigger',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\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 normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorInputFormatMode;\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 input. */\n  shouldFlip?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorInput = forwardRef(function ColorInput(\n  allProps: CubeColorInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  // Already inside a color popover: this is the value field for that popover,\n  // so it must not offer a popover of its own.\n  const isInsidePopover = useIsInsideColorPopover();\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\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\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      qa={qa || 'ColorInput'}\n      size={size}\n      autocomplete=\"off\"\n      // A flat 20px at every field size, which is what this has always rendered.\n      // Neither of the other two options is right here: tracking `$size` puts a\n      // large field's swatch against the border, because a text input hangs its\n      // prefix off the edge with no padding of its own, and passing the field's\n      // own size through grows the swatch with the field — visibly, and for no\n      // reason a caller asked for. The swatch is a fixed badge, not a control.\n      icon={<ColorSwatch size=\"small\" color={color} styles={swatchStyles} />}\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        isInsidePopover ? null : (\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            mobileType=\"tray\"\n            placement=\"bottom right\"\n            targetRef={targetRef}\n            isOpen={controlledOpen ?? isOpen}\n            shouldFlip={shouldFlip}\n            onOpenChange={handleOpenChange}\n          >\n            {/*\n              The trigger is disabled by either flag, but the two arrive through\n              different channels on purpose. A disabled FIELD travels through the\n              provider so `current` treats the state as inherited: the field has\n              already faded the colour the trigger paints from, and fading again\n              multiplies the two (measured `.12` — all but invisible). Read-only\n              alone leaves the field's text opaque, so there the trigger really is\n              disabled on its own and should fade itself.\n            */}\n            <ItemActionProvider isDisabled={isDisabled}>\n              <ColorInputTrigger\n                size={size}\n                aria-label=\"Open the color picker\"\n                isDisabled={isReadOnly && !isDisabled ? true : undefined}\n                styles={triggerStyles}\n              />\n            </ItemActionProvider>\n            <Dialog\n              aria-label=\"Color picker\"\n              width=\"max-content\"\n              styles={POPOVER_STYLES}\n            >\n              <ColorPanel\n                color={color ?? FALLBACK_COLOR}\n                space={space}\n                isDisabled={isDisabled || isReadOnly}\n                previewFormat={outputFormat(text)}\n                onChange={handleColorChange}\n                onSpaceChange={setSpace}\n              />\n            </Dialog>\n          </DialogTrigger>\n        )\n      }\n    />\n  );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
@@ -10,9 +10,9 @@ import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { formatColor, parseColor } from "../color/color.js";
-import { ColorSwatch } from "../color/ColorSwatch.js";
 import { ColorPanel } from "../color/ColorPanel.js";
 import { ColorPopoverContext } from "../color/context.js";
+import { ColorSwatch } from "../ColorSwatch/ColorSwatch.js";
 import { ColorInput } from "../ColorInput/ColorInput.js";
 import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
 import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
@@ -126,6 +126,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 				}),
 				size,
 				icon: /* @__PURE__ */ jsx(ColorSwatch, {
+					size: "small",
 					color,
 					styles: swatchStyles
 				}),

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"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  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\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, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\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 {\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  /** 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 the field tooltip. */\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}\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 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    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  } = 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        mobileType=\"tray\"\n        placement=\"bottom start\"\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          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"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=\"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=\"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":["Text","ItemButton"],"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  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\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, DialogTrigger } from '../../overlays/Dialog';\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 {\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  /** 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 the field tooltip. */\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}\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 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    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  } = 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        mobileType=\"tray\"\n        placement=\"bottom start\"\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          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"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=\"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=\"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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"}

package/dist/components/fields/{color → ColorSwatch}/ColorSwatch.d.ts

@@ -1,12 +1,18 @@
 
-import { ColorValue } from "./color.js";
+import { ColorValue } from "../color/color.js";
 import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 
-//#region src/components/fields/color/ColorSwatch.d.ts
+//#region src/components/fields/ColorSwatch/ColorSwatch.d.ts
 interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, DimensionStyleProps {
   /** The color to show. Anything the color inputs accept; `null` shows the empty state. */
   color?: string | ColorValue | null;
+  /**
+   * The edge of the swatch: 20px, 24px or 28px. Left unset, the swatch tracks
+   * the control around it — `1x` inside its height — and falls back to `medium`
+   * where there is no control.
+   */
+  size?: 'small' | 'medium' | 'large' | (string & {});
   styles?: Styles;
 }
 /**

package/dist/components/fields/{color → ColorSwatch}/ColorSwatch.js

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
-import { parseColor, toHex } from "./color.js";
+import { parseColor, toHex } from "../color/color.js";
 import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/fields/color/ColorSwatch.tsx
+//#region src/components/fields/ColorSwatch/ColorSwatch.tsx
 const STYLE_PROPS = [
 	...BASE_STYLES,
 	...OUTER_STYLES,
@@ -16,8 +16,15 @@ const SwatchElement = tasty({
 	qa: "ColorSwatch",
 	styles: {
 		display: "block",
-		width: "2.5x",
-		height: "2.5x",
+		"$swatch-host": {
+			"": "($size, 4x)",
+			"size=small": "3.5x",
+			"size=medium": "4x",
+			"size=large": "4.5x"
+		},
+		"$swatch-size": "($swatch-host - 1x)",
+		width: "$swatch-size $swatch-size",
+		height: "$swatch-size $swatch-size",
 		radius: "1r",
 		fill: {
 			"": "(#color-picker, #clear)",
@@ -38,12 +45,13 @@ const SwatchElement = tasty({
 * so the swatch keeps a single cached style rule however often it changes.
 */
 const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
-	const { color, mods, qa } = props;
+	const { color, mods, qa, size } = props;
 	const styles = extractStyles(props, STYLE_PROPS);
 	const resolved = typeof color === "string" ? parseColor(color) : color ?? null;
 	return /* @__PURE__ */ jsx(SwatchElement, {
 		ref,
 		qa,
+		"data-size": size,
 		mods: {
 			empty: !resolved,
 			...mods

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../../src/components/fields/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\nimport { ColorValue, parseColor, toHex } from '../color/color';\n\nconst STYLE_PROPS = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...DIMENSION_STYLES,\n];\n\nconst SwatchElement = tasty({\n  qa: 'ColorSwatch',\n  styles: {\n    display: 'block',\n\n    /**\n     * The control the swatch sits in, when there is one.\n     *\n     * `Item`, `Button` and `TextInputBase` all publish their own height as\n     * `$size`, and a custom property reaches any descendant — so a swatch in an\n     * icon, prefix or suffix slot reads the host's height without either side\n     * knowing about the other. `$swatch-host` is the fallback chain: an explicit\n     * `size` pins it, and outside a control the medium default stands in.\n     *\n     * The named sizes are stated as the *host* they would fit, not as the swatch\n     * itself, so the `- 1x` below is the single place the inset is expressed.\n     */\n    '$swatch-host': {\n      // `var(--size, 4x)` — a host wins, and 32px is a medium control.\n      '': '($size, 4x)',\n      // An explicit size ignores the host: these are 28/32/36, one `1x` above\n      // the 20/24/28 the swatch ends up at.\n      'size=small': '3.5x',\n      'size=medium': '4x',\n      'size=large': '4.5x',\n    },\n    '$swatch-size': '($swatch-host - 1x)',\n\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    radius: '1r',\n    fill: {\n      '': '(#color-picker, #clear)',\n      empty: '#clear',\n    },\n    shadow: 'inset 0 0 0 1bw #dark.15',\n    // A single diagonal stroke is the conventional \"no color\" swatch.\n    image: {\n      '': false,\n      empty:\n        'linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)',\n    },\n  },\n});\n\nexport interface CubeColorSwatchProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The color to show. Anything the color inputs accept; `null` shows the empty state. */\n  color?: string | ColorValue | null;\n  /**\n   * The edge of the swatch: 20px, 24px or 28px. Left unset, the swatch tracks\n   * the control around it — `1x` inside its height — and falls back to `medium`\n   * where there is no control.\n   */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n}\n\n/**\n * A square of color. Decorative on its own — pair it with the value as text, or\n * with a control that names it.\n *\n * The color travels as an inline custom property rather than through `styles`,\n * so the swatch keeps a single cached style rule however often it changes.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: CubeColorSwatchProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { color, mods, qa, size } = props;\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  const resolved =\n    typeof color === 'string' ? parseColor(color) : color ?? null;\n\n  return (\n    <SwatchElement\n      ref={ref}\n      qa={qa}\n      data-size={size}\n      mods={{ empty: !resolved, ...mods }}\n      styles={styles}\n      style={resolved ? { '--color-picker-color': toHex(resolved) } : undefined}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,MAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,SAAS;EAcT,gBAAgB;GAEd,IAAI;GAGJ,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACD,gBAAgB;EAEhB,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,OAAO;GACR;EACD,QAAQ;EAER,OAAO;GACL,IAAI;GACJ,OACE;GACH;EACF;CACF,CAAC;;;;;;;;AA0BF,MAAa,cAAc,WAAW,SAAS,YAC7C,OACA,KACA;CACA,MAAM,EAAE,OAAO,MAAM,IAAI,SAAS;CAClC,MAAM,SAAS,cAAc,OAAO,YAAY;CAEhD,MAAM,WACJ,OAAO,UAAU,WAAW,WAAW,MAAM,GAAG,SAAS;AAE3D,QACE,oBAAC;EACM;EACD;EACJ,aAAW;EACX,MAAM;GAAE,OAAO,CAAC;GAAU,GAAG;GAAM;EAC3B;EACR,OAAO,WAAW,EAAE,wBAAwB,MAAM,SAAS,EAAE,GAAG;GAChE;EAEJ"}

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

@@ -0,0 +1,2 @@
+
+import { ColorSwatch, CubeColorSwatchProps } from "./ColorSwatch.js";

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

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