npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-759f43d → 0.0.0-canary-77836fa - Mend

@cube-dev/ui-kit 0.0.0-canary-759f43d → 0.0.0-canary-77836fa

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (617) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/data/TableBase/use-cell-selection.js CHANGED Viewed

Binary file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/data/TableBase/use-table-tooltip-refresh.js CHANGED Viewed

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","t","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n ReactNode,\n RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n ColorFormat,\n ColorValue,\n formatColor,\n parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/*\n A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n /\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/\n The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n /\nconst PALETTE_STYLES: Styles = {\n border: 'top',\n padding: '1x top',\n width: '100%',\n};\n\n/* What the popover starts from when there is no color to edit yet. /\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n qa: 'ColorPickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport interface CubeColorPickerProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<string \| null \| undefined> {\n /* The selected color, as a color string. /\n value?: string \| null;\n /* The initial color of an uncontrolled picker. /\n defaultValue?: string \| null;\n /* Called with the color string, or `null` when there is no color. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in. /\n format?: ColorFormat;\n /* Color concept the popover opens with. /\n defaultSpace?: ColorSpace;\n /* Whether the popover is open. Makes the disclosure controlled. /\n isOpen?: boolean;\n /* Whether the popover is open initially. /\n defaultOpen?: boolean;\n /* Called when the popover opens or closes. /\n onOpenChange?: (isOpen: boolean) => void;\n /* Whether the popover may flip to the other side of the trigger. /\n shouldFlip?: boolean;\n /\n The ref of the element the popover should visually attach itself to.\n * Defaults to the trigger button.\n \n Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n * dismissal treats as the trigger.\n /\n targetRef?: RefObject<HTMLElement \| null>;\n /\n Placement of the popover relative to the anchor.\n * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n * `'top start'`, `'right top'`, `'left top'`).\n * @default 'bottom start'\n /\n placement?: Placement;\n /* Replaces the color shown on the trigger. Pass `null` for a swatch on its own. /\n children?: ReactNode;\n /* Shown on the trigger while there is no color. /\n placeholder?: ReactNode;\n /* The size of the trigger. /\n size?: CubeItemProps['size'];\n /* The visual type of the trigger. /\n type?: CubeItemProps['type'];\n theme?: CubeItemProps['theme'];\n /* Tooltip for the trigger, separate from `labelTooltip`. /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Colors to offer under the editor, for picking without dialing one in. /\n swatches?: CubeColorSwatchItem[];\n /* How many swatches per row. Defaults to a single row. /\n swatchColumns?: number;\n styles?: Styles;\n /* Styles of the trigger button. /\n triggerStyles?: Styles;\n /* Styles of the color swatch. /\n swatchStyles?: Styles;\n 'aria-label'?: string;\n /* Ids of elements that also describe the trigger, beside the field's own description and message. /\n 'aria-describedby'?: string;\n}\n\n/\n A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n /\nexport const ColorPicker = forwardRef(function ColorPicker(\n allProps: CubeColorPickerProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n id,\n value,\n defaultValue,\n onChange,\n format = 'hex',\n defaultSpace = 'hst',\n isOpen: controlledOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip,\n targetRef,\n placement = 'bottom start',\n children,\n placeholder = 'Pick a color',\n size,\n type = 'outline',\n theme = 'default',\n triggerTooltip,\n swatches,\n swatchColumns,\n triggerStyles,\n swatchStyles,\n isDisabled,\n isReadOnly,\n isLoading,\n isInvalid,\n isValid,\n autoFocus,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedBy,\n } = props;\n\n const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n /\n Loading locks the trigger, but the popover can outlive that — it may be\n * controlled, or opened before the load began — so the editor inside has to\n * refuse edits on the same terms.\n /\n const isEditingDisabled = isDisabled \|\| isLoading;\n\n const [color, setColor] = useState(() =>\n parseColor((value ?? defaultValue ?? '').toString()),\n );\n const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n /* What was last published, to tell our own updates from outside ones. /\n const emitted = useRef<string \| null \| undefined>(value);\n\n // Adopt values that did not come from here — a form reset, or a parent that\n // overrides what the user picked.\n useEffect(() => {\n if (value === undefined \|\| value === emitted.current) return;\n\n emitted.current = value;\n setColor(parseColor((value ?? '').toString()));\n }, [value]);\n\n const handleColorChange = useEvent((next: ColorValue) => {\n const text = formatColor(next, format);\n\n emitted.current = text;\n setColor(next);\n onChange?.(text);\n });\n\n const colorText = color ? formatColor(color, format) : null;\n\n /\n The palette and the value field both speak in strings, and the field can\n * hand back `null` when it is cleared — which has to reach the picker, or the\n * text empties while the preview and trigger keep the old color.\n /\n const handleValueChange = useEvent((next: string \| null) => {\n emitted.current = next;\n setColor(next ? parseColor(next) : null);\n onChange?.(next);\n });\n\n const handleOpenChange = useEvent((next: boolean) => {\n setOpen(next);\n onOpenChange?.(next);\n });\n\n // The swatch carries the color and the label spells it out. `children`\n // replaces that label, and `null` leaves the swatch on its own.\n const label =\n children !== undefined ? (\n children\n ) : color ? (\n formatColor(color, format)\n ) : (\n // Muted, so an unset picker never reads like one holding a value —\n // the same treatment `Picker` and `Select` give their placeholders.\n <Text.Placeholder>{placeholder}</Text.Placeholder>\n );\n\n const pickerField = (\n <ColorPickerWrapper styles={styles}>\n <DialogTrigger\n hideArrow\n type=\"popover\"\n placement={placement}\n targetRef={targetRef}\n isOpen={controlledOpen ?? isOpen}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n <ItemButton\n data-popover-trigger\n id={id}\n qa={qa \|\| 'ColorPickerTrigger'}\n data-input-type=\"colorpicker\"\n type={type}\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n size={size}\n // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n // and same as this has always rendered.\n icon={\n <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n }\n rightIcon={getValidationIcon({ isInvalid, isValid })}\n tooltip={triggerTooltip}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n autoFocus={autoFocus}\n aria-label={ariaLabel}\n // The trigger is the control, so the field's description and\n // message describe it.\n aria-describedby={ariaDescribedBy}\n mods={{ placeholder: !color }}\n styles={triggerStyles}\n >\n {label}\n </ItemButton>\n <Dialog\n aria-label={t('colorPicker.colorPicker', 'Color picker')}\n width=\"max-content\"\n styles={POPOVER_STYLES}\n >\n {/ Marks the subtree so a nested swatch group drops its custom-color\n escape hatch, which is a picker and would recurse forever. /}\n <ColorPopoverContext.Provider value={true}>\n <ColorPanel\n color={color ?? FALLBACK_COLOR}\n space={space}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n previewFormat={format}\n input={\n <ColorInput\n aria-label={t('colorPicker.colorValue', 'Color value')}\n format={format}\n value={colorText}\n isDisabled={isEditingDisabled}\n isReadOnly={isReadOnly}\n onChange={handleValueChange}\n />\n }\n swatches={\n swatches?.length ? (\n <ColorSwatchGroup\n aria-label={t('colorPicker.palette', 'Palette')}\n styles={PALETTE_STYLES}\n colors={swatches}\n columns={swatchColumns}\n format={format}\n value={colorText}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n onChange={handleValueChange}\n />\n ) : null\n }\n onChange={handleColorChange}\n onSpaceChange={setSpace}\n />\n </ColorPopoverContext.Provider>\n </Dialog>\n </DialogTrigger>\n </ColorPickerWrapper>\n );\n\n return wrapWithField(pickerField, ref as any, props);\n});\n\n/\n Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","t","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n ReactNode,\n RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n getValidationIcon,\n getValidationTheme,\n useFieldProps,\n wrapWithField,\n} from '../../form';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n ColorFormat,\n ColorValue,\n formatColor,\n parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/*\n A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n /\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/\n The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n /\nconst PALETTE_STYLES: Styles = {\n border: 'top',\n padding: '1x top',\n width: '100%',\n};\n\n/* What the popover starts from when there is no color to edit yet. /\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n qa: 'ColorPickerWrapper',\n styles: {\n display: 'inline-grid',\n flow: 'column',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n },\n});\n\nexport interface CubeColorPickerProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<string \| null \| undefined> {\n /* The selected color, as a color string. /\n value?: string \| null;\n /* The initial color of an uncontrolled picker. /\n defaultValue?: string \| null;\n /* Called with the color string, or `null` when there is no color. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in. /\n format?: ColorFormat;\n /* Color concept the popover opens with. /\n defaultSpace?: ColorSpace;\n /* Whether the popover is open. Makes the disclosure controlled. /\n isOpen?: boolean;\n /* Whether the popover is open initially. /\n defaultOpen?: boolean;\n /* Called when the popover opens or closes. /\n onOpenChange?: (isOpen: boolean) => void;\n /* Whether the popover may flip to the other side of the trigger. /\n shouldFlip?: boolean;\n /\n The ref of the element the popover should visually attach itself to.\n * Defaults to the trigger button.\n \n Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n * dismissal treats as the trigger.\n /\n targetRef?: RefObject<HTMLElement \| null>;\n /\n Placement of the popover relative to the anchor.\n * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n * `'top start'`, `'right top'`, `'left top'`).\n * @default 'bottom start'\n /\n placement?: Placement;\n /* Replaces the color shown on the trigger. Pass `null` for a swatch on its own. /\n children?: ReactNode;\n /* Shown on the trigger while there is no color. /\n placeholder?: ReactNode;\n /* The size of the trigger. /\n size?: CubeItemProps['size'];\n /* The visual type of the trigger. /\n type?: CubeItemProps['type'];\n theme?: CubeItemProps['theme'];\n /* Tooltip for the trigger, separate from `labelTooltip`. /\n triggerTooltip?: CubeItemProps['tooltip'];\n /* Colors to offer under the editor, for picking without dialing one in. /\n swatches?: CubeColorSwatchItem[];\n /* How many swatches per row. Defaults to a single row. /\n swatchColumns?: number;\n styles?: Styles;\n /* Styles of the trigger button. /\n triggerStyles?: Styles;\n /* Styles of the color swatch. /\n swatchStyles?: Styles;\n 'aria-label'?: string;\n /* Ids of elements that also describe the trigger, beside the field's own description and message. /\n 'aria-describedby'?: string;\n}\n\n/\n A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n /\nexport const ColorPicker = forwardRef(function ColorPicker(\n allProps: CubeColorPickerProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n id,\n value,\n defaultValue,\n onChange,\n format = 'hex',\n defaultSpace = 'hst',\n isOpen: controlledOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip,\n targetRef,\n placement = 'bottom start',\n children,\n placeholder = 'Pick a color',\n size,\n type = 'outline',\n theme = 'default',\n triggerTooltip,\n swatches,\n swatchColumns,\n triggerStyles,\n swatchStyles,\n isDisabled,\n isReadOnly,\n isLoading,\n isInvalid,\n isValid,\n autoFocus,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedBy,\n } = props;\n\n const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n /\n Loading locks the trigger, but the popover can outlive that — it may be\n * controlled, or opened before the load began — so the editor inside has to\n * refuse edits on the same terms.\n /\n const isEditingDisabled = isDisabled \|\| isLoading;\n\n const [color, setColor] = useState(() =>\n parseColor((value ?? defaultValue ?? '').toString()),\n );\n const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n /* What was last published, to tell our own updates from outside ones. /\n const emitted = useRef<string \| null \| undefined>(value);\n\n // Adopt values that did not come from here — a form reset, or a parent that\n // overrides what the user picked.\n useEffect(() => {\n if (value === undefined \|\| value === emitted.current) return;\n\n emitted.current = value;\n setColor(parseColor((value ?? '').toString()));\n }, [value]);\n\n const handleColorChange = useEvent((next: ColorValue) => {\n const text = formatColor(next, format);\n\n emitted.current = text;\n setColor(next);\n onChange?.(text);\n });\n\n const colorText = color ? formatColor(color, format) : null;\n\n /\n The palette and the value field both speak in strings, and the field can\n * hand back `null` when it is cleared — which has to reach the picker, or the\n * text empties while the preview and trigger keep the old color.\n /\n const handleValueChange = useEvent((next: string \| null) => {\n emitted.current = next;\n setColor(next ? parseColor(next) : null);\n onChange?.(next);\n });\n\n const handleOpenChange = useEvent((next: boolean) => {\n setOpen(next);\n onOpenChange?.(next);\n });\n\n // The swatch carries the color and the label spells it out. `children`\n // replaces that label, and `null` leaves the swatch on its own.\n const label =\n children !== undefined ? (\n children\n ) : color ? (\n formatColor(color, format)\n ) : (\n // Muted, so an unset picker never reads like one holding a value —\n // the same treatment `Picker` and `Select` give their placeholders.\n <Text.Placeholder>{placeholder}</Text.Placeholder>\n );\n\n const pickerField = (\n <ColorPickerWrapper styles={styles}>\n <DialogTrigger\n hideArrow\n type=\"popover\"\n placement={placement}\n targetRef={targetRef}\n isOpen={controlledOpen ?? isOpen}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n <ItemButton\n data-popover-trigger\n id={id}\n qa={qa \|\| 'ColorPickerTrigger'}\n data-input-type=\"colorpicker\"\n type={type}\n theme={getValidationTheme(theme, { isInvalid, isValid })}\n size={size}\n // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n // and same as this has always rendered.\n icon={\n <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n }\n rightIcon={getValidationIcon({ isInvalid, isValid })}\n tooltip={triggerTooltip}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n autoFocus={autoFocus}\n aria-label={ariaLabel}\n // The trigger is the control, so the field's description and\n // message describe it.\n aria-describedby={ariaDescribedBy}\n mods={{ placeholder: !color }}\n styles={triggerStyles}\n >\n {label}\n </ItemButton>\n <Dialog\n aria-label={t('colorPicker.colorPicker', 'Color picker')}\n width=\"max-content\"\n styles={POPOVER_STYLES}\n >\n {/ Marks the subtree so a nested swatch group drops its custom-color\n escape hatch, which is a picker and would recurse forever. /}\n <ColorPopoverContext.Provider value={true}>\n <ColorPanel\n color={color ?? FALLBACK_COLOR}\n space={space}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n previewFormat={format}\n input={\n <ColorInput\n isBare\n aria-label={t('colorPicker.colorValue', 'Color value')}\n format={format}\n value={colorText}\n isDisabled={isEditingDisabled}\n isReadOnly={isReadOnly}\n onChange={handleValueChange}\n />\n }\n swatches={\n swatches?.length ? (\n <ColorSwatchGroup\n isBare\n aria-label={t('colorPicker.palette', 'Palette')}\n styles={PALETTE_STYLES}\n colors={swatches}\n columns={swatchColumns}\n format={format}\n value={colorText}\n isDisabled={isEditingDisabled \|\| isReadOnly}\n onChange={handleValueChange}\n />\n ) : null\n }\n onChange={handleColorChange}\n onSpaceChange={setSpace}\n />\n </ColorPopoverContext.Provider>\n </Dialog>\n </DialogTrigger>\n </ColorPickerWrapper>\n );\n\n return wrapWithField(pickerField, ref as any, props);\n});\n\n/\n Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -304,6 +304,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 				styles: swatchStyles
 			}, swatch.key))
 		}), showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
+			isBare: true,
 			"aria-label": t("colorSwatchGroup.customColor", "Custom color"),
 			qa: "ColorSwatchGroupCustom",
 			format,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","HTMLElement","t","props","defaultValidationTrigger","valuePropsMapper","isInvalid","isValid","ariaLabel","isInsidePopover","showCustom","swatches","seen","Map","key","entry","raw","parsed","has","set","undefined","values","internalValue","setInternalValue","currentValue","selectedColor","toString","selectedKey","isCustom","some","s","publish","next","handleChange","nextKey","isReadOnly","domRef","radioGroupProps","labelProps","form","orientation","group","String","map","swatch","cubeInputType"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. /\nexport type CubeColorSwatchItem = string \| { color: string; label?: string };\n\n/\n Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as 2bw of\n * `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n /\nconst SELECTED_RING = 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface';\n\n/* The swatch edge in px, per size. `Item` takes an exact number. /\nconst SWATCH_PX: Record<string, number> = {\n small: 16,\n medium: 20,\n large: 24,\n};\n\n/\n The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n /\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n // `size` sets the control's height; the box is pinned here as well so a flex\n // row cannot let the button size itself to its content instead.\n width: '$swatch-size $swatch-size',\n height: '$swatch-size $swatch-size',\n padding: 0,\n radius: '1r',\n border: 0,\n position: 'relative',\n};\n\n/\n The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n /\nconst CUSTOM_SWATCH_STYLES: Styles = {\n position: 'absolute',\n inset: 0,\n width: 'auto',\n height: 'auto',\n radius: '1r',\n};\n\n/\n The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n /\nconst CUSTOM_SWATCH_SELECTED_STYLES: Styles = {\n ...CUSTOM_SWATCH_STYLES,\n shadow: SELECTED_RING,\n};\n\nconst GroupElement = tasty({\n qa: 'ColorSwatchGroup',\n styles: {\n // Wrapping is the better default: it is a single row wherever there is\n // room, and folds instead of overflowing where there is not. A fixed\n // `columns` switches to a grid, sized to the swatches rather than to the\n // container — `1fr` tracks would stretch them apart.\n display: {\n '': 'flex',\n columns: 'grid',\n },\n flow: {\n '': 'row wrap',\n columns: 'row',\n },\n gap: '.5x',\n placeItems: {\n '': 'center start',\n columns: 'stretch',\n },\n width: {\n '': 'auto',\n columns: 'max-content',\n },\n gridColumns: 'repeat($columns, max-content)',\n\n // 20px, 16px and 24px — 1x is 8px.\n '$swatch-size': {\n '': '2.5x',\n 'size=small': '2x',\n 'size=large': '3x',\n },\n },\n});\n\n/\n Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n /\nconst RadiosElement = tasty({\n styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n as: 'label',\n qa: 'ColorSwatchOption',\n styles: {\n display: 'grid',\n placeItems: 'stretch',\n position: 'relative',\n radius: '1r',\n cursor: {\n '': 'pointer',\n disabled: 'default',\n },\n width: '$swatch-size $swatch-size',\n height: '$swatch-size $swatch-size',\n fill: '(#color-swatch, #clear)',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n // A ring at one border-width's distance, so the color area stays whole —\n // the inner ring is the surface showing through as the gap. `outline` is\n // deliberately left to the focus ring.\n shadow: {\n '': 'inset 0 0 0 1bw #dark.15',\n selected: SELECTED_RING,\n },\n // A 1bw offset keeps the ring clear of the 4px gap to its neighbours.\n outline: {\n '': '2bw #focus.0 / 1bw',\n focused: '2bw #focus / 1bw',\n },\n transition: 'theme',\n },\n});\n\nexport interface CubeColorSwatchGroupProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<string \| null \| undefined> {\n /* The colors to offer. Duplicates of the same color are dropped. /\n colors?: CubeColorSwatchItem[];\n /* The selected color (controlled). /\n value?: string \| null;\n /* The selected color (uncontrolled). /\n defaultValue?: string \| null;\n /* Called with the chosen color, written in `format`. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in. /\n format?: ColorFormat;\n /* How many swatches per row. Defaults to a single row. /\n columns?: number;\n /\n Append a `ColorPicker` for colors outside the set. Ignored inside a color\n * popover, which is where that picker would otherwise recurse.\n /\n allowCustom?: boolean;\n /* The size of each swatch. /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n styles?: Styles;\n /* Styles of an individual swatch. /\n swatchStyles?: Styles;\n 'aria-label'?: string;\n}\n\ninterface SwatchProps {\n colorKey: string;\n label: string;\n state: RadioGroupState;\n isDisabled?: boolean;\n size?: string;\n styles?: Styles;\n mods?: Record<string, boolean \| undefined>;\n}\n\nfunction Swatch({\n colorKey,\n label,\n state,\n isDisabled,\n size,\n styles,\n mods,\n}: SwatchProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const {\n inputProps,\n isSelected,\n isDisabled: isRadioDisabled,\n } = useRadio(\n { value: colorKey, 'aria-label': label, isDisabled },\n state,\n inputRef,\n );\n // `useRadio` reports selection but not focus, and the swatch is the only\n // thing a keyboard user can see — without this the ring never appears.\n const { isFocused, focusProps } = useFocus(true);\n\n return (\n <SwatchElement\n data-size={size}\n mods={{\n selected: isSelected,\n disabled: isRadioDisabled,\n focused: isFocused,\n ...mods,\n }}\n styles={styles}\n style={{ '--color-swatch-color': colorKey }}\n >\n <HiddenInput\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n qa=\"ColorSwatchInput\"\n mods={{ button: true, disabled: isRadioDisabled }}\n />\n </SwatchElement>\n );\n}\n\n/\n A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n \n Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n /\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n allProps: CubeColorSwatchGroupProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n colors = [],\n value,\n defaultValue,\n onChange,\n format = 'hex',\n columns,\n allowCustom,\n size = 'medium',\n isDisabled,\n isInvalid,\n isValid,\n swatchStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n const isInsidePopover = useIsInsideColorPopover();\n // A custom picker inside a color popover would open a popover of its own.\n const showCustom = allowCustom && !isInsidePopover;\n\n /* Keyed by canonical hex so the same color written two ways is one swatch. */\n const swatches = useMemo(() => {\n const seen = new Map<string, { key: string; label: string }>();\n\n for (const entry of colors) {\n const raw = typeof entry === 'string' ? entry : entry.color;\n const parsed = parseColor(raw);\n\n if (!parsed) continue;\n\n const key = toHex(parsed);\n\n if (seen.has(key)) continue;\n\n seen.set(key, {\n key,\n label:\n (typeof entry === 'string' ? undefined : entry.label) ??\n formatColor(parsed, format),\n });\n }\n\n return [...seen.values()];\n }, [colors, format]);\n\n const [internalValue, setInternalValue] = useState<string \| null>(\n () => defaultValue ?? null,\n );\n const currentValue = value !== undefined ? value : internalValue;\n\n const selectedColor = parseColor((currentValue ?? '').toString());\n const selectedKey = selectedColor ? toHex(selectedColor) : null;\n const isCustom =\n !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n const publish = useEvent((next: string \| null) => {\n if (value === undefined) setInternalValue(next);\n\n onChange?.(next);\n });\n\n // `null` arrives from React Aria's native form reset of a group that\n // mounted with no value.\n const handleChange = useEvent((nextKey: string \| null) => {\n const parsed = nextKey == null ? null : parseColor(nextKey);\n\n publish(parsed ? formatColor(parsed, format) : null);\n });\n\n const state = useRadioGroupState({\n value: selectedKey ?? null,\n isDisabled,\n isReadOnly: props.isReadOnly,\n // Becomes the group's `aria-invalid`, which is what says the field is\n // invalid to a screen reader; the red outline says it only to the eye.\n isInvalid,\n onChange: handleChange,\n });\n\n // `useFocusableRef` wants the ref of a real focusable control to forward to,\n // and a group of radios has no single one — `RadioGroup` takes the same\n // approach for the same reason.\n const domRef = useObjectRef(ref);\n const { radioGroupProps, labelProps } = useRadioGroup(\n {\n ...props,\n // React Aria hands `form` to every swatch's input as the id of its\n // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n form: undefined,\n // Only name the group here when nothing else does: an `aria-label` set\n // unconditionally would outrank the visible label React Aria wires up.\n 'aria-label': props.label\n ? undefined\n : ariaLabel ?? t('colorSwatchGroup.colors', 'Colors'),\n orientation: 'horizontal',\n },\n state,\n );\n\n const group = (\n <GroupElement\n ref={domRef}\n qa={qa \|\| 'ColorSwatchGroup'}\n data-size={size}\n data-input-type=\"colorswatchgroup\"\n styles={styles}\n mods={{\n ...getValidationMods({ isInvalid, isValid }),\n columns: !!columns,\n }}\n style={columns ? { '--columns': String(columns) } : undefined}\n >\n <RadiosElement {...radioGroupProps}>\n {swatches.map((swatch) => (\n <Swatch\n key={swatch.key}\n colorKey={swatch.key}\n label={swatch.label}\n state={state}\n isDisabled={isDisabled}\n size={size}\n styles={swatchStyles}\n />\n ))}\n </RadiosElement>\n {showCustom ? (\n <ColorPicker\n aria-label={t('colorSwatchGroup.customColor', 'Custom color')}\n qa=\"ColorSwatchGroupCustom\"\n format={format}\n type=\"clear\"\n size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n value={isCustom ? currentValue ?? null : null}\n isDisabled={isDisabled}\n isReadOnly={props.isReadOnly}\n triggerStyles={CUSTOM_TRIGGER_STYLES}\n swatchStyles={\n isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n }\n onChange={publish}\n >\n {null}\n </ColorPicker>\n ) : null}\n </GroupElement>\n );\n\n return wrapWithField(group, domRef, {\n ...props,\n labelProps: mergeProps(props.labelProps, labelProps),\n });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","HTMLElement","t","props","defaultValidationTrigger","valuePropsMapper","isInvalid","isValid","ariaLabel","isInsidePopover","showCustom","swatches","seen","Map","key","entry","raw","parsed","has","set","undefined","values","internalValue","setInternalValue","currentValue","selectedColor","toString","selectedKey","isCustom","some","s","publish","next","handleChange","nextKey","isReadOnly","domRef","radioGroupProps","labelProps","form","orientation","group","String","map","swatch","cubeInputType"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. /\nexport type CubeColorSwatchItem = string \| { color: string; label?: string };\n\n/\n Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as 2bw of\n * `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n /\nconst SELECTED_RING = 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface';\n\n/* The swatch edge in px, per size. `Item` takes an exact number. /\nconst SWATCH_PX: Record<string, number> = {\n small: 16,\n medium: 20,\n large: 24,\n};\n\n/\n The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n /\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n // `size` sets the control's height; the box is pinned here as well so a flex\n // row cannot let the button size itself to its content instead.\n width: '$swatch-size $swatch-size',\n height: '$swatch-size $swatch-size',\n padding: 0,\n radius: '1r',\n border: 0,\n position: 'relative',\n};\n\n/\n The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n /\nconst CUSTOM_SWATCH_STYLES: Styles = {\n position: 'absolute',\n inset: 0,\n width: 'auto',\n height: 'auto',\n radius: '1r',\n};\n\n/\n The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n /\nconst CUSTOM_SWATCH_SELECTED_STYLES: Styles = {\n ...CUSTOM_SWATCH_STYLES,\n shadow: SELECTED_RING,\n};\n\nconst GroupElement = tasty({\n qa: 'ColorSwatchGroup',\n styles: {\n // Wrapping is the better default: it is a single row wherever there is\n // room, and folds instead of overflowing where there is not. A fixed\n // `columns` switches to a grid, sized to the swatches rather than to the\n // container — `1fr` tracks would stretch them apart.\n display: {\n '': 'flex',\n columns: 'grid',\n },\n flow: {\n '': 'row wrap',\n columns: 'row',\n },\n gap: '.5x',\n placeItems: {\n '': 'center start',\n columns: 'stretch',\n },\n width: {\n '': 'auto',\n columns: 'max-content',\n },\n gridColumns: 'repeat($columns, max-content)',\n\n // 20px, 16px and 24px — 1x is 8px.\n '$swatch-size': {\n '': '2.5x',\n 'size=small': '2x',\n 'size=large': '3x',\n },\n },\n});\n\n/\n Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n /\nconst RadiosElement = tasty({\n styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n as: 'label',\n qa: 'ColorSwatchOption',\n styles: {\n display: 'grid',\n placeItems: 'stretch',\n position: 'relative',\n radius: '1r',\n cursor: {\n '': 'pointer',\n disabled: 'default',\n },\n width: '$swatch-size $swatch-size',\n height: '$swatch-size $swatch-size',\n fill: '(#color-swatch, #clear)',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n // A ring at one border-width's distance, so the color area stays whole —\n // the inner ring is the surface showing through as the gap. `outline` is\n // deliberately left to the focus ring.\n shadow: {\n '': 'inset 0 0 0 1bw #dark.15',\n selected: SELECTED_RING,\n },\n // A 1bw offset keeps the ring clear of the 4px gap to its neighbours.\n outline: {\n '': '2bw #focus.0 / 1bw',\n focused: '2bw #focus / 1bw',\n },\n transition: 'theme',\n },\n});\n\nexport interface CubeColorSwatchGroupProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<string \| null \| undefined> {\n /* The colors to offer. Duplicates of the same color are dropped. /\n colors?: CubeColorSwatchItem[];\n /* The selected color (controlled). /\n value?: string \| null;\n /* The selected color (uncontrolled). /\n defaultValue?: string \| null;\n /* Called with the chosen color, written in `format`. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in. /\n format?: ColorFormat;\n /* How many swatches per row. Defaults to a single row. /\n columns?: number;\n /\n Append a `ColorPicker` for colors outside the set. Ignored inside a color\n * popover, which is where that picker would otherwise recurse.\n /\n allowCustom?: boolean;\n /* The size of each swatch. /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n styles?: Styles;\n /* Styles of an individual swatch. /\n swatchStyles?: Styles;\n 'aria-label'?: string;\n}\n\ninterface SwatchProps {\n colorKey: string;\n label: string;\n state: RadioGroupState;\n isDisabled?: boolean;\n size?: string;\n styles?: Styles;\n mods?: Record<string, boolean \| undefined>;\n}\n\nfunction Swatch({\n colorKey,\n label,\n state,\n isDisabled,\n size,\n styles,\n mods,\n}: SwatchProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const {\n inputProps,\n isSelected,\n isDisabled: isRadioDisabled,\n } = useRadio(\n { value: colorKey, 'aria-label': label, isDisabled },\n state,\n inputRef,\n );\n // `useRadio` reports selection but not focus, and the swatch is the only\n // thing a keyboard user can see — without this the ring never appears.\n const { isFocused, focusProps } = useFocus(true);\n\n return (\n <SwatchElement\n data-size={size}\n mods={{\n selected: isSelected,\n disabled: isRadioDisabled,\n focused: isFocused,\n ...mods,\n }}\n styles={styles}\n style={{ '--color-swatch-color': colorKey }}\n >\n <HiddenInput\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n qa=\"ColorSwatchInput\"\n mods={{ button: true, disabled: isRadioDisabled }}\n />\n </SwatchElement>\n );\n}\n\n/\n A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n \n Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n /\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n allProps: CubeColorSwatchGroupProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n colors = [],\n value,\n defaultValue,\n onChange,\n format = 'hex',\n columns,\n allowCustom,\n size = 'medium',\n isDisabled,\n isInvalid,\n isValid,\n swatchStyles,\n 'aria-label': ariaLabel,\n } = props;\n\n const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n const isInsidePopover = useIsInsideColorPopover();\n // A custom picker inside a color popover would open a popover of its own.\n const showCustom = allowCustom && !isInsidePopover;\n\n /* Keyed by canonical hex so the same color written two ways is one swatch. */\n const swatches = useMemo(() => {\n const seen = new Map<string, { key: string; label: string }>();\n\n for (const entry of colors) {\n const raw = typeof entry === 'string' ? entry : entry.color;\n const parsed = parseColor(raw);\n\n if (!parsed) continue;\n\n const key = toHex(parsed);\n\n if (seen.has(key)) continue;\n\n seen.set(key, {\n key,\n label:\n (typeof entry === 'string' ? undefined : entry.label) ??\n formatColor(parsed, format),\n });\n }\n\n return [...seen.values()];\n }, [colors, format]);\n\n const [internalValue, setInternalValue] = useState<string \| null>(\n () => defaultValue ?? null,\n );\n const currentValue = value !== undefined ? value : internalValue;\n\n const selectedColor = parseColor((currentValue ?? '').toString());\n const selectedKey = selectedColor ? toHex(selectedColor) : null;\n const isCustom =\n !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n const publish = useEvent((next: string \| null) => {\n if (value === undefined) setInternalValue(next);\n\n onChange?.(next);\n });\n\n // `null` arrives from React Aria's native form reset of a group that\n // mounted with no value.\n const handleChange = useEvent((nextKey: string \| null) => {\n const parsed = nextKey == null ? null : parseColor(nextKey);\n\n publish(parsed ? formatColor(parsed, format) : null);\n });\n\n const state = useRadioGroupState({\n value: selectedKey ?? null,\n isDisabled,\n isReadOnly: props.isReadOnly,\n // Becomes the group's `aria-invalid`, which is what says the field is\n // invalid to a screen reader; the red outline says it only to the eye.\n isInvalid,\n onChange: handleChange,\n });\n\n // `useFocusableRef` wants the ref of a real focusable control to forward to,\n // and a group of radios has no single one — `RadioGroup` takes the same\n // approach for the same reason.\n const domRef = useObjectRef(ref);\n const { radioGroupProps, labelProps } = useRadioGroup(\n {\n ...props,\n // React Aria hands `form` to every swatch's input as the id of its\n // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n form: undefined,\n // Only name the group here when nothing else does: an `aria-label` set\n // unconditionally would outrank the visible label React Aria wires up.\n 'aria-label': props.label\n ? undefined\n : ariaLabel ?? t('colorSwatchGroup.colors', 'Colors'),\n orientation: 'horizontal',\n },\n state,\n );\n\n const group = (\n <GroupElement\n ref={domRef}\n qa={qa \|\| 'ColorSwatchGroup'}\n data-size={size}\n data-input-type=\"colorswatchgroup\"\n styles={styles}\n mods={{\n ...getValidationMods({ isInvalid, isValid }),\n columns: !!columns,\n }}\n style={columns ? { '--columns': String(columns) } : undefined}\n >\n <RadiosElement {...radioGroupProps}>\n {swatches.map((swatch) => (\n <Swatch\n key={swatch.key}\n colorKey={swatch.key}\n label={swatch.label}\n state={state}\n isDisabled={isDisabled}\n size={size}\n styles={swatchStyles}\n />\n ))}\n </RadiosElement>\n {showCustom ? (\n <ColorPicker\n isBare\n aria-label={t('colorSwatchGroup.customColor', 'Custom color')}\n qa=\"ColorSwatchGroupCustom\"\n format={format}\n type=\"clear\"\n size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n value={isCustom ? currentValue ?? null : null}\n isDisabled={isDisabled}\n isReadOnly={props.isReadOnly}\n triggerStyles={CUSTOM_TRIGGER_STYLES}\n swatchStyles={\n isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n }\n onChange={publish}\n >\n {null}\n </ColorPicker>\n ) : null}\n </GroupElement>\n );\n\n return wrapWithField(group, domRef, {\n ...props,\n labelProps: mergeProps(props.labelProps, labelProps),\n });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

