@cube-dev/ui-kit 0.156.0 → 0.157.1

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

@@ -0,0 +1,269 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { HiddenInput } from "../../HiddenInput.js";
+import { formatColor, parseColor, toHex } from "../color/color.js";
+import { useIsInsideColorPopover } from "../color/context.js";
+import { ColorPicker } from "../ColorPicker/ColorPicker.js";
+import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRadio, useRadioGroup } from "react-aria";
+import { useRadioGroupState } from "react-stately";
+import { useObjectRef } from "@react-aria/utils";
+
+//#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx
+/**
+* Two rings drawn inside the swatch, as React Aria marks selection. Outer ring
+* first: earlier shadows paint over later ones, so this reads as 2bw of
+* `#surface-text` at the edge and 2bw of `#surface` within it. Two tones that
+* flip with the scheme stay visible against any color the swatch holds.
+*/
+const SELECTED_RING = "inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface";
+/** The swatch edge in px, per size. `Item` takes an exact number. */
+const SWATCH_PX = {
+	small: 16,
+	medium: 20,
+	large: 24
+};
+/**
+* The trailing picker is a button wrapping a swatch, which would otherwise read
+* as a box inside a box. Stripping its chrome leaves just the swatch, so it
+* sits in the row as one of them.
+*/
+const CUSTOM_TRIGGER_STYLES = {
+	width: "$swatch-size $swatch-size",
+	height: "$swatch-size $swatch-size",
+	padding: 0,
+	radius: "1r",
+	border: 0,
+	position: "relative"
+};
+/**
+* The swatch is docked over the whole button rather than placed inside it.
+* `Item` lays its icon out in a grid that reserves room for a label even when
+* there is none, which left the swatch a pixel off centre.
+*/
+const CUSTOM_SWATCH_STYLES = {
+	position: "absolute",
+	inset: 0,
+	width: "auto",
+	height: "auto",
+	radius: "1r"
+};
+/**
+* The ring goes on the swatch, not on the button around it: an inset shadow
+* paints under child content, and the swatch covers the button edge to edge.
+*/
+const CUSTOM_SWATCH_SELECTED_STYLES = {
+	...CUSTOM_SWATCH_STYLES,
+	shadow: SELECTED_RING
+};
+const GroupElement = tasty({
+	qa: "ColorSwatchGroup",
+	styles: {
+		display: {
+			"": "flex",
+			columns: "grid"
+		},
+		flow: {
+			"": "row wrap",
+			columns: "row"
+		},
+		gap: ".5x",
+		placeItems: {
+			"": "center start",
+			columns: "stretch"
+		},
+		width: {
+			"": "auto",
+			columns: "max-content"
+		},
+		gridColumns: "repeat($columns, max-content)",
+		"$swatch-size": {
+			"": "2.5x",
+			"size=small": "2x",
+			"size=large": "3x"
+		}
+	}
+});
+/**
+* Only the swatches belong to the radiogroup. The custom picker is a button,
+* and inside `role="radiogroup"` it both misreports what the palette holds and
+* hands arrow keys to React Aria's radio walker — pressing one while the picker
+* is focused jumps into a swatch and changes the color. The box is dropped so
+* the swatches remain direct children of the group's own layout.
+*/
+const RadiosElement = tasty({ styles: { display: "contents" } });
+const SwatchElement = tasty({
+	as: "label",
+	qa: "ColorSwatchOption",
+	styles: {
+		display: "grid",
+		placeItems: "stretch",
+		position: "relative",
+		radius: "1r",
+		cursor: {
+			"": "pointer",
+			disabled: "default"
+		},
+		width: "$swatch-size $swatch-size",
+		height: "$swatch-size $swatch-size",
+		fill: "(#color-swatch, #clear)",
+		opacity: {
+			"": 1,
+			disabled: "$disabled-opacity"
+		},
+		shadow: {
+			"": "inset 0 0 0 1bw #dark.15",
+			selected: SELECTED_RING
+		},
+		outline: {
+			"": "2bw #focus.0 / 1bw",
+			focused: "2bw #focus / 1bw"
+		},
+		transition: "theme"
+	}
+});
+function Swatch({ colorKey, label, state, isDisabled, size, styles, mods }) {
+	const inputRef = useRef(null);
+	const { inputProps, isSelected, isDisabled: isRadioDisabled } = useRadio({
+		value: colorKey,
+		"aria-label": label,
+		isDisabled
+	}, state, inputRef);
+	const { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
+	return /* @__PURE__ */ jsx(SwatchElement, {
+		"data-size": size,
+		mods: {
+			selected: isSelected,
+			disabled: isRadioDisabled,
+			focused: isFocused,
+			...mods
+		},
+		styles,
+		style: { "--color-swatch-color": colorKey },
+		children: /* @__PURE__ */ jsx(HiddenInput, {
+			...mergeProps$1(inputProps, focusProps),
+			ref: inputRef,
+			qa: "ColorSwatchInput",
+			mods: {
+				button: true,
+				disabled: isRadioDisabled
+			}
+		})
+	});
+}
+/**
+* A grid of color swatches, one of which can be selected — the palette half of
+* choosing a color, where `ColorPicker` is the freeform half.
+*
+* Swatches are keyed by their canonical hex, so the same color written two ways
+* collapses into one entry. Equivalent colors would otherwise make selection
+* ambiguous.
+*/
+const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
+	const props = useFieldProps(allProps, {
+		defaultValidationTrigger: "onChange",
+		valuePropsMapper: ({ value, onChange }) => ({
+			value,
+			onChange
+		})
+	});
+	const { qa, colors = [], value, defaultValue, onChange, format = "hex", columns, allowCustom, size = "medium", isDisabled, isInvalid, isValid, swatchStyles, "aria-label": ariaLabel } = props;
+	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
+	const isInsidePopover = useIsInsideColorPopover();
+	const showCustom = allowCustom && !isInsidePopover;
+	/** Keyed by canonical hex so the same color written two ways is one swatch. */
+	const swatches = useMemo(() => {
+		const seen = /* @__PURE__ */ new Map();
+		for (const entry of colors) {
+			const parsed = parseColor(typeof entry === "string" ? entry : entry.color);
+			if (!parsed) continue;
+			const key = toHex(parsed);
+			if (seen.has(key)) continue;
+			seen.set(key, {
+				key,
+				label: (typeof entry === "string" ? void 0 : entry.label) ?? formatColor(parsed, format)
+			});
+		}
+		return [...seen.values()];
+	}, [colors, format]);
+	const [internalValue, setInternalValue] = useState(() => defaultValue ?? null);
+	const currentValue = value !== void 0 ? value : internalValue;
+	const selectedColor = parseColor((currentValue ?? "").toString());
+	const selectedKey = selectedColor ? toHex(selectedColor) : null;
+	const isCustom = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
+	const publish = useEvent((next) => {
+		if (value === void 0) setInternalValue(next);
+		onChange?.(next);
+	});
+	const handleChange = useEvent((nextKey) => {
+		const parsed = parseColor(nextKey);
+		publish(parsed ? formatColor(parsed, format) : null);
+	});
+	const state = useRadioGroupState({
+		value: selectedKey ?? null,
+		isDisabled,
+		isReadOnly: props.isReadOnly,
+		onChange: handleChange
+	});
+	const domRef = useObjectRef(ref);
+	const { radioGroupProps, labelProps } = useRadioGroup({
+		...props,
+		"aria-label": props.label ? void 0 : ariaLabel ?? "Colors",
+		orientation: "horizontal"
+	}, state);
+	return wrapWithField(/* @__PURE__ */ jsxs(GroupElement, {
+		ref: domRef,
+		qa: qa || "ColorSwatchGroup",
+		"data-size": size,
+		"data-input-type": "colorswatchgroup",
+		styles,
+		mods: {
+			...getValidationMods({
+				isInvalid,
+				isValid
+			}),
+			columns: !!columns
+		},
+		style: columns ? { "--columns": String(columns) } : void 0,
+		children: [/* @__PURE__ */ jsx(RadiosElement, {
+			...radioGroupProps,
+			children: swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
+				colorKey: swatch.key,
+				label: swatch.label,
+				state,
+				isDisabled,
+				size,
+				styles: swatchStyles
+			}, swatch.key))
+		}), showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
+			"aria-label": "Custom color",
+			qa: "ColorSwatchGroupCustom",
+			format,
+			type: "clear",
+			size: SWATCH_PX[size] ?? SWATCH_PX.medium,
+			value: isCustom ? currentValue ?? null : null,
+			isDisabled,
+			isReadOnly: props.isReadOnly,
+			triggerStyles: CUSTOM_TRIGGER_STYLES,
+			swatchStyles: isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES,
+			onChange: publish,
+			children: null
+		}) : null]
+	}), domRef, {
+		...props,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
+});
+ColorSwatchGroup.cubeInputType = "Picker";
+
+//#endregion
+export { ColorSwatchGroup };
+//# sourceMappingURL=ColorSwatchGroup.js.map

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

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

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

@@ -0,0 +1,2 @@
+
+import { ColorSwatchGroup, CubeColorSwatchGroupProps, CubeColorSwatchItem } from "./ColorSwatchGroup.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

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

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

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

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

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

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/dist/components/fields/DatePicker/MonthPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/PeriodPicker.js

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

package/dist/components/fields/DatePicker/QuarterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/TimeInput.js

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

package/dist/components/fields/DatePicker/WeekPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/YearPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/period.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -518,6 +518,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				isInvalid,
 				isValid,
 				disallowEmptySelection: props.disallowEmptySelection,
+				allowDuplicateSelectionEvents: props.allowDuplicateSelectionEvents,
 				disabledKeys: props.disabledKeys,
 				focusOnHover,
 				shouldUseVirtualFocus: !(isReorderable && !searchValue.trim()),