@cube-dev/ui-kit 0.147.3 → 0.148.0

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

@@ -1,17 +1,13 @@
-/** @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 { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
-import { LoadingIcon } from "../../../icons/LoadingIcon.js";
-import { useProviderProps } from "../../../provider.js";
-import { useFormProps } from "../../form/Form/Form.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
+import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { InvalidIcon } from "../../shared/InvalidIcon.js";
-import { ValidIcon } from "../../shared/ValidIcon.js";
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
-import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHover } from "react-aria";
 import { createFocusableRef } from "@react-spectrum/utils";
@@ -159,17 +155,13 @@ const InputElement = tasty({
 	qa: "Input",
 	styles: DEFAULT_INPUT_STYLES
 });
+/**
+* The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but
+* never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,
+* `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).
+*/
 function _TextInputBase(props, ref) {
-	props = useProviderProps(props);
-	props = useFormProps(props);
-	props = useFieldProps(props, {
-		defaultValidationTrigger: "onBlur",
-		valuePropsMapper: ({ value, onChange }) => ({
-			value: typeof value === "string" || typeof value === "number" ? String(value) : "",
-			onChange
-		})
-	});
-	let { qa, mods, validationState, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", wrapperRef, tooltip, rows = 1, size = "medium", autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
+	let { qa, mods, isInvalid, isValid, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", wrapperRef, tooltip, rows = 1, size = "medium", autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
 	let styles = extractStyles(otherProps, PROP_STYLES);
 	let type = otherProps.type;
 	if (resize) inputStyles = {
@@ -190,8 +182,11 @@ function _TextInputBase(props, ref) {
 			return inputRef?.current;
 		}
 	}));
-	let isInvalid = validationState === "invalid";
-	let validation = cloneElement(isInvalid ? InvalidIcon : ValidIcon);
+	const showValidationIndicator = hasValidationIndicator({
+		isInvalid,
+		isValid,
+		isLoading
+	});
 	if (!inputProps?.placeholder) {
 		if (!inputProps) inputProps = {};
 		inputProps.placeholder = " ";
@@ -205,20 +200,23 @@ function _TextInputBase(props, ref) {
 		else prefix = icon;
 	}
 	const modifiers = useMemo(() => ({
-		invalid: isInvalid,
-		valid: validationState === "valid",
+		...getValidationMods({
+			isInvalid,
+			isValid
+		}),
 		loadable: !!loadingIndicator,
 		focused: isFocused,
 		hovered: isHovered,
 		disabled: isDisabled,
 		multiline: multiLine,
 		prefix: !!prefix,
-		suffix: validationState && !isLoading || isLoading || !!suffix,
+		suffix: showValidationIndicator || !!suffix,
 		...mods
 	}), [
 		mods,
 		isInvalid,
-		validationState,
+		isValid,
+		showValidationIndicator,
 		loadingIndicator,
 		isFocused,
 		isDisabled,
@@ -257,22 +255,20 @@ function _TextInputBase(props, ref) {
 				maxLength,
 				minLength
 			}),
-			validationState && !isLoading || isLoading || suffix ? /* @__PURE__ */ jsxs("div", {
+			showValidationIndicator || suffix ? /* @__PURE__ */ jsxs("div", {
 				"data-element": "Suffix",
 				children: [
 					suffixPosition === "before" ? suffix : null,
-					validationState && !isLoading || isLoading ? /* @__PURE__ */ jsxs("div", {
-						"data-element": "State",
-						children: [validationState && !isLoading ? validation : null, isLoading && /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" })]
-					}) : null,
+					/* @__PURE__ */ jsx(ValidationIndicator, {
+						isInvalid,
+						isValid,
+						isLoading
+					}),
 					suffixPosition === "after" ? suffix : null
 				]
 			}) : null
 		]
-	}), domRef, {
-		...props,
-		form: void 0
-	});
+	}), domRef, props);
 }
 const TextInputBase = forwardRef(_TextInputBase);
 

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#surface',\n    disabled: '#disabled-surface',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '&::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<AriaTextFieldProps, 'validate'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  autocomplete?: string;\n}\n\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange,\n    }),\n  });\n\n  let {\n    qa,\n    mods,\n    validationState,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    wrapperRef,\n    tooltip,\n    rows = 1,\n    size = 'medium',\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    resize,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, PROP_STYLES);\n  let type = otherProps.type;\n\n  if (resize) {\n    inputStyles = { ...inputStyles, resize };\n  }\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      validationState,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n    ],\n  );\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? rows : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={autocomplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n              {isLoading && <LoadingIcon data-element=\"InputIcon\" />}\n            </div>\n          ) : null}\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, {\n    ...props,\n    form: undefined,\n  });\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}
+{"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#surface',\n    disabled: '#disabled-surface',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '&::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<AriaTextFieldProps, 'validate'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  autocomplete?: string;\n}\n\n/**\n * The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  let {\n    qa,\n    mods,\n    isInvalid,\n    isValid,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    wrapperRef,\n    tooltip,\n    rows = 1,\n    size = 'medium',\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    resize,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, PROP_STYLES);\n  let type = otherProps.type;\n\n  if (resize) {\n    inputStyles = { ...inputStyles, resize };\n  }\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      ...getValidationMods({ isInvalid, isValid }),\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: showValidationIndicator || !!suffix,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      isValid,\n      showValidationIndicator,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n    ],\n  );\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? rows : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={autocomplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

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

@@ -29,6 +29,8 @@ interface CubeTextInputMapperInputProps {
   onChange?: (id: number, newValue: string) => void;
   onSubmit?: (id: number) => void;
   isDisabled?: boolean;
+  isInvalid?: boolean;
+  isValid?: boolean;
   autoFocus?: boolean;
   allowsCustomValue?: boolean;
 }

package/dist/components/fields/TextInputMapper/TextInputMapper.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 { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -10,7 +10,6 @@ import { PlusIcon } from "../../../icons/PlusIcon.js";
 import { Button } from "../../actions/index.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";
-import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { TextInput } from "../TextInput/TextInput.js";
@@ -36,7 +35,6 @@ function removeDuplicates(mappings) {
 function TextInputMapper(props, ref) {
 	const { t } = useI18n();
 	ref = useCombinedRefs(ref);
-	props = useFormProps(props);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -45,7 +43,7 @@ function TextInputMapper(props, ref) {
 		})
 	});
 	const counterRef = useRef(0);
-	let { qa, isDisabled, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = "medium", form } = props;
+	let { qa, isDisabled, isInvalid, isValid, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = "medium", form } = props;
 	function extractLocalValues(value, localValues) {
 		const valueKeys = Object.keys(value);
 		localValues.map(({ key }) => key).forEach((key) => {
@@ -122,6 +120,8 @@ function TextInputMapper(props, ref) {
 						autoFocus: index === mappings.length - 1,
 						id,
 						isDisabled,
+						isInvalid,
+						isValid,
 						fieldType: "key",
 						value: key,
 						placeholder: t("textInputMapper.key", "Key"),
@@ -134,6 +134,8 @@ function TextInputMapper(props, ref) {
 						id,
 						fieldType: "value",
 						isDisabled: !key || isDisabled,
+						isInvalid,
+						isValid,
 						value,
 						placeholder: t("textInputMapper.value", "Value"),
 						size,
@@ -155,7 +157,13 @@ function TextInputMapper(props, ref) {
 				]
 			}, id);
 		});
-	}, [JSON.stringify(mappings), t]);
+	}, [
+		JSON.stringify(mappings),
+		t,
+		isDisabled,
+		isInvalid,
+		isValid
+	]);
 	return wrapWithField(/* @__PURE__ */ jsxs(Flow, {
 		ref,
 		gap: "1x",

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n  ComponentType,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon, PlusIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n  qa?: string;\n  actionLabel?: string;\n  isDisabled?: boolean;\n  value?: Record<string, string>;\n  onChange?: (value: Record<string, string> | undefined) => void;\n  KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  keyProps?: Partial<CubeTextInputMapperInputProps>;\n  valueProps?: Partial<CubeTextInputMapperInputProps>;\n  allowsCustomValue?: boolean;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n  styles: {\n    InputArea: {\n      gridColumn: {\n        '': 'auto',\n        'has-sider': 'auto',\n      },\n    },\n  },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n  const keys = new Set<string>();\n\n  return mappings.filter(({ key }) => {\n    if (keys.has(key)) {\n      return false;\n    }\n\n    keys.add(key);\n\n    return true;\n  });\n}\n\nfunction TextInputMapper(\n  props: CubeTextInputMapperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  ref = useCombinedRefs(ref);\n\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : {},\n      onChange: onChange,\n    }),\n  });\n\n  const counterRef = useRef(0);\n\n  let {\n    qa,\n    isDisabled,\n    actionLabel,\n    value,\n    onChange,\n    keyProps,\n    valueProps,\n    KeyComponent,\n    ValueComponent,\n    size = 'medium',\n    form,\n  } = props;\n\n  function extractLocalValues(\n    value: Record<string, string>,\n    localValues: Mapping[],\n  ) {\n    const valueKeys = Object.keys(value);\n    const localKeys = localValues.map(({ key }) => key);\n\n    localKeys.forEach((key) => {\n      if (!valueKeys.includes(key) && key !== '') {\n        localValues = localValues.filter(({ key: k }) => k !== key);\n      }\n    });\n\n    Object.entries(value ?? {}).forEach(([key, value]) => {\n      const exist = localValues.find(({ key: k }) => k === key);\n\n      if (exist) {\n        exist.value = value;\n      } else {\n        localValues.push({ key, value, id: counterRef.current++ });\n      }\n    });\n\n    return removeDuplicates(localValues);\n  }\n\n  const [mappings, setMappings] = useState(() => {\n    return extractLocalValues(value ?? {}, []);\n  });\n\n  useEffect(() => {\n    setMappings(extractLocalValues(value ?? {}, mappings));\n  }, [JSON.stringify(value)]);\n\n  const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n    const newValue = newMappings.reduce(\n      (acc, { key, value }) => {\n        acc[key.trim()] = value.trim();\n\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n\n    const keys = Object.keys(newValue);\n\n    if (!keys.length) {\n      onChange?.(undefined);\n    } else {\n      onChange?.(newValue);\n    }\n\n    const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n    if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n      setMappings(updatedMappings);\n    }\n  });\n\n  // useEffect(() => {\n  //   // focus on the last non-disabled input\n  //   setTimeout(() => {\n  //     (\n  //       ref?.current?.querySelector(\n  //         '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n  //       ) as HTMLInputElement\n  //     )?.focus();\n  //   }, 100);\n  // }, [mappings.length]);\n\n  const addNewMapping = useEvent(() => {\n    setMappings((prev) => {\n      return [...prev, { key: '', value: '', id: counterRef.current++ }];\n    });\n  });\n\n  const showNewButton = useMemo(() => {\n    return (\n      !mappings.length || !mappings.some(({ key, value }) => !key || !value)\n    );\n  }, [mappings]);\n\n  KeyComponent = KeyComponent ?? TextInputMapperInput;\n  ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n  const onKeyChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.key = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onValueChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.value = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onSubmit = useEvent(() => {\n    onMappingsChange(mappings);\n  });\n\n  const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {\n      addNewMapping();\n    }\n  });\n\n  const renderedMappings = useMemo(() => {\n    return mappings.map((mapping, index) => {\n      const { key, value, id } = mapping;\n\n      return (\n        <Grid\n          key={id}\n          qa=\"Mapping\"\n          columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n          gap=\"1x\"\n        >\n          <KeyComponent\n            autoFocus={index === mappings.length - 1}\n            id={id}\n            isDisabled={isDisabled}\n            fieldType=\"key\"\n            value={key}\n            placeholder={t('textInputMapper.key', 'Key')}\n            size={size}\n            onChange={onKeyChange}\n            onSubmit={onSubmit}\n            {...keyProps}\n          />\n          <ValueComponent\n            id={id}\n            fieldType=\"value\"\n            isDisabled={!key || isDisabled}\n            value={value}\n            placeholder={t('textInputMapper.value', 'Value')}\n            size={size}\n            onChange={onValueChange}\n            onSubmit={onSubmit}\n            {...valueProps}\n          />\n          <Button\n            aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n            theme=\"danger\"\n            type=\"clear\"\n            size={size}\n            icon={<CloseIcon />}\n            onPress={() => {\n              setMappings(mappings.filter((m) => m.id !== id));\n              onMappingsChange(mappings.filter((m) => m.id !== id));\n            }}\n          />\n        </Grid>\n      );\n    });\n  }, [JSON.stringify(mappings), t]);\n\n  const element = (\n    <Flow\n      ref={ref}\n      gap=\"1x\"\n      data-qa={qa || 'TextInputMapper'}\n      data-input-type=\"textinputmapper\"\n      onKeyDown={onKeyDown}\n    >\n      {[...renderedMappings]}\n      {showNewButton ? (\n        <Space gap={0}>\n          {/** Hotfix for inconsistent alignment with the label **/}\n          <Block styles={{ overflow: 'clip', width: 'max 0px' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel ? actionLabel : 'Mapping'}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n  id: number;\n  fieldType: 'key' | 'value';\n  inputType?: 'input' | 'combobox' | 'password' | 'textarea';\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: string;\n  options?: string[];\n  placeholder?: string;\n  onChange?: (id: number, newValue: string) => void;\n  onSubmit?: (id: number) => void;\n  isDisabled?: boolean;\n  autoFocus?: boolean;\n  allowsCustomValue?: boolean;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n  const {\n    id,\n    fieldType,\n    inputType = 'input',\n    options,\n    value,\n    size = 'medium',\n    placeholder,\n    allowsCustomValue,\n    ...rest\n  } = props;\n\n  const onChange = useEvent((newValue: string) => {\n    props.onChange?.(id, newValue);\n  });\n\n  const onBlur = useEvent(() => {\n    props.onSubmit?.(id);\n  });\n\n  const onSelectionChange = useEvent((newValue: string) => {\n    if (!allowsCustomValue && !options?.includes(newValue)) {\n      props.onChange?.(id, '');\n    } else {\n      props.onChange?.(id, newValue);\n    }\n\n    props.onSubmit?.(id);\n  });\n\n  const Component = {\n    input: TextInput,\n    textarea: TextArea,\n    password: PasswordInput,\n  }[inputType];\n\n  if (inputType === 'combobox') {\n    return (\n      <ComboBox\n        qa=\"AddMapping\"\n        data-type={fieldType}\n        width=\"auto\"\n        size={size}\n        {...mergeProps(rest, PROPS_GRID_HACK)}\n        id={undefined}\n        inputValue={value}\n        selectedKey={value}\n        labelPosition=\"top\"\n        aria-label={placeholder}\n        placeholder={placeholder}\n        allowsCustomValue={allowsCustomValue}\n        onInputChange={onChange}\n        onSelectionChange={(val) => onSelectionChange(val ?? '')}\n      >\n        {(options ?? []).map((option) => (\n          <ComboBox.Item key={option}>{option}</ComboBox.Item>\n        ))}\n      </ComboBox>\n    );\n  }\n\n  return (\n    <Component\n      qa=\"AddMapping\"\n      data-type={fieldType}\n      width=\"auto\"\n      rows={1}\n      size={size}\n      {...mergeProps(rest, PROPS_GRID_HACK)}\n      id={undefined}\n      value={value}\n      labelPosition=\"top\"\n      aria-label={placeholder}\n      placeholder={placeholder}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}
+{"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n  ComponentType,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon, PlusIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n  qa?: string;\n  actionLabel?: string;\n  isDisabled?: boolean;\n  value?: Record<string, string>;\n  onChange?: (value: Record<string, string> | undefined) => void;\n  KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  keyProps?: Partial<CubeTextInputMapperInputProps>;\n  valueProps?: Partial<CubeTextInputMapperInputProps>;\n  allowsCustomValue?: boolean;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n  styles: {\n    InputArea: {\n      gridColumn: {\n        '': 'auto',\n        'has-sider': 'auto',\n      },\n    },\n  },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n  const keys = new Set<string>();\n\n  return mappings.filter(({ key }) => {\n    if (keys.has(key)) {\n      return false;\n    }\n\n    keys.add(key);\n\n    return true;\n  });\n}\n\nfunction TextInputMapper(\n  props: CubeTextInputMapperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  ref = useCombinedRefs(ref);\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : {},\n      onChange: onChange,\n    }),\n  });\n\n  const counterRef = useRef(0);\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    actionLabel,\n    value,\n    onChange,\n    keyProps,\n    valueProps,\n    KeyComponent,\n    ValueComponent,\n    size = 'medium',\n    form,\n  } = props;\n\n  function extractLocalValues(\n    value: Record<string, string>,\n    localValues: Mapping[],\n  ) {\n    const valueKeys = Object.keys(value);\n    const localKeys = localValues.map(({ key }) => key);\n\n    localKeys.forEach((key) => {\n      if (!valueKeys.includes(key) && key !== '') {\n        localValues = localValues.filter(({ key: k }) => k !== key);\n      }\n    });\n\n    Object.entries(value ?? {}).forEach(([key, value]) => {\n      const exist = localValues.find(({ key: k }) => k === key);\n\n      if (exist) {\n        exist.value = value;\n      } else {\n        localValues.push({ key, value, id: counterRef.current++ });\n      }\n    });\n\n    return removeDuplicates(localValues);\n  }\n\n  const [mappings, setMappings] = useState(() => {\n    return extractLocalValues(value ?? {}, []);\n  });\n\n  useEffect(() => {\n    setMappings(extractLocalValues(value ?? {}, mappings));\n  }, [JSON.stringify(value)]);\n\n  const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n    const newValue = newMappings.reduce(\n      (acc, { key, value }) => {\n        acc[key.trim()] = value.trim();\n\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n\n    const keys = Object.keys(newValue);\n\n    if (!keys.length) {\n      onChange?.(undefined);\n    } else {\n      onChange?.(newValue);\n    }\n\n    const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n    if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n      setMappings(updatedMappings);\n    }\n  });\n\n  // useEffect(() => {\n  //   // focus on the last non-disabled input\n  //   setTimeout(() => {\n  //     (\n  //       ref?.current?.querySelector(\n  //         '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n  //       ) as HTMLInputElement\n  //     )?.focus();\n  //   }, 100);\n  // }, [mappings.length]);\n\n  const addNewMapping = useEvent(() => {\n    setMappings((prev) => {\n      return [...prev, { key: '', value: '', id: counterRef.current++ }];\n    });\n  });\n\n  const showNewButton = useMemo(() => {\n    return (\n      !mappings.length || !mappings.some(({ key, value }) => !key || !value)\n    );\n  }, [mappings]);\n\n  KeyComponent = KeyComponent ?? TextInputMapperInput;\n  ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n  const onKeyChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.key = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onValueChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.value = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onSubmit = useEvent(() => {\n    onMappingsChange(mappings);\n  });\n\n  const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {\n      addNewMapping();\n    }\n  });\n\n  const renderedMappings = useMemo(() => {\n    return mappings.map((mapping, index) => {\n      const { key, value, id } = mapping;\n\n      return (\n        <Grid\n          key={id}\n          qa=\"Mapping\"\n          columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n          gap=\"1x\"\n        >\n          <KeyComponent\n            autoFocus={index === mappings.length - 1}\n            id={id}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            fieldType=\"key\"\n            value={key}\n            placeholder={t('textInputMapper.key', 'Key')}\n            size={size}\n            onChange={onKeyChange}\n            onSubmit={onSubmit}\n            {...keyProps}\n          />\n          <ValueComponent\n            id={id}\n            fieldType=\"value\"\n            isDisabled={!key || isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            value={value}\n            placeholder={t('textInputMapper.value', 'Value')}\n            size={size}\n            onChange={onValueChange}\n            onSubmit={onSubmit}\n            {...valueProps}\n          />\n          <Button\n            aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n            theme=\"danger\"\n            type=\"clear\"\n            size={size}\n            icon={<CloseIcon />}\n            onPress={() => {\n              setMappings(mappings.filter((m) => m.id !== id));\n              onMappingsChange(mappings.filter((m) => m.id !== id));\n            }}\n          />\n        </Grid>\n      );\n    });\n  }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n  const element = (\n    <Flow\n      ref={ref}\n      gap=\"1x\"\n      data-qa={qa || 'TextInputMapper'}\n      data-input-type=\"textinputmapper\"\n      onKeyDown={onKeyDown}\n    >\n      {[...renderedMappings]}\n      {showNewButton ? (\n        <Space gap={0}>\n          {/** Hotfix for inconsistent alignment with the label **/}\n          <Block styles={{ overflow: 'clip', width: 'max 0px' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel ? actionLabel : 'Mapping'}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n  id: number;\n  fieldType: 'key' | 'value';\n  inputType?: 'input' | 'combobox' | 'password' | 'textarea';\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: string;\n  options?: string[];\n  placeholder?: string;\n  onChange?: (id: number, newValue: string) => void;\n  onSubmit?: (id: number) => void;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  autoFocus?: boolean;\n  allowsCustomValue?: boolean;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n  const {\n    id,\n    fieldType,\n    inputType = 'input',\n    options,\n    value,\n    size = 'medium',\n    placeholder,\n    allowsCustomValue,\n    ...rest\n  } = props;\n\n  const onChange = useEvent((newValue: string) => {\n    props.onChange?.(id, newValue);\n  });\n\n  const onBlur = useEvent(() => {\n    props.onSubmit?.(id);\n  });\n\n  const onSelectionChange = useEvent((newValue: string) => {\n    if (!allowsCustomValue && !options?.includes(newValue)) {\n      props.onChange?.(id, '');\n    } else {\n      props.onChange?.(id, newValue);\n    }\n\n    props.onSubmit?.(id);\n  });\n\n  const Component = {\n    input: TextInput,\n    textarea: TextArea,\n    password: PasswordInput,\n  }[inputType];\n\n  if (inputType === 'combobox') {\n    return (\n      <ComboBox\n        qa=\"AddMapping\"\n        data-type={fieldType}\n        width=\"auto\"\n        size={size}\n        {...mergeProps(rest, PROPS_GRID_HACK)}\n        id={undefined}\n        inputValue={value}\n        selectedKey={value}\n        labelPosition=\"top\"\n        aria-label={placeholder}\n        placeholder={placeholder}\n        allowsCustomValue={allowsCustomValue}\n        onInputChange={onChange}\n        onSelectionChange={(val) => onSelectionChange(val ?? '')}\n      >\n        {(options ?? []).map((option) => (\n          <ComboBox.Item key={option}>{option}</ComboBox.Item>\n        ))}\n      </ComboBox>\n    );\n  }\n\n  return (\n    <Component\n      qa=\"AddMapping\"\n      data-type={fieldType}\n      width=\"auto\"\n      rows={1}\n      size={size}\n      {...mergeProps(rest, PROPS_GRID_HACK)}\n      id={undefined}\n      value={value}\n      labelPosition=\"top\"\n      aria-label={placeholder}\n      placeholder={placeholder}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAM,kBAAkB,EACtB,QAAQ,EACN,WAAW,EACT,YAAY;CACV,IAAI;CACJ,aAAa;CACd,EACF,EACF,EACF;AAGD,SAAS,iBAAiB,UAAqB;CAC7C,MAAM,uBAAO,IAAI,KAAa;AAE9B,QAAO,SAAS,QAAQ,EAAE,UAAU;AAClC,MAAI,KAAK,IAAI,IAAI,CACf,QAAO;AAGT,OAAK,IAAI,IAAI;AAEb,SAAO;GACP;;AAGJ,SAAS,gBACP,OACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,OAAM,gBAAgB,IAAI;AAE1B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,SAAS,OAAO,QAAQ,EAAE;GACvB;GACX;EACF,CAAC;CAEF,MAAM,aAAa,OAAO,EAAE;CAE5B,IAAI,EACF,IACA,YACA,WACA,SACA,aACA,OACA,UACA,UACA,YACA,cACA,gBACA,OAAO,UACP,SACE;CAEJ,SAAS,mBACP,OACA,aACA;EACA,MAAM,YAAY,OAAO,KAAK,MAAM;AAGpC,EAFkB,YAAY,KAAK,EAAE,UAAU,IAAI,CAEzC,SAAS,QAAQ;AACzB,OAAI,CAAC,UAAU,SAAS,IAAI,IAAI,QAAQ,GACtC,eAAc,YAAY,QAAQ,EAAE,KAAK,QAAQ,MAAM,IAAI;IAE7D;AAEF,SAAO,QAAQ,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;GACpD,MAAM,QAAQ,YAAY,MAAM,EAAE,KAAK,QAAQ,MAAM,IAAI;AAEzD,OAAI,MACF,OAAM,QAAQ;OAEd,aAAY,KAAK;IAAE;IAAK;IAAO,IAAI,WAAW;IAAW,CAAC;IAE5D;AAEF,SAAO,iBAAiB,YAAY;;CAGtC,MAAM,CAAC,UAAU,eAAe,eAAe;AAC7C,SAAO,mBAAmB,SAAS,EAAE,EAAE,EAAE,CAAC;GAC1C;AAEF,iBAAgB;AACd,cAAY,mBAAmB,SAAS,EAAE,EAAE,SAAS,CAAC;IACrD,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;CAE3B,MAAM,mBAAmB,UAAU,gBAA2B;EAC5D,MAAM,WAAW,YAAY,QAC1B,KAAK,EAAE,KAAK,YAAY;AACvB,OAAI,IAAI,MAAM,IAAI,MAAM,MAAM;AAE9B,UAAO;KAET,EAAE,CACH;AAID,MAAI,CAFS,OAAO,KAAK,SAAS,CAExB,OACR,YAAW,OAAU;MAErB,YAAW,SAAS;EAGtB,MAAM,kBAAkB,mBAAmB,YAAY,EAAE,EAAE,YAAY;AAEvE,MAAI,KAAK,UAAU,gBAAgB,KAAK,KAAK,UAAU,SAAS,CAC9D,aAAY,gBAAgB;GAE9B;CAaF,MAAM,gBAAgB,eAAe;AACnC,eAAa,SAAS;AACpB,UAAO,CAAC,GAAG,MAAM;IAAE,KAAK;IAAI,OAAO;IAAI,IAAI,WAAW;IAAW,CAAC;IAClE;GACF;CAEF,MAAM,gBAAgB,cAAc;AAClC,SACE,CAAC,SAAS,UAAU,CAAC,SAAS,MAAM,EAAE,KAAK,YAAY,CAAC,OAAO,CAAC,MAAM;IAEvE,CAAC,SAAS,CAAC;AAEd,gBAAe,gBAAgB;AAC/B,kBAAiB,kBAAkB;CAEnC,MAAM,cAAc,UAAU,IAAY,UAAkB;AAC1D,WAAS,SAAS,YAAY;AAC5B,OAAI,QAAQ,OAAO,GACjB,SAAQ,MAAM;IAEhB;AAEF,cAAY,CAAC,GAAG,SAAS,CAAC;GAC1B;CAEF,MAAM,gBAAgB,UAAU,IAAY,UAAkB;AAC5D,WAAS,SAAS,YAAY;AAC5B,OAAI,QAAQ,OAAO,GACjB,SAAQ,QAAQ;IAElB;AAEF,cAAY,CAAC,GAAG,SAAS,CAAC;GAC1B;CAEF,MAAM,WAAW,eAAe;AAC9B,mBAAiB,SAAS;GAC1B;CAEF,MAAM,YAAY,UAAU,MAAqC;AAE/D,OAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,WAAW,cACnD,gBAAe;GAEjB;CAEF,MAAM,mBAAmB,cAAc;AACrC,SAAO,SAAS,KAAK,SAAS,UAAU;GACtC,MAAM,EAAE,KAAK,OAAO,OAAO;AAE3B,UACE,qBAAC;IAEC,IAAG;IACH,SAAQ;IACR,KAAI;;KAEJ,oBAAC;MACC,WAAW,UAAU,SAAS,SAAS;MACnC;MACQ;MACD;MACF;MACT,WAAU;MACV,OAAO;MACP,aAAa,EAAE,uBAAuB,MAAM;MACtC;MACN,UAAU;MACA;MACV,GAAI;OACJ;KACF,oBAAC;MACK;MACJ,WAAU;MACV,YAAY,CAAC,OAAO;MACT;MACF;MACF;MACP,aAAa,EAAE,yBAAyB,QAAQ;MAC1C;MACN,UAAU;MACA;MACV,GAAI;OACJ;KACF,oBAAC;MACC,cAAY,EAAE,iCAAiC,iBAAiB;MAChE,OAAM;MACN,MAAK;MACC;MACN,MAAM,oBAAC,cAAY;MACnB,eAAe;AACb,mBAAY,SAAS,QAAQ,MAAM,EAAE,OAAO,GAAG,CAAC;AAChD,wBAAiB,SAAS,QAAQ,MAAM,EAAE,OAAO,GAAG,CAAC;;OAEvD;;MA1CG,GA2CA;IAET;IACD;EAAC,KAAK,UAAU,SAAS;EAAE;EAAG;EAAY;EAAW;EAAQ,CAAC;AA4BjE,QAAO,cAzBL,qBAAC;EACM;EACL,KAAI;EACJ,WAAS,MAAM;EACf,mBAAgB;EACL;aAEV,CAAC,GAAG,iBAAiB,EACrB,gBACC,qBAAC;GAAM,KAAK;cAEV,oBAAC;IAAM,QAAQ;KAAE,UAAU;KAAQ,OAAO;KAAW;cAAE;KAAc,EACrE,oBAAC;IACa;IACN;IACN,MAAM,oBAAC,aAAW;IAClB,SAAS;cAER,cAAc,cAAc;KACtB;IACH,GACN;GACC,EAGqB,KAAK,MAAM;;AAoB3C,SAAS,qBAAqB,OAAsC;CAClE,MAAM,EACJ,IACA,WACA,YAAY,SACZ,SACA,OACA,OAAO,UACP,aACA,mBACA,GAAG,SACD;CAEJ,MAAM,WAAW,UAAU,aAAqB;AAC9C,QAAM,WAAW,IAAI,SAAS;GAC9B;CAEF,MAAM,SAAS,eAAe;AAC5B,QAAM,WAAW,GAAG;GACpB;CAEF,MAAM,oBAAoB,UAAU,aAAqB;AACvD,MAAI,CAAC,qBAAqB,CAAC,SAAS,SAAS,SAAS,CACpD,OAAM,WAAW,IAAI,GAAG;MAExB,OAAM,WAAW,IAAI,SAAS;AAGhC,QAAM,WAAW,GAAG;GACpB;CAEF,MAAM,YAAY;EAChB,OAAO;EACP,UAAUA;EACV,UAAUC;EACX,CAAC;AAEF,KAAI,cAAc,WAChB,QACE,oBAAC;EACC,IAAG;EACH,aAAW;EACX,OAAM;EACA;EACN,GAAI,WAAW,MAAM,gBAAgB;EACrC,IAAI;EACJ,YAAY;EACZ,aAAa;EACb,eAAc;EACd,cAAY;EACC;EACM;EACnB,eAAe;EACf,oBAAoB,QAAQ,kBAAkB,OAAO,GAAG;aAEtD,WAAW,EAAE,EAAE,KAAK,WACpB,oBAAC,SAAS,kBAAmB,UAAT,OAAgC,CACpD;GACO;AAIf,QACE,oBAAC;EACC,IAAG;EACH,aAAW;EACX,OAAM;EACN,MAAM;EACA;EACN,GAAI,WAAW,MAAM,gBAAgB;EACrC,IAAI;EACG;EACP,eAAc;EACd,cAAY;EACC;EACH;EACF;GACR;;AAIN,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,iBAAiB,cAAc"}

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

