@cube-dev/ui-kit 0.0.0-canary-bef9600 → 0.0.0-canary-e3f8a1a

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { useDisplayedValidation } from "../TextInput/displayed-validation.js";
 import { useAutoSizeTextArea } from "../TextInput/useAutoSizeTextArea.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useRef } from "react";
@@ -13,7 +14,7 @@ import { useTextField } from "react-aria";
 
 //#region src/components/fields/TextArea/TextArea.tsx
 function TextArea(rawProps, ref) {
-	const $ = c(40);
+	const $ = c(31);
 	let t0;
 	if ($[0] !== rawProps) {
 		t0 = castNullableStringValue(rawProps);
@@ -70,78 +71,63 @@ function TextArea(rawProps, ref) {
 		$[12] = t9;
 	} else t9 = $[12];
 	const adjustHeight = useAutoSizeTextArea(t9);
-	const t10 = buffered.value;
-	let t11;
-	if ($[13] !== adjustHeight || $[14] !== buffered.onChange) {
-		t11 = chain(buffered.onChange, adjustHeight);
-		$[13] = adjustHeight;
-		$[14] = buffered.onChange;
-		$[15] = t11;
-	} else t11 = $[15];
-	const t12 = chain(otherProps.onBlur, buffered.reset);
+	const displayedValidation = useDisplayedValidation();
+	const { labelProps, inputProps, ...validation } = useTextField(displayedValidation.trackTouched({
+		...otherProps,
+		value: buffered.value,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		onChange: chain(buffered.onChange, adjustHeight),
+		onBlur: chain(otherProps.onBlur, buffered.reset),
+		inputElementType: "textarea"
+	}), inputRef);
+	let t10;
+	if ($[13] !== labelProps || $[14] !== userLabelProps) {
+		t10 = mergeProps$1(labelProps, userLabelProps);
+		$[13] = labelProps;
+		$[14] = userLabelProps;
+		$[15] = t10;
+	} else t10 = $[15];
+	const mergedLabelProps = t10;
+	const T0 = TextInputBase;
+	const t11 = displayedValidation.getDisplayedValidation(otherProps, validation);
+	let t12;
+	if ($[16] !== inputProps || $[17] !== userInputProps) {
+		t12 = mergeProps$1(inputProps, { "data-input-type": "textarea" }, userInputProps);
+		$[16] = inputProps;
+		$[17] = userInputProps;
+		$[18] = t12;
+	} else t12 = $[18];
 	let t13;
-	if ($[16] !== buffered.value || $[17] !== isDisabled || $[18] !== isReadOnly || $[19] !== isRequired || $[20] !== otherProps || $[21] !== t11 || $[22] !== t12) {
-		t13 = {
-			...otherProps,
-			value: t10,
-			isDisabled,
-			isReadOnly,
-			isRequired,
-			onChange: t11,
-			onBlur: t12,
-			inputElementType: "textarea"
-		};
-		$[16] = buffered.value;
-		$[17] = isDisabled;
-		$[18] = isReadOnly;
-		$[19] = isRequired;
-		$[20] = otherProps;
-		$[21] = t11;
-		$[22] = t12;
-		$[23] = t13;
-	} else t13 = $[23];
-	const { labelProps, inputProps } = useTextField(t13, inputRef);
-	let t14;
-	if ($[24] !== labelProps || $[25] !== userLabelProps) {
-		t14 = mergeProps$1(labelProps, userLabelProps);
-		$[24] = labelProps;
-		$[25] = userLabelProps;
-		$[26] = t14;
-	} else t14 = $[26];
-	const mergedLabelProps = t14;
-	let t15;
-	if ($[27] !== inputProps || $[28] !== userInputProps) {
-		t15 = mergeProps$1(inputProps, { "data-input-type": "textarea" }, userInputProps);
-		$[27] = inputProps;
-		$[28] = userInputProps;
-		$[29] = t15;
-	} else t15 = $[29];
-	let t16;
-	if ($[30] !== inputRef || $[31] !== isDisabled || $[32] !== isReadOnly || $[33] !== isRequired || $[34] !== mergedLabelProps || $[35] !== otherProps || $[36] !== ref || $[37] !== rows || $[38] !== t15) {
-		t16 = /* @__PURE__ */ jsx(TextInputBase, {
+	if ($[19] !== T0 || $[20] !== inputRef || $[21] !== isDisabled || $[22] !== isReadOnly || $[23] !== isRequired || $[24] !== mergedLabelProps || $[25] !== otherProps || $[26] !== ref || $[27] !== rows || $[28] !== t11 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T0, {
 			ref,
 			...otherProps,
+			...t11,
 			multiLine: true,
 			inputRef,
 			labelProps: mergedLabelProps,
-			inputProps: t15,
+			inputProps: t12,
 			isDisabled,
 			isReadOnly,
 			isRequired,
 			rows
 		});
-		$[30] = inputRef;
-		$[31] = isDisabled;
-		$[32] = isReadOnly;
-		$[33] = isRequired;
-		$[34] = mergedLabelProps;
-		$[35] = otherProps;
-		$[36] = ref;
-		$[37] = rows;
-		$[38] = t15;
-		$[39] = t16;
-	} else t16 = $[39];
-	return t16;
+		$[19] = T0;
+		$[20] = inputRef;
+		$[21] = isDisabled;
+		$[22] = isReadOnly;
+		$[23] = isRequired;
+		$[24] = mergedLabelProps;
+		$[25] = otherProps;
+		$[26] = ref;
+		$[27] = rows;
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	return t13;
 }
 /**
 * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","useFieldProps","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","useAutoSizeTextArea","FieldBaseProps","CubeTextAreaProps","Omit","field","inputRef","HTMLTextAreaElement","validate","onFocus","onBlur","autoSize","maxRows","rows","TextArea","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","t2","isDisabled","t3","isReadOnly","t4","isRequired","t5","onChange","onChange_0","t6","t7","labelProps","userLabelProps","inputProps","userInputProps","propsInputRef","value","value_0","form","isBuffered","otherProps","undefined","Math","max","localInputRef","t8","buffered","t9","adjustHeight","t10","t11","t12","reset","t13","inputElementType","t14","mergedLabelProps","t15","t16","toString","_TextArea","cubeInputType","displayName"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput';\nimport { useAutoSizeTextArea } from '../TextInput/useAutoSizeTextArea';\n\nimport type { FieldBaseProps } from '../../../shared/form';\n\nexport interface CubeTextAreaProps\n  extends Omit<\n      CubeTextInputBaseProps,\n      'validate' | 'inputRef' | 'onFocus' | 'onBlur'\n    >,\n    CubeBufferedValueProps {\n  field?: FieldBaseProps<string | null | undefined>['field'];\n  inputRef?: RefObject<HTMLTextAreaElement | null>;\n  validate?: AriaTextFieldProps<HTMLTextAreaElement>['validate'];\n  onFocus?: AriaTextFieldProps<HTMLTextAreaElement>['onFocus'];\n  onBlur?: AriaTextFieldProps<HTMLTextAreaElement>['onBlur'];\n  /** Whether the textarea should change its size depends on the content */\n  autoSize?: boolean;\n  /** Max number of visible rows when autoSize is `true`. Defaults to 10  */\n  maxRows?: number;\n  /** The `rows` attribute in HTML is used to specify the number of visible text lines for the\n   * control i.e. the number of rows to display. Defaults to 3 */\n  rows?: number;\n}\n\nfunction TextArea(\n  rawProps: WithNullableValue<CubeTextAreaProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n  let {\n    autoSize = false,\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    maxRows = 10,\n    rows = 3,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    inputRef: propsInputRef,\n    value,\n    // The form instance, not the DOM `form` id `useTextField` forwards.\n    form,\n    isBuffered,\n    ...otherProps\n  } = props;\n\n  rows = Math.max(rows, 1);\n  maxRows = Math.max(maxRows, rows);\n\n  let localInputRef = useRef<HTMLTextAreaElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n  const buffered = useBufferedValue(value, onChange, {\n    isBuffered,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const adjustHeight = useAutoSizeTextArea({\n    inputRef,\n    autoSize,\n    rows,\n    maxRows,\n    // Keyed on the rendered value, not the prop, so a buffered draft is measured.\n    value: buffered.value,\n  });\n\n  let { labelProps, inputProps } = useTextField(\n    {\n      ...otherProps,\n      value: buffered.value,\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      onChange: chain(buffered.onChange, adjustHeight),\n      onBlur: chain(otherProps.onBlur, buffered.reset),\n      inputElementType: 'textarea',\n    },\n    inputRef,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  return (\n    <TextInputBase\n      ref={ref}\n      {...otherProps}\n      multiLine\n      inputRef={inputRef}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        inputProps,\n        { 'data-input-type': 'textarea' },\n        userInputProps,\n      )}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      rows={rows}\n    />\n  );\n}\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","useFieldProps","useDisplayedValidation","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","useAutoSizeTextArea","FieldBaseProps","CubeTextAreaProps","Omit","field","inputRef","HTMLTextAreaElement","validate","onFocus","onBlur","autoSize","maxRows","rows","TextArea","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","t2","isDisabled","t3","isReadOnly","t4","isRequired","t5","onChange","onChange_0","t6","t7","labelProps","userLabelProps","inputProps","userInputProps","propsInputRef","value","value_0","form","isBuffered","otherProps","undefined","Math","max","localInputRef","t8","buffered","t9","adjustHeight","displayedValidation","validation","trackTouched","reset","inputElementType","t10","mergedLabelProps","T0","t11","getDisplayedValidation","t12","t13","toString","_TextArea","cubeInputType","displayName"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { useDisplayedValidation } from '../TextInput/displayed-validation';\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from '../TextInput/TextInputBase';\nimport { useAutoSizeTextArea } from '../TextInput/useAutoSizeTextArea';\n\nimport type { FieldBaseProps } from '../../../shared/form';\n\nexport interface CubeTextAreaProps\n  extends Omit<\n      CubeTextInputBaseProps,\n      'validate' | 'inputRef' | 'onFocus' | 'onBlur'\n    >,\n    CubeBufferedValueProps {\n  field?: FieldBaseProps<string | null | undefined>['field'];\n  inputRef?: RefObject<HTMLTextAreaElement | null>;\n  validate?: AriaTextFieldProps<HTMLTextAreaElement>['validate'];\n  onFocus?: AriaTextFieldProps<HTMLTextAreaElement>['onFocus'];\n  onBlur?: AriaTextFieldProps<HTMLTextAreaElement>['onBlur'];\n  /** Whether the textarea should change its size depends on the content */\n  autoSize?: boolean;\n  /** Max number of visible rows when autoSize is `true`. Defaults to 10  */\n  maxRows?: number;\n  /** The `rows` attribute in HTML is used to specify the number of visible text lines for the\n   * control i.e. the number of rows to display. Defaults to 3 */\n  rows?: number;\n}\n\nfunction TextArea(\n  rawProps: WithNullableValue<CubeTextAreaProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n  let {\n    autoSize = false,\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    maxRows = 10,\n    rows = 3,\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    inputRef: propsInputRef,\n    value,\n    // The form instance, not the DOM `form` id `useTextField` forwards.\n    form,\n    isBuffered,\n    ...otherProps\n  } = props;\n\n  rows = Math.max(rows, 1);\n  maxRows = Math.max(maxRows, rows);\n\n  let localInputRef = useRef<HTMLTextAreaElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up — see `useBufferedValue`.\n  const buffered = useBufferedValue(value, onChange, {\n    isBuffered,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const adjustHeight = useAutoSizeTextArea({\n    inputRef,\n    autoSize,\n    rows,\n    maxRows,\n    // Keyed on the rendered value, not the prop, so a buffered draft is measured.\n    value: buffered.value,\n  });\n\n  let displayedValidation = useDisplayedValidation();\n  let { labelProps, inputProps, ...validation } = useTextField(\n    displayedValidation.trackTouched({\n      ...otherProps,\n      value: buffered.value,\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      onChange: chain(buffered.onChange, adjustHeight),\n      onBlur: chain(otherProps.onBlur, buffered.reset),\n      inputElementType: 'textarea',\n    }),\n    inputRef,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  return (\n    <TextInputBase\n      ref={ref}\n      {...otherProps}\n      {...displayedValidation.getDisplayedValidation(otherProps, validation)}\n      multiLine\n      inputRef={inputRef}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(\n        inputProps,\n        { 'data-input-type': 'textarea' },\n        userInputProps,\n      )}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      rows={rows}\n    />\n  );\n}\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
-import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import { CubeBufferedValueProps, CubeTextInputBaseProps } from "./TextInputBase.js";
+import { WithNullableValue } from "../../../utils/react/nullableValue.js";
 import * as react from "react";
 import { AriaTextFieldProps, useTextField as useTextField$1 } from "react-aria";
 

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

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "./TextInputBase.js";
+import { useDisplayedValidation } from "./displayed-validation.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -12,7 +13,7 @@ import { useTextField as useTextField$1 } from "react-aria";
 
 //#region src/components/fields/TextInput/TextInput.tsx
 const TextInput = forwardRef(function TextInput(rawProps, ref) {
-	const $ = c(20);
+	const $ = c(17);
 	let t0;
 	if ($[0] !== rawProps) {
 		t0 = castNullableStringValue(rawProps);
@@ -36,56 +37,51 @@ const TextInput = forwardRef(function TextInput(rawProps, ref) {
 		isDisabled: restProps.isDisabled,
 		isReadOnly: restProps.isReadOnly
 	});
-	const t2 = buffered.value;
-	const t3 = buffered.onChange;
-	const t4 = chain(restProps.onBlur, buffered.reset);
+	const displayedValidation = useDisplayedValidation();
+	const { labelProps, inputProps, ...validation } = useTextField$1(displayedValidation.trackTouched({
+		...restProps,
+		value: buffered.value,
+		onChange: buffered.onChange,
+		onBlur: chain(restProps.onBlur, buffered.reset),
+		inputElementType: restProps.multiLine ? "textarea" : "input"
+	}), inputRef);
+	let t2;
+	if ($[3] !== labelProps || $[4] !== userLabelProps) {
+		t2 = mergeProps$1(labelProps, userLabelProps);
+		$[3] = labelProps;
+		$[4] = userLabelProps;
+		$[5] = t2;
+	} else t2 = $[5];
+	const mergedLabelProps = t2;
+	const T0 = TextInputBase;
+	const t3 = displayedValidation.getDisplayedValidation(restProps, validation);
+	let t4;
+	if ($[6] !== inputProps || $[7] !== userInputProps) {
+		t4 = mergeProps$1(inputProps, userInputProps);
+		$[6] = inputProps;
+		$[7] = userInputProps;
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[3] !== buffered.onChange || $[4] !== buffered.value || $[5] !== restProps || $[6] !== t4) {
-		t5 = {
-			...restProps,
-			value: t2,
-			onChange: t3,
-			onBlur: t4
-		};
-		$[3] = buffered.onChange;
-		$[4] = buffered.value;
-		$[5] = restProps;
-		$[6] = t4;
-		$[7] = t5;
-	} else t5 = $[7];
-	const { labelProps, inputProps } = useTextField$1(t5, inputRef);
-	let t6;
-	if ($[8] !== labelProps || $[9] !== userLabelProps) {
-		t6 = mergeProps$1(labelProps, userLabelProps);
-		$[8] = labelProps;
-		$[9] = userLabelProps;
-		$[10] = t6;
-	} else t6 = $[10];
-	const mergedLabelProps = t6;
-	let t7;
-	if ($[11] !== inputProps || $[12] !== userInputProps) {
-		t7 = mergeProps$1(inputProps, userInputProps);
-		$[11] = inputProps;
-		$[12] = userInputProps;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== inputRef || $[15] !== mergedLabelProps || $[16] !== ref || $[17] !== restProps || $[18] !== t7) {
-		t8 = /* @__PURE__ */ jsx(TextInputBase, {
+	if ($[9] !== T0 || $[10] !== inputRef || $[11] !== mergedLabelProps || $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
 			...restProps,
+			...t3,
 			ref,
 			labelProps: mergedLabelProps,
-			inputProps: t7,
+			inputProps: t4,
 			inputRef
 		});
-		$[14] = inputRef;
-		$[15] = mergedLabelProps;
-		$[16] = ref;
-		$[17] = restProps;
-		$[18] = t7;
-		$[19] = t8;
-	} else t8 = $[19];
-	return t8;
+		$[9] = T0;
+		$[10] = inputRef;
+		$[11] = mergedLabelProps;
+		$[12] = ref;
+		$[13] = restProps;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 });
 /**
 * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","useFieldProps","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","FieldBaseProps","TextFieldKeyboardProps","CubeTextInputProps","Omit","field","validate","TextInput","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","labelProps","userLabelProps","inputProps","userInputProps","inputRef","propsInputRef","form","isBuffered","restProps","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","t2","t3","t4","onBlur","reset","t5","HTMLInputElement","t6","mergedLabelProps","t7","t8","cubeInputType","toString"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\n\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from './TextInputBase';\n\nimport type {\n  FieldBaseProps,\n  TextFieldKeyboardProps,\n} from '../../../shared/form';\n\nexport type CubeTextInputProps = WithNullableValue<\n  Omit<CubeTextInputBaseProps, 'validate'>\n> &\n  CubeBufferedValueProps &\n  TextFieldKeyboardProps & {\n    field?: FieldBaseProps<string | null | undefined>['field'];\n    validate?: AriaTextFieldProps['validate'];\n  };\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n  rawProps: CubeTextInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n\n  let {\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    inputRef: propsInputRef,\n    form,\n    isBuffered,\n    ...restProps\n  } = props;\n  let localInputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up, so a parent that echoes it\n  // back a render late can't overwrite the DOM node and throw the caret to the end.\n  let buffered = useBufferedValue(restProps.value, restProps.onChange, {\n    isBuffered,\n    isDisabled: restProps.isDisabled,\n    isReadOnly: restProps.isReadOnly,\n  });\n\n  let { labelProps, inputProps } = useTextField(\n    {\n      ...restProps,\n      value: buffered.value,\n      onChange: buffered.onChange,\n      onBlur: chain(restProps.onBlur, buffered.reset),\n    },\n    inputRef as RefObject<HTMLInputElement | null>,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  return (\n    <TextInputBase\n      {...restProps}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(inputProps, userInputProps)}\n      inputRef={inputRef}\n    />\n  );\n});\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\n\n(TextInput as any).cubeInputType = 'Text';\n"],"mappings":";;;;;;;;;;;;;AAgCA,MAAaqB,YAAYpB,WAAW,SAAAoB,UAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,UAAA;AAIvBI,OAAAjB,wBAAwBa,SAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAA5CF,YAAWA;CAAH,IAAAK;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AAC4BF,OAAA;GAAAG,0BACR;GAAQC,kBAChBC;GAInB;AAAAR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAED,MAAA,EAAAU,YAAAC,gBAAAC,YAAAC,gBAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,cARY/B,cAAcW,UAAUK,GAMlC;CAUF,MAAAgB,gBAAoBxC,OAA+C,KAAK;CACxE,MAAAmC,WAAeC,iBAAAI;CAIf,MAAAC,WAAepC,iBAAiBkC,UAASG,OAAQH,UAASI,UAAW;EAAAL;EAAAM,YAEvDL,UAASK;EAAWC,YACpBN,UAASM;EACtB,CAAC;CAKS,MAAAC,KAAAL,SAAQC;CACL,MAAAK,KAAAN,SAAQE;CACV,MAAAK,KAAA7C,MAAMoC,UAASU,QAASR,SAAQS,MAAO;CAAA,IAAAC;AAAA,KAAA9B,EAAA,OAAAoB,SAAAE,YAAAtB,EAAA,OAAAoB,SAAAC,SAAArB,EAAA,OAAAkB,aAAAlB,EAAA,OAAA2B,IAAA;AAJjDG,OAAA;GAAA,GACKZ;GAASG,OACLI;GAAcH,UACXI;GAAiBE,QACnBD;GACT;AAAA3B,IAAA,KAAAoB,SAAAE;AAAAtB,IAAA,KAAAoB,SAAAC;AAAArB,IAAA,KAAAkB;AAAAlB,IAAA,KAAA2B;AAAA3B,IAAA,KAAA8B;OAAAA,MAAA9B,EAAA;CANH,MAAA,EAAAU,YAAAE,eAAiC/B,eAC/BiD,IAMAhB,SACD;CAAC,IAAAkB;AAAA,KAAAhC,EAAA,OAAAU,cAAAV,EAAA,OAAAW,gBAAA;AAGuBqB,OAAAjD,aAAW2B,YAAYC,eAAe;AAAAX,IAAA,KAAAU;AAAAV,IAAA,KAAAW;AAAAX,IAAA,MAAAgC;OAAAA,MAAAhC,EAAA;CAA/D,MAAAiC,mBAAyBD;CAAuC,IAAAE;AAAA,KAAAlC,EAAA,QAAAY,cAAAZ,EAAA,QAAAa,gBAAA;AAOhDqB,OAAAnD,aAAW6B,YAAYC,eAAe;AAAAb,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;AAAAb,IAAA,MAAAkC;OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;AAAA,KAAAnC,EAAA,QAAAc,YAAAd,EAAA,QAAAiC,oBAAAjC,EAAA,QAAAD,OAAAC,EAAA,QAAAkB,aAAAlB,EAAA,QAAAkC,IAAA;AAJpDC,OAAA,oBAAC;GAAa,GACRjB;GACCnB;GACOkC,YAAAA;GACA,YAAAC;GACFpB;IACV;AAAAd,IAAA,MAAAc;AAAAd,IAAA,MAAAiC;AAAAjC,IAAA,MAAAD;AAAAC,IAAA,MAAAkB;AAAAlB,IAAA,MAAAkC;AAAAlC,IAAA,MAAAmC;OAAAA,MAAAnC,EAAA;AAAA,QANFmC;EAQF;;;;;;AAQF,AAACtC,UAAkBuC,gBAAgB;AA9DC,SAAA5B,MAAAN,IAAA;CAOb,MAAA,EAAAmB,OAAAC,aAAApB;AAAmB,QAAM;EAAAoB;EAAAD,OAEnCA,OAAKgB,UAAkB,IAAvB;EACR"}
+{"version":3,"file":"TextInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","useFieldProps","useDisplayedValidation","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","FieldBaseProps","TextFieldKeyboardProps","CubeTextInputProps","Omit","field","validate","TextInput","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","labelProps","userLabelProps","inputProps","userInputProps","inputRef","propsInputRef","form","isBuffered","restProps","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","displayedValidation","validation","trackTouched","onBlur","reset","inputElementType","multiLine","HTMLInputElement","t2","mergedLabelProps","T0","t3","getDisplayedValidation","t4","t5","cubeInputType","toString"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, RefObject, useRef } from 'react';\nimport { AriaTextFieldProps, useTextField } from 'react-aria';\n\nimport { chain, mergeProps, useBufferedValue } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\n\nimport { useDisplayedValidation } from './displayed-validation';\nimport {\n  CubeBufferedValueProps,\n  CubeTextInputBaseProps,\n  TextInputBase,\n} from './TextInputBase';\n\nimport type {\n  FieldBaseProps,\n  TextFieldKeyboardProps,\n} from '../../../shared/form';\n\nexport type CubeTextInputProps = WithNullableValue<\n  Omit<CubeTextInputBaseProps, 'validate'>\n> &\n  CubeBufferedValueProps &\n  TextFieldKeyboardProps & {\n    field?: FieldBaseProps<string | null | undefined>['field'];\n    validate?: AriaTextFieldProps['validate'];\n  };\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n  rawProps: CubeTextInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  rawProps = castNullableStringValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n\n  let {\n    labelProps: userLabelProps,\n    inputProps: userInputProps,\n    inputRef: propsInputRef,\n    form,\n    isBuffered,\n    ...restProps\n  } = props;\n  let localInputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  // Hold the typed text locally until the controlled value catches up, so a parent that echoes it\n  // back a render late can't overwrite the DOM node and throw the caret to the end.\n  let buffered = useBufferedValue(restProps.value, restProps.onChange, {\n    isBuffered,\n    isDisabled: restProps.isDisabled,\n    isReadOnly: restProps.isReadOnly,\n  });\n\n  let displayedValidation = useDisplayedValidation();\n  let { labelProps, inputProps, ...validation } = useTextField(\n    displayedValidation.trackTouched({\n      ...restProps,\n      value: buffered.value,\n      onChange: buffered.onChange,\n      onBlur: chain(restProps.onBlur, buffered.reset),\n      inputElementType: restProps.multiLine ? 'textarea' : 'input',\n    }),\n    inputRef as RefObject<HTMLInputElement | null>,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  return (\n    <TextInputBase\n      {...restProps}\n      {...displayedValidation.getDisplayedValidation(restProps, validation)}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={mergeProps(inputProps, userInputProps)}\n      inputRef={inputRef}\n    />\n  );\n});\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\n\n(TextInput as any).cubeInputType = 'Text';\n"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAasB,YAAYrB,WAAW,SAAAqB,UAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,UAAA;AAIvBI,OAAAlB,wBAAwBc,SAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAA5CF,YAAWA;CAAH,IAAAK;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AAC4BF,OAAA;GAAAG,0BACR;GAAQC,kBAChBC;GAInB;AAAAR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAED,MAAA,EAAAU,YAAAC,gBAAAC,YAAAC,gBAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,cARYhC,cAAcY,UAAUK,GAMlC;CAUF,MAAAgB,gBAAoBzC,OAA+C,KAAK;CACxE,MAAAoC,WAAeC,iBAAAI;CAIf,MAAAC,WAAerC,iBAAiBmC,UAASG,OAAQH,UAASI,UAAW;EAAAL;EAAAM,YAEvDL,UAASK;EAAWC,YACpBN,UAASM;EACtB,CAAC;CAEF,MAAAC,sBAA0BtC,wBAAwB;CAClD,MAAA,EAAAuB,YAAAE,YAAA,GAAAc,eAAgD9C,eAC9C6C,oBAAmBE,aAAc;EAAA,GAC5BT;EAASG,OACLD,SAAQC;EAAMC,UACXF,SAAQE;EAASM,QACnB/C,MAAMqC,UAASU,QAASR,SAAQS,MAAO;EAAAC,kBAC7BZ,UAASa,YAAT,aAAA;EACnB,CAAC,EACFjB,SACD;CAAC,IAAAmB;AAAA,KAAAjC,EAAA,OAAAU,cAAAV,EAAA,OAAAW,gBAAA;AAGuBsB,OAAAnD,aAAW4B,YAAYC,eAAe;AAAAX,IAAA,KAAAU;AAAAV,IAAA,KAAAW;AAAAX,IAAA,KAAAiC;OAAAA,MAAAjC,EAAA;CAA/D,MAAAkC,mBAAyBD;CAGtB,MAAAE,KAAA7C;CAEK,MAAA8C,KAAAX,oBAAmBY,uBAAwBnB,WAAWQ,WAAW;CAAA,IAAAY;AAAA,KAAAtC,EAAA,OAAAY,cAAAZ,EAAA,OAAAa,gBAAA;AAGzDyB,OAAAxD,aAAW8B,YAAYC,eAAe;AAAAb,IAAA,KAAAY;AAAAZ,IAAA,KAAAa;AAAAb,IAAA,KAAAsC;OAAAA,MAAAtC,EAAA;CAAA,IAAAuC;AAAA,KAAAvC,EAAA,OAAAmC,MAAAnC,EAAA,QAAAc,YAAAd,EAAA,QAAAkC,oBAAAlC,EAAA,QAAAD,OAAAC,EAAA,QAAAkB,aAAAlB,EAAA,QAAAoC,MAAApC,EAAA,QAAAsC,IAAA;AALpDC,OAAA,oBAAC;GAAa,GACRrB;GAAS,GACTkB;GACCrC;GACOmC,YAAAA;GACA,YAAAI;GACFxB;IACV;AAAAd,IAAA,KAAAmC;AAAAnC,IAAA,MAAAc;AAAAd,IAAA,MAAAkC;AAAAlC,IAAA,MAAAD;AAAAC,IAAA,MAAAkB;AAAAlB,IAAA,MAAAoC;AAAApC,IAAA,MAAAsC;AAAAtC,IAAA,MAAAuC;OAAAA,MAAAvC,EAAA;AAAA,QAPFuC;EASF;;;;;;AAQF,AAAC1C,UAAkB2C,gBAAgB;AAjEC,SAAAhC,MAAAN,IAAA;CAOb,MAAA,EAAAmB,OAAAC,aAAApB;AAAmB,QAAM;EAAAoB;EAAAD,OAEnCA,OAAKoB,UAAkB,IAAvB;EACR"}

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

@@ -32,7 +32,11 @@ interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleP
   multiLine?: boolean;
   /** Whether the input should have autofocus */
   autoFocus?: boolean;
-  /** Direct input props */
+  /**
+   * Direct input props. The explicit props above (`isDisabled`, `maxLength`, `minLength`,
+   * `autoFocus`, `rows`, `autoComplete`) win over the same attributes here when they are set; an
+   * unset one leaves the value given here in place.
+   */
   inputProps?: Props;
   /** Direct input wrapper props */
   wrapperProps?: Props;
@@ -42,7 +46,7 @@ interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleP
   wrapperRef?: RefObject<HTMLDivElement | null>;
   /** Whether the input has the loading status */
   isLoading?: boolean;
-  /** The loading status indicator */
+  /** Rendered in place of the default loading icon while `isLoading` is set */
   loadingIndicator?: ReactNode;
   /** Style map for the input */
   inputStyles?: Styles;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | 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";
@@ -155,13 +155,31 @@ const InputElement = tasty({
 	qa: "Input",
 	styles: DEFAULT_INPUT_STYLES
 });
+const INTERACTIVE_ELEMENTS = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
+/**
+* A press inside the field box but outside the input — the prefix or suffix area, an icon, a
+* textarea's margins — focuses the input, as a press anywhere in a native field does. Presses on
+* the input itself and on interactive children, such as a clear button or the steppers, stay
+* theirs.
+*/
+function focusInputOnBoxPress(event, input) {
+	if (event.button !== 0 || event.defaultPrevented) return;
+	if (!input || input.disabled) return;
+	const box = event.currentTarget;
+	const target = event.target;
+	if (!box.contains(target)) return;
+	const interactive = target.closest(INTERACTIVE_ELEMENTS);
+	if (interactive && box.contains(interactive)) return;
+	event.preventDefault();
+	input.focus();
+}
 /**
 * 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) {
-	let { qa, mods, isInvalid, isValid, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", actions, wrapperRef, rows = 1, size = "medium", autoComplete, 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", actions, wrapperRef, rows, size = "medium", autoComplete, autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
 	let styles = extractStyles(otherProps, PROP_STYLES);
 	let type = otherProps.type;
 	if (resize) inputStyles = {
@@ -227,13 +245,14 @@ function _TextInputBase(props, ref) {
 		actions
 	]);
 	const resolvedAutoComplete = autoComplete ?? autocomplete ?? inputProps.autoComplete;
+	const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;
 	const textSecurityStyles = multiLine && type === "password" && inputProps.value?.length ? { fontFamily: "text-security-disc" } : {};
 	return wrapWithField(/* @__PURE__ */ jsxs(InputWrapperElement, {
 		ref: wrapperRef,
 		mods: modifiers,
 		"data-size": size,
 		styles,
-		...wrapperProps,
+		...mergeProps$1(wrapperProps, { onMouseDown: (event) => focusInputOnBoxPress(event, inputRef?.current) }),
 		children: [
 			prefix ? /* @__PURE__ */ jsx("div", {
 				"data-element": "Prefix",
@@ -245,23 +264,26 @@ function _TextInputBase(props, ref) {
 				"data-input-type": "textinput",
 				...mergeProps$1(inputProps, focusProps, hoverProps),
 				ref: inputRef,
-				rows: multiLine ? rows : void 0,
+				rows: multiLine ? rows ?? inputProps.rows ?? 1 : inputProps.rows,
 				mods: modifiers,
 				style: textSecurityStyles,
-				"data-autofocus": autoFocus ? "" : void 0,
-				autoFocus,
+				"data-autofocus": resolvedAutoFocus ? "" : void 0,
+				autoFocus: resolvedAutoFocus,
 				"data-size": size,
 				autoComplete: resolvedAutoComplete,
 				styles: inputStyles,
-				disabled: !!isDisabled,
-				maxLength,
-				minLength
+				disabled: !!(isDisabled ?? inputProps.disabled),
+				maxLength: maxLength ?? inputProps.maxLength,
+				minLength: minLength ?? inputProps.minLength
 			}),
 			showValidationIndicator || suffix || actions ? /* @__PURE__ */ jsxs("div", {
 				"data-element": "Suffix",
 				children: [
 					suffixPosition === "before" ? suffix : null,
-					/* @__PURE__ */ jsx(ValidationIndicator, {
+					isLoading && loadingIndicator ? /* @__PURE__ */ jsx("div", {
+						"data-element": "State",
+						children: loadingIndicator
+					}) : /* @__PURE__ */ jsx(ValidationIndicator, {
 						isInvalid,
 						isValid,
 						isLoading

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

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

package/dist/components/fields/TextInput/displayed-validation.js

@@ -0,0 +1,50 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
+import { chain } from "../../../utils/react/chain.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+
+//#region src/components/fields/TextInput/displayed-validation.ts
+/**
+* The validation the field chrome shows. React Aria runs `validate` from the first render and sets
+* `aria-invalid` from it, so an untouched field would open with the invalid style and the message
+* for its empty value. Both wait until the user has changed the value or left the field. An explicit
+* `isInvalid`, which a form's validation also sets, shows at once, and a caller's `errorMessage`
+* still wins over the errors `validate` returns.
+*/
+function useDisplayedValidation() {
+	const $ = c(3);
+	const [isTouched, setIsTouched] = useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setIsTouched(true);
+		$[0] = t0;
+	} else t0 = $[0];
+	const touch = t0;
+	let t1;
+	if ($[1] !== isTouched) {
+		t1 = {
+			trackTouched(props) {
+				return {
+					...props,
+					onChange: chain(props.onChange, touch),
+					onBlur: chain(props.onBlur, touch)
+				};
+			},
+			getDisplayedValidation(t2, validation) {
+				const { isInvalid, errorMessage } = t2;
+				const isShown = isTouched || isInvalid !== void 0;
+				return {
+					isInvalid: isShown && validation.isInvalid,
+					errorMessage: errorMessage === void 0 && isShown && validation.validationErrors.length ? validation.validationErrors.join(" ") : errorMessage
+				};
+			}
+		};
+		$[1] = isTouched;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+
+//#endregion
+export { useDisplayedValidation };
+//# sourceMappingURL=displayed-validation.js.map