@cube-dev/ui-kit 0.182.0 → 0.184.0

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

@@ -1,46 +1,92 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | 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 { c } from "react-compiler-runtime";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTextField as useTextField$1 } from "react-aria";
 
 //#region src/components/fields/TextInput/TextInput.tsx
 const TextInput = forwardRef(function TextInput(props, ref) {
-	props = castNullableStringValue(props);
-	props = useFieldProps(props, {
-		defaultValidationTrigger: "onBlur",
-		valuePropsMapper: ({ value, onChange }) => ({
-			onChange,
-			value: value?.toString() ?? ""
-		})
-	});
-	let { labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, form, isBuffered, ...restProps } = props;
-	let localInputRef = useRef(null);
-	let inputRef = propsInputRef ?? localInputRef;
-	let buffered = useBufferedValue(restProps.value, restProps.onChange, {
+	const $ = c(20);
+	let t0;
+	if ($[0] !== props) {
+		t0 = castNullableStringValue(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	props = t0;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			defaultValidationTrigger: "onBlur",
+			valuePropsMapper: _temp
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	props = useFieldProps(props, t1);
+	const { labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, form, isBuffered, ...restProps } = props;
+	const localInputRef = useRef(null);
+	const inputRef = propsInputRef ?? localInputRef;
+	const buffered = useBufferedValue(restProps.value, restProps.onChange, {
 		isBuffered,
 		isDisabled: restProps.isDisabled,
 		isReadOnly: restProps.isReadOnly
 	});
-	let { labelProps, inputProps } = useTextField$1({
-		...restProps,
-		value: buffered.value,
-		onChange: buffered.onChange,
-		onBlur: chain(restProps.onBlur, buffered.reset)
-	}, inputRef);
-	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
-	return /* @__PURE__ */ jsx(TextInputBase, {
-		...restProps,
-		ref,
-		labelProps: mergedLabelProps,
-		inputProps: mergeProps$1(inputProps, userInputProps),
-		inputRef
-	});
+	const t2 = buffered.value;
+	const t3 = buffered.onChange;
+	const t4 = chain(restProps.onBlur, buffered.reset);
+	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, {
+			...restProps,
+			ref,
+			labelProps: mergedLabelProps,
+			inputProps: t7,
+			inputRef
+		});
+		$[14] = inputRef;
+		$[15] = mergedLabelProps;
+		$[16] = ref;
+		$[17] = restProps;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
 });
 /**
 * TextInputs are text inputs that allow users to input custom text entries
@@ -48,6 +94,13 @@ const TextInput = forwardRef(function TextInput(props, ref) {
 * communicate the entry requirements.
 */
 TextInput.cubeInputType = "Text";
+function _temp(t0) {
+	const { value, onChange } = t0;
+	return {
+		onChange,
+		value: value?.toString() ?? ""
+	};
+}
 
 //#endregion
 export { TextInput, useTextField$1 as useTextField };

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":["useTextField","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { 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 { FieldBaseProps } from '../../../shared/form';\n\nexport type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps> &\n  CubeBufferedValueProps & {\n    field?: FieldBaseProps<string | null | undefined>['field'];\n  };\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n  props: CubeTextInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, {\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,\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":";;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CAEF,IAAI,EACF,YAAY,gBACZ,YAAY,gBACZ,UAAU,eACV,MACA,YACA,GAAG,cACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAIhC,IAAI,WAAW,iBAAiB,UAAU,OAAO,UAAU,UAAU;EACnE;EACA,YAAY,UAAU;EACtB,YAAY,UAAU;EACvB,CAAC;CAEF,IAAI,EAAE,YAAY,eAAeA,eAC/B;EACE,GAAG;EACH,OAAO,SAAS;EAChB,UAAU,SAAS;EACnB,QAAQ,MAAM,UAAU,QAAQ,SAAS,MAAM;EAChD,EACD,SACD;CAGD,MAAM,mBAAmBC,aAAW,YAAY,eAAe;AAE/D,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACZ,YAAYA,aAAW,YAAY,eAAe;EACxC;GACV;EAEJ;;;;;;AAQF,AAAC,UAAkB,gBAAgB"}
+{"version":3,"file":"TextInput.js","names":["ForwardedRef","forwardRef","useRef","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","useFieldProps","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","FieldBaseProps","CubeTextInputProps","field","TextInput","props","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","labelProps","userLabelProps","inputProps","userInputProps","inputRef","propsInputRef","form","isBuffered","restProps","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","t2","t3","t4","onBlur","reset","t5","t6","mergedLabelProps","t7","t8","cubeInputType","toString"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { 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 { FieldBaseProps } from '../../../shared/form';\n\nexport type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps> &\n  CubeBufferedValueProps & {\n    field?: FieldBaseProps<string | null | undefined>['field'];\n  };\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n  props: CubeTextInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, {\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,\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":";;;;;;;;;;;;;AAyBA,MAAagB,YAAYf,WAAW,SAAAe,UAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AAI1BI,OAAAd,wBAAwBU,MAAM;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAtCF,SAAQA;CAAH,IAAAK;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AACwBF,OAAA;GAAAG,0BACD;GAAQC,kBAChBC;GAInB;AAAAR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AANDF,SAAQR,cAAcQ,OAAOK,GAM3B;CAEF,MAAA,EAAAM,YAAAC,gBAAAC,YAAAC,gBAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,cAOInB;CACJ,MAAAoB,gBAAoBnC,OAA+C,KAAK;CACxE,MAAA8B,WAAeC,iBAAAI;CAIf,MAAAC,WAAehC,iBAAiB8B,UAASG,OAAQH,UAASI,UAAW;EAAAL;EAAAM,YAEvDL,UAASK;EAAWC,YACpBN,UAASM;EACtB,CAAC;CAKS,MAAAC,KAAAL,SAAQC;CACL,MAAAK,KAAAN,SAAQE;CACV,MAAAK,KAAAzC,MAAMgC,UAASU,QAASR,SAAQS,MAAO;CAAA,IAAAC;AAAA,KAAA7B,EAAA,OAAAmB,SAAAE,YAAArB,EAAA,OAAAmB,SAAAC,SAAApB,EAAA,OAAAiB,aAAAjB,EAAA,OAAA0B,IAAA;AAJjDG,OAAA;GAAA,GACKZ;GAASG,OACLI;GAAcH,UACXI;GAAiBE,QACnBD;GACT;AAAA1B,IAAA,KAAAmB,SAAAE;AAAArB,IAAA,KAAAmB,SAAAC;AAAApB,IAAA,KAAAiB;AAAAjB,IAAA,KAAA0B;AAAA1B,IAAA,KAAA6B;OAAAA,MAAA7B,EAAA;CANH,MAAA,EAAAS,YAAAE,eAAiC3B,eAC/B6C,IAMAhB,SACD;CAAC,IAAAiB;AAAA,KAAA9B,EAAA,OAAAS,cAAAT,EAAA,OAAAU,gBAAA;AAGuBoB,OAAA5C,aAAWuB,YAAYC,eAAe;AAAAV,IAAA,KAAAS;AAAAT,IAAA,KAAAU;AAAAV,IAAA,MAAA8B;OAAAA,MAAA9B,EAAA;CAA/D,MAAA+B,mBAAyBD;CAAuC,IAAAE;AAAA,KAAAhC,EAAA,QAAAW,cAAAX,EAAA,QAAAY,gBAAA;AAOhDoB,OAAA9C,aAAWyB,YAAYC,eAAe;AAAAZ,IAAA,MAAAW;AAAAX,IAAA,MAAAY;AAAAZ,IAAA,MAAAgC;OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;AAAA,KAAAjC,EAAA,QAAAa,YAAAb,EAAA,QAAA+B,oBAAA/B,EAAA,QAAAD,OAAAC,EAAA,QAAAiB,aAAAjB,EAAA,QAAAgC,IAAA;AAJpDC,OAAA,oBAAC;GAAa,GACRhB;GACClB;GACOgC,YAAAA;GACA,YAAAC;GACFnB;IACV;AAAAb,IAAA,MAAAa;AAAAb,IAAA,MAAA+B;AAAA/B,IAAA,MAAAD;AAAAC,IAAA,MAAAiB;AAAAjB,IAAA,MAAAgC;AAAAhC,IAAA,MAAAiC;OAAAA,MAAAjC,EAAA;AAAA,QANFiC;EAQF;;;;;;AAQF,AAACpC,UAAkBqC,gBAAgB;AA9DC,SAAA1B,MAAAN,IAAA;CAOb,MAAA,EAAAkB,OAAAC,aAAAnB;AAAmB,QAAM;EAAAmB;EAAAD,OAEnCA,OAAKe,UAAkB,IAAvB;EACR"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.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";
@@ -161,7 +161,7 @@ const InputElement = tasty({
 * `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", wrapperRef, tooltip, 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", wrapperRef, rows = 1, size = "medium", autoComplete, autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
 	let styles = extractStyles(otherProps, PROP_STYLES);
 	let type = otherProps.type;
 	if (resize) inputStyles = {

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useAutoSizeTextArea.js","names":[],"sources":["../../../../src/components/fields/TextInput/useAutoSizeTextArea.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/index';\n\n/**\n * Computed properties that decide where text wraps and how tall a line box is.\n * Copied onto the mirror so it wraps exactly like the live textarea.\n */\nconst MIRROR_TYPOGRAPHY_PROPS = [\n  'direction',\n  'fontFamily',\n  'fontFeatureSettings',\n  'fontKerning',\n  'fontSize',\n  'fontStretch',\n  'fontStyle',\n  'fontVariant',\n  'fontVariationSettings',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'overflowWrap',\n  'tabSize',\n  'textIndent',\n  'textTransform',\n  'whiteSpace',\n  'wordBreak',\n  'wordSpacing',\n] as const;\n\nconst FALLBACK_LINE_HEIGHT = 20;\n\n/**\n * An off-screen textarea used to measure how tall the content wants to be.\n *\n * It carries no padding and no border, and its width is set to the live\n * element's *content* width, so `scrollHeight` is the content height and\n * nothing else. `height: 0` is what makes shrinking measurable: a textarea's\n * `scrollHeight` never drops below its own client height, so measuring the live\n * element can only ever report \"at least what it already is\".\n */\nfunction createMirror(): HTMLTextAreaElement {\n  const mirror = document.createElement('textarea');\n\n  mirror.setAttribute('aria-hidden', 'true');\n  mirror.setAttribute('tabindex', '-1');\n  mirror.readOnly = true;\n  mirror.rows = 1;\n\n  Object.assign(mirror.style, {\n    position: 'absolute',\n    top: '0',\n    left: '-9999px',\n    boxSizing: 'content-box',\n    margin: '0',\n    padding: '0',\n    border: '0',\n    height: '0',\n    minHeight: '0',\n    maxHeight: 'none',\n    overflow: 'hidden',\n    resize: 'none',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n  });\n\n  return mirror;\n}\n\n/** The width the text actually has to wrap in, scrollbar and padding removed. */\nfunction getContentWidth(\n  textarea: HTMLTextAreaElement,\n  style: CSSStyleDeclaration,\n): number {\n  const paddingLeft = parseFloat(style.paddingLeft) || 0;\n  const paddingRight = parseFloat(style.paddingRight) || 0;\n  const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n  const borderRight = parseFloat(style.borderRightWidth) || 0;\n  // A classic (space-taking) scrollbar narrows the text; overlay scrollbars\n  // report 0 here.\n  const scrollbar = Math.max(\n    0,\n    Math.round(\n      textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight,\n    ),\n  );\n\n  return Math.max(\n    0,\n    textarea.getBoundingClientRect().width -\n      borderLeft -\n      borderRight -\n      scrollbar -\n      paddingLeft -\n      paddingRight,\n  );\n}\n\n/** `line-height: normal` has no px value to read, so measure one line instead. */\nfunction getLineHeight(\n  style: CSSStyleDeclaration,\n  mirror: HTMLTextAreaElement,\n): number {\n  const parsed = parseFloat(style.lineHeight);\n\n  if (Number.isFinite(parsed) && parsed > 0) return parsed;\n\n  const previousValue = mirror.value;\n\n  mirror.value = 'x';\n\n  const measured = mirror.scrollHeight;\n\n  mirror.value = previousValue;\n\n  return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;\n}\n\nexport interface AutoSizeTextAreaOptions {\n  inputRef: RefObject<HTMLTextAreaElement | null>;\n  /** Whether the textarea resizes to fit its content. */\n  autoSize: boolean;\n  /** Minimum number of visible rows. */\n  rows: number;\n  /** Maximum number of visible rows. */\n  maxRows: number;\n  /** The rendered value. A change re-measures, so buffered drafts count too. */\n  value: unknown;\n}\n\n/**\n * Keeps an `autoSize` textarea's height in step with its content, and returns\n * the `adjustHeight` callback so a change handler can resize in the same tick\n * as the keystroke.\n *\n * The height is derived from an off-screen mirror rather than from the live\n * element. Measuring the live element — `height: auto`, read `scrollHeight`,\n * restore — re-lays out every ancestor mid-keystroke: in a chat-style column\n * the input box collapses to one row and the scroll viewport grows by the\n * difference, and the browser's scroll anchoring has to undo that. It does so\n * imperfectly, which is visible as the whole conversation bouncing by a pixel\n * on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so\n * there is nothing to undo.\n */\nexport function useAutoSizeTextArea({\n  inputRef,\n  autoSize,\n  rows,\n  maxRows,\n  value,\n}: AutoSizeTextAreaOptions) {\n  const mirrorRef = useRef<HTMLTextAreaElement | null>(null);\n\n  const adjustHeight = useEvent(() => {\n    const textarea = inputRef.current;\n\n    if (!textarea || !autoSize) return;\n\n    let mirror = mirrorRef.current;\n\n    if (!mirror) {\n      mirror = createMirror();\n      mirrorRef.current = mirror;\n      document.body.appendChild(mirror);\n    }\n\n    const style = getComputedStyle(textarea);\n    const contentWidth = getContentWidth(textarea, style);\n\n    // Nothing to wrap into: the field is display:none, or has not been laid out\n    // yet. Measuring at zero width would wrap every character onto its own line\n    // and pin the height at `maxRows`; keep the current height instead and wait\n    // for the ResizeObserver to report a real one.\n    if (contentWidth === 0) return;\n\n    for (const prop of MIRROR_TYPOGRAPHY_PROPS) {\n      mirror.style[prop] = style[prop];\n    }\n\n    mirror.style.width = `${contentWidth}px`;\n    mirror.value = textarea.value;\n\n    const lineHeight = getLineHeight(style, mirror);\n    // A textarea lays every line out at `line-height`, so the content height is\n    // a whole number of lines — `round` keeps a fractional line height (a zoomed\n    // page, a percentage preset) from adding a phantom row.\n    const contentRows = Math.max(\n      1,\n      Math.round(mirror.scrollHeight / lineHeight),\n    );\n    const targetRows = Math.max(Math.min(contentRows, maxRows), rows);\n\n    const paddingTop = parseFloat(style.paddingTop) || 0;\n    const paddingBottom = parseFloat(style.paddingBottom) || 0;\n    const borderTop = parseFloat(style.borderTopWidth) || 0;\n    const borderBottom = parseFloat(style.borderBottomWidth) || 0;\n    // `height` covers padding and border under `border-box` only.\n    const box =\n      style.boxSizing === 'border-box'\n        ? paddingTop + paddingBottom + borderTop + borderBottom\n        : 0;\n\n    const nextHeight = `${targetRows * lineHeight + box}px`;\n\n    // Writing an unchanged height would wake the ResizeObserver below for\n    // nothing.\n    if (textarea.style.height !== nextHeight) {\n      textarea.style.height = nextHeight;\n    }\n  });\n\n  const useEnvironmentalEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  // Re-measure on element resize as that can affect wrapping.\n  useEnvironmentalEffect(() => {\n    if (!autoSize || !inputRef.current) return;\n\n    adjustHeight();\n\n    const resizeObserver = new ResizeObserver(adjustHeight);\n\n    resizeObserver.observe(inputRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [autoSize, inputRef.current]);\n\n  // Adjust when the value changes programmatically (controlled mode).\n  useEnvironmentalEffect(() => {\n    if (autoSize && inputRef.current) {\n      adjustHeight();\n    }\n  }, [value]);\n\n  useEffect(\n    () => () => {\n      mirrorRef.current?.remove();\n      mirrorRef.current = null;\n    },\n    [],\n  );\n\n  return adjustHeight;\n}\n"],"mappings":"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"}
+{"version":3,"file":"useAutoSizeTextArea.js","names":["RefObject","useEffect","useLayoutEffect","useRef","useEvent","MIRROR_TYPOGRAPHY_PROPS","const","FALLBACK_LINE_HEIGHT","createMirror","HTMLTextAreaElement","mirror","document","createElement","setAttribute","readOnly","rows","Object","assign","style","position","top","left","boxSizing","margin","padding","border","height","minHeight","maxHeight","overflow","resize","visibility","pointerEvents","getContentWidth","textarea","CSSStyleDeclaration","paddingLeft","parseFloat","paddingRight","borderLeft","borderLeftWidth","borderRight","borderRightWidth","scrollbar","Math","max","round","offsetWidth","clientWidth","getBoundingClientRect","width","getLineHeight","parsed","lineHeight","Number","isFinite","previousValue","value","measured","scrollHeight","AutoSizeTextAreaOptions","inputRef","autoSize","maxRows","useAutoSizeTextArea","mirrorRef","adjustHeight","current","body","appendChild","getComputedStyle","contentWidth","prop","contentRows","targetRows","min","paddingTop","paddingBottom","borderTop","borderTopWidth","borderBottom","borderBottomWidth","box","nextHeight","useEnvironmentalEffect","window","resizeObserver","ResizeObserver","observe","disconnect","remove"],"sources":["../../../../src/components/fields/TextInput/useAutoSizeTextArea.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/index';\n\n/**\n * Computed properties that decide where text wraps and how tall a line box is.\n * Copied onto the mirror so it wraps exactly like the live textarea.\n */\nconst MIRROR_TYPOGRAPHY_PROPS = [\n  'direction',\n  'fontFamily',\n  'fontFeatureSettings',\n  'fontKerning',\n  'fontSize',\n  'fontStretch',\n  'fontStyle',\n  'fontVariant',\n  'fontVariationSettings',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'overflowWrap',\n  'tabSize',\n  'textIndent',\n  'textTransform',\n  'whiteSpace',\n  'wordBreak',\n  'wordSpacing',\n] as const;\n\nconst FALLBACK_LINE_HEIGHT = 20;\n\n/**\n * An off-screen textarea used to measure how tall the content wants to be.\n *\n * It carries no padding and no border, and its width is set to the live\n * element's *content* width, so `scrollHeight` is the content height and\n * nothing else. `height: 0` is what makes shrinking measurable: a textarea's\n * `scrollHeight` never drops below its own client height, so measuring the live\n * element can only ever report \"at least what it already is\".\n */\nfunction createMirror(): HTMLTextAreaElement {\n  const mirror = document.createElement('textarea');\n\n  mirror.setAttribute('aria-hidden', 'true');\n  mirror.setAttribute('tabindex', '-1');\n  mirror.readOnly = true;\n  mirror.rows = 1;\n\n  Object.assign(mirror.style, {\n    position: 'absolute',\n    top: '0',\n    left: '-9999px',\n    boxSizing: 'content-box',\n    margin: '0',\n    padding: '0',\n    border: '0',\n    height: '0',\n    minHeight: '0',\n    maxHeight: 'none',\n    overflow: 'hidden',\n    resize: 'none',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n  });\n\n  return mirror;\n}\n\n/** The width the text actually has to wrap in, scrollbar and padding removed. */\nfunction getContentWidth(\n  textarea: HTMLTextAreaElement,\n  style: CSSStyleDeclaration,\n): number {\n  const paddingLeft = parseFloat(style.paddingLeft) || 0;\n  const paddingRight = parseFloat(style.paddingRight) || 0;\n  const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n  const borderRight = parseFloat(style.borderRightWidth) || 0;\n  // A classic (space-taking) scrollbar narrows the text; overlay scrollbars\n  // report 0 here.\n  const scrollbar = Math.max(\n    0,\n    Math.round(\n      textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight,\n    ),\n  );\n\n  return Math.max(\n    0,\n    textarea.getBoundingClientRect().width -\n      borderLeft -\n      borderRight -\n      scrollbar -\n      paddingLeft -\n      paddingRight,\n  );\n}\n\n/** `line-height: normal` has no px value to read, so measure one line instead. */\nfunction getLineHeight(\n  style: CSSStyleDeclaration,\n  mirror: HTMLTextAreaElement,\n): number {\n  const parsed = parseFloat(style.lineHeight);\n\n  if (Number.isFinite(parsed) && parsed > 0) return parsed;\n\n  const previousValue = mirror.value;\n\n  mirror.value = 'x';\n\n  const measured = mirror.scrollHeight;\n\n  mirror.value = previousValue;\n\n  return measured > 0 ? measured : FALLBACK_LINE_HEIGHT;\n}\n\nexport interface AutoSizeTextAreaOptions {\n  inputRef: RefObject<HTMLTextAreaElement | null>;\n  /** Whether the textarea resizes to fit its content. */\n  autoSize: boolean;\n  /** Minimum number of visible rows. */\n  rows: number;\n  /** Maximum number of visible rows. */\n  maxRows: number;\n  /** The rendered value. A change re-measures, so buffered drafts count too. */\n  value: unknown;\n}\n\n/**\n * Keeps an `autoSize` textarea's height in step with its content, and returns\n * the `adjustHeight` callback so a change handler can resize in the same tick\n * as the keystroke.\n *\n * The height is derived from an off-screen mirror rather than from the live\n * element. Measuring the live element — `height: auto`, read `scrollHeight`,\n * restore — re-lays out every ancestor mid-keystroke: in a chat-style column\n * the input box collapses to one row and the scroll viewport grows by the\n * difference, and the browser's scroll anchoring has to undo that. It does so\n * imperfectly, which is visible as the whole conversation bouncing by a pixel\n * on every keystroke (CUB-4042). Measuring off-screen touches no ancestor, so\n * there is nothing to undo.\n */\nexport function useAutoSizeTextArea({\n  inputRef,\n  autoSize,\n  rows,\n  maxRows,\n  value,\n}: AutoSizeTextAreaOptions) {\n  const mirrorRef = useRef<HTMLTextAreaElement | null>(null);\n\n  const adjustHeight = useEvent(() => {\n    const textarea = inputRef.current;\n\n    if (!textarea || !autoSize) return;\n\n    let mirror = mirrorRef.current;\n\n    if (!mirror) {\n      mirror = createMirror();\n      mirrorRef.current = mirror;\n      document.body.appendChild(mirror);\n    }\n\n    const style = getComputedStyle(textarea);\n    const contentWidth = getContentWidth(textarea, style);\n\n    // Nothing to wrap into: the field is display:none, or has not been laid out\n    // yet. Measuring at zero width would wrap every character onto its own line\n    // and pin the height at `maxRows`; keep the current height instead and wait\n    // for the ResizeObserver to report a real one.\n    if (contentWidth === 0) return;\n\n    for (const prop of MIRROR_TYPOGRAPHY_PROPS) {\n      mirror.style[prop] = style[prop];\n    }\n\n    mirror.style.width = `${contentWidth}px`;\n    mirror.value = textarea.value;\n\n    const lineHeight = getLineHeight(style, mirror);\n    // A textarea lays every line out at `line-height`, so the content height is\n    // a whole number of lines — `round` keeps a fractional line height (a zoomed\n    // page, a percentage preset) from adding a phantom row.\n    const contentRows = Math.max(\n      1,\n      Math.round(mirror.scrollHeight / lineHeight),\n    );\n    const targetRows = Math.max(Math.min(contentRows, maxRows), rows);\n\n    const paddingTop = parseFloat(style.paddingTop) || 0;\n    const paddingBottom = parseFloat(style.paddingBottom) || 0;\n    const borderTop = parseFloat(style.borderTopWidth) || 0;\n    const borderBottom = parseFloat(style.borderBottomWidth) || 0;\n    // `height` covers padding and border under `border-box` only.\n    const box =\n      style.boxSizing === 'border-box'\n        ? paddingTop + paddingBottom + borderTop + borderBottom\n        : 0;\n\n    const nextHeight = `${targetRows * lineHeight + box}px`;\n\n    // Writing an unchanged height would wake the ResizeObserver below for\n    // nothing.\n    if (textarea.style.height !== nextHeight) {\n      textarea.style.height = nextHeight;\n    }\n  });\n\n  const useEnvironmentalEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  // Re-measure on element resize as that can affect wrapping.\n  useEnvironmentalEffect(() => {\n    if (!autoSize || !inputRef.current) return;\n\n    adjustHeight();\n\n    const resizeObserver = new ResizeObserver(adjustHeight);\n\n    resizeObserver.observe(inputRef.current);\n\n    return () => resizeObserver.disconnect();\n  }, [autoSize, inputRef.current]);\n\n  // Adjust when the value changes programmatically (controlled mode).\n  useEnvironmentalEffect(() => {\n    if (autoSize && inputRef.current) {\n      adjustHeight();\n    }\n  }, [value]);\n\n  useEffect(\n    () => () => {\n      mirrorRef.current?.remove();\n      mirrorRef.current = null;\n    },\n    [],\n  );\n\n  return adjustHeight;\n}\n"],"mappings":"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"}