@@ -1,5 +1,9 @@
 
-import { CubeFieldWrapperProps } from "./types.js";
+import { LabelPosition, NecessityIndicator, ValidationProps } from "../../../shared/form.js";
+import { CubeLabelProps } from "../Label.js";
+import "../index.js";
+import "../../../index.js";
+import * as _tenphi_tasty0 from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/form/FieldWrapper/FieldWrapper.d.ts
@@ -7,7 +11,30 @@ import * as react from "react";
  * A wrapper for form fields to provide additional decoration for inputs.
  * @internal Do not use this component directly.
  */
-declare const FieldWrapper: react.ForwardRefExoticComponent<CubeFieldWrapperProps & react.RefAttributes<unknown>>;
+declare const FieldWrapper: react.ForwardRefExoticComponent<ValidationProps & {
+  as?: keyof HTMLElementTagNameMap;
+  styles?: _tenphi_tasty0.Styles;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  fieldProps?: _tenphi_tasty0.Props;
+  isHidden?: boolean;
+  label?: react.ReactNode;
+  labelPosition?: LabelPosition;
+  labelSuffix?: react.ReactNode;
+  labelStyles?: _tenphi_tasty0.Styles;
+  labelProps?: CubeLabelProps;
+  description?: react.ReactNode;
+  requiredMark?: boolean;
+  tooltip?: react.ReactNode;
+  extra?: react.ReactNode;
+  necessityLabel?: react.ReactNode;
+  necessityIndicator?: NecessityIndicator;
+  message?: string | react.ReactNode;
+  messageStyles?: _tenphi_tasty0.Styles;
+  errorMessage?: string | react.ReactNode;
+  Component?: react.ReactElement;
+  children?: react.ReactNode;
+} & react.RefAttributes<unknown>>;
 //#endregion
 export { FieldWrapper };
 //# sourceMappingURL=FieldWrapper.d.ts.map

package/dist/components/form/FieldWrapper/FieldWrapper.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 { 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

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

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

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

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

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