@cube-dev/ui-kit 0.182.0 → 0.184.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
@@ -6,6 +6,7 @@ import { FormScopeMask } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { CheckboxGroupContext } from "./context.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -31,44 +32,111 @@ const CheckGroupElement = tasty({
 	}
 });
 function CheckboxGroup(props, ref) {
-	props = castNullableArrayValue(props);
-	props = useFieldProps(props, {
-		defaultValidationTrigger: "onChange",
-		valuePropsMapper: ({ value, onChange }) => ({
-			value: value != null ? value : [],
-			onChange
-		})
-	});
-	let { id, isDisabled, isRequired, necessityIndicator, label, extra, isInvalid, isValid, children, orientation = "vertical", message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
-	let domRef = useObjectRef(ref);
+	const $ = c(27);
+	let t0;
+	if ($[0] !== props) {
+		t0 = castNullableArrayValue(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	props = t0;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			defaultValidationTrigger: "onChange",
+			valuePropsMapper: _temp
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	props = useFieldProps(props, t1);
+	const { id, isDisabled, isRequired, necessityIndicator, label, extra, isInvalid, isValid, children, orientation: t2, message, description, labelStyles, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
+	const orientation = t2 === void 0 ? "vertical" : t2;
+	const domRef = useObjectRef(ref);
 	extractStyles(otherProps, CONTAINER_STYLES);
-	let state = useCheckboxGroupState(props);
-	let { groupProps, labelProps } = useCheckboxGroup(props, state);
-	return wrapWithField(/* @__PURE__ */ jsx(CheckGroupElement, {
-		id,
-		styles: inputStyles,
-		mods: { horizontal: orientation === "horizontal" },
-		children: /* @__PURE__ */ jsx(FormScopeMask, {
-			value: {
-				isDisabled,
-				isInvalid,
-				isValid
-			},
-			children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
-				value: state,
-				children
-			})
-		})
-	}), domRef, {
-		...props,
-		fieldProps: groupProps,
-		labelProps: mergeProps$1(baseLabelProps, labelProps)
-	});
+	const state = useCheckboxGroupState(props);
+	const { groupProps, labelProps } = useCheckboxGroup(props, state);
+	const t3 = orientation === "horizontal";
+	let t4;
+	if ($[3] !== t3) {
+		t4 = { horizontal: t3 };
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== isDisabled || $[6] !== isInvalid || $[7] !== isValid) {
+		t5 = {
+			isDisabled,
+			isInvalid,
+			isValid
+		};
+		$[5] = isDisabled;
+		$[6] = isInvalid;
+		$[7] = isValid;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== children || $[10] !== state) {
+		t6 = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+			value: state,
+			children
+		});
+		$[9] = children;
+		$[10] = state;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(FormScopeMask, {
+			value: t5,
+			children: t6
+		});
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== id || $[16] !== inputStyles || $[17] !== t4 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(CheckGroupElement, {
+			id,
+			styles: inputStyles,
+			mods: t4,
+			children: t7
+		});
+		$[15] = id;
+		$[16] = inputStyles;
+		$[17] = t4;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	const radioGroup = t8;
+	let t9;
+	if ($[20] !== baseLabelProps || $[21] !== domRef || $[22] !== groupProps || $[23] !== labelProps || $[24] !== props || $[25] !== radioGroup) {
+		t9 = wrapWithField(radioGroup, domRef, {
+			...props,
+			fieldProps: groupProps,
+			labelProps: mergeProps$1(baseLabelProps, labelProps)
+		});
+		$[20] = baseLabelProps;
+		$[21] = domRef;
+		$[22] = groupProps;
+		$[23] = labelProps;
+		$[24] = props;
+		$[25] = radioGroup;
+		$[26] = t9;
+	} else t9 = $[26];
+	return t9;
 }
 /**
 * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
 * All possible options are exposed up front for users to compare.
 */
+function _temp(t0) {
+	const { value, onChange } = t0;
+	return {
+		value: value != null ? value : [],
+		onChange
+	};
+}
 const _CheckboxGroup = forwardRef(CheckboxGroup);
 _CheckboxGroup.cubeInputType = "CheckboxGroup";
 _CheckboxGroup.displayName = "CheckboxGroup";

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["mergeProps"],"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(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {\n  props = castNullableArrayValue(props);\n  props = useFieldProps(props, {\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    tooltip,\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  let { groupProps, labelProps } = useCheckboxGroup(props, state);\n\n  let radioGroup = (\n    <CheckGroupElement\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    fieldProps: groupProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select a single option from a list of mutually exclusive options.\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,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACb;EACD,KAAK;GACH,IAAI;GACJ,YAAY;GACb;EACF;CACF,CAAC;AAWF,SAAS,cAAc,OAAkD,KAAK;AAC5E,SAAQ,uBAAuB,MAAM;AACrC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,SAAS,OAAO,QAAQ,EAAE;GACvB;GACX;EACF,CAAC;CAEF,IAAI,EACF,IACA,YACA,YACA,oBACA,OACA,OACA,WACA,SACA,UACA,cAAc,YACd,SACA,aACA,aACA,SACA,YAAY,gBACZ,aACA,aACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAEjB,eAAc,YAAY,iBAAiB;CAExD,IAAI,QAAQ,sBAAsB,MAAM;CACxC,IAAI,EAAE,YAAY,eAAe,iBAAiB,OAAO,MAAM;AAwB/D,QAAO,cArBL,oBAAC;EACK;EACJ,QAAQ;EACR,MAAM,EACJ,YAAY,gBAAgB,cAC7B;YAED,oBAAC;GACC,OAAO;IACL;IACA;IACA;IACD;aAED,oBAAC,qBAAqB;IAAS,OAAO;IACnC;KAC6B;IAClB;GACE,EAGW,QAAQ;EACvC,GAAG;EACH,YAAY;EACZ,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,iBAAiB,WAAW,cAAc;AAEhD,AAAC,eAAuB,gBAAgB;AACxC,eAAe,cAAc"}
+{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","extractStyles","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","props","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","id","isDisabled","isRequired","necessityIndicator","label","extra","isInvalid","isValid","children","t2","message","description","labelStyles","labelProps","baseLabelProps","labelSuffix","form","otherProps","undefined","domRef","state","groupProps","t3","t4","t5","t6","t7","t8","radioGroup","t9","fieldProps","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(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {\n  props = castNullableArrayValue(props);\n  props = useFieldProps(props, {\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  let { groupProps, labelProps } = useCheckboxGroup(props, state);\n\n  let radioGroup = (\n    <CheckGroupElement\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    fieldProps: groupProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/fields/Checkbox/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupState | null>(\n  null,\n);\n"],"mappings":";;;;AAGA,MAAa,uBAAuB,cAClC,KACD"}
+{"version":3,"file":"context.js","names":["createContext","CheckboxGroupState","CheckboxGroupContext"],"sources":["../../../../src/components/fields/Checkbox/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupState | null>(\n  null,\n);\n"],"mappings":";;;;AAGA,MAAaE,uBAAuBF,cAClC,KACD"}

package/dist/components/fields/ColorInput/ColorInput.d.ts

@@ -5,7 +5,8 @@ import { ColorFormat } from "../color/color.js";
 import { ColorSpace } from "../color/channels.js";
 import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { FocusEvent } from "react";
+import { FocusEvent, RefObject } from "react";
+import { Placement } from "react-aria";
 
 //#region src/components/fields/ColorInput/ColorInput.d.ts
 /**
@@ -40,6 +41,21 @@ interface CubeColorInputProps extends BaseProps, BaseStyleProps, OuterStyleProps
   onOpenChange?: (isOpen: boolean) => void;
   /** Whether the popover may flip to the other side of the input. */
   shouldFlip?: boolean;
+  /**
+   * The ref of the element the popover should visually attach itself to.
+   * Defaults to the field wrapper.
+   *
+   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click
+   * dismissal treats as the trigger.
+   */
+  targetRef?: RefObject<HTMLElement | null>;
+  /**
+   * Placement of the popover relative to the anchor.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom right'
+   */
+  placement?: Placement;
   /** Text shown while the field is empty. */
   placeholder?: string;
   /** The size of the input. */