npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-853aab0 → 0.0.0-canary-08f0089 - Mend

@cube-dev/ui-kit 0.0.0-canary-853aab0 → 0.0.0-canary-08f0089

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 (604) hide show

package/dist/components/fields/Slider/SliderBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/Slider/SliderThumb.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderThumbElement } from "./elements.js";

package/dist/components/fields/Slider/SliderTrack.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";

package/dist/components/fields/Slider/elements.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

package/dist/components/fields/Slider/types.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } fr
 import { AriaSliderProps } from "react-aria";
 //#region src/components/fields/Slider/types.d.ts
-interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label' | 'form'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps<T | null | undefined>, BlockStyleProps {
+interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label' | 'form' | 'name'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps<T | null | undefined>, BlockStyleProps {
   inputStyles?: Styles;
   gradation?: string[];
   inputWidth?: string;

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

@@ -9,6 +9,8 @@ import { AriaSwitchProps, useSwitch } from "react-aria";
 interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<boolean | null | undefined>, ToggleSelectionProps, AriaSwitchProps {
   /** The form instance; redeclared for the same reason as in `Checkbox`. */
   form?: FieldBaseProps['form'];
+  /** Field name; modern forms also accept nested tuple paths. */
+  name?: FieldBaseProps['name'];
   inputStyles?: Styles;
   isLoading?: boolean;
   size?: 'large' | 'medium' | 'small';

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<boolean \| null \| undefined>,\n ToggleSelectionProps,\n AriaSwitchProps {\n /** The form instance; redeclared for the same reason as in `Checkbox`. /\n form?: FieldBaseProps['form'];\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;GACV,IAAI;GACJ,cAAc;GACf;EACD,KAAK;EACL,OAAO;EACP,OAAO;EACR;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,eAAe;EACf,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,qBAAqB;GACrB,mBAAmB;GACnB,UAAU;GACV,sBAAsB;GACvB;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,SAAS;GACT,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,QAAQ;GACN,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,YAAY;EACZ,QAAQ;EAER,OAAO;GACL,UAAU;GACV,OAAO;IACL,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;IACN,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,UAAU;IACV,sBAAsB;IACvB;GACD,KAAK;IACH,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,MAAM;IACJ,IAAI;IACJ,eAAe;IACf,cAAc;IACd,SAAS;IACT,yBAAyB;IACzB,wBAAwB;IACzB;GACD,YAAY;GACZ,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,cAAc,CAAC,GAAG,cAAc,GAAG,aAAa;~~AAgBtD~~,SAAS,OAAO,OAA8C,KAAK;AACjE,SAAQ,uBAAuB,MAAM;AACrC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,YAAY,SAAS,OAAO,QAAQ;GACpC,iBAAiB;GACP;GACX;EACF,CAAC;CAEF,IAAI,EACF,IACA,aAAa,OACb,UACA,OACA,YACA,WACA,eACA,aACA,WACA,SACA,OAAO,UACP,SACE;CAEJ,MAAM,KAAKA,QAAM,MAAM,GAAG;CAE1B,IAAI,SAAS,cAAc,OAAO,YAAY;CAE9C,IAAI,EAAE,WAAW,eAAeC,WAAS,EAAE,YAAY,EAAE,KAAK;CAC9D,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAExD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,SAAS,gBAAgB,KAAK,SAAS;CAE3C,IAAI,EAAE,eAAe,UAAU,OAAO,eAAe,MAAM,EAAE,SAAS;CAEtE,MAAM,OAAO;EACX,SAAS,WAAW;EACpB,UAAU;EACV,SAAS;EACT,SAAS;EACT,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,eAAe;EACf,cAAc,kBAAkB;EACjC;AA8BD,QAAO,cA3BL,qBAAC;EACC,IAAG;EACG;EACN,aAAW;EACH;EACR,GAAI;;GAEJ,oBAAC;IACC,IAAI,MAAM;IACV,mBAAgB;IAChB,GAAIC,aAAW,YAAY,WAAW;IACtC,KAAK;IACD;KACJ;GACF,oBAAC;IAAoB;IAAM,aAAW;IAAM,QAAQ;cAClD,oBAAC;KAAI,gBAAa;KAAQ,eAAY;MAAS;KACjC;GACf,WAAW,oBAACC;IAAK;IAAQ;KAAgB,GAAG;GAC5C,YACC,8CACG,QAAQ,4CAAE,SAAS,GAAG,MACvB,oBAAC,gBAAc,IACd,GACD;;GACiB,EAGS,QAAQ;EACxC,GAAG;EACH;EACA,YAAY;GACV,GAAG,MAAM;GACT,KAAK;GACN;EACD,UAAU;EACV;EACD,CAAC;;;;;;AAOJ,IAAI,UAAU,WAAW,OAAO;AAEhC,AAAC,QAAgB,gBAAgB;AACjC,QAAQ,cAAc"}
1	+ {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps<boolean \| null \| undefined>,\n ToggleSelectionProps,\n AriaSwitchProps {\n /** The form instance; redeclared for the same reason as in `Checkbox`. /\n form?: FieldBaseProps['form'];\n /* Field name; modern forms also accept nested tuple paths. /\n name?: FieldBaseProps['name'];\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/TextInput/TextInputBase.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { AriaNumberFieldProps, AriaTextFieldProps as AriaTextFieldProps$1 } from
 //#region src/components/fields/TextInput/TextInputBase.d.ts
 declare const INPUT_WRAPPER_STYLES: Styles;
 declare const DEFAULT_INPUT_STYLES: Styles;
-interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, Omit<AriaTextFieldProps$1, 'validate' | 'form'>, FieldBaseProps {
+interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, Omit<AriaTextFieldProps$1, 'validate' | 'form' | 'name'>, FieldBaseProps {
   validate?: AriaTextFieldProps$1['validate'] | AriaNumberFieldProps['validate'];
   /** Left input icon */
   icon?: ReactElement | null;

package/dist/components/fields/TextInput/TextInputBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | 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";

package/dist/components/fields/TextInput/TextInputBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n getValidationMods,\n hasValidationIndicator,\n ValidationIndicator,\n wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n $: '>',\n display: 'grid',\n placeContent: 'stretch',\n placeItems: 'center',\n gridRows: '1sf',\n flow: 'column',\n gap: 0,\n cursor: 'inherit',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n display: 'grid',\n flow: 'row',\n position: 'relative',\n gridColumns: {\n '': '1sf',\n prefix: 'max-content 1sf',\n suffix: '1sf max-content',\n 'prefix & suffix': 'max-content 1sf max-content',\n },\n gridRows: '1sf',\n placeItems: 'stretch',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n border: {\n '': true,\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n focused: '#primary-text',\n 'valid & focused': '#success-text',\n 'invalid & focused': '#danger-text',\n disabled: true,\n },\n preset: 't3',\n radius: true,\n cursor: 'text',\n color: {\n '': '#dark-02',\n focused: '#dark-02',\n invalid: '#danger-text',\n disabled: '#dark.30',\n },\n zIndex: {\n '': 'initial',\n focused: 1,\n },\n boxSizing: 'border-box',\n transition: 'theme',\n backgroundClip: 'content-box',\n height: {\n '': '$size $size',\n multiline: 'min $size',\n },\n\n $size: {\n '': '$size-md',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n },\n\n Prefix: ADD_STYLES,\n\n Suffix: ADD_STYLES,\n\n State: {\n $: '> Suffix >',\n display: 'flex',\n },\n\n InputIcon: {\n display: 'grid',\n placeItems: 'center',\n width: 'min $size-sm',\n color: 'inherit',\n fontSize: '$icon-size',\n },\n\n ValidationIcon: {\n $: '> Suffix > State >',\n display: 'grid',\n placeItems: 'center',\n width: {\n '': 'min $size-sm',\n suffix: 'min $size-xs',\n },\n fontSize: '$icon-size',\n },\n};\n\nconst InputWrapperElement = tasty({\n qa: 'InputWrapper',\n styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n ...BASE_STYLES,\n ...OUTER_STYLES,\n ...BLOCK_STYLES,\n ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n recipe: 'reset input / input-autofill',\n placeSelf: 'stretch',\n width: 'initial 100% 100%',\n transition: 'theme',\n radius: true,\n padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n textAlign: 'left',\n preset: 't3',\n flexGrow: 1,\n margin: {\n '': 0,\n multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n 'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n 'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n },\n resize: 'none',\n userSelect: 'auto',\n\n Placeholder: {\n $: '&::placeholder',\n recipe: 'input-placeholder',\n },\n '&::-webkit-search-cancel-button': {\n recipe: 'input-search-cancel-button',\n },\n\n '$vertical-padding': 0,\n '$left-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n prefix: '0',\n },\n '$right-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n suffix: '0',\n },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n BaseStyleProps,\n ColorStyleProps,\n Omit<AriaTextFieldProps, 'validate' \| 'form'>,\n FieldBaseProps {\n validate?: AriaTextFieldProps['validate'] \| AriaNumberFieldProps['validate'];\n /** Left input icon /\n icon?: ReactElement \| null;\n /* Input decoration before the main input /\n prefix?: ReactNode;\n /* Input decoration after the main input /\n suffix?: ReactNode;\n /* Suffix position goes before or after the validation and loading statuses /\n suffixPosition?: 'before' \| 'after';\n /* Whether the input is multiline /\n multiLine?: boolean;\n /* Whether the input should have autofocus /\n autoFocus?: boolean;\n /* Direct input props /\n inputProps?: Props;\n /* Direct input wrapper props /\n wrapperProps?: Props;\n /* The input ref /\n inputRef?: RefObject<HTMLInputElement \| HTMLTextAreaElement>;\n /* The wrapper ref /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Whether the input has the loading status /\n isLoading?: boolean;\n /* The loading status indicator /\n loadingIndicator?: ReactNode;\n /* Style map for the input /\n inputStyles?: Styles;\n /* The number of rows for the input. Only applies to textarea. /\n rows?: number;\n /* The resize CSS property sets whether an element is resizable, and if so, in which directions. /\n resize?: Styles['resize'];\n /* The size of the input /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n /\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n autoComplete?: string;\n /\n @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;\n * `autoComplete` wins when both are set.\n /\n autocomplete?: string;\n}\n\n/\n Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n /\nexport interface CubeBufferedValueProps {\n /\n Whether the typed text is held locally until the controlled `value` catches up. On by default,\n * which is what keeps the caret in place when the value round-trips through a store that\n * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n /\n isBuffered?: boolean;\n}\n\n/\n The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n let {\n qa,\n mods,\n isInvalid,\n isValid,\n prefix,\n isDisabled,\n multiLine,\n autoFocus,\n inputProps,\n wrapperProps,\n inputRef,\n isLoading,\n loadingIndicator,\n value,\n inputStyles = {},\n suffix,\n suffixPosition = 'before',\n wrapperRef,\n tooltip,\n rows = 1,\n size = 'medium',\n autoComplete,\n autocomplete,\n icon,\n maxLength,\n minLength,\n form,\n resize,\n ...otherProps\n } = props;\n\n let styles = extractStyles(otherProps, PROP_STYLES);\n let type = otherProps.type;\n\n if (resize) {\n inputStyles = { ...inputStyles, resize };\n }\n\n let ElementType: 'textarea' \| 'input' = multiLine ? 'textarea' : 'input';\n let { isFocused, focusProps } = useFocus({ isDisabled });\n let { hoverProps, isHovered } = useHover({ isDisabled });\n let domRef = useRef(null);\n\n inputRef = useCombinedRefs(inputRef);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef?.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef?.current;\n },\n }));\n\n const showValidationIndicator = hasValidationIndicator({\n isInvalid,\n isValid,\n isLoading,\n });\n\n // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n if (!inputProps?.placeholder) {\n if (!inputProps) {\n inputProps = {};\n }\n\n inputProps.placeholder = ' ';\n }\n\n if (icon) {\n icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n if (prefix) {\n prefix = (\n <>\n {icon}\n {prefix}\n </>\n );\n } else {\n prefix = icon;\n }\n }\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n loadable: !!loadingIndicator,\n focused: isFocused,\n hovered: isHovered,\n disabled: isDisabled,\n multiline: multiLine,\n prefix: !!prefix,\n suffix: showValidationIndicator \|\| !!suffix,\n ...mods,\n }),\n [\n mods,\n isInvalid,\n isValid,\n showValidationIndicator,\n loadingIndicator,\n isFocused,\n isDisabled,\n isHovered,\n multiLine,\n prefix,\n suffix,\n ],\n );\n\n // `autoComplete` is the prop; `autocomplete` is the deprecated alias. Falling back to\n // `inputProps` matters as much as the aliasing: this attribute is applied after the merge, so a\n // bare `autoComplete={resolved}` would overwrite whatever the React Aria hook put there —\n // `useNumberField`'s own `off`, or an `inputProps={{ autoComplete }}` passed by the caller — with\n // `undefined` whenever neither prop is set.\n const resolvedAutoComplete =\n autoComplete ?? autocomplete ?? inputProps.autoComplete;\n\n const hasTextSecurity = multiLine && type === 'password';\n const textSecurityStyles =\n hasTextSecurity && inputProps.value?.length\n ? {\n fontFamily: 'text-security-disc',\n }\n : {};\n\n const textField = (\n <InputWrapperElement\n ref={wrapperRef}\n mods={modifiers}\n data-size={size}\n styles={styles}\n {...wrapperProps}\n >\n {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n <InputElement\n qa={qa \|\| 'Input'}\n as={ElementType}\n data-input-type=\"textinput\"\n {...mergeProps(inputProps, focusProps, hoverProps)}\n ref={inputRef}\n rows={multiLine ? rows : undefined}\n mods={modifiers}\n style={textSecurityStyles}\n data-autofocus={autoFocus ? '' : undefined}\n autoFocus={autoFocus}\n data-size={size}\n autoComplete={resolvedAutoComplete}\n styles={inputStyles}\n disabled={!!isDisabled}\n maxLength={maxLength}\n minLength={minLength}\n />\n {showValidationIndicator \|\| suffix ? (\n <div data-element=\"Suffix\">\n {suffixPosition === 'before' ? suffix : null}\n <ValidationIndicator\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n />\n {suffixPosition === 'after' ? suffix : null}\n </div>\n ) : null}\n </InputWrapperElement>\n );\n\n return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n forwardRef,\n ReactElement,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n getValidationMods,\n hasValidationIndicator,\n ValidationIndicator,\n wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n $: '>',\n display: 'grid',\n placeContent: 'stretch',\n placeItems: 'center',\n gridRows: '1sf',\n flow: 'column',\n gap: 0,\n cursor: 'inherit',\n opacity: {\n '': 1,\n disabled: '$disabled-opacity',\n },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n display: 'grid',\n flow: 'row',\n position: 'relative',\n gridColumns: {\n '': '1sf',\n prefix: 'max-content 1sf',\n suffix: '1sf max-content',\n 'prefix & suffix': 'max-content 1sf max-content',\n },\n gridRows: '1sf',\n placeItems: 'stretch',\n fill: {\n '': '#surface',\n disabled: '#disabled-surface',\n },\n border: {\n '': true,\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n focused: '#primary-text',\n 'valid & focused': '#success-text',\n 'invalid & focused': '#danger-text',\n disabled: true,\n },\n preset: 't3',\n radius: true,\n cursor: 'text',\n color: {\n '': '#dark-02',\n focused: '#dark-02',\n invalid: '#danger-text',\n disabled: '#dark.30',\n },\n zIndex: {\n '': 'initial',\n focused: 1,\n },\n boxSizing: 'border-box',\n transition: 'theme',\n backgroundClip: 'content-box',\n height: {\n '': '$size $size',\n multiline: 'min $size',\n },\n\n $size: {\n '': '$size-md',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n },\n\n Prefix: ADD_STYLES,\n\n Suffix: ADD_STYLES,\n\n State: {\n $: '> Suffix >',\n display: 'flex',\n },\n\n InputIcon: {\n display: 'grid',\n placeItems: 'center',\n width: 'min $size-sm',\n color: 'inherit',\n fontSize: '$icon-size',\n },\n\n ValidationIcon: {\n $: '> Suffix > State >',\n display: 'grid',\n placeItems: 'center',\n width: {\n '': 'min $size-sm',\n suffix: 'min $size-xs',\n },\n fontSize: '$icon-size',\n },\n};\n\nconst InputWrapperElement = tasty({\n qa: 'InputWrapper',\n styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n ...BASE_STYLES,\n ...OUTER_STYLES,\n ...BLOCK_STYLES,\n ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n recipe: 'reset input / input-autofill',\n placeSelf: 'stretch',\n width: 'initial 100% 100%',\n transition: 'theme',\n radius: true,\n padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n textAlign: 'left',\n preset: 't3',\n flexGrow: 1,\n margin: {\n '': 0,\n multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n 'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n 'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n },\n resize: 'none',\n userSelect: 'auto',\n\n Placeholder: {\n $: '&::placeholder',\n recipe: 'input-placeholder',\n },\n '&::-webkit-search-cancel-button': {\n recipe: 'input-search-cancel-button',\n },\n\n '$vertical-padding': 0,\n '$left-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n prefix: '0',\n },\n '$right-padding': {\n '': '(1x - 1bw)',\n 'size=small': '(1x - 1bw)',\n 'size=large': '(1.25x - 1bw)',\n 'size=xlarge': '(1.5x - 1bw)',\n suffix: '0',\n },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n BaseStyleProps,\n ColorStyleProps,\n Omit<AriaTextFieldProps, 'validate' \| 'form' \| 'name'>,\n FieldBaseProps {\n validate?: AriaTextFieldProps['validate'] \| AriaNumberFieldProps['validate'];\n /** Left input icon /\n icon?: ReactElement \| null;\n /* Input decoration before the main input /\n prefix?: ReactNode;\n /* Input decoration after the main input /\n suffix?: ReactNode;\n /* Suffix position goes before or after the validation and loading statuses /\n suffixPosition?: 'before' \| 'after';\n /* Whether the input is multiline /\n multiLine?: boolean;\n /* Whether the input should have autofocus /\n autoFocus?: boolean;\n /* Direct input props /\n inputProps?: Props;\n /* Direct input wrapper props /\n wrapperProps?: Props;\n /* The input ref /\n inputRef?: RefObject<HTMLInputElement \| HTMLTextAreaElement>;\n /* The wrapper ref /\n wrapperRef?: RefObject<HTMLDivElement>;\n /* Whether the input has the loading status /\n isLoading?: boolean;\n /* The loading status indicator /\n loadingIndicator?: ReactNode;\n /* Style map for the input /\n inputStyles?: Styles;\n /* The number of rows for the input. Only applies to textarea. /\n rows?: number;\n /* The resize CSS property sets whether an element is resizable, and if so, in which directions. /\n resize?: Styles['resize'];\n /* The size of the input /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n /\n What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n autoComplete?: string;\n /\n @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;\n * `autoComplete` wins when both are set.\n /\n autocomplete?: string;\n}\n\n/\n Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n /\nexport interface CubeBufferedValueProps {\n /\n Whether the typed text is held locally until the controlled `value` catches up. On by default,\n * which is what keeps the caret in place when the value round-trips through a store that\n * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n /\n isBuffered?: boolean;\n}\n\n/\n The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n let {\n qa,\n mods,\n isInvalid,\n isValid,\n prefix,\n isDisabled,\n multiLine,\n autoFocus,\n inputProps,\n wrapperProps,\n inputRef,\n isLoading,\n loadingIndicator,\n value,\n inputStyles = {},\n suffix,\n suffixPosition = 'before',\n wrapperRef,\n tooltip,\n rows = 1,\n size = 'medium',\n autoComplete,\n autocomplete,\n icon,\n maxLength,\n minLength,\n form,\n resize,\n ...otherProps\n } = props;\n\n let styles = extractStyles(otherProps, PROP_STYLES);\n let type = otherProps.type;\n\n if (resize) {\n inputStyles = { ...inputStyles, resize };\n }\n\n let ElementType: 'textarea' \| 'input' = multiLine ? 'textarea' : 'input';\n let { isFocused, focusProps } = useFocus({ isDisabled });\n let { hoverProps, isHovered } = useHover({ isDisabled });\n let domRef = useRef(null);\n\n inputRef = useCombinedRefs(inputRef);\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef?.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef?.current;\n },\n }));\n\n const showValidationIndicator = hasValidationIndicator({\n isInvalid,\n isValid,\n isLoading,\n });\n\n // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n if (!inputProps?.placeholder) {\n if (!inputProps) {\n inputProps = {};\n }\n\n inputProps.placeholder = ' ';\n }\n\n if (icon) {\n icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n if (prefix) {\n prefix = (\n <>\n {icon}\n {prefix}\n </>\n );\n } else {\n prefix = icon;\n }\n }\n\n const modifiers = useMemo(\n () => ({\n ...getValidationMods({ isInvalid, isValid }),\n loadable: !!loadingIndicator,\n focused: isFocused,\n hovered: isHovered,\n disabled: isDisabled,\n multiline: multiLine,\n prefix: !!prefix,\n suffix: showValidationIndicator \|\| !!suffix,\n ...mods,\n }),\n [\n mods,\n isInvalid,\n isValid,\n showValidationIndicator,\n loadingIndicator,\n isFocused,\n isDisabled,\n isHovered,\n multiLine,\n prefix,\n suffix,\n ],\n );\n\n // `autoComplete` is the prop; `autocomplete` is the deprecated alias. Falling back to\n // `inputProps` matters as much as the aliasing: this attribute is applied after the merge, so a\n // bare `autoComplete={resolved}` would overwrite whatever the React Aria hook put there —\n // `useNumberField`'s own `off`, or an `inputProps={{ autoComplete }}` passed by the caller — with\n // `undefined` whenever neither prop is set.\n const resolvedAutoComplete =\n autoComplete ?? autocomplete ?? inputProps.autoComplete;\n\n const hasTextSecurity = multiLine && type === 'password';\n const textSecurityStyles =\n hasTextSecurity && inputProps.value?.length\n ? {\n fontFamily: 'text-security-disc',\n }\n : {};\n\n const textField = (\n <InputWrapperElement\n ref={wrapperRef}\n mods={modifiers}\n data-size={size}\n styles={styles}\n {...wrapperProps}\n >\n {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n <InputElement\n qa={qa \|\| 'Input'}\n as={ElementType}\n data-input-type=\"textinput\"\n {...mergeProps(inputProps, focusProps, hoverProps)}\n ref={inputRef}\n rows={multiLine ? rows : undefined}\n mods={modifiers}\n style={textSecurityStyles}\n data-autofocus={autoFocus ? '' : undefined}\n autoFocus={autoFocus}\n data-size={size}\n autoComplete={resolvedAutoComplete}\n styles={inputStyles}\n disabled={!!isDisabled}\n maxLength={maxLength}\n minLength={minLength}\n />\n {showValidationIndicator \|\| suffix ? (\n <div data-element=\"Suffix\">\n {suffixPosition === 'before' ? suffix : null}\n <ValidationIndicator\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n />\n {suffixPosition === 'after' ? suffix : null}\n </div>\n ) : null}\n </InputWrapperElement>\n );\n\n return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

package/dist/components/fields/TextInput/useAutoSizeTextArea.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
 import { Fragment, jsxs } from "react/jsx-runtime";

package/dist/components/fields/color/ColorPanel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

package/dist/components/form/Form/Field.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/form/Form/Field.d.ts
 interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {
+  /** Legacy field name; nested fields use dot notation. */
+  name?: string;
   /** The initial value of the input. */
   defaultValue?: any;
   styles?: Styles;

package/dist/components/form/Form/Field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n Children,\n cloneElement,\n createContext,\n PropsWithChildren,\n ReactElement,\n useContext,\n useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n type = type \|\| '';\n\n return type === 'Number' \|\| type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n type?: string,\n value?,\n onChange?,\n allowsCustomValue?: boolean,\n) {\n type = type \|\| '';\n\n if (type === 'Number') {\n return {\n value: value != null ? value : null,\n onChange: onChange,\n };\n } else if (type === 'Text') {\n return {\n value:\n typeof value === 'string' \|\| typeof value === 'number'\n ? String(value)\n : '',\n onChange: onChange,\n };\n } else if (type === 'Checkbox') {\n return {\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n };\n } else if (type === 'CheckboxGroup') {\n return {\n value: value != null ? value : [],\n onChange: onChange,\n };\n } else if (type === 'RangeSlider') {\n return {\n value: value != null ? value : undefined,\n onChange: onChange,\n };\n } else if (type === 'ComboBox') {\n return {\n selectedKey: !allowsCustomValue ? value ?? null : undefined,\n inputValue: allowsCustomValue ? value ?? '' : undefined,\n onInputChange(val) {\n if (!allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n onSelectionChange(val: string) {\n if (val == null && allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n };\n } else if (type === 'Select') {\n return {\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n };\n }\n\n return {\n value: value != null ? value : null,\n onChange,\n };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n /** The initial value of the input. /\n defaultValue?: any;\n styles?: Styles;\n children?: ReactElement \| ((CubeFormInstance) => ReactElement);\n /* The form instance */\n form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n extends CubeFieldProps<T> {\n isRequired?: boolean;\n isOptional?: boolean;\n onChange?: (any) => void;\n onSelectionChange?: (any) => void;\n onBlur: () => void;\n labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n const allProps: CubeFullFieldProps<T> = useValidationProps(\n useFormProps(props),\n );\n\n let {\n children,\n form,\n label,\n extra,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\n isOptional,\n styles,\n labelProps,\n labelPosition = 'top',\n labelStyles,\n labelSuffix,\n } = allProps;\n\n if (typeof children === 'function') {\n children = children(form);\n }\n\n let child = children == null ? null : Children.only(children);\n\n const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n });\n\n const {\n isInvalid,\n isValid,\n message,\n description,\n errorMessage,\n isRequired,\n name,\n id,\n } = __props;\n\n // `useField` reports `null` here when `isRequired` came from a `required` rule\n // rather than from the props, which suppresses the label marker. An indicator\n // set on the `Field` itself is an explicit request and outranks that.\n const resolvedNecessityIndicator =\n necessityIndicator !== undefined\n ? necessityIndicator\n : __props.necessityIndicator;\n\n if (!child) return null;\n\n if (id) {\n if (!labelProps) {\n labelProps = {};\n }\n\n labelProps.for = id;\n }\n\n if (__props.nonInput) {\n return (\n <LegacyFieldProvider>\n <FieldWrapper\n isHidden={isHidden}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n necessityIndicator={resolvedNecessityIndicator}\n isRequired={isRequired}\n isOptional={isOptional}\n label={label}\n labelProps={labelProps}\n extra={extra}\n tooltip={tooltip}\n message={message}\n description={description}\n errorMessage={errorMessage}\n Component={child}\n styles={styles}\n labelPosition={labelPosition}\n labelStyles={labelStyles}\n labelSuffix={labelSuffix}\n />\n </LegacyFieldProvider>\n );\n }\n\n if (!form) {\n warn(\n 'Form Field requires declared form instance if field name is specified',\n );\n\n return null;\n }\n\n if (!__props.field) {\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(child.props as any, {\n ...getValueProps(inputType),\n label: name,\n name,\n id,\n }),\n )}\n </LegacyFieldProvider>\n );\n }\n\n const newProps: CubeReplaceFieldProps<T> = {\n id,\n name,\n onBlur: __props.onBlur,\n };\n\n // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n // must not override a necessity the child input declares for itself, which the\n // `useField` above never saw.\n const childDeclaresNecessity =\n (child.props as any).isRequired != null \|\|\n (child.props as any).necessityIndicator !== undefined;\n\n if (\n resolvedNecessityIndicator !== undefined &&\n !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n ) {\n newProps.necessityIndicator = resolvedNecessityIndicator;\n }\n\n if (isInvalid) {\n newProps.isInvalid = isInvalid;\n }\n\n if (isValid) {\n newProps.isValid = isValid;\n }\n\n if (isRequired) {\n newProps.isRequired = isRequired;\n }\n\n if (isOptional != null) {\n newProps.isOptional = isOptional;\n }\n\n if (label) {\n newProps.label = label;\n }\n\n if (extra) {\n newProps.extra = extra;\n }\n\n if (tooltip) {\n newProps.tooltip = tooltip;\n }\n\n if (message !== undefined) {\n newProps.message = message;\n }\n\n if (errorMessage !== undefined) {\n newProps.errorMessage = errorMessage;\n }\n\n if (description !== undefined) {\n newProps.description = description;\n }\n\n if (isHidden != null) {\n newProps.isHidden = isHidden;\n }\n\n if (isDisabled != null) {\n newProps.isDisabled = isDisabled;\n }\n\n if (isLoading != null) {\n newProps.isLoading = isLoading;\n }\n\n Object.assign(\n newProps,\n getValueProps(\n inputType,\n __props.field?.value,\n __props.onChange,\n (child.props as any).allowsCustomValue,\n ),\n );\n\n const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n // onChange event passed to the child should be executed after Form onChange logic\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(\n childProps,\n newProps,\n onChange ? { onChange: __props.onChange } : {},\n onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n ),\n )}\n </LegacyFieldProvider>\n );\n}\n\ntype LegacyFieldContextValue = {\n insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n const value = useMemo(() => ({ insideLegacyField: true }), []);\n return (\n <LegacyFieldContext.Provider value={value}>\n {props.children}\n </LegacyFieldContext.Provider>\n );\n}\n\nexport function useInsideLegacyField() {\n const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n return insideLegacyField;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n Children,\n cloneElement,\n createContext,\n PropsWithChildren,\n ReactElement,\n useContext,\n useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n type = type \|\| '';\n\n return type === 'Number' \|\| type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n type?: string,\n value?,\n onChange?,\n allowsCustomValue?: boolean,\n) {\n type = type \|\| '';\n\n if (type === 'Number') {\n return {\n value: value != null ? value : null,\n onChange: onChange,\n };\n } else if (type === 'Text') {\n return {\n value:\n typeof value === 'string' \|\| typeof value === 'number'\n ? String(value)\n : '',\n onChange: onChange,\n };\n } else if (type === 'Checkbox') {\n return {\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n };\n } else if (type === 'CheckboxGroup') {\n return {\n value: value != null ? value : [],\n onChange: onChange,\n };\n } else if (type === 'RangeSlider') {\n return {\n value: value != null ? value : undefined,\n onChange: onChange,\n };\n } else if (type === 'ComboBox') {\n return {\n selectedKey: !allowsCustomValue ? value ?? null : undefined,\n inputValue: allowsCustomValue ? value ?? '' : undefined,\n onInputChange(val) {\n if (!allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n onSelectionChange(val: string) {\n if (val == null && allowsCustomValue) {\n return;\n }\n\n onChange(val);\n },\n };\n } else if (type === 'Select') {\n return {\n selectedKey: value ?? null,\n onSelectionChange: onChange,\n };\n }\n\n return {\n value: value != null ? value : null,\n onChange,\n };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n /** Legacy field name; nested fields use dot notation. /\n name?: string;\n /* The initial value of the input. /\n defaultValue?: any;\n styles?: Styles;\n children?: ReactElement \| ((CubeFormInstance) => ReactElement);\n /* The form instance */\n form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n extends CubeFieldProps<T> {\n isRequired?: boolean;\n isOptional?: boolean;\n onChange?: (any) => void;\n onSelectionChange?: (any) => void;\n onBlur: () => void;\n labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n const allProps: CubeFullFieldProps<T> = useValidationProps(\n useFormProps(props),\n );\n\n let {\n children,\n form,\n label,\n extra,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\n isOptional,\n styles,\n labelProps,\n labelPosition = 'top',\n labelStyles,\n labelSuffix,\n } = allProps;\n\n if (typeof children === 'function') {\n children = children(form);\n }\n\n let child = children == null ? null : Children.only(children);\n\n const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n });\n\n const {\n isInvalid,\n isValid,\n message,\n description,\n errorMessage,\n isRequired,\n name,\n id,\n } = __props;\n\n // `useField` reports `null` here when `isRequired` came from a `required` rule\n // rather than from the props, which suppresses the label marker. An indicator\n // set on the `Field` itself is an explicit request and outranks that.\n const resolvedNecessityIndicator =\n necessityIndicator !== undefined\n ? necessityIndicator\n : __props.necessityIndicator;\n\n if (!child) return null;\n\n if (id) {\n if (!labelProps) {\n labelProps = {};\n }\n\n labelProps.for = id;\n }\n\n if (__props.nonInput) {\n return (\n <LegacyFieldProvider>\n <FieldWrapper\n isHidden={isHidden}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n necessityIndicator={resolvedNecessityIndicator}\n isRequired={isRequired}\n isOptional={isOptional}\n label={label}\n labelProps={labelProps}\n extra={extra}\n tooltip={tooltip}\n message={message}\n description={description}\n errorMessage={errorMessage}\n Component={child}\n styles={styles}\n labelPosition={labelPosition}\n labelStyles={labelStyles}\n labelSuffix={labelSuffix}\n />\n </LegacyFieldProvider>\n );\n }\n\n if (!form) {\n warn(\n 'Form Field requires declared form instance if field name is specified',\n );\n\n return null;\n }\n\n if (!__props.field) {\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(child.props as any, {\n ...getValueProps(inputType),\n label: name,\n name,\n id,\n }),\n )}\n </LegacyFieldProvider>\n );\n }\n\n const newProps: CubeReplaceFieldProps<T> = {\n id,\n name,\n onBlur: __props.onBlur,\n };\n\n // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n // must not override a necessity the child input declares for itself, which the\n // `useField` above never saw.\n const childDeclaresNecessity =\n (child.props as any).isRequired != null \|\|\n (child.props as any).necessityIndicator !== undefined;\n\n if (\n resolvedNecessityIndicator !== undefined &&\n !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n ) {\n newProps.necessityIndicator = resolvedNecessityIndicator;\n }\n\n if (isInvalid) {\n newProps.isInvalid = isInvalid;\n }\n\n if (isValid) {\n newProps.isValid = isValid;\n }\n\n if (isRequired) {\n newProps.isRequired = isRequired;\n }\n\n if (isOptional != null) {\n newProps.isOptional = isOptional;\n }\n\n if (label) {\n newProps.label = label;\n }\n\n if (extra) {\n newProps.extra = extra;\n }\n\n if (tooltip) {\n newProps.tooltip = tooltip;\n }\n\n if (message !== undefined) {\n newProps.message = message;\n }\n\n if (errorMessage !== undefined) {\n newProps.errorMessage = errorMessage;\n }\n\n if (description !== undefined) {\n newProps.description = description;\n }\n\n if (isHidden != null) {\n newProps.isHidden = isHidden;\n }\n\n if (isDisabled != null) {\n newProps.isDisabled = isDisabled;\n }\n\n if (isLoading != null) {\n newProps.isLoading = isLoading;\n }\n\n Object.assign(\n newProps,\n getValueProps(\n inputType,\n __props.field?.value,\n __props.onChange,\n (child.props as any).allowsCustomValue,\n ),\n );\n\n const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n // onChange event passed to the child should be executed after Form onChange logic\n return (\n <LegacyFieldProvider>\n {cloneElement(\n child,\n mergeProps(\n childProps,\n newProps,\n onChange ? { onChange: __props.onChange } : {},\n onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n ),\n )}\n </LegacyFieldProvider>\n );\n}\n\ntype LegacyFieldContextValue = {\n insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n const value = useMemo(() => ({ insideLegacyField: true }), []);\n return (\n <LegacyFieldContext.Provider value={value}>\n {props.children}\n </LegacyFieldContext.Provider>\n );\n}\n\nexport function useInsideLegacyField() {\n const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n return insideLegacyField;\n}\n"],"mappings":"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"}

package/dist/components/form/Form/Form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ModernFormRoot.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/form/Form/ResetButton/ResetButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { isModernFormController } from "../backend.js";

package/dist/components/form/Form/SubmitError.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";

package/dist/components/form/Form/backend.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

package/dist/components/form/Form/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { FormContext, FormScopeMask, _Form, useFormProps } from "./Form.js";

package/dist/components/form/Form/modern/actions.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";

package/dist/components/form/Form/modern/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/form/Form/modern/context.ts

package/dist/components/form/Form/modern/controller.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController } from "../backend.js";
 import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";

package/dist/components/form/Form/modern/field-binding.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";

package/dist/components/form/Form/modern/field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { normalizePath } from "./values.js";
 //#region src/components/form/Form/modern/field.ts

package/dist/components/form/Form/modern/react.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
 import { getFieldKey, normalizePath, readPath } from "./values.js";

package/dist/components/form/Form/modern/store.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { FORM_BACKEND } from "../backend.js";
 import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, pathValueChanged, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 import { rulesSignature, runRules } from "./validation.js";

package/dist/components/form/Form/modern/validation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { applyRule } from "../validation.js";
 //#region src/components/form/Form/modern/validation.ts

package/dist/components/form/Form/modern/values.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 //#region src/components/form/Form/modern/values.ts
 const ownedContainers = /* @__PURE__ */ new WeakSet();
 function freezeContainer(value) {

package/dist/components/form/Form/use-field/use-field-binding.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-853aab0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-08f0089 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { isModernFormController } from "../backend.js";
@@ -20,9 +20,14 @@ const selectView = (view) => view;
 function useFieldBinding(props, params, generatedId) {
 	const modern = !params.unbound && isModernFormController(props.form);
 	const controller = modern ? props.form : void 0;
-	const name = props.name ?? "";
-	const pathKey = controller ? getFieldKey(props.field?.path ?? name) : "";
-	const legacy = useField(props, {
+	const path = props.field?.path ?? props.name ?? "";
+	const name = typeof path === "string" ? path : getFieldKey(path);
+	const pathKey = controller ? getFieldKey(path) : "";
+	if (!params.unbound && props.form && !modern && typeof path !== "string") throw new Error("Tuple field names require a modern form controller.");
+	const legacy = useField({
+		...props,
+		name
+	}, {
 		...params,
 		unbound: params.unbound || modern
 	});
@@ -60,7 +65,7 @@ function useFieldBinding(props, params, generatedId) {
 	const onChange = useEvent((value, dontTouch) => {
 		if (controller && props.shouldUpdate !== void 0) {
 			const previous = controller.getValues();
-			if (props.shouldUpdate === false || typeof props.shouldUpdate === "function" && !props.shouldUpdate(previous, writePath(previous, normalizePath(props.field?.path ?? name), value))) return;
+			if (props.shouldUpdate === false || typeof props.shouldUpdate === "function" && !props.shouldUpdate(previous, writePath(previous, normalizePath(path), value))) return;
 		}
 		handle.change(value, dontTouch, trigger);
 	});

package/dist/components/form/Form/use-field/use-field-binding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-binding.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\nimport { isModernFormController } from '../backend';\nimport {\n createModernFieldBackend,\n fieldRegistrationOptions,\n sameFieldView,\n} from '../modern/field-binding';\nimport {\n getFieldKey,\n getFieldPath,\n normalizePath,\n writePath,\n} from '../modern/values';\n\nimport { useField } from './use-field';\n\nimport type { ReactNode } from 'react';\nimport type { FormController } from '../modern/controller';\nimport type { FieldBackendHandle, FieldView } from '../modern/field-binding';\nimport type { RegistrationToken } from '../modern/types';\nimport type { FieldTypes } from '../types';\nimport type { FieldReturnValue, UseFieldProps } from './types';\nimport type { UseFieldParams } from './use-field';\n\nconst noop = () => {};\nconst selectView = (view: FieldView \| undefined) => view;\n\n/*\n One unconditional subscription/registration boundary. The frozen legacy\n * adapter still runs its original hooks, inert on the modern path, so an input\n * can cross backends without remounting or changing hook order. Its render-time\n * mutations remain contained in use-field.ts; modern handles are pure to create.\n */\nexport function useFieldBinding<\n T extends FieldTypes,\n P extends UseFieldProps<T>,\n>(\n props: P,\n params: UseFieldParams,\n generatedId: string,\n): Omit<FieldReturnValue<T>, 'form'> & {\n form?: FieldReturnValue<T>['form'] \| FormController<any>;\n isLoading?: boolean;\n} {\n const modern = !params.unbound && isModernFormController(props.form);\n const controller = modern\n ? (props.form as unknown as FormController<any>)\n : undefined;\n const ~~name~~ = props.name ?? '';\n const pathKey = controller ? getFieldKey(props.~~field?.~~path ?? ~~name~~) : '';\n const legacy = useField<T, P>(props, {\n ...params,\n unbound: params.unbound \|\| modern,\n });\n const modernHandle = useMemo(\n () =>\n controller\n ? createModernFieldBackend(controller, getFieldPath(pathKey))\n : undefined,\n [controller, pathKey],\n );\n const legacyHandle = useMemo<FieldBackendHandle>(() => {\n const snapshot: FieldView = {\n value: legacy.value,\n errors: legacy.field?.errors ?? [],\n status: legacy.field?.status ?? 'unvalidated',\n };\n return {\n subscribe: () => noop,\n getSnapshot: () => snapshot,\n getServerSnapshot: () => snapshot,\n register: () => undefined,\n change: (value, dontTouch, trigger) =>\n legacy.onChange?.(value, dontTouch, trigger),\n blur: legacy.onBlur,\n };\n }, [legacy]);\n const handle = modernHandle ?? legacyHandle;\n const field = useSyncExternalStoreWithSelector(\n handle.subscribe,\n handle.getSnapshot,\n handle.getServerSnapshot,\n selectView,\n sameFieldView,\n );\n const registration = useRef<RegistrationToken<ReactNode> \| undefined>(\n undefined,\n );\n useLayoutEffect(() => {\n const token = handle.register();\n registration.current = token;\n return () => {\n token?.release({ deferValueRemoval: true });\n if (registration.current === token) registration.current = undefined;\n };\n }, [handle]);\n useLayoutEffect(() => {\n registration.current?.update(\n fieldRegistrationOptions(props, params.defaultValidationTrigger),\n );\n });\n const trigger =\n props.validateTrigger ?? params.defaultValidationTrigger ?? 'onBlur';\n const onChange = useEvent((value: unknown, dontTouch: boolean) => {\n if (controller && props.shouldUpdate !== undefined) {\n const previous = controller.getValues();\n if (\n props.shouldUpdate === false \|\|\n (typeof props.shouldUpdate === 'function' &&\n !props.shouldUpdate(\n previous,\n writePath(\n previous~~,\n~~ normalizePath(~~props.field?.~~path ~~?? name),\n~~ value~~,\n~~ ),\n ))\n )\n return;\n }\n handle.change(value, dontTouch, trigger);\n });\n const onBlur = useEvent(() => handle.blur());\n if (!controller) return legacy;\n\n const required =\n props.isRequired \|\|\n props.rules?.flat(Infinity).some((rule) => rule.required === true);\n const id =\n props.id ??\n `${props.idPrefix ? `${props.idPrefix}_` : ''}${name}-${generatedId}`;\n return {\n form: controller,\n name,\n id,\n nonInput: false,\n value: field ? field.value : props.defaultValue,\n onChange,\n onBlur,\n validateTrigger: trigger,\n isInvalid: props.isInvalid ?? !!field?.errors.length,\n isValid: props.isValid ?? !!(props.showValid && field?.status === 'valid'),\n isLoading: props.isLoading ?? field?.status === 'validating',\n ...(required ? { isRequired: true } : {}),\n ...(required && !props.isRequired && props.necessityIndicator === undefined\n ? { necessityIndicator: null }\n : {}),\n description: props.description,\n message: props.message !== undefined ? props.message : field?.errors[0],\n errorMessage:\n props.errorMessage !== undefined ? props.errorMessage : field?.errors[0],\n };\n}\n"],"mappings":";;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,cAAc,SAAgC;;;;;;;AAQpD,SAAgB,gBAId,OACA,QACA,aAIA;CACA,MAAM,SAAS,CAAC,OAAO,WAAW,uBAAuB,MAAM,KAAK;CACpE,MAAM,aAAa,SACd,MAAM,OACP;CACJ,MAAM,OAAO,MAAM,QAAQ;~~CAC3B~~,MAAM,UAAU,aAAa,YAAY,~~MAAM~~,OAAO,QAAQ,~~KAAK~~,~~GAAG~~;~~CACtE~~,MAAM,SAAS,~~SAAe~~,~~OAAO~~;~~EACnC~~,GAAG;EACH,SAAS,OAAO,WAAW;EAC5B,~~CAAC~~;~~CACF~~,MAAM,eAAe,cAEjB,aACI,yBAAyB,YAAY,aAAa,QAAQ,CAAC,GAC3D,QACN,CAAC,YAAY,QAAQ,CACtB;CACD,MAAM,eAAe,cAAkC;EACrD,MAAM,WAAsB;GAC1B,OAAO,OAAO;GACd,QAAQ,OAAO,OAAO,UAAU,EAAE;GAClC,QAAQ,OAAO,OAAO,UAAU;GACjC;AACD,SAAO;GACL,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,gBAAgB;GAChB,SAAS,OAAO,WAAW,YACzB,OAAO,WAAW,OAAO,WAAW,QAAQ;GAC9C,MAAM,OAAO;GACd;IACA,CAAC,OAAO,CAAC;CACZ,MAAM,SAAS,gBAAgB;CAC/B,MAAM,QAAQ,iCACZ,OAAO,WACP,OAAO,aACP,OAAO,mBACP,YACA,cACD;CACD,MAAM,eAAe,OACnB,OACD;AACD,yBAAsB;EACpB,MAAM,QAAQ,OAAO,UAAU;AAC/B,eAAa,UAAU;AACvB,eAAa;AACX,UAAO,QAAQ,EAAE,mBAAmB,MAAM,CAAC;AAC3C,OAAI,aAAa,YAAY,MAAO,cAAa,UAAU;;IAE5D,CAAC,OAAO,CAAC;AACZ,yBAAsB;AACpB,eAAa,SAAS,OACpB,yBAAyB,OAAO,OAAO,yBAAyB,CACjE;GACD;CACF,MAAM,UACJ,MAAM,mBAAmB,OAAO,4BAA4B;CAC9D,MAAM,WAAW,UAAU,OAAgB,cAAuB;AAChE,MAAI,cAAc,MAAM,iBAAiB,QAAW;GAClD,MAAM,WAAW,WAAW,WAAW;AACvC,OACE,MAAM,iBAAiB,SACtB,OAAO,MAAM,iBAAiB,cAC7B,CAAC,MAAM,aACL,UACA,~~UACE~~,~~UACA~~,cAAc,~~MAAM,OAAO,QAAQ,~~KAAK,~~EACxC~~,~~MACD~~,~~CACF~~,CAEH;;AAEJ,SAAO,OAAO,OAAO,WAAW,QAAQ;GACxC;CACF,MAAM,SAAS,eAAe,OAAO,MAAM,CAAC;AAC5C,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,WACJ,MAAM,cACN,MAAM,OAAO,KAAK,SAAS,CAAC,MAAM,SAAS,KAAK,aAAa,KAAK;AAIpE,QAAO;EACL,MAAM;EACN;EACA,IALA,MAAM,MACN,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,KAAK,KAAK,KAAK,GAAG;EAKxD,UAAU;EACV,OAAO,QAAQ,MAAM,QAAQ,MAAM;EACnC;EACA;EACA,iBAAiB;EACjB,WAAW,MAAM,aAAa,CAAC,CAAC,OAAO,OAAO;EAC9C,SAAS,MAAM,WAAW,CAAC,EAAE,MAAM,aAAa,OAAO,WAAW;EAClE,WAAW,MAAM,aAAa,OAAO,WAAW;EAChD,GAAI,WAAW,EAAE,YAAY,MAAM,GAAG,EAAE;EACxC,GAAI,YAAY,CAAC,MAAM,cAAc,MAAM,uBAAuB,SAC9D,EAAE,oBAAoB,MAAM,GAC5B,EAAE;EACN,aAAa,MAAM;EACnB,SAAS,MAAM,YAAY,SAAY,MAAM,UAAU,OAAO,OAAO;EACrE,cACE,MAAM,iBAAiB,SAAY,MAAM,eAAe,OAAO,OAAO;EACzE"}
1	+ {"version":3,"file":"use-field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-binding.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\nimport { isModernFormController } from '../backend';\nimport {\n createModernFieldBackend,\n fieldRegistrationOptions,\n sameFieldView,\n} from '../modern/field-binding';\nimport {\n getFieldKey,\n getFieldPath,\n normalizePath,\n writePath,\n} from '../modern/values';\n\nimport { useField } from './use-field';\n\nimport type { ReactNode } from 'react';\nimport type { FormController } from '../modern/controller';\nimport type { FieldBackendHandle, FieldView } from '../modern/field-binding';\nimport type { RegistrationToken } from '../modern/types';\nimport type { FieldTypes } from '../types';\nimport type { FieldReturnValue, UseFieldProps } from './types';\nimport type { UseFieldParams } from './use-field';\n\nconst noop = () => {};\nconst selectView = (view: FieldView \| undefined) => view;\n\n/*\n One unconditional subscription/registration boundary. The frozen legacy\n * adapter still runs its original hooks, inert on the modern path, so an input\n * can cross backends without remounting or changing hook order. Its render-time\n * mutations remain contained in use-field.ts; modern handles are pure to create.\n */\nexport function useFieldBinding<\n T extends FieldTypes,\n P extends UseFieldProps<T>,\n>(\n props: P,\n params: UseFieldParams,\n generatedId: string,\n): Omit<FieldReturnValue<T>, 'form'> & {\n form?: FieldReturnValue<T>['form'] \| FormController<any>;\n isLoading?: boolean;\n} {\n const modern = !params.unbound && isModernFormController(props.form);\n const controller = modern\n ? (props.form as unknown as FormController<any>)\n : undefined;\n const path = props.field?.path ?? props.name ?? '';\n const name = typeof path === 'string' ? path : getFieldKey(path);\n const pathKey = controller ? getFieldKey(path) : '';\n if (!params.unbound && props.form && !modern && typeof path !== 'string') {\n throw new Error('Tuple field names require a modern form controller.');\n }\n const legacy = useField<T, P & { name?: string }>(\n { ...props, name },\n {\n ...params,\n unbound: params.unbound \|\| modern,\n },\n );\n const modernHandle = useMemo(\n () =>\n controller\n ? createModernFieldBackend(controller, getFieldPath(pathKey))\n : undefined,\n [controller, pathKey],\n );\n const legacyHandle = useMemo<FieldBackendHandle>(() => {\n const snapshot: FieldView = {\n value: legacy.value,\n errors: legacy.field?.errors ?? [],\n status: legacy.field?.status ?? 'unvalidated',\n };\n return {\n subscribe: () => noop,\n getSnapshot: () => snapshot,\n getServerSnapshot: () => snapshot,\n register: () => undefined,\n change: (value, dontTouch, trigger) =>\n legacy.onChange?.(value, dontTouch, trigger),\n blur: legacy.onBlur,\n };\n }, [legacy]);\n const handle = modernHandle ?? legacyHandle;\n const field = useSyncExternalStoreWithSelector(\n handle.subscribe,\n handle.getSnapshot,\n handle.getServerSnapshot,\n selectView,\n sameFieldView,\n );\n const registration = useRef<RegistrationToken<ReactNode> \| undefined>(\n undefined,\n );\n useLayoutEffect(() => {\n const token = handle.register();\n registration.current = token;\n return () => {\n token?.release({ deferValueRemoval: true });\n if (registration.current === token) registration.current = undefined;\n };\n }, [handle]);\n useLayoutEffect(() => {\n registration.current?.update(\n fieldRegistrationOptions(props, params.defaultValidationTrigger),\n );\n });\n const trigger =\n props.validateTrigger ?? params.defaultValidationTrigger ?? 'onBlur';\n const onChange = useEvent((value: unknown, dontTouch: boolean) => {\n if (controller && props.shouldUpdate !== undefined) {\n const previous = controller.getValues();\n if (\n props.shouldUpdate === false \|\|\n (typeof props.shouldUpdate === 'function' &&\n !props.shouldUpdate(\n previous,\n writePath(previous, normalizePath(path), value),\n ))\n )\n return;\n }\n handle.change(value, dontTouch, trigger);\n });\n const onBlur = useEvent(() => handle.blur());\n if (!controller) return legacy;\n\n const required =\n props.isRequired \|\|\n props.rules?.flat(Infinity).some((rule) => rule.required === true);\n const id =\n props.id ??\n `${props.idPrefix ? `${props.idPrefix}_` : ''}${name}-${generatedId}`;\n return {\n form: controller,\n name,\n id,\n nonInput: false,\n value: field ? field.value : props.defaultValue,\n onChange,\n onBlur,\n validateTrigger: trigger,\n isInvalid: props.isInvalid ?? !!field?.errors.length,\n isValid: props.isValid ?? !!(props.showValid && field?.status === 'valid'),\n isLoading: props.isLoading ?? field?.status === 'validating',\n ...(required ? { isRequired: true } : {}),\n ...(required && !props.isRequired && props.necessityIndicator === undefined\n ? { necessityIndicator: null }\n : {}),\n description: props.description,\n message: props.message !== undefined ? props.message : field?.errors[0],\n errorMessage:\n props.errorMessage !== undefined ? props.errorMessage : field?.errors[0],\n };\n}\n"],"mappings":"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"}

package/dist/components/form/Form/use-field/use-field-props.d.ts CHANGED Viewed

@@ -23,6 +23,8 @@ type UseFieldPropsParams = {
    */
   unsafe__isDisabled?: boolean;
 };
+/** Preserve the input's prop shape while exposing a DOM-safe name. */
+type ResolvedFieldProps<Props> = { [Key in keyof Props]: Key extends 'name' ? string | undefined : Props[Key] };
 /**
  * The single entry point for input components (see
  * `docs/rules/input-components.md`).
@@ -34,7 +36,7 @@ type UseFieldPropsParams = {
  * without changing its hook order. The legacy binding (`useField`) is the
  * legacy backend's adapter and is inert when the field is not bound to it.
  */
-declare function useFieldProps<T extends FieldTypes, Props extends UseFieldProps<T>>(inputProps: Props, params?: UseFieldPropsParams): Props;
+declare function useFieldProps<T extends FieldTypes, Props extends UseFieldProps<T>>(inputProps: Props, params?: UseFieldPropsParams): ResolvedFieldProps<Props>;
 //#endregion
 export { UseFieldPropsParams, useFieldProps };
 //# sourceMappingURL=use-field-props.d.ts.map