npm - @cube-dev/ui-kit - Versions diffs - 0.147.2 → 0.148.0 - Mend

@cube-dev/ui-kit 0.147.2 → 0.148.0

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";
@@ -6,6 +6,7 @@ import { Space } from "../../layout/Space.js";
 import { _Item } from "../../content/Item/Item.js";
 import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";
 import { Flex } from "../../layout/Flex.js";
+import { getValidationMods } from "../validation/resolve-validation-props.js";
 import { _Label } from "../Label.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
@@ -86,7 +87,7 @@ const DescriptionElement = tasty({
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const { as, labelPosition = "top", label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
+	const { as, labelPosition = "top", label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
 	const labelComponent = label ? /* @__PURE__ */ jsx(_Label, {
 		as: as === "label" ? "div" : "label",
 		styles: labelStyles,
@@ -94,7 +95,8 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 		isRequired: requiredMark ? isRequired : false,
 		isDisabled,
 		necessityIndicator,
-		validationState,
+		isInvalid,
+		isValid,
 		"aria-label": typeof label === "string" ? label : void 0,
 		...labelProps,
 		children: /* @__PURE__ */ jsxs(Flex, {
@@ -131,8 +133,10 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 		"has-sider": labelPosition === "side",
 		"has-split": labelPosition === "split",
 		"has-description": !!description,
-		invalid: validationState === "invalid",
-		valid: validationState === "valid"
+		...getValidationMods({
+			isInvalid,
+			isValid
+		})
 	};
 	const displayMessage = errorMessage || message;
 	const isErrorMessage = !!errorMessage;
@@ -154,10 +158,10 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
 					mods: {
 						...mods,
-						invalid: isErrorMessage || validationState === "invalid"
+						invalid: isErrorMessage || !!isInvalid
 					},
 					styles: messageStyles,
-					role: isErrorMessage || validationState === "invalid" ? "alert" : void 0,
+					role: isErrorMessage || isInvalid ? "alert" : void 0,
 					children: displayMessage
 				})
 			]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldWrapper.js","names":["Label","Item","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n qa: 'Field',\n styles: {\n display: 'grid',\n width: 'auto',\n gridColumns: {\n '': 'minmax(0, 1fr)',\n 'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n 'has-split': 'auto auto',\n },\n gap: 0,\n placeItems: {\n '': 'baseline stretch',\n 'has-split': 'center',\n },\n placeContent: {\n '': 'initial',\n 'has-split': 'space-between',\n },\n '$full-label-width': '($label-width + 1x)',\n\n LabelArea: {\n display: 'block',\n width: {\n '': 'initial',\n 'has-sider': '$label-width',\n },\n margin: {\n '': '1x bottom',\n 'has-sider': '1x right',\n 'has-split': '1x right',\n ':empty': '0',\n },\n },\n\n InputArea: {\n display: 'block',\n flow: 'column',\n gap: '.5x',\n gridColumn: {\n '': 'initial',\n 'has-sider': 2,\n 'has-split': 2,\n },\n },\n },\n});\n\nif (process.env.NODE_ENV === 'development') {\n FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n qa: 'FieldMessage',\n styles: {\n preset: 't4',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n valid: '#success-text',\n disabled: '#dark.40',\n },\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\nconst DescriptionElement = tasty({\n qa: 'FieldDescription',\n styles: {\n preset: 't4',\n color: '#dark-03',\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\n/*\n A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n props: CubeFieldWrapperProps,\n ref,\n) {\n const {\n as,\n labelPosition = 'top',\n label,\n extra,\n styles,\n isRequired,\n isDisabled,\n labelStyles,\n necessityIndicator,\n labelProps,\n fieldProps,\n message,\n messageStyles,\n description,\n errorMessage,\n Component,\n ~~validationState~~,\n requiredMark = true,\n tooltip,\n isHidden,\n labelSuffix,\n children,\n } = props;\n\n const labelComponent = label ? (\n <Label\n as={as === 'label' ? 'div' : 'label'}\n styles={labelStyles}\n labelPosition={labelPosition}\n isRequired={requiredMark ? isRequired : false}\n isDisabled={isDisabled}\n necessityIndicator={necessityIndicator}\n ~~validationState~~={~~validationState~~}\n aria-label={typeof label === 'string' ? label : undefined}\n {...labelProps}\n >\n <Flex placeContent=\"baseline space-between\" width=\"100%\">\n <Space placeItems=\"center\" gap=\"0.75x\">\n <div>{label}</div>\n\n {tooltip ? (\n <Item\n icon={<InfoCircleIcon color=\"#primary-text\" />}\n size=\"inline\"\n tooltip={\n typeof tooltip === 'string' ? tooltip : { title: tooltip }\n }\n />\n ) : null}\n\n {labelSuffix ? <div>{labelSuffix}</div> : null}\n </Space>\n\n {extra && <Text preset=\"t3\">{extra}</Text>}\n </Flex>\n </Label>\n ) : null;\n\n // Create description component with proper styling\n const createDescriptionComponent = () => {\n if (!description) return null;\n\n return (\n <DescriptionElement data-element=\"Description\">\n {wrapNodeIfPlain(description, () => (\n <span>{description}</span>\n ))}\n </DescriptionElement>\n );\n };\n\n // Description positioning based on label position\n const descriptionForLabel =\n labelPosition === 'side' \|\| labelPosition === 'split'\n ? createDescriptionComponent()\n : null;\n const descriptionForInput =\n labelPosition === 'top' ? createDescriptionComponent() : null;\n\n const mods = {\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n 'has-description': !!description,\n ~~invalid:~~ ~~validationState~~ ~~===~~ ~~'invalid'~~,\n ~~valid: validationState === 'valid',\n~~ };\n\n // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n const displayMessage = errorMessage \|\| message;\n const isErrorMessage = !!errorMessage;\n\n // Merge fieldProps with styles to ensure both are applied\n const mergedFieldProps = styles\n ? mergeProps(fieldProps, { styles })\n : fieldProps;\n\n return (\n <>\n <FieldElement\n ref={ref}\n as={as ?? 'div'}\n mods={mods}\n isHidden={isHidden}\n {...mergedFieldProps}\n >\n {labelComponent \|\| descriptionForLabel ? (\n <div data-element=\"LabelArea\">\n {labelComponent}\n {descriptionForLabel}\n </div>\n ) : null}\n <div data-element=\"InputArea\">\n {Component}\n {descriptionForInput}\n {displayMessage && !isDisabled && (\n <MessageElement\n mods={{\n ...mods,\n // Force invalid state for errorMessage regardless of ~~validationState~~\n invalid: isErrorMessage \|\| ~~validationState === 'invalid'~~,\n }}\n styles={messageStyles}\n role={\n isErrorMessage \|\| ~~validationState~~ ~~=== 'invalid'\n~~ ? 'alert'\n : undefined\n }\n >\n {displayMessage}\n </MessageElement>\n )}\n </div>\n </FieldElement>\n {children}\n </>\n );\n});\n"],"mappings":"~~;;;;;;;;;;;;;;AAaA~~,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACD,KAAK;EACL,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACD,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErB,WAAW;GACT,SAAS;GACT,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACD,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACX;GACF;EAED,WAAW;GACT,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACd;GACF;EACF;CACF,CAAC;AAGA,aAAa,cAAc;AAG7B,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;;;;;AAMF,MAAa,eAAe,WAAW,SAAS,aAC9C,OACA,KACA;CACA,MAAM,EACJ,IACA,gBAAgB,OAChB,OACA,OACA,QACA,YACA,YACA,aACA,oBACA,YACA,YACA,SACA,eACA,aACA,cACA,WACA,~~iBACA~~,eAAe,MACf,SACA,UACA,aACA,aACE;CAEJ,MAAM,iBAAiB,QACrB,oBAACA;EACC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ;EACO;EACf,YAAY,eAAe,aAAa;EAC5B;EACQ;~~EACH~~;~~EACjB~~,cAAY,OAAO,UAAU,WAAW,QAAQ;EAChD,GAAI;YAEJ,qBAAC;GAAK,cAAa;GAAyB,OAAM;cAChD,qBAAC;IAAM,YAAW;IAAS,KAAI;;KAC7B,oBAAC,mBAAK,QAAY;KAEjB,UACC,oBAACC;MACC,MAAM,oBAAC,kBAAe,OAAM,kBAAkB;MAC9C,MAAK;MACL,SACE,OAAO,YAAY,WAAW,UAAU,EAAE,OAAO,SAAS;OAE5D,GACA;KAEH,cAAc,oBAAC,mBAAK,cAAkB,GAAG;;KACpC,EAEP,SAAS,oBAACC;IAAK,QAAO;cAAM;KAAa;IACrC;GACD,GACN;CAGJ,MAAM,mCAAmC;AACvC,MAAI,CAAC,YAAa,QAAO;AAEzB,SACE,oBAAC;GAAmB,gBAAa;aAC9B,gBAAgB,mBACf,oBAAC,oBAAM,cAAmB,CAC1B;IACiB;;CAKzB,MAAM,sBACJ,kBAAkB,UAAU,kBAAkB,UAC1C,4BAA4B,GAC5B;CACN,MAAM,sBACJ,kBAAkB,QAAQ,4BAA4B,GAAG;CAE3D,MAAM,OAAO;EACX,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,mBAAmB,CAAC,CAAC;EACrB,~~SAAS~~,~~oBAAoB~~;~~EAC7B~~,~~OAAO,oBAAoB~~;~~EAC5B~~;CAGD,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,mBAAmB,SACrB,WAAW,YAAY,EAAE,QAAQ,CAAC,GAClC;AAEJ,QACE,8CACE,qBAAC;EACM;EACL,IAAI,MAAM;EACJ;EACI;EACV,GAAI;aAEH,kBAAkB,sBACjB,qBAAC;GAAI,gBAAa;cACf,gBACA;IACG,GACJ,MACJ,qBAAC;GAAI,gBAAa;;IACf;IACA;IACA,kBAAkB,CAAC,cAClB,oBAAC;KACC,MAAM;MACJ,GAAG;MAEH,SAAS,kBAAkB,~~oBAAoB~~;~~MAChD~~;KACD,QAAQ;KACR,~~MACE~~,kBAAkB,~~oBAAoB~~,~~YAClC,UACA~~;~~eAGL~~;MACc;;IAEf;GACO,EACd,YACA;EAEL"}
1	+ {"version":3,"file":"FieldWrapper.js","names":["Label","Item","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n qa: 'Field',\n styles: {\n display: 'grid',\n width: 'auto',\n gridColumns: {\n '': 'minmax(0, 1fr)',\n 'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n 'has-split': 'auto auto',\n },\n gap: 0,\n placeItems: {\n '': 'baseline stretch',\n 'has-split': 'center',\n },\n placeContent: {\n '': 'initial',\n 'has-split': 'space-between',\n },\n '$full-label-width': '($label-width + 1x)',\n\n LabelArea: {\n display: 'block',\n width: {\n '': 'initial',\n 'has-sider': '$label-width',\n },\n margin: {\n '': '1x bottom',\n 'has-sider': '1x right',\n 'has-split': '1x right',\n ':empty': '0',\n },\n },\n\n InputArea: {\n display: 'block',\n flow: 'column',\n gap: '.5x',\n gridColumn: {\n '': 'initial',\n 'has-sider': 2,\n 'has-split': 2,\n },\n },\n },\n});\n\nif (process.env.NODE_ENV === 'development') {\n FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n qa: 'FieldMessage',\n styles: {\n preset: 't4',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n valid: '#success-text',\n disabled: '#dark.40',\n },\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\nconst DescriptionElement = tasty({\n qa: 'FieldDescription',\n styles: {\n preset: 't4',\n color: '#dark-03',\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\n/*\n A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n props: CubeFieldWrapperProps,\n ref,\n) {\n const {\n as,\n labelPosition = 'top',\n label,\n extra,\n styles,\n isRequired,\n isDisabled,\n labelStyles,\n necessityIndicator,\n labelProps,\n fieldProps,\n message,\n messageStyles,\n description,\n errorMessage,\n Component,\n isInvalid,\n isValid,\n requiredMark = true,\n tooltip,\n isHidden,\n labelSuffix,\n children,\n } = props;\n\n const labelComponent = label ? (\n <Label\n as={as === 'label' ? 'div' : 'label'}\n styles={labelStyles}\n labelPosition={labelPosition}\n isRequired={requiredMark ? isRequired : false}\n isDisabled={isDisabled}\n necessityIndicator={necessityIndicator}\n isInvalid={isInvalid}\n isValid={isValid}\n aria-label={typeof label === 'string' ? label : undefined}\n {...labelProps}\n >\n <Flex placeContent=\"baseline space-between\" width=\"100%\">\n <Space placeItems=\"center\" gap=\"0.75x\">\n <div>{label}</div>\n\n {tooltip ? (\n <Item\n icon={<InfoCircleIcon color=\"#primary-text\" />}\n size=\"inline\"\n tooltip={\n typeof tooltip === 'string' ? tooltip : { title: tooltip }\n }\n />\n ) : null}\n\n {labelSuffix ? <div>{labelSuffix}</div> : null}\n </Space>\n\n {extra && <Text preset=\"t3\">{extra}</Text>}\n </Flex>\n </Label>\n ) : null;\n\n // Create description component with proper styling\n const createDescriptionComponent = () => {\n if (!description) return null;\n\n return (\n <DescriptionElement data-element=\"Description\">\n {wrapNodeIfPlain(description, () => (\n <span>{description}</span>\n ))}\n </DescriptionElement>\n );\n };\n\n // Description positioning based on label position\n const descriptionForLabel =\n labelPosition === 'side' \|\| labelPosition === 'split'\n ? createDescriptionComponent()\n : null;\n const descriptionForInput =\n labelPosition === 'top' ? createDescriptionComponent() : null;\n\n const mods = {\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n 'has-description': !!description,\n ...getValidationMods({ isInvalid, isValid }),\n };\n\n // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n const displayMessage = errorMessage \|\| message;\n const isErrorMessage = !!errorMessage;\n\n // Merge fieldProps with styles to ensure both are applied\n const mergedFieldProps = styles\n ? mergeProps(fieldProps, { styles })\n : fieldProps;\n\n return (\n <>\n <FieldElement\n ref={ref}\n as={as ?? 'div'}\n mods={mods}\n isHidden={isHidden}\n {...mergedFieldProps}\n >\n {labelComponent \|\| descriptionForLabel ? (\n <div data-element=\"LabelArea\">\n {labelComponent}\n {descriptionForLabel}\n </div>\n ) : null}\n <div data-element=\"InputArea\">\n {Component}\n {descriptionForInput}\n {displayMessage && !isDisabled && (\n <MessageElement\n mods={{\n ...mods,\n // Force invalid state for errorMessage regardless of the validation state\n invalid: isErrorMessage \|\| !!isInvalid,\n }}\n styles={messageStyles}\n role={isErrorMessage \|\| isInvalid ? 'alert' : undefined}\n >\n {displayMessage}\n </MessageElement>\n )}\n </div>\n </FieldElement>\n {children}\n </>\n );\n});\n"],"mappings":"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"}

package/dist/components/form/FieldWrapper/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { CubeFieldWrapperProps } from "./types.js";
 import { FieldWrapper } from "./FieldWrapper.js";
-import { extractFieldWrapperProps } from "./extract-field-wrapper-props.js";
+import { CubeFieldWrapperProps } from "./types.js";

package/dist/components/form/FieldWrapper/types.d.ts CHANGED Viewed

@@ -1,14 +1,13 @@
-import { LabelPosition, NecessityIndicator, ValidationState } from "../../../shared/form.js";
+import { LabelPosition, NecessityIndicator, ValidationProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CubeLabelProps } from "../Label.js";
 import { Props, Styles } from "@tenphi/tasty";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/form/FieldWrapper/types.d.ts
-type CubeFieldWrapperProps = {
+type CubeFieldWrapperProps = ValidationProps & {
   as?: keyof HTMLElementTagNameMap;
-  validationState?: ValidationState;
   styles?: Styles; /** Whether the input is required */
   isRequired?: boolean; /** Whether the input is disabled */
   isDisabled?: boolean;

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

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
+import { useValidationProps } from "../validation/use-validation-props.js";
 import { FieldWrapper } from "../FieldWrapper/FieldWrapper.js";
 import { useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";
@@ -57,13 +58,13 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 	};
 }
 function Field(props) {
-	const allProps = useFormProps(props);
+	const allProps = useValidationProps(useFormProps(props));
 	let { children, form, label, extra, necessityLabel, necessityIndicator, tooltip, isHidden, isDisabled, isLoading, styles, labelProps, labelPosition = "top", labelStyles, labelSuffix } = allProps;
 	if (typeof children === "function") children = children(form);
 	let child = children == null ? null : Children.only(children);
 	const inputType = (child?.type)?.cubeInputType ?? "Text";
 	const __props = useField(allProps, { defaultValidationTrigger: getDefaultValidateTrigger(inputType) });
-	const { validationState, message, description, errorMessage, isRequired, name, id } = __props;
+	const { isInvalid, isValid, message, description, errorMessage, isRequired, name, id } = __props;
 	if (!child) return null;
 	if (id) {
 		if (!labelProps) labelProps = {};
@@ -72,7 +73,8 @@ function Field(props) {
 	if (__props.nonInput) return /* @__PURE__ */ jsx(LegacyFieldProvider, { children: /* @__PURE__ */ jsx(FieldWrapper, {
 		isHidden,
 		isDisabled,
-		validationState: __props.validationState,
+		isInvalid,
+		isValid,
 		necessityIndicator,
 		necessityLabel,
 		isRequired,
@@ -106,7 +108,8 @@ function Field(props) {
 	};
 	if (necessityIndicator != null) newProps.necessityIndicator = necessityIndicator;
 	if (necessityLabel) newProps.necessityLabel = necessityLabel;
-	if (validationState) newProps.validationState = validationState;
+	if (isInvalid) newProps.isInvalid = isInvalid;
+	if (isValid) newProps.isValid = isValid;
 	if (isRequired) newProps.isRequired = isRequired;
 	if (label) newProps.label = label;
 	if (extra) newProps.extra = extra;

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';\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 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> = useFormProps(props);\n\n let {\n children,\n form,\n label,\n extra,\n necessityLabel,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\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 validationState,\n message,\n description,\n errorMessage,\n isRequired,\n name,\n id,\n } = __props;\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 validationState={__props.validationState}\n necessityIndicator={necessityIndicator}\n necessityLabel={necessityLabel}\n isRequired={isRequired}\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 if (necessityIndicator != null) {\n newProps.necessityIndicator = necessityIndicator;\n }\n\n if (necessityLabel) {\n newProps.necessityLabel = necessityLabel;\n }\n\n if (validationState) {\n newProps.validationState = validationState;\n }\n\n if (isRequired) {\n newProps.isRequired = isRequired;\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 /** 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 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 necessityLabel,\n necessityIndicator,\n tooltip,\n isHidden,\n isDisabled,\n isLoading,\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 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={necessityIndicator}\n necessityLabel={necessityLabel}\n isRequired={isRequired}\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 if (necessityIndicator != null) {\n newProps.necessityIndicator = necessityIndicator;\n }\n\n if (necessityLabel) {\n newProps.necessityLabel = necessityLabel;\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 (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,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
+import { useValidationProps } from "../validation/use-validation-props.js";
 import { timeout } from "../../../utils/promise.js";
 import { useForm } from "./use-form.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
@@ -45,8 +46,8 @@ const formPropNames = new Set([
 	"target"
 ]);
 function Form(props, ref) {
-	props = useProviderProps(props);
-	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
+	props = useValidationProps(useProviderProps(props));
+	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, isInvalid, isValid, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
 	const defaultValuesRef = useRef(defaultValues);
 	const firstRunRef = useRef(true);
 	const isHorizontal = orientation === "horizontal";
@@ -133,7 +134,8 @@ function Form(props, ref) {
 				insideForm: true,
 				isDisabled,
 				isReadOnly,
-				validationState,
+				isInvalid,
+				isValid,
 				children
 			})
 		})

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n createContext,\n FormHTMLAttributes,\n forwardRef,\n ReactElement,\n ReactNode,\n Ref,\n useContext,\n useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n as: 'form',\n qa: 'Form',\n styles: {\n display: {\n '': 'block',\n horizontal: 'flex',\n },\n flow: {\n '': 'column',\n horizontal: 'row',\n },\n placeItems: {\n '': 'initial',\n horizontal: 'center',\n },\n gap: '2x',\n '$label-width': '25x',\n },\n});\n\nexport function useFormProps(props) {\n const ctx = useContext(FormContext);\n\n return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n 'action',\n 'autoComplete',\n 'encType',\n 'method',\n 'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n extends FormBaseProps,\n BaseProps,\n ContainerStyleProps,\n Pick<\n FormHTMLAttributes<HTMLFormElement>,\n 'action' \| 'autoComplete' \| 'encType' \| 'method' \| 'target'\n > {\n /** Form name /\n name?: string;\n /* Default field values /\n defaultValues?: Partial<T>;\n /* Trigger when any value of the Field is changed /\n onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n /* Trigger on form submit and success /\n onSubmit?: CubeFormInstance<T>['onSubmit'];\n /* Trigger on form submit and failed /\n onSubmitFailed?: (any?) => void \| Promise<any>;\n /* Set form instance created by useForm /\n form?: CubeFormInstance<T, CubeFormData<T>>;\n /* The size of the side area with labels. Only for `labelPosition=\"side\"` /\n labelWidth?: Styles['width'];\n orientation?: 'vertical' \| 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n props: CubeFormProps<T>,\n ref: Ref<HTMLFormElement>,\n) {\n props = useProviderProps(props);\n let {\n qa,\n name,\n children,\n labelPosition,\n orientation,\n necessityIndicator,\n isDisabled,\n isReadOnly,\n ~~validationState~~,\n labelStyles,\n validateTrigger,\n showValid,\n defaultValues,\n onValuesChange,\n requiredMark = true,\n form,\n labelWidth,\n onSubmit,\n onSubmitFailed,\n ...otherProps\n } = props;\n const defaultValuesRef = useRef(defaultValues);\n const firstRunRef = useRef(true);\n const isHorizontal = orientation === 'horizontal';\n\n if (!orientation) {\n orientation = 'vertical';\n }\n\n if (!labelPosition) {\n labelPosition = isHorizontal ? 'side' : 'top';\n }\n\n if (!labelWidth) {\n labelWidth = isHorizontal ? 'auto' : undefined;\n }\n\n ref = useCombinedRefs(ref);\n\n let onSubmitCallback;\n\n if ((onSubmit \|\| onSubmitFailed) && !otherProps.action) {\n onSubmitCallback = async (e) => {\n if (e && e?.preventDefault) {\n e && e?.preventDefault && e?.preventDefault();\n e && e?.stopPropagation && e?.stopPropagation();\n\n if (e.nativeEvent) {\n const evt = e.nativeEvent;\n\n if (\n evt.submitter &&\n evt.submitter.getAttribute('type') !== 'submit'\n ) {\n return;\n }\n }\n }\n\n if (!form \|\| form.isSubmitting) return;\n\n form.submitError = null;\n form.setSubmitting(true);\n\n try {\n try {\n await form.validateFields();\n } catch (e) {\n form?.setSubmitting(false);\n\n return;\n }\n\n await timeout();\n await onSubmit?.(form.getFormData());\n } catch (e) {\n await timeout();\n\n // errors are shown\n form.submitError = e as ReactNode;\n // transfer errors to the callback\n onSubmitFailed?.(e);\n\n if (e instanceof Error) {\n throw e;\n }\n } finally {\n form?.setSubmitting(false);\n }\n\n // output data from form directly\n // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n };\n }\n\n [form] = useForm<T>(form, ref && ref.current, {\n onSubmit: onSubmitCallback,\n onValuesChange,\n });\n\n let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n if (labelWidth) {\n styles['$label-width'] = labelWidth;\n }\n\n let domRef = useObjectRef(ref);\n\n let ctx = {\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n form,\n submitError: form.submitError,\n idPrefix: name,\n };\n\n if (firstRunRef.current && form) {\n if (defaultValues) {\n form.setInitialFieldsValue(defaultValues);\n form.resetFields(undefined, true);\n firstRunRef.current = false;\n }\n }\n\n if (defaultValuesRef.current !== defaultValues) {\n form?.setInitialFieldsValue(defaultValues ?? {});\n defaultValuesRef.current = defaultValues;\n }\n\n return (\n <FormElement\n {...filterBaseProps(otherProps, { propNames: formPropNames })}\n ref={domRef}\n noValidate\n qa={qa}\n styles={styles}\n mods={{\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n horizontal: isHorizontal,\n }}\n onSubmit={onSubmitCallback}\n >\n <FormContext.Provider value={ctx}>\n <Provider\n insideForm={true}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n ~~validationState~~={~~validationState~~}\n >\n {children}\n </Provider>\n </FormContext.Provider>\n </FormElement>\n );\n}\n\n/\n Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"~~;;;;;;;;;;;;AA6BA~~,MAAa,cAAc,cAAc,EAAE,CAAC;AAE5C,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,YAAY;GACb;EACD,YAAY;GACV,IAAI;GACJ,YAAY;GACb;EACD,KAAK;EACL,gBAAgB;EACjB;CACF,CAAC;AAEF,SAAgB,aAAa,OAAO;AAGlC,QAAO;EAAE,GAFG,WAAW,YAAY;EAElB,GAAG;EAAO;;AAG7B,MAAM,gBAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACD,CAAC;AA2BF,SAAS,KACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;~~CAC/B~~,IAAI,EACF,IACA,MACA,UACA,eACA,aACA,oBACA,YACA,YACA,~~iBACA~~,aACA,iBACA,WACA,eACA,gBACA,eAAe,MACf,MACA,YACA,UACA,gBACA,GAAG,eACD;CACJ,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,eAAe,gBAAgB;AAErC,KAAI,CAAC,YACH,eAAc;AAGhB,KAAI,CAAC,cACH,iBAAgB,eAAe,SAAS;AAG1C,KAAI,CAAC,WACH,cAAa,eAAe,SAAS;AAGvC,OAAM,gBAAgB,IAAI;CAE1B,IAAI;AAEJ,MAAK,YAAY,mBAAmB,CAAC,WAAW,OAC9C,oBAAmB,OAAO,MAAM;AAC9B,MAAI,KAAK,GAAG,gBAAgB;AAC1B,QAAK,GAAG,kBAAkB,GAAG,gBAAgB;AAC7C,QAAK,GAAG,mBAAmB,GAAG,iBAAiB;AAE/C,OAAI,EAAE,aAAa;IACjB,MAAM,MAAM,EAAE;AAEd,QACE,IAAI,aACJ,IAAI,UAAU,aAAa,OAAO,KAAK,SAEvC;;;AAKN,MAAI,CAAC,QAAQ,KAAK,aAAc;AAEhC,OAAK,cAAc;AACnB,OAAK,cAAc,KAAK;AAExB,MAAI;AACF,OAAI;AACF,UAAM,KAAK,gBAAgB;YACpB,GAAG;AACV,UAAM,cAAc,MAAM;AAE1B;;AAGF,SAAM,SAAS;AACf,SAAM,WAAW,KAAK,aAAa,CAAC;WAC7B,GAAG;AACV,SAAM,SAAS;AAGf,QAAK,cAAc;AAEnB,oBAAiB,EAAE;AAEnB,OAAI,aAAa,MACf,OAAM;YAEA;AACR,SAAM,cAAc,MAAM;;;AAQhC,EAAC,QAAQ,QAAW,MAAM,OAAO,IAAI,SAAS;EAC5C,UAAU;EACV;EACD,CAAC;CAEF,IAAI,SAAS,cAAc,YAAY,iBAAiB;AAExD,KAAI,WACF,QAAO,kBAAkB;CAG3B,IAAI,SAAS,aAAa,IAAI;CAE9B,IAAI,MAAM;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,KAAK;EAClB,UAAU;EACX;AAED,KAAI,YAAY,WAAW,MACzB;MAAI,eAAe;AACjB,QAAK,sBAAsB,cAAc;AACzC,QAAK,YAAY,QAAW,KAAK;AACjC,eAAY,UAAU;;;AAI1B,KAAI,iBAAiB,YAAY,eAAe;AAC9C,QAAM,sBAAsB,iBAAiB,EAAE,CAAC;AAChD,mBAAiB,UAAU;;AAG7B,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EAC7D,KAAK;EACL;EACI;EACI;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY;GACb;EACD,UAAU;YAEV,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC;IACC,YAAY;IACA;IACA;~~IACK~~;~~IAEhB~~;KACQ;IACU;GACX;;;;;AAOlB,MAAM,QAAQ,WAAW,KAAK;AAI9B,AAAC,MAAc,cAAc"}
1	+ {"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n createContext,\n FormHTMLAttributes,\n forwardRef,\n ReactElement,\n ReactNode,\n Ref,\n useContext,\n useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/index';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n as: 'form',\n qa: 'Form',\n styles: {\n display: {\n '': 'block',\n horizontal: 'flex',\n },\n flow: {\n '': 'column',\n horizontal: 'row',\n },\n placeItems: {\n '': 'initial',\n horizontal: 'center',\n },\n gap: '2x',\n '$label-width': '25x',\n },\n});\n\nexport function useFormProps(props) {\n const ctx = useContext(FormContext);\n\n return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n 'action',\n 'autoComplete',\n 'encType',\n 'method',\n 'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n extends FormBaseProps,\n BaseProps,\n ContainerStyleProps,\n Pick<\n FormHTMLAttributes<HTMLFormElement>,\n 'action' \| 'autoComplete' \| 'encType' \| 'method' \| 'target'\n > {\n /** Form name /\n name?: string;\n /* Default field values /\n defaultValues?: Partial<T>;\n /* Trigger when any value of the Field is changed /\n onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n /* Trigger on form submit and success /\n onSubmit?: CubeFormInstance<T>['onSubmit'];\n /* Trigger on form submit and failed /\n onSubmitFailed?: (any?) => void \| Promise<any>;\n /* Set form instance created by useForm /\n form?: CubeFormInstance<T, CubeFormData<T>>;\n /* The size of the side area with labels. Only for `labelPosition=\"side\"` /\n labelWidth?: Styles['width'];\n orientation?: 'vertical' \| 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n props: CubeFormProps<T>,\n ref: Ref<HTMLFormElement>,\n) {\n props = useValidationProps(useProviderProps(props));\n let {\n qa,\n name,\n children,\n labelPosition,\n orientation,\n necessityIndicator,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n labelStyles,\n validateTrigger,\n showValid,\n defaultValues,\n onValuesChange,\n requiredMark = true,\n form,\n labelWidth,\n onSubmit,\n onSubmitFailed,\n ...otherProps\n } = props;\n const defaultValuesRef = useRef(defaultValues);\n const firstRunRef = useRef(true);\n const isHorizontal = orientation === 'horizontal';\n\n if (!orientation) {\n orientation = 'vertical';\n }\n\n if (!labelPosition) {\n labelPosition = isHorizontal ? 'side' : 'top';\n }\n\n if (!labelWidth) {\n labelWidth = isHorizontal ? 'auto' : undefined;\n }\n\n ref = useCombinedRefs(ref);\n\n let onSubmitCallback;\n\n if ((onSubmit \|\| onSubmitFailed) && !otherProps.action) {\n onSubmitCallback = async (e) => {\n if (e && e?.preventDefault) {\n e && e?.preventDefault && e?.preventDefault();\n e && e?.stopPropagation && e?.stopPropagation();\n\n if (e.nativeEvent) {\n const evt = e.nativeEvent;\n\n if (\n evt.submitter &&\n evt.submitter.getAttribute('type') !== 'submit'\n ) {\n return;\n }\n }\n }\n\n if (!form \|\| form.isSubmitting) return;\n\n form.submitError = null;\n form.setSubmitting(true);\n\n try {\n try {\n await form.validateFields();\n } catch (e) {\n form?.setSubmitting(false);\n\n return;\n }\n\n await timeout();\n await onSubmit?.(form.getFormData());\n } catch (e) {\n await timeout();\n\n // errors are shown\n form.submitError = e as ReactNode;\n // transfer errors to the callback\n onSubmitFailed?.(e);\n\n if (e instanceof Error) {\n throw e;\n }\n } finally {\n form?.setSubmitting(false);\n }\n\n // output data from form directly\n // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n };\n }\n\n [form] = useForm<T>(form, ref && ref.current, {\n onSubmit: onSubmitCallback,\n onValuesChange,\n });\n\n let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n if (labelWidth) {\n styles['$label-width'] = labelWidth;\n }\n\n let domRef = useObjectRef(ref);\n\n let ctx = {\n labelPosition,\n labelStyles,\n orientation,\n necessityIndicator,\n validateTrigger,\n requiredMark,\n showValid,\n form,\n submitError: form.submitError,\n idPrefix: name,\n };\n\n if (firstRunRef.current && form) {\n if (defaultValues) {\n form.setInitialFieldsValue(defaultValues);\n form.resetFields(undefined, true);\n firstRunRef.current = false;\n }\n }\n\n if (defaultValuesRef.current !== defaultValues) {\n form?.setInitialFieldsValue(defaultValues ?? {});\n defaultValuesRef.current = defaultValues;\n }\n\n return (\n <FormElement\n {...filterBaseProps(otherProps, { propNames: formPropNames })}\n ref={domRef}\n noValidate\n qa={qa}\n styles={styles}\n mods={{\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n horizontal: isHorizontal,\n }}\n onSubmit={onSubmitCallback}\n >\n <FormContext.Provider value={ctx}>\n <Provider\n insideForm={true}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n >\n {children}\n </Provider>\n </FormContext.Provider>\n </FormElement>\n );\n}\n\n/\n Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | 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.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

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

@@ -1,29 +1,31 @@
-import { FieldCoreProps, ValidateTrigger, ValidationState } from "../../../../shared/form.js";
+import { FieldCoreProps, ValidateTrigger, ValidationProps, ValidationState } from "../../../../shared/form.js";
 import "../../../../shared/index.js";
 import { CubeFieldData, FieldTypes } from "../types.js";
 import { CubeFormInstance } from "../use-form.js";
 import { ReactNode } from "react";
 //#region src/components/form/Form/use-field/types.d.ts
-interface UseFieldProps<T extends FieldTypes> extends FieldCoreProps {
+interface UseFieldProps<T extends FieldTypes> extends FieldCoreProps, ValidationProps {
   /** The initial value of the input. */
   defaultValue?: any;
   /** The form instance */
   form?: CubeFormInstance<T>;
-  /** The validation state of the field */
+  /**
+   * The validation state of the field
+   * @deprecated Use `isInvalid` / `isValid` instead.
+   */
   validationState?: ValidationState;
   /** Whether to show valid state */
   showValid?: boolean;
   /** On which event perform the validation for the field */
   validateTrigger?: ValidateTrigger;
 }
-type FieldReturnValue<T extends FieldTypes> = {
+type FieldReturnValue<T extends FieldTypes> = ValidationProps & {
   id: string;
   name: string;
   value: any;
   validateTrigger?: ValidateTrigger;
-  validationState?: ValidationState;
   form?: CubeFormInstance<T>;
   onChange?: (value: any, dontTouch: boolean, validateTrigger: ValidateTrigger) => void;
   /**

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

@@ -1,14 +1,20 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";
 import { useChainedCallback } from "../../../../_internal/hooks/use-chained-callback.js";
+import { useProviderProps } from "../../../../provider.js";
+import { useValidationProps } from "../../validation/use-validation-props.js";
+import { useFormProps } from "../Form.js";
 import { useField } from "./use-field.js";
 import { useInsideLegacyField } from "../Field.js";
 import { useDebugValue, useId, useRef } from "react";
 //#region src/components/form/Form/use-field/use-field-props.tsx
 function useFieldProps(props, params = {}) {
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useValidationProps(props);
 	const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);
 	const { valuePropsMapper = ({ value, onChange }) => {
 		return {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useRef } from 'react';\n\nimport { useChainedCallback, useEvent } from '../../../../_internal/index';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useInsideLegacyField } from '../Field';\n\nimport { useField } from './use-field';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n valuePropsMapper?: ({ value, onChange }) => any;\n /*\n @default 'onBlur'\n /\n defaultValidationTrigger?: ValidateTrigger;\n /\n prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n * If you want to change this prop after mount, remount the component with a new value.\n */\n unsafe__isDisabled?: boolean;\n};\n\nexport function useFieldProps<\n T extends FieldTypes,\n Props extends UseFieldProps<T>,\n>(props: Props, params: UseFieldPropsParams = {}): Props {\n // We use ref here to \"memoize\" initial value\n const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);\n\n const {\n valuePropsMapper = ({ value, onChange }) => {\n return {\n value: value ?? null,\n onChange,\n };\n },\n defaultValidationTrigger = 'onBlur',\n } = params;\n\n const isInsideLegacyField = useInsideLegacyField();\n\n // useWarn(isInsideLegacyField, {\n // key: 'use-field-props',\n // args: ['<Field /> is deprecated, use component without <Field /> instead.'],\n // });\n\n if (props.rules && !props.name) {\n warn(\n `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n );\n }\n\n if (isInsideLegacyField \|\| isDisabledRef.current === true) {\n return props;\n }\n\n // For standalone fields (no name), just generate an ID without calling useField\n const hasName = props.name != null;\n const generatedId = useId();\n\n if (!hasName) {\n // Standalone field - just add generated ID if not provided\n if (!props.id) {\n const result = { ...props, id: generatedId };\n\n if (result.id && !result.labelProps) {\n result.labelProps = { for: result.id };\n } else if (result.id && result.labelProps && !result.labelProps.for) {\n result.labelProps = { ...result.labelProps, for: result.id };\n }\n\n return result as Props;\n }\n return props;\n }\n\n // Form-connected field - use full useField logic\n const field = useField<T, Props>(props, {\n defaultValidationTrigger: params.defaultValidationTrigger,\n });\n\n const isOutsideOfForm = field?.form == null;\n\n if (props.rules && isOutsideOfForm) {\n warn(\n `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n );\n }\n\n const onBlurChained = useChainedCallback(\n field?.onBlur,\n 'onBlur' in props ? (props as any).onBlur : undefined,\n );\n\n const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n field?.onChange?.(\n value,\n dontTouch,\n field?.validateTrigger ?? defaultValidationTrigger,\n );\n });\n\n const valueProps = !isOutsideOfForm\n ? valuePropsMapper({\n value: field.value,\n onChange: onChangeEvent,\n })\n : {};\n\n if (isInsideLegacyField && !isOutsideOfForm) {\n const valuePropEventNames = !isOutsideOfForm\n ? Object.keys(valueProps).filter((name) => name.startsWith('on'))\n : [];\n\n for (const valuePropName of valuePropEventNames) {\n if (valuePropName in props) {\n warn(\n `The \"${valuePropName}\" listener is not supported for input \"${props.name}\" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`,\n );\n }\n }\n }\n\n // Use errorMessage directly or fall back to validation errors\n const compiledErrorMessage =\n props.errorMessage !== undefined\n ? props.errorMessage\n : field?.field?.status === 'invalid' && field?.field?.errors?.length\n ? field.field.errors[0]\n : undefined;\n\n // Exclude 'form' from field to prevent it from being spread to DOM elements\n const { form: _form, ...fieldWithoutForm } = field ?? {};\n\n const result: Props = isOutsideOfForm\n ? props\n : mergeProps(props, fieldWithoutForm, valueProps, {\n validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n onBlur: onBlurChained,\n errorMessage: compiledErrorMessage,\n });\n\n if (result.id) {\n if (!result.labelProps) {\n result.labelProps = {};\n }\n\n result.labelProps.for = result.id;\n }\n\n if (process.env.NODE_ENV === 'development') {\n useDebugValue(result);\n }\n\n return result;\n}\n"],"mappings":"~~;;;;;;;;;;AA0BA~~,SAAgB,cAGd,OAAc,SAA8B,EAAE,EAAS;~~CAEvD~~,MAAM,gBAAgB,OAAO,OAAO,sBAAsB,MAAM;CAEhE,MAAM,EACJ,oBAAoB,EAAE,OAAO,eAAe;AAC1C,SAAO;GACL,OAAO,SAAS;GAChB;GACD;IAEH,2BAA2B,aACzB;CAEJ,MAAM,sBAAsB,sBAAsB;AAOlD,KAAI,MAAM,SAAS,CAAC,MAAM,KACxB,MACE,wHACD;AAGH,KAAI,uBAAuB,cAAc,YAAY,KACnD,QAAO;CAIT,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,cAAc,OAAO;AAE3B,KAAI,CAAC,SAAS;AAEZ,MAAI,CAAC,MAAM,IAAI;GACb,MAAM,SAAS;IAAE,GAAG;IAAO,IAAI;IAAa;AAE5C,OAAI,OAAO,MAAM,CAAC,OAAO,WACvB,QAAO,aAAa,EAAE,KAAK,OAAO,IAAI;YAC7B,OAAO,MAAM,OAAO,cAAc,CAAC,OAAO,WAAW,IAC9D,QAAO,aAAa;IAAE,GAAG,OAAO;IAAY,KAAK,OAAO;IAAI;AAG9D,UAAO;;AAET,SAAO;;CAIT,MAAM,QAAQ,SAAmB,OAAO,EACtC,0BAA0B,OAAO,0BAClC,CAAC;CAEF,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,KAAI,MAAM,SAAS,gBACjB,MACE,kFAAkF,MAAM,KAAK,qCAC9F;CAGH,MAAM,gBAAgB,mBACpB,OAAO,QACP,YAAY,QAAS,MAAc,SAAS,OAC7C;CAED,MAAM,gBAAgB,UAAU,OAAO,cAAuB;AAC5D,SAAO,WACL,OACA,WACA,OAAO,mBAAmB,yBAC3B;GACD;CAEF,MAAM,aAAa,CAAC,kBAChB,iBAAiB;EACf,OAAO,MAAM;EACb,UAAU;EACX,CAAC,GACF,EAAE;AAEN,KAAI,uBAAuB,CAAC,iBAAiB;EAC3C,MAAM,sBAAsB,CAAC,kBACzB,OAAO,KAAK,WAAW,CAAC,QAAQ,SAAS,KAAK,WAAW,KAAK,CAAC,GAC/D,EAAE;AAEN,OAAK,MAAM,iBAAiB,oBAC1B,KAAI,iBAAiB,MACnB,MACE,QAAQ,cAAc,yCAAyC,MAAM,KAAK,+HAC3E;;CAMP,MAAM,uBACJ,MAAM,iBAAiB,SACnB,MAAM,eACN,OAAO,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,SAC1D,MAAM,MAAM,OAAO,KACnB;CAGR,MAAM,EAAE,MAAM,OAAO,GAAG,qBAAqB,SAAS,EAAE;CAExD,MAAM,SAAgB,kBAClB,QACA,WAAW,OAAO,kBAAkB,YAAY;EAC9C,iBAAiB,MAAM,mBAAmB;EAC1C,QAAQ;EACR,cAAc;EACf,CAAC;AAEN,KAAI,OAAO,IAAI;AACb,MAAI,CAAC,OAAO,WACV,QAAO,aAAa,EAAE;AAGxB,SAAO,WAAW,MAAM,OAAO;;AAI/B,eAAc,OAAO;AAGvB,QAAO"}
1	+ {"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useRef } from 'react';\n\nimport { useChainedCallback, useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useValidationProps } from '../../validation/index';\nimport { useInsideLegacyField } from '../Field';\nimport { useFormProps } from '../Form';\n\nimport { useField } from './use-field';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n valuePropsMapper?: ({ value, onChange }) => any;\n /*\n @default 'onBlur'\n /\n defaultValidationTrigger?: ValidateTrigger;\n /\n prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n * If you want to change this prop after mount, remount the component with a new value.\n */\n unsafe__isDisabled?: boolean;\n};\n\nexport function useFieldProps<\n T extends FieldTypes,\n Props extends UseFieldProps<T>,\n>(props: Props, params: UseFieldPropsParams = {}): Props {\n // The single entry point for input components: provider defaults, then form context, then the\n // normalization of the deprecated `validationState` prop into `isInvalid`/`isValid`.\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useValidationProps(props);\n\n // We use ref here to \"memoize\" initial value\n const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);\n\n const {\n valuePropsMapper = ({ value, onChange }) => {\n return {\n value: value ?? null,\n onChange,\n };\n },\n defaultValidationTrigger = 'onBlur',\n } = params;\n\n const isInsideLegacyField = useInsideLegacyField();\n\n // useWarn(isInsideLegacyField, {\n // key: 'use-field-props',\n // args: ['<Field /> is deprecated, use component without <Field /> instead.'],\n // });\n\n if (props.rules && !props.name) {\n warn(\n `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n );\n }\n\n if (isInsideLegacyField \|\| isDisabledRef.current === true) {\n return props;\n }\n\n // For standalone fields (no name), just generate an ID without calling useField\n const hasName = props.name != null;\n const generatedId = useId();\n\n if (!hasName) {\n // Standalone field - just add generated ID if not provided\n if (!props.id) {\n const result = { ...props, id: generatedId };\n\n if (result.id && !result.labelProps) {\n result.labelProps = { for: result.id };\n } else if (result.id && result.labelProps && !result.labelProps.for) {\n result.labelProps = { ...result.labelProps, for: result.id };\n }\n\n return result as Props;\n }\n return props;\n }\n\n // Form-connected field - use full useField logic\n const field = useField<T, Props>(props, {\n defaultValidationTrigger: params.defaultValidationTrigger,\n });\n\n const isOutsideOfForm = field?.form == null;\n\n if (props.rules && isOutsideOfForm) {\n warn(\n `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n );\n }\n\n const onBlurChained = useChainedCallback(\n field?.onBlur,\n 'onBlur' in props ? (props as any).onBlur : undefined,\n );\n\n const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n field?.onChange?.(\n value,\n dontTouch,\n field?.validateTrigger ?? defaultValidationTrigger,\n );\n });\n\n const valueProps = !isOutsideOfForm\n ? valuePropsMapper({\n value: field.value,\n onChange: onChangeEvent,\n })\n : {};\n\n if (isInsideLegacyField && !isOutsideOfForm) {\n const valuePropEventNames = !isOutsideOfForm\n ? Object.keys(valueProps).filter((name) => name.startsWith('on'))\n : [];\n\n for (const valuePropName of valuePropEventNames) {\n if (valuePropName in props) {\n warn(\n `The \"${valuePropName}\" listener is not supported for input \"${props.name}\" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`,\n );\n }\n }\n }\n\n // Use errorMessage directly or fall back to validation errors\n const compiledErrorMessage =\n props.errorMessage !== undefined\n ? props.errorMessage\n : field?.field?.status === 'invalid' && field?.field?.errors?.length\n ? field.field.errors[0]\n : undefined;\n\n // Exclude 'form' from field to prevent it from being spread to DOM elements\n const { form: _form, ...fieldWithoutForm } = field ?? {};\n\n const result: Props = isOutsideOfForm\n ? props\n : mergeProps(props, fieldWithoutForm, valueProps, {\n validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n onBlur: onBlurChained,\n errorMessage: compiledErrorMessage,\n });\n\n if (result.id) {\n if (!result.labelProps) {\n result.labelProps = {};\n }\n\n result.labelProps.for = result.id;\n }\n\n if (process.env.NODE_ENV === 'development') {\n useDebugValue(result);\n }\n\n return result;\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAgB,cAGd,OAAc,SAA8B,EAAE,EAAS;AAGvD,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,mBAAmB,MAAM;CAGjC,MAAM,gBAAgB,OAAO,OAAO,sBAAsB,MAAM;CAEhE,MAAM,EACJ,oBAAoB,EAAE,OAAO,eAAe;AAC1C,SAAO;GACL,OAAO,SAAS;GAChB;GACD;IAEH,2BAA2B,aACzB;CAEJ,MAAM,sBAAsB,sBAAsB;AAOlD,KAAI,MAAM,SAAS,CAAC,MAAM,KACxB,MACE,wHACD;AAGH,KAAI,uBAAuB,cAAc,YAAY,KACnD,QAAO;CAIT,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,cAAc,OAAO;AAE3B,KAAI,CAAC,SAAS;AAEZ,MAAI,CAAC,MAAM,IAAI;GACb,MAAM,SAAS;IAAE,GAAG;IAAO,IAAI;IAAa;AAE5C,OAAI,OAAO,MAAM,CAAC,OAAO,WACvB,QAAO,aAAa,EAAE,KAAK,OAAO,IAAI;YAC7B,OAAO,MAAM,OAAO,cAAc,CAAC,OAAO,WAAW,IAC9D,QAAO,aAAa;IAAE,GAAG,OAAO;IAAY,KAAK,OAAO;IAAI;AAG9D,UAAO;;AAET,SAAO;;CAIT,MAAM,QAAQ,SAAmB,OAAO,EACtC,0BAA0B,OAAO,0BAClC,CAAC;CAEF,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,KAAI,MAAM,SAAS,gBACjB,MACE,kFAAkF,MAAM,KAAK,qCAC9F;CAGH,MAAM,gBAAgB,mBACpB,OAAO,QACP,YAAY,QAAS,MAAc,SAAS,OAC7C;CAED,MAAM,gBAAgB,UAAU,OAAO,cAAuB;AAC5D,SAAO,WACL,OACA,WACA,OAAO,mBAAmB,yBAC3B;GACD;CAEF,MAAM,aAAa,CAAC,kBAChB,iBAAiB;EACf,OAAO,MAAM;EACb,UAAU;EACX,CAAC,GACF,EAAE;AAEN,KAAI,uBAAuB,CAAC,iBAAiB;EAC3C,MAAM,sBAAsB,CAAC,kBACzB,OAAO,KAAK,WAAW,CAAC,QAAQ,SAAS,KAAK,WAAW,KAAK,CAAC,GAC/D,EAAE;AAEN,OAAK,MAAM,iBAAiB,oBAC1B,KAAI,iBAAiB,MACnB,MACE,QAAQ,cAAc,yCAAyC,MAAM,KAAK,+HAC3E;;CAMP,MAAM,uBACJ,MAAM,iBAAiB,SACnB,MAAM,eACN,OAAO,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,SAC1D,MAAM,MAAM,OAAO,KACnB;CAGR,MAAM,EAAE,MAAM,OAAO,GAAG,qBAAqB,SAAS,EAAE;CAExD,MAAM,SAAgB,kBAClB,QACA,WAAW,OAAO,kBAAkB,YAAY;EAC9C,iBAAiB,MAAM,mBAAmB;EAC1C,QAAQ;EACR,cAAc;EACf,CAAC;AAEN,KAAI,OAAO,IAAI;AACb,MAAI,CAAC,OAAO,WACV,QAAO,aAAa,EAAE;AAGxB,SAAO,WAAW,MAAM,OAAO;;AAI/B,eAAc,OAAO;AAGvB,QAAO"}

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

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
+import { resolveValidationProps } from "../../validation/resolve-validation-props.js";
 import { delayValidationRule } from "../validation.js";
 import { useFormProps } from "../Form.js";
 import { useEffect, useMemo, useState } from "react";
@@ -25,7 +26,8 @@ function removeId(name, id) {
 }
 function useField(props, params) {
 	props = useFormProps(props);
-	let { defaultValue, id, idPrefix, name, form, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp } = props;
+	let { defaultValue, id, idPrefix, name, form, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp } = props;
+	const { isInvalid: isInvalidProp, isValid: isValidProp } = resolveValidationProps(props);
 	const processedRules = useMemo(() => {
 		let finalRules = rules;
 		if (isRequiredProp) {
@@ -99,10 +101,9 @@ function useField(props, params) {
 		form,
 		field,
 		nonInput,
-		validationState: validationState ?? (field?.errors?.length ? "invalid" : showValid && field?.status === "valid" ? "valid" : void 0),
+		isInvalid: isInvalidProp ?? !!field?.errors?.length,
+		isValid: isValidProp ?? !!(showValid && field?.status === "valid"),
 		...isRequired && { isRequired },
-		isInvalid: field?.status === "invalid",
-		isValid: field?.status === "valid",
 		message: message !== void 0 ? message : field?.status === "invalid" && field?.errors?.[0],
 		description,
 		errorMessage: errorMessage !== void 0 ? errorMessage : field?.status === "invalid" && field?.errors?.length ? field.errors[0] : void 0,
@@ -123,7 +124,8 @@ function useField(props, params) {
 		onBlurHandler,
 		onChangeHandler,
 		validateTrigger,
-		validationState,
+		isInvalidProp,
+		isValidProp,
 		showValid,
 		nonInput
 	]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n if (!name) return;\n\n if (!ID_MAP[name]) {\n ID_MAP[name] = [];\n }\n\n let i = 0;\n let id;\n\n do {\n id = i ? `${name}_${i}` : name;\n i++;\n } while (ID_MAP[name].includes(id));\n\n ID_MAP[name].push(id);\n\n return id;\n}\n\nfunction removeId(name, id) {\n if (!ID_MAP[name]) return;\n\n ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n defaultValidationTrigger?: ValidateTrigger;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n props: Props,\n params: UseFieldParams,\n): FieldReturnValue<T> {\n props = useFormProps(props);\n\n let {\n defaultValue,\n id,\n idPrefix,\n name,\n form,\n rules,\n message,\n description,\n errorMessage,\n validateTrigger = params.defaultValidationTrigger,\n ~~validationState,\n~~ validationDelay,\n showValid,\n shouldUpdate,\n isRequired: isRequiredProp,\n } = props;\n\n const processedRules = useMemo(() => {\n let finalRules = rules;\n\n // If isRequired prop is set, ensure there's a required rule\n if (isRequiredProp) {\n const hasRequiredRule = finalRules?.some(\n (rule) => 'required' in rule && rule.required === true,\n );\n\n if (!hasRequiredRule) {\n finalRules = finalRules\n ? [{ required: true }, ...finalRules]\n : [{ required: true }];\n }\n }\n\n // Add delay rule if needed\n if (finalRules && finalRules.length && validationDelay) {\n return [delayValidationRule(validationDelay), ...finalRules];\n }\n\n return finalRules;\n }, [rules, validationDelay, isRequiredProp]);\n\n const nonInput = !name;\n const fieldName: string = name != null ? name : '';\n\n const isFirstRender = useIsFirstRender();\n let [fieldId, setFieldId] = useState(\n id \|\| (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),\n );\n\n useEffect(() => {\n let newId;\n\n if (!id && !nonInput) {\n newId = createId(fieldId);\n\n setFieldId(newId);\n }\n\n return () => {\n if (!id) {\n removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);\n }\n\n if (fieldName && form) {\n form.removeField(fieldName);\n }\n };\n }, [fieldName]);\n\n let field = form?.getFieldInstance(fieldName);\n\n if (field) {\n field.rules = processedRules;\n }\n\n let isRequired = !!processedRules?.find(\n (rule) => 'required' in rule && rule.required === true,\n );\n\n useEffect(() => {\n if (!form) return;\n\n if (field) {\n form.forceReRender();\n } else {\n field = form.createField(fieldName);\n }\n }, [field]);\n\n if (form) {\n if (isFirstRender) {\n if (!field) {\n field = form.createField(fieldName, true);\n }\n\n if (field?.value == null && defaultValue != null) {\n form.setFieldValue(fieldName, defaultValue, false, true);\n form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n field = form?.getFieldInstance(fieldName);\n }\n }\n\n if (!field?.touched && defaultValue != null) {\n form.setFieldValue(fieldName, defaultValue, false, true);\n }\n }\n\n const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n if (!form) return;\n\n const field = form.getFieldInstance(fieldName);\n\n if (shouldUpdate) {\n const fieldsValue = form.getFieldsValue();\n\n // check if we should update the value of the field\n const shouldNotBeUpdated =\n typeof shouldUpdate === 'boolean'\n ? !shouldUpdate\n : !shouldUpdate(fieldsValue, {\n ...fieldsValue,\n [fieldName]: val,\n });\n\n if (shouldNotBeUpdated) {\n return;\n }\n }\n\n form.setFieldValue(fieldName, val, !dontTouch);\n\n if (\n !dontTouch &&\n (validateTrigger === 'onChange' \|\|\n (field && field.errors && field.errors.length))\n ) {\n form.validateField(fieldName).catch(() => {}); // do nothing on fail\n }\n });\n\n const onBlurHandler = useEvent(() => {\n if (validateTrigger === 'onBlur') {\n // We need a timeout so the change event can be done.\n setTimeout(() => {\n form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n });\n }\n });\n\n let value = field?.value;\n\n return useMemo(\n () => ({\n id: fieldId,\n name: fieldName,\n value,\n validateTrigger,\n form,\n field,\n nonInput,\n\n ~~validationState:\~~n ~~validationState~~ ~~??\n (~~field?.errors?.length\n ~~? 'invalid'\n~~ : showValid && field?.status === 'valid'~~\n ? 'valid'\n : undefined~~),\n ...(isRequired && { isRequired }),\n ~~isInvalid: field?.status === 'invalid',\n isValid: field?.status === 'valid',\n~~ message:\n message !== undefined\n ? message\n : field?.status === 'invalid' && field?.errors?.[0],\n description,\n errorMessage:\n errorMessage !== undefined\n ? errorMessage\n : field?.status === 'invalid' && field?.errors?.length\n ? field.errors[0]\n : undefined,\n onBlur: onBlurHandler,\n onChange: onChangeHandler,\n }),\n [\n form,\n field,\n field?.value,\n field?.errors?.length,\n field?.status,\n fieldId,\n fieldName,\n isRequired,\n message,\n description,\n errorMessage,\n onBlurHandler,\n onChangeHandler,\n validateTrigger,\n ~~validationState~~,\n showValid,\n nonInput,\n ],\n );\n}\n"],"mappings":"~~;;;;;;;;AAUA~~,MAAM,SAAS,EAAE;AAEjB,SAAS,SAAS,MAAM;AACtB,KAAI,CAAC,KAAM;AAEX,KAAI,CAAC,OAAO,MACV,QAAO,QAAQ,EAAE;CAGnB,IAAI,IAAI;CACR,IAAI;AAEJ,IAAG;AACD,OAAK,IAAI,GAAG,KAAK,GAAG,MAAM;AAC1B;UACO,OAAO,MAAM,SAAS,GAAG;AAElC,QAAO,MAAM,KAAK,GAAG;AAErB,QAAO;;AAGT,SAAS,SAAS,MAAM,IAAI;AAC1B,KAAI,CAAC,OAAO,MAAO;AAEnB,QAAO,QAAQ,OAAO,MAAM,QAAQ,QAAQ,QAAQ,GAAG;;AAOzD,SAAgB,SACd,OACA,QACqB;AACrB,SAAQ,aAAa,MAAM;CAE3B,IAAI,EACF,cACA,IACA,UACA,MACA,MACA,OACA,SACA,aACA,cACA,kBAAkB,OAAO,0BACzB,iBACA,~~iBACA,~~WACA,cACA,YAAY,mBACV;CAEJ,MAAM,iBAAiB,cAAc;EACnC,IAAI,aAAa;AAGjB,MAAI,gBAKF;OAAI,CAJoB,YAAY,MACjC,SAAS,cAAc,QAAQ,KAAK,aAAa,KACnD,CAGC,cAAa,aACT,CAAC,EAAE,UAAU,MAAM,EAAE,GAAG,WAAW,GACnC,CAAC,EAAE,UAAU,MAAM,CAAC;;AAK5B,MAAI,cAAc,WAAW,UAAU,gBACrC,QAAO,CAAC,oBAAoB,gBAAgB,EAAE,GAAG,WAAW;AAG9D,SAAO;IACN;EAAC;EAAO;EAAiB;EAAe,CAAC;CAE5C,MAAM,WAAW,CAAC;CAClB,MAAM,YAAoB,QAAQ,OAAO,OAAO;CAEhD,MAAM,gBAAgB,kBAAkB;CACxC,IAAI,CAAC,SAAS,cAAc,SAC1B,OAAO,WAAW,GAAG,SAAS,GAAG,cAAc,WAChD;AAED,iBAAgB;EACd,IAAI;AAEJ,MAAI,CAAC,MAAM,CAAC,UAAU;AACpB,WAAQ,SAAS,QAAQ;AAEzB,cAAW,MAAM;;AAGnB,eAAa;AACX,OAAI,CAAC,GACH,UAAS,WAAW,GAAG,SAAS,GAAG,cAAc,WAAW,MAAM;AAGpE,OAAI,aAAa,KACf,MAAK,YAAY,UAAU;;IAG9B,CAAC,UAAU,CAAC;CAEf,IAAI,QAAQ,MAAM,iBAAiB,UAAU;AAE7C,KAAI,MACF,OAAM,QAAQ;CAGhB,IAAI,aAAa,CAAC,CAAC,gBAAgB,MAChC,SAAS,cAAc,QAAQ,KAAK,aAAa,KACnD;AAED,iBAAgB;AACd,MAAI,CAAC,KAAM;AAEX,MAAI,MACF,MAAK,eAAe;MAEpB,SAAQ,KAAK,YAAY,UAAU;IAEpC,CAAC,MAAM,CAAC;AAEX,KAAI,MAAM;AACR,MAAI,eAAe;AACjB,OAAI,CAAC,MACH,SAAQ,KAAK,YAAY,WAAW,KAAK;AAG3C,OAAI,OAAO,SAAS,QAAQ,gBAAgB,MAAM;AAChD,SAAK,cAAc,WAAW,cAAc,OAAO,KAAK;AACxD,SAAK,yBAAyB,GAAG,YAAY,cAAc,CAAC;AAE5D,YAAQ,MAAM,iBAAiB,UAAU;;;AAI7C,MAAI,CAAC,OAAO,WAAW,gBAAgB,KACrC,MAAK,cAAc,WAAW,cAAc,OAAO,KAAK;;CAI5D,MAAM,kBAAkB,UAAU,KAAU,cAAuB;AACjE,MAAI,CAAC,KAAM;EAEX,MAAM,QAAQ,KAAK,iBAAiB,UAAU;AAE9C,MAAI,cAAc;GAChB,MAAM,cAAc,KAAK,gBAAgB;AAWzC,OAPE,OAAO,iBAAiB,YACpB,CAAC,eACD,CAAC,aAAa,aAAa;IACzB,GAAG;KACF,YAAY;IACd,CAAC,CAGN;;AAIJ,OAAK,cAAc,WAAW,KAAK,CAAC,UAAU;AAE9C,MACE,CAAC,cACA,oBAAoB,cAClB,SAAS,MAAM,UAAU,MAAM,OAAO,QAEzC,MAAK,cAAc,UAAU,CAAC,YAAY,GAAG;GAE/C;CAEF,MAAM,gBAAgB,eAAe;AACnC,MAAI,oBAAoB,SAEtB,kBAAiB;AACf,SAAM,cAAc,UAAU,CAAC,YAAY,GAAG;IAC9C;GAEJ;CAEF,IAAI,QAAQ,OAAO;AAEnB,QAAO,eACE;EACL,IAAI;EACJ,MAAM;EACN;EACA;EACA;EACA;EACA;~~EAEA~~,~~iBACE~~,~~oBACC~~,OAAO,QAAQ,~~SACZ~~,~~YACA~~,aAAa,OAAO,WAAW~~,UAC7B,UACA~~;~~EACR~~,GAAI,cAAc,EAAE,YAAY;EAChC,~~WAAW,OAAO,WAAW;EAC7B,SAAS,OAAO,WAAW;EAC3B,~~SACE,YAAY,SACR,UACA,OAAO,WAAW,aAAa,OAAO,SAAS;EACrD;EACA,cACE,iBAAiB,SACb,eACA,OAAO,WAAW,aAAa,OAAO,QAAQ,SAC5C,MAAM,OAAO,KACb;EACR,QAAQ;EACR,UAAU;EACX,GACD;EACE;EACA;EACA,OAAO;EACP,OAAO,QAAQ;EACf,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}
1	+ {"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { resolveValidationProps } from '../../validation/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n if (!name) return;\n\n if (!ID_MAP[name]) {\n ID_MAP[name] = [];\n }\n\n let i = 0;\n let id;\n\n do {\n id = i ? `${name}_${i}` : name;\n i++;\n } while (ID_MAP[name].includes(id));\n\n ID_MAP[name].push(id);\n\n return id;\n}\n\nfunction removeId(name, id) {\n if (!ID_MAP[name]) return;\n\n ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n defaultValidationTrigger?: ValidateTrigger;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n props: Props,\n params: UseFieldParams,\n): FieldReturnValue<T> {\n props = useFormProps(props);\n\n let {\n defaultValue,\n id,\n idPrefix,\n name,\n form,\n rules,\n message,\n description,\n errorMessage,\n validateTrigger = params.defaultValidationTrigger,\n validationDelay,\n showValid,\n shouldUpdate,\n isRequired: isRequiredProp,\n } = props;\n\n const { isInvalid: isInvalidProp, isValid: isValidProp } =\n resolveValidationProps(props);\n\n const processedRules = useMemo(() => {\n let finalRules = rules;\n\n // If isRequired prop is set, ensure there's a required rule\n if (isRequiredProp) {\n const hasRequiredRule = finalRules?.some(\n (rule) => 'required' in rule && rule.required === true,\n );\n\n if (!hasRequiredRule) {\n finalRules = finalRules\n ? [{ required: true }, ...finalRules]\n : [{ required: true }];\n }\n }\n\n // Add delay rule if needed\n if (finalRules && finalRules.length && validationDelay) {\n return [delayValidationRule(validationDelay), ...finalRules];\n }\n\n return finalRules;\n }, [rules, validationDelay, isRequiredProp]);\n\n const nonInput = !name;\n const fieldName: string = name != null ? name : '';\n\n const isFirstRender = useIsFirstRender();\n let [fieldId, setFieldId] = useState(\n id \|\| (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),\n );\n\n useEffect(() => {\n let newId;\n\n if (!id && !nonInput) {\n newId = createId(fieldId);\n\n setFieldId(newId);\n }\n\n return () => {\n if (!id) {\n removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);\n }\n\n if (fieldName && form) {\n form.removeField(fieldName);\n }\n };\n }, [fieldName]);\n\n let field = form?.getFieldInstance(fieldName);\n\n if (field) {\n field.rules = processedRules;\n }\n\n let isRequired = !!processedRules?.find(\n (rule) => 'required' in rule && rule.required === true,\n );\n\n useEffect(() => {\n if (!form) return;\n\n if (field) {\n form.forceReRender();\n } else {\n field = form.createField(fieldName);\n }\n }, [field]);\n\n if (form) {\n if (isFirstRender) {\n if (!field) {\n field = form.createField(fieldName, true);\n }\n\n if (field?.value == null && defaultValue != null) {\n form.setFieldValue(fieldName, defaultValue, false, true);\n form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n field = form?.getFieldInstance(fieldName);\n }\n }\n\n if (!field?.touched && defaultValue != null) {\n form.setFieldValue(fieldName, defaultValue, false, true);\n }\n }\n\n const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n if (!form) return;\n\n const field = form.getFieldInstance(fieldName);\n\n if (shouldUpdate) {\n const fieldsValue = form.getFieldsValue();\n\n // check if we should update the value of the field\n const shouldNotBeUpdated =\n typeof shouldUpdate === 'boolean'\n ? !shouldUpdate\n : !shouldUpdate(fieldsValue, {\n ...fieldsValue,\n [fieldName]: val,\n });\n\n if (shouldNotBeUpdated) {\n return;\n }\n }\n\n form.setFieldValue(fieldName, val, !dontTouch);\n\n if (\n !dontTouch &&\n (validateTrigger === 'onChange' \|\|\n (field && field.errors && field.errors.length))\n ) {\n form.validateField(fieldName).catch(() => {}); // do nothing on fail\n }\n });\n\n const onBlurHandler = useEvent(() => {\n if (validateTrigger === 'onBlur') {\n // We need a timeout so the change event can be done.\n setTimeout(() => {\n form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n });\n }\n });\n\n let value = field?.value;\n\n return useMemo(\n () => ({\n id: fieldId,\n name: fieldName,\n value,\n validateTrigger,\n form,\n field,\n nonInput,\n\n // Explicit validation props always win over the state derived from the form\n isInvalid: isInvalidProp ?? !!field?.errors?.length,\n isValid: isValidProp ?? !!(showValid && field?.status === 'valid'),\n ...(isRequired && { isRequired }),\n message:\n message !== undefined\n ? message\n : field?.status === 'invalid' && field?.errors?.[0],\n description,\n errorMessage:\n errorMessage !== undefined\n ? errorMessage\n : field?.status === 'invalid' && field?.errors?.length\n ? field.errors[0]\n : undefined,\n onBlur: onBlurHandler,\n onChange: onChangeHandler,\n }),\n [\n form,\n field,\n field?.value,\n field?.errors?.length,\n field?.status,\n fieldId,\n fieldName,\n isRequired,\n message,\n description,\n errorMessage,\n onBlurHandler,\n onChangeHandler,\n validateTrigger,\n isInvalidProp,\n isValidProp,\n showValid,\n nonInput,\n ],\n );\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";

package/dist/components/form/Label.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { LabelPosition, NecessityIndicator, ValidationState } from "../../shared/form.js";
+import { LabelPosition, NecessityIndicator, ValidationProps } from "../../shared/form.js";
 import "../../shared/index.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
@@ -7,14 +7,13 @@ import * as react from "react";
 //#region src/components/form/Label.d.ts
 declare const INLINE_LABEL_STYLES: Styles;
 declare const LABEL_STYLES: Styles;
-interface CubeLabelProps extends BaseProps, ContainerStyleProps {
+interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps {
   labelPosition?: LabelPosition;
   necessityIndicator?: NecessityIndicator;
   isRequired?: boolean;
   includeNecessityIndicatorInAccessibilityName?: boolean;
   htmlFor?: string;
   for?: string;
-  validationState?: ValidationState;
   size?: 'medium' | 'small';
 }
 declare let _Label: react.ForwardRefExoticComponent<CubeLabelProps & react.RefAttributes<unknown>>;

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
+import { getValidationMods } from "./validation/resolve-validation-props.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -56,7 +57,7 @@ const LabelElement = tasty({
 function Label(props, ref) {
 	props = useProviderProps(props);
 	const { t } = useI18n();
-	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, size = "medium", for: labelFor, ...otherProps } = props;
+	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
 	let domRef = useObjectRef(ref);
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
 	let requiredLabel = t("form.required", "(required)");
@@ -74,8 +75,10 @@ function Label(props, ref) {
 		mods: {
 			side: labelPosition === "side",
 			disabled: isDisabled,
-			invalid: validationState === "invalid",
-			valid: validationState === "valid"
+			...getValidationMods({
+				isInvalid,
+				isValid
+			})
 		},
 		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			children,