@cube-dev/ui-kit 0.147.3 → 0.148.0

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -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":"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"}
+{"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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -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

@@ -1,14 +1,20 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -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"}
+{"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

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -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":"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"}
+{"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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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

@@ -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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | 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,

package/dist/components/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.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 { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let requiredLabel = t('form.required', '(required)');\n  let necessityLabel = isRequired\n    ? requiredLabel\n    : t('form.optional', '(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName ? requiredLabel : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,gBAAgB,EAAE,iBAAiB,aAAa;CACpD,IAAI,iBAAiB,aACjB,gBACA,EAAE,iBAAiB,aAAa;CACpC,IAAI,OACF,oBAAC;EACC,cACE,+CAA+C,gBAAgB;YAGhE;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.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 { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let requiredLabel = t('form.required', '(required)');\n  let necessityLabel = isRequired\n    ? requiredLabel\n    : t('form.optional', '(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName ? requiredLabel : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,gBAAgB,EAAE,iBAAiB,aAAa;CACpD,IAAI,iBAAiB,aACjB,gBACA,EAAE,iBAAiB,aAAa;CACpC,IAAI,OACF,oBAAC;EACC,cACE,+CAA+C,gBAAgB;YAGhE;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/form/index.d.ts

@@ -13,7 +13,10 @@ import { UseFieldPropsParams, useFieldProps } from "./Form/use-field/use-field-p
 import { Form } from "./Form/index.js";
 import { wrapWithField } from "./wrapper.js";
 import { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label } from "./Label.js";
-import { CubeFieldWrapperProps } from "./FieldWrapper/types.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
-import { extractFieldWrapperProps } from "./FieldWrapper/extract-field-wrapper-props.js";
-import "./FieldWrapper/index.js";
+import { CubeFieldWrapperProps } from "./FieldWrapper/types.js";
+import "./FieldWrapper/index.js";
+import { ResolvableValidationProps, ResolvedValidationProps, getValidationMods, getValidationTheme, hasValidationState, resolveValidationProps } from "./validation/resolve-validation-props.js";
+import { useValidationProps } from "./validation/use-validation-props.js";
+import { ValidationIndicator, ValidationIndicatorProps, getValidationIcon, hasValidationIndicator } from "./validation/ValidationIndicator.js";
+import "./validation/index.js";

package/dist/components/form/validation/ValidationIndicator.d.ts

@@ -0,0 +1,28 @@
+
+import { ValidationProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { ReactElement } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/form/validation/ValidationIndicator.d.ts
+interface ValidationIndicatorProps extends ValidationProps {
+  isLoading?: boolean;
+}
+/** The validation icon for the current state, or `null` when there is nothing to show */
+declare function getValidationIcon({
+  isInvalid,
+  isValid
+}: ValidationProps): ReactElement | null;
+/**
+ * Whether an input needs to render the `data-element="State"` block. The loading indicator replaces the
+ * validation icon while the input is loading.
+ */
+declare function hasValidationIndicator(props: ValidationIndicatorProps): boolean;
+/**
+ * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the
+ * loading indicator.
+ */
+declare function ValidationIndicator(props: ValidationIndicatorProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ValidationIndicator, ValidationIndicatorProps, getValidationIcon, hasValidationIndicator };
+//# sourceMappingURL=ValidationIndicator.d.ts.map

package/dist/components/form/validation/ValidationIndicator.js

@@ -0,0 +1,37 @@
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { hasValidationState } from "./resolve-validation-props.js";
+import { InvalidIcon } from "../../shared/InvalidIcon.js";
+import { ValidIcon } from "../../shared/ValidIcon.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/validation/ValidationIndicator.tsx
+/** The validation icon for the current state, or `null` when there is nothing to show */
+function getValidationIcon({ isInvalid, isValid }) {
+	if (isInvalid) return InvalidIcon;
+	if (isValid) return ValidIcon;
+	return null;
+}
+/**
+* Whether an input needs to render the `data-element="State"` block. The loading indicator replaces the
+* validation icon while the input is loading.
+*/
+function hasValidationIndicator(props) {
+	return !!props.isLoading || hasValidationState(props);
+}
+/**
+* Renders the validation state of an input as a suffix: either the validation icon or, while loading, the
+* loading indicator.
+*/
+function ValidationIndicator(props) {
+	const { isLoading } = props;
+	if (!hasValidationIndicator(props)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-element": "State",
+		children: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : getValidationIcon(props)
+	});
+}
+
+//#endregion
+export { ValidationIndicator, getValidationIcon, hasValidationIndicator };
+//# sourceMappingURL=ValidationIndicator.js.map

package/dist/components/form/validation/ValidationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationIndicator.js","names":[],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/index';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,kBAAkB,EAChC,WACA,WACuC;AACvC,KAAI,UAAW,QAAO;AACtB,KAAI,QAAS,QAAO;AAEpB,QAAO;;;;;;AAOT,SAAgB,uBAAuB,OAAiC;AACtE,QAAO,CAAC,CAAC,MAAM,aAAa,mBAAmB,MAAM;;;;;;AAOvD,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,cAAc;AAEtB,KAAI,CAAC,uBAAuB,MAAM,CAChC,QAAO;AAGT,QACE,oBAAC;EAAI,gBAAa;YACf,YACC,oBAAC,eAAY,gBAAa,cAAc,GAExC,kBAAkB,MAAM;GAEtB"}

package/dist/components/form/validation/index.d.ts

@@ -0,0 +1,4 @@
+
+import { ResolvableValidationProps, ResolvedValidationProps, getValidationMods, getValidationTheme, hasValidationState, resolveValidationProps } from "./resolve-validation-props.js";
+import { useValidationProps } from "./use-validation-props.js";
+import { ValidationIndicator, ValidationIndicatorProps, getValidationIcon, hasValidationIndicator } from "./ValidationIndicator.js";

package/dist/components/form/validation/resolve-validation-props.d.ts

@@ -0,0 +1,51 @@
+
+import { ValidationProps, ValidationState } from "../../../shared/form.js";
+import "../../../shared/index.js";
+
+//#region src/components/form/validation/resolve-validation-props.d.ts
+interface ResolvableValidationProps extends ValidationProps {
+  /** @deprecated Use `isInvalid` / `isValid` instead. */
+  validationState?: ValidationState;
+}
+interface ResolvedValidationProps {
+  isInvalid: boolean | undefined;
+  isValid: boolean | undefined;
+}
+/**
+ * Normalizes the validation props of a field into a pair of booleans.
+ *
+ * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay
+ * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any
+ * of them is provided, both flags become definite booleans and no fallback applies.
+ *
+ * `isInvalid` always wins over `isValid`.
+ */
+declare function resolveValidationProps(props: ResolvableValidationProps): ResolvedValidationProps;
+/** Whether the field has a validation state worth rendering an indicator for */
+declare function hasValidationState({
+  isInvalid,
+  isValid
+}: ValidationProps): boolean;
+/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */
+declare function getValidationMods({
+  isInvalid,
+  isValid
+}: ValidationProps): {
+  invalid: boolean;
+  valid: boolean;
+};
+/**
+ * Maps the validation state onto a theme name for triggers and items.
+ *
+ * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon
+ * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.
+ */
+declare function getValidationTheme<T extends string | undefined>(theme: T, {
+  isInvalid,
+  isValid
+}: ValidationProps, options?: {
+  includeValid?: boolean;
+}): T | 'danger' | 'success';
+//#endregion
+export { ResolvableValidationProps, ResolvedValidationProps, getValidationMods, getValidationTheme, hasValidationState, resolveValidationProps };
+//# sourceMappingURL=resolve-validation-props.d.ts.map

package/dist/components/form/validation/resolve-validation-props.js

@@ -0,0 +1,49 @@
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
+//#region src/components/form/validation/resolve-validation-props.ts
+/**
+* Normalizes the validation props of a field into a pair of booleans.
+*
+* When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay
+* `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any
+* of them is provided, both flags become definite booleans and no fallback applies.
+*
+* `isInvalid` always wins over `isValid`.
+*/
+function resolveValidationProps(props) {
+	const { isInvalid, isValid, validationState } = props;
+	if (isInvalid === void 0 && isValid === void 0 && validationState === void 0) return {
+		isInvalid: void 0,
+		isValid: void 0
+	};
+	const resolvedIsInvalid = isInvalid ?? validationState === "invalid";
+	return {
+		isInvalid: resolvedIsInvalid,
+		isValid: resolvedIsInvalid ? false : isValid ?? validationState === "valid"
+	};
+}
+/** Whether the field has a validation state worth rendering an indicator for */
+function hasValidationState({ isInvalid, isValid }) {
+	return !!isInvalid || !!isValid;
+}
+/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */
+function getValidationMods({ isInvalid, isValid }) {
+	return {
+		invalid: !!isInvalid,
+		valid: !!isValid && !isInvalid
+	};
+}
+/**
+* Maps the validation state onto a theme name for triggers and items.
+*
+* By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon
+* communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.
+*/
+function getValidationTheme(theme, { isInvalid, isValid }, options = {}) {
+	if (isInvalid) return "danger";
+	if (options.includeValid && isValid) return "success";
+	return theme;
+}
+
+//#endregion
+export { getValidationMods, getValidationTheme, hasValidationState, resolveValidationProps };
+//# sourceMappingURL=resolve-validation-props.js.map

package/dist/components/form/validation/resolve-validation-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-validation-props.js","names":[],"sources":["../../../../src/components/form/validation/resolve-validation-props.ts"],"sourcesContent":["import { ValidationProps, ValidationState } from '../../../shared/index';\n\nexport interface ResolvableValidationProps extends ValidationProps {\n  /** @deprecated Use `isInvalid` / `isValid` instead. */\n  validationState?: ValidationState;\n}\n\nexport interface ResolvedValidationProps {\n  isInvalid: boolean | undefined;\n  isValid: boolean | undefined;\n}\n\n/**\n * Normalizes the validation props of a field into a pair of booleans.\n *\n * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay\n * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any\n * of them is provided, both flags become definite booleans and no fallback applies.\n *\n * `isInvalid` always wins over `isValid`.\n */\nexport function resolveValidationProps(\n  props: ResolvableValidationProps,\n): ResolvedValidationProps {\n  const { isInvalid, isValid, validationState } = props;\n\n  if (\n    isInvalid === undefined &&\n    isValid === undefined &&\n    validationState === undefined\n  ) {\n    return { isInvalid: undefined, isValid: undefined };\n  }\n\n  const resolvedIsInvalid = isInvalid ?? validationState === 'invalid';\n\n  return {\n    isInvalid: resolvedIsInvalid,\n    isValid: resolvedIsInvalid ? false : isValid ?? validationState === 'valid',\n  };\n}\n\n/** Whether the field has a validation state worth rendering an indicator for */\nexport function hasValidationState({\n  isInvalid,\n  isValid,\n}: ValidationProps): boolean {\n  return !!isInvalid || !!isValid;\n}\n\n/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */\nexport function getValidationMods({ isInvalid, isValid }: ValidationProps) {\n  return {\n    invalid: !!isInvalid,\n    valid: !!isValid && !isInvalid,\n  };\n}\n\n/**\n * Maps the validation state onto a theme name for triggers and items.\n *\n * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon\n * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.\n */\nexport function getValidationTheme<T extends string | undefined>(\n  theme: T,\n  { isInvalid, isValid }: ValidationProps,\n  options: { includeValid?: boolean } = {},\n): T | 'danger' | 'success' {\n  if (isInvalid) return 'danger';\n  if (options.includeValid && isValid) return 'success';\n\n  return theme;\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,uBACd,OACyB;CACzB,MAAM,EAAE,WAAW,SAAS,oBAAoB;AAEhD,KACE,cAAc,UACd,YAAY,UACZ,oBAAoB,OAEpB,QAAO;EAAE,WAAW;EAAW,SAAS;EAAW;CAGrD,MAAM,oBAAoB,aAAa,oBAAoB;AAE3D,QAAO;EACL,WAAW;EACX,SAAS,oBAAoB,QAAQ,WAAW,oBAAoB;EACrE;;;AAIH,SAAgB,mBAAmB,EACjC,WACA,WAC2B;AAC3B,QAAO,CAAC,CAAC,aAAa,CAAC,CAAC;;;AAI1B,SAAgB,kBAAkB,EAAE,WAAW,WAA4B;AACzE,QAAO;EACL,SAAS,CAAC,CAAC;EACX,OAAO,CAAC,CAAC,WAAW,CAAC;EACtB;;;;;;;;AASH,SAAgB,mBACd,OACA,EAAE,WAAW,WACb,UAAsC,EAAE,EACd;AAC1B,KAAI,UAAW,QAAO;AACtB,KAAI,QAAQ,gBAAgB,QAAS,QAAO;AAE5C,QAAO"}