package/dist/components/fields/ComboBox/ComboBox.d.ts CHANGED Viewed

@@ -55,7 +55,7 @@ interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyleProps,
   allowsCustomValue?: boolean;
   /** Whether to commit custom value on blur in allowsCustomValue mode (default: true) */
   shouldCommitOnBlur?: boolean;
-  /** Whether to clear selection and input on blur (default: false, only applies to non-custom-value mode) */
+  /** Whether to clear selection and input on blur when the text names no selectable item (default: false, only applies to non-custom-value mode) */
   clearOnBlur?: boolean;
   /** Whether the combobox is clearable using ESC key or clear button */
   isClearable?: boolean;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -449,6 +449,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	const localCollectionState = useListState({
 		children,
 		items: sortedItems,
+		disabledKeys: props.disabledKeys,
 		selectionMode: "none"
 	});
 	const { isFocused, focusProps } = useFocus$1();
@@ -470,26 +471,25 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			textValue: node.textValue || ""
 		});
 		const filteredCount = filteredItems.length;
-		const exactMatch = filteredItems.find((item_2) => item_2.textValue.toLowerCase() === effectiveInputValue.trim().toLowerCase());
-		if (exactMatch) return {
-			isInputValid: true,
-			singleMatchKey: exactMatch.key,
-			filteredCount
-		};
-		if (filteredCount === 1) return {
-			isInputValid: true,
-			singleMatchKey: filteredItems[0].key,
+		const term = effectiveInputValue.trim().toLowerCase();
+		const exactMatches = filteredItems.filter((item_2) => item_2.textValue.toLowerCase() === term);
+		const match = exactMatches.find((item_4) => item_4.key === effectiveSelectedKey) ?? exactMatches.find((item_3) => !localCollectionState.disabledKeys.has(item_3.key)) ?? exactMatches[0] ?? (filteredCount === 1 ? filteredItems[0] : null);
+		if (!match || match.key !== effectiveSelectedKey && localCollectionState.disabledKeys.has(match.key)) return {
+			isInputValid: false,
+			singleMatchKey: null,
 			filteredCount
 		};
 		return {
-			isInputValid: false,
-			singleMatchKey: null,
+			isInputValid: true,
+			singleMatchKey: match.key,
 			filteredCount
 		};
 	}, [
 		effectiveInputValue,
+		effectiveSelectedKey,
 		filterFn,
-		localCollectionState.collection
+		localCollectionState.collection,
+		localCollectionState.disabledKeys
 	]);
 	const setSelectedKey = (key_1) => {
 		if (!isControlledKey) setInternalSelectedKey(key_1);