@cube-dev/ui-kit 0.201.0 → 0.203.0

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","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","showsValidateErrors","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","_c","mergeProps"],"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\n    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    showsValidateErrors: true,\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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"}
+{"version":3,"file":"TextArea.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","withOverlayKeys","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","showsValidateErrors","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","onKeyDown","inputElementType","t10","mergedLabelProps","T0","t11","getDisplayedValidation","t12","t13","toString","_TextArea","cubeInputType","displayName","_c","mergeProps","TextInputBase"],"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 { withOverlayKeys } from '../../../utils/react/overlayKeyPropagation';\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\n    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    showsValidateErrors: true,\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      onKeyDown: withOverlayKeys(otherProps.onKeyDown),\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.js

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.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 { withOverlayKeys } from "../../../utils/react/overlayKeyPropagation.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 { TextInputBase as _TextInputBase } from "./TextInputBase.js";
 import { useDisplayedValidation } from "./displayed-validation.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef, useRef } from "react";
@@ -43,6 +44,7 @@ const TextInput = forwardRef(function TextInput(rawProps, ref) {
 		value: buffered.value,
 		onChange: buffered.onChange,
 		onBlur: chain(restProps.onBlur, buffered.reset),
+		onKeyDown: withOverlayKeys(restProps.onKeyDown),
 		inputElementType: restProps.multiLine ? "textarea" : "input"
 	}), inputRef);
 	let t2;
@@ -53,7 +55,7 @@ const TextInput = forwardRef(function TextInput(rawProps, ref) {
 		$[5] = t2;
 	} else t2 = $[5];
 	const mergedLabelProps = t2;
-	const T0 = TextInputBase;
+	const T0 = _TextInputBase;
 	const t3 = displayedValidation.getDisplayedValidation(restProps, validation);
 	let t4;
 	if ($[6] !== inputProps || $[7] !== userInputProps) {

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","useDisplayedValidation","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","FieldBaseProps","TextFieldKeyboardProps","CubeTextInputProps","Omit","field","validate","TextInput","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","showsValidateErrors","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","_c","useTextField","mergeProps"],"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    showsValidateErrors: true,\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,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAF,UAAA;EAIvBI,KAAAlB,wBAAwBc,QAAQ;EAACE,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAA5CF,WAAWA;CAAH,IAAAK;CAAA,IAAAH,EAAA,OAAAI,OAAAC,IAAA,2BAAA,GAAA;EAC4BF,KAAA;GAAAG,0BACR;GAAQC,qBACb;GAAIC,kBACPC;EAIpB;EAACT,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAED,MAAA,EAAAW,YAAAC,gBAAAC,YAAAC,gBAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,cATYjC,cAAcY,UAAUK,EAgBhCO;CACJ,MAAAU,gBAAoB1C,OAA+C,IAAI;CACvE,MAAAqC,WAAeC,iBAAAI;CAIf,MAAAC,WAAetC,iBAAiBoC,UAASG,OAAQH,UAASI,UAAW;EAAAL;EAAAM,YAEvDL,UAASK;EAAWC,YACpBN,UAASM;CACvB,CAAC;CAED,MAAAC,sBAA0BvC,uBAAuB;CACjD,MAAA,EAAAwB,YAAAE,YAAA,GAAAc,eAAgD/C,eAC9C8C,oBAAmBE,aAAc;EAAA,GAC5BT;EAASG,OACLD,SAAQC;EAAMC,UACXF,SAAQE;EAASM,QACnBhD,MAAMsC,UAASU,QAASR,SAAQS,KAAM;EAACC,kBAC7BZ,UAASa,YAAT,aAAA;CACpB,CAAC,GACDjB,QACF;CAAE,IAAAmB;CAAA,IAAAlC,EAAA,OAAAW,cAAAX,EAAA,OAAAY,gBAAA;EAGuBsB,KAAApD,aAAW6B,YAAYC,cAAc;EAACZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAkC;CAAA,OAAAA,KAAAlC,EAAA;CAA/D,MAAAmC,mBAAyBD;CAGtB,MAAAE,KAAA9C;CAEK,MAAA+C,KAAAX,oBAAmBY,uBAAwBnB,WAAWQ,UAAU;CAAC,IAAAY;CAAA,IAAAvC,EAAA,OAAAa,cAAAb,EAAA,OAAAc,gBAAA;EAGzDyB,KAAAzD,aAAW+B,YAAYC,cAAc;EAACd,EAAA,KAAAa;EAAAb,EAAA,KAAAc;EAAAd,EAAA,KAAAuC;CAAA,OAAAA,KAAAvC,EAAA;CAAA,IAAAwC;CAAA,IAAAxC,EAAA,OAAAoC,MAAApC,EAAA,QAAAe,YAAAf,EAAA,QAAAmC,oBAAAnC,EAAA,QAAAD,OAAAC,EAAA,QAAAmB,aAAAnB,EAAA,QAAAqC,MAAArC,EAAA,QAAAuC,IAAA;EALpDC,KAAA,oBAAC,IAAD;GAAc,GACRrB;GAAS,GACTkB;GACCtC;GACOoC,YAAAA;GACA,YAAAI;GACFxB;EAAQ,CAAA;EAClBf,EAAA,KAAAoC;EAAApC,EAAA,MAAAe;EAAAf,EAAA,MAAAmC;EAAAnC,EAAA,MAAAD;EAAAC,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqC;EAAArC,EAAA,MAAAuC;EAAAvC,EAAA,MAAAwC;CAAA,OAAAA,KAAAxC,EAAA;CAAA,OAPFwC;AAOE,CAEL;;;;;;AAQD,UAAmBC,gBAAgB;AAlEC,SAAAhC,MAAAP,IAAA;CAQb,MAAA,EAAAoB,OAAAC,aAAArB;CAAmB,OAAM;EAAAqB;EAAAD,OAEnCA,OAAKoB,SAAiB,KAAtB;CACT;AAAC"}
+{"version":3,"file":"TextInput.js","names":["ForwardedRef","forwardRef","RefObject","useRef","AriaTextFieldProps","useTextField","chain","mergeProps","useBufferedValue","castNullableStringValue","WithNullableValue","withOverlayKeys","useFieldProps","useDisplayedValidation","CubeBufferedValueProps","CubeTextInputBaseProps","TextInputBase","FieldBaseProps","TextFieldKeyboardProps","CubeTextInputProps","Omit","field","validate","TextInput","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","showsValidateErrors","valuePropsMapper","_temp","props","labelProps","userLabelProps","inputProps","userInputProps","inputRef","propsInputRef","form","isBuffered","restProps","localInputRef","buffered","value","onChange","isDisabled","isReadOnly","displayedValidation","validation","trackTouched","onBlur","reset","onKeyDown","inputElementType","multiLine","HTMLInputElement","t2","mergedLabelProps","T0","t3","getDisplayedValidation","t4","t5","cubeInputType","toString","_c","useTextField","mergeProps","TextInputBase"],"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 { withOverlayKeys } from '../../../utils/react/overlayKeyPropagation';\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    showsValidateErrors: true,\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      onKeyDown: withOverlayKeys(restProps.onKeyDown),\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":";;;;;;;;;;;;;;AAkCA,MAAauB,YAAYtB,WAAW,SAAAsB,UAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAF,UAAA;EAIvBI,KAAAnB,wBAAwBe,QAAQ;EAACE,EAAA,KAAAF;EAAAE,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAA5CF,WAAWA;CAAH,IAAAK;CAAA,IAAAH,EAAA,OAAAI,OAAAC,IAAA,2BAAA,GAAA;EAC4BF,KAAA;GAAAG,0BACR;GAAQC,qBACb;GAAIC,kBACPC;EAIpB;EAACT,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAED,MAAA,EAAAW,YAAAC,gBAAAC,YAAAC,gBAAAC,UAAAC,eAAAC,MAAAC,YAAA,GAAAC,cATYjC,cAAcY,UAAUK,EAgBhCO;CACJ,MAAAU,gBAAoB3C,OAA+C,IAAI;CACvE,MAAAsC,WAAeC,iBAAAI;CAIf,MAAAC,WAAevC,iBAAiBqC,UAASG,OAAQH,UAASI,UAAW;EAAAL;EAAAM,YAEvDL,UAASK;EAAWC,YACpBN,UAASM;CACvB,CAAC;CAED,MAAAC,sBAA0BvC,uBAAuB;CACjD,MAAA,EAAAwB,YAAAE,YAAA,GAAAc,eAAgDhD,eAC9C+C,oBAAmBE,aAAc;EAAA,GAC5BT;EAASG,OACLD,SAAQC;EAAMC,UACXF,SAAQE;EAASM,QACnBjD,MAAMuC,UAASU,QAASR,SAAQS,KAAM;EAACC,WACpC9C,gBAAgBkC,UAASY,SAAU;EAACC,kBAC7Bb,UAASc,YAAT,aAAA;CACpB,CAAC,GACDlB,QACF;CAAE,IAAAoB;CAAA,IAAAnC,EAAA,OAAAW,cAAAX,EAAA,OAAAY,gBAAA;EAGuBuB,KAAAtD,aAAW8B,YAAYC,cAAc;EAACZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAmC;CAAA,OAAAA,KAAAnC,EAAA;CAA/D,MAAAoC,mBAAyBD;CAGtB,MAAAE,KAAA/C;CAEK,MAAAgD,KAAAZ,oBAAmBa,uBAAwBpB,WAAWQ,UAAU;CAAC,IAAAa;CAAA,IAAAxC,EAAA,OAAAa,cAAAb,EAAA,OAAAc,gBAAA;EAGzD0B,KAAA3D,aAAWgC,YAAYC,cAAc;EAACd,EAAA,KAAAa;EAAAb,EAAA,KAAAc;EAAAd,EAAA,KAAAwC;CAAA,OAAAA,KAAAxC,EAAA;CAAA,IAAAyC;CAAA,IAAAzC,EAAA,OAAAqC,MAAArC,EAAA,QAAAe,YAAAf,EAAA,QAAAoC,oBAAApC,EAAA,QAAAD,OAAAC,EAAA,QAAAmB,aAAAnB,EAAA,QAAAsC,MAAAtC,EAAA,QAAAwC,IAAA;EALpDC,KAAA,oBAAC,IAAD;GAAc,GACRtB;GAAS,GACTmB;GACCvC;GACOqC,YAAAA;GACA,YAAAI;GACFzB;EAAQ,CAAA;EAClBf,EAAA,KAAAqC;EAAArC,EAAA,MAAAe;EAAAf,EAAA,MAAAoC;EAAApC,EAAA,MAAAD;EAAAC,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsC;EAAAtC,EAAA,MAAAwC;EAAAxC,EAAA,MAAAyC;CAAA,OAAAA,KAAAzC,EAAA;CAAA,OAPFyC;AAOE,CAEL;;;;;;AAQD,UAAmBC,gBAAgB;AAnEC,SAAAjC,MAAAP,IAAA;CAQb,MAAA,EAAAoB,OAAAC,aAAArB;CAAmB,OAAM;EAAAqB;EAAAD,OAEnCA,OAAKqB,SAAiB,KAAtB;CACT;AAAC"}

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

@@ -2,13 +2,15 @@
 import { Props } from "../../../props.js";
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { FocusEventHandler, ReactElement, ReactNode, RefObject } from "react";
 import { AriaNumberFieldProps, AriaTextFieldProps as AriaTextFieldProps$1 } from "react-aria";
 //#region src/components/fields/TextInput/TextInputBase.d.ts
 export declare const INPUT_WRAPPER_STYLES: Styles;
 export declare const DEFAULT_INPUT_STYLES: Styles;
-export interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, Omit<AriaTextFieldProps$1<HTMLInputElement | HTMLTextAreaElement>, 'validate' | 'form' | 'name' | 'errorMessage' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onBlur'>, TextFieldKeyboardProps, FieldBaseProps {
+export interface CubeTextInputBaseProps extends BaseProps, FieldLayoutStyleProps, Omit<AriaTextFieldProps$1<HTMLInputElement | HTMLTextAreaElement>, 'validate' | 'form' | 'name' | 'errorMessage' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onBlur'>, TextFieldKeyboardProps, FieldBaseProps {
   validate?: AriaTextFieldProps$1['validate'] | AriaNumberFieldProps['validate'];
   onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
@@ -54,6 +56,16 @@ export interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, Bloc
   resize?: Styles['resize'];
   /** The size of the input */
   size?: 'small' | 'medium' | 'large' | (string & {});
+  /**
+   * The shape of the field box.
+   * - `default` - rounded, with a border.
+   * - `plain` - square, with no border at rest, for a field set flush in a
+   *   container that draws its edges, such as a toolbar or a panel header. The
+   *   border keeps its width, and shows on focus and in a valid or invalid
+   *   state.
+   * @default "default"
+   */
+  shape?: 'default' | 'plain';
   /**
    * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token
    * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
@@ -64,6 +76,15 @@ export interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, Bloc
    * `autoComplete` wins when both are set.
    */
   autocomplete?: string;
+  /**
+   * The input's own tooltip: a short hint, such as what the value means or defaults to, or why the
+   * field is disabled. It opens on hover over the field box and on keyboard focus, and describes
+   * the input. A disabled input with a tooltip stays focusable, so the keyboard reaches it too. A
+   * string, or `TooltipProvider` props (`title`, `placement`, …). Never the field's name, an error
+   * or anything needed to fill the field in: touch users don't see it. The info badge next to a
+   * field label is `labelTooltip`.
+   */
+  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;
 }
 /**
  * Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,
@@ -81,7 +102,7 @@ export interface CubeBufferedValueProps {
    */
   isBuffered?: boolean;
 }
-declare const TextInputBase: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>>;
+declare const _TextInputBase: import("react").ForwardRefExoticComponent<CubeTextInputBaseProps & import("react").RefAttributes<unknown>>;
 //#endregion
-export { type AriaTextFieldProps$1 as AriaTextFieldProps, TextInputBase };
+export { type AriaTextFieldProps$1 as AriaTextFieldProps, _TextInputBase as TextInputBase };
 //# sourceMappingURL=TextInputBase.d.ts.map

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

@@ -1,13 +1,17 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
+import { mergeRefs as mergeRefs$1, useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
+import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
-import { forwardRef, useImperativeHandle, useMemo } from "react";
+import { splitFieldLayout } from "../../form/field-layout.js";
+import { c } from "react/compiler-runtime";
+import { mergeStyles, tasty } from "@tenphi/tasty";
+import { forwardRef, useImperativeHandle } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHover } from "react-aria";
 import { createFocusableRef } from "@react-spectrum/utils";
@@ -27,6 +31,10 @@ const ADD_STYLES = {
 		disabled: "$disabled-opacity"
 	}
 };
+const INPUT_RADIUS = {
+	"": true,
+	"shape=plain": 0
+};
 const INPUT_WRAPPER_STYLES = {
 	display: "grid",
 	flow: "row",
@@ -41,19 +49,27 @@ const INPUT_WRAPPER_STYLES = {
 	placeItems: "stretch",
 	fill: {
 		"": "#surface",
+		readonly: "#surface-2",
 		disabled: "#disabled-surface"
 	},
 	border: {
 		"": true,
+		readonly: "#border.5",
+		"readonly & @hc": true,
+		"shape=plain": "#clear",
+		"shape=plain & @hc": true,
 		valid: "#success-text.50",
 		invalid: "#danger-text.50",
 		focused: "#primary-text",
 		"valid & focused": "#success-text",
 		"invalid & focused": "#danger-text",
-		disabled: true
+		disabled: true,
+		"disabled & shape=plain": "#clear",
+		"disabled & shape=plain & @hc": true,
+		"disabled & focused": "#primary-text"
 	},
 	preset: "t3",
-	radius: true,
+	radius: INPUT_RADIUS,
 	cursor: "text",
 	color: {
 		"": "#dark-02",
@@ -106,18 +122,12 @@ const InputWrapperElement = tasty({
 	qa: "InputWrapper",
 	styles: INPUT_WRAPPER_STYLES
 });
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...BLOCK_STYLES,
-	...COLOR_STYLES
-];
 const DEFAULT_INPUT_STYLES = {
 	recipe: "reset input / input-autofill",
 	placeSelf: "stretch",
 	width: "initial 100% 100%",
 	transition: "theme",
-	radius: true,
+	radius: INPUT_RADIUS,
 	padding: "$vertical-padding $right-padding $vertical-padding $left-padding",
 	textAlign: "left",
 	preset: "t3",
@@ -130,6 +140,10 @@ const DEFAULT_INPUT_STYLES = {
 	},
 	resize: "none",
 	userSelect: "auto",
+	cursor: {
+		"": "text",
+		disabled: "default"
+	},
 	Placeholder: {
 		$: "&::placeholder",
 		recipe: "input-placeholder"
@@ -164,7 +178,7 @@ const INTERACTIVE_ELEMENTS = "a[href], button, input, select, textarea, [tabinde
 */
 function focusInputOnBoxPress(event, input) {
 	if (event.button !== 0 || event.defaultPrevented) return;
-	if (!input || input.disabled) return;
+	if (!input || input.disabled || input.getAttribute("aria-disabled") === "true") return;
 	const box = event.currentTarget;
 	const target = event.target;
 	if (!box.contains(target)) return;
@@ -173,21 +187,50 @@ function focusInputOnBoxPress(event, input) {
 	event.preventDefault();
 	input.focus();
 }
+/** A press doesn't focus a natively disabled input, so it doesn't focus an inert one either. */
+function preventPointerFocus(event) {
+	event.preventDefault();
+}
 /**
 * 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, size = "medium", autoComplete, autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
-	let styles = extractStyles(otherProps, PROP_STYLES);
-	let type = otherProps.type;
+function TextInputBase(props, ref) {
+	const $ = c(28);
+	let { qa, mods, isInvalid, isValid, prefix: t0, isDisabled, isReadOnly, multiLine, autoFocus, inputProps: t1, wrapperProps, inputRef: t2, isLoading, loadingIndicator, value, inputStyles: t3, suffix, suffixPosition: t4, actions, wrapperRef, rows, size: t5, shape: t6, autoComplete, autocomplete, icon, maxLength, minLength, form, resize, tooltip, children, ...otherProps } = props;
+	let prefix = t0;
+	let inputProps = t1;
+	let inputRef = t2;
+	let inputStyles = t3 === void 0 ? {} : t3;
+	const suffixPosition = t4 === void 0 ? "before" : t4;
+	const size = t5 === void 0 ? "medium" : t5;
+	const shape = t6 === void 0 ? "default" : t6;
+	const { styles, field } = splitFieldLayout(props, { fillHeightOnFlex: !!multiLine });
+	const type = otherProps.type;
 	if (resize) inputStyles = mergeStyles(inputStyles, { resize });
-	let ElementType = multiLine ? "textarea" : "input";
-	let { isFocused, focusProps } = useFocus$1();
-	let { hoverProps, isHovered } = useHover({ isDisabled });
-	let domRef = useObjectRef(wrapperRef);
+	const ElementType = multiLine ? "textarea" : "input";
+	const { isFocused, focusProps } = useFocus$1();
+	const t7 = isDisabled || isReadOnly;
+	let t8;
+	if ($[0] !== t7) {
+		t8 = { isDisabled: t7 };
+		$[0] = t7;
+		$[1] = t8;
+	} else t8 = $[1];
+	const { hoverProps, isHovered } = useHover(t8);
+	const domRef = useObjectRef(wrapperRef);
 	inputRef = useCombinedRefs(inputRef);
+	let t9;
+	if ($[2] !== tooltip) {
+		t9 = {
+			tooltip,
+			children: null
+		};
+		$[2] = tooltip;
+		$[3] = t9;
+	} else t9 = $[3];
+	const { renderWithTooltip, isTooltipActive } = useAutoTooltip(t9);
 	useImperativeHandle(ref, () => ({
 		...createFocusableRef(domRef, inputRef),
 		select() {
@@ -197,104 +240,169 @@ function _TextInputBase(props, ref) {
 			return inputRef?.current;
 		}
 	}));
-	const showValidationIndicator = hasValidationIndicator({
-		isInvalid,
-		isValid,
-		isLoading
-	});
+	let t10;
+	if ($[4] !== isInvalid || $[5] !== isLoading || $[6] !== isValid) {
+		t10 = hasValidationIndicator({
+			isInvalid,
+			isValid,
+			isLoading
+		});
+		$[4] = isInvalid;
+		$[5] = isLoading;
+		$[6] = isValid;
+		$[7] = t10;
+	} else t10 = $[7];
+	const showValidationIndicator = t10;
 	if (!inputProps?.placeholder) {
 		if (!inputProps) inputProps = {};
 		inputProps.placeholder = " ";
 	}
 	if (icon) {
-		icon = /* @__PURE__ */ jsx("div", {
-			"data-element": "InputIcon",
-			children: icon
-		});
+		let t11;
+		if ($[8] !== icon) {
+			t11 = /* @__PURE__ */ jsx("div", {
+				"data-element": "InputIcon",
+				children: icon
+			});
+			$[8] = icon;
+			$[9] = t11;
+		} else t11 = $[9];
+		icon = t11;
 		if (prefix) prefix = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, prefix] });
 		else prefix = icon;
 	}
-	const modifiers = useMemo(() => ({
-		...getValidationMods({
+	let t11;
+	if ($[10] !== isInvalid || $[11] !== isValid) {
+		t11 = getValidationMods({
 			isInvalid,
 			isValid
-		}),
-		loadable: !!loadingIndicator,
-		focused: isFocused,
-		hovered: isHovered,
-		disabled: isDisabled,
-		multiline: multiLine,
-		prefix: !!prefix,
-		suffix: showValidationIndicator || !!suffix || !!actions,
-		...mods
-	}), [
-		mods,
-		isInvalid,
-		isValid,
-		showValidationIndicator,
-		loadingIndicator,
-		isFocused,
-		isDisabled,
-		isHovered,
-		multiLine,
-		prefix,
-		suffix,
-		actions
-	]);
+		});
+		$[10] = isInvalid;
+		$[11] = isValid;
+		$[12] = t11;
+	} else t11 = $[12];
+	const t12 = !!loadingIndicator;
+	const t13 = !!isReadOnly;
+	const t14 = !!prefix;
+	const t15 = showValidationIndicator || !!suffix || !!actions;
+	let t16;
+	if ($[13] !== isDisabled || $[14] !== isFocused || $[15] !== isHovered || $[16] !== mods || $[17] !== multiLine || $[18] !== shape || $[19] !== t11 || $[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t15) {
+		t16 = {
+			...t11,
+			loadable: t12,
+			focused: isFocused,
+			hovered: isHovered,
+			disabled: isDisabled,
+			readonly: t13,
+			multiline: multiLine,
+			prefix: t14,
+			suffix: t15,
+			shape,
+			...mods
+		};
+		$[13] = isDisabled;
+		$[14] = isFocused;
+		$[15] = isHovered;
+		$[16] = mods;
+		$[17] = multiLine;
+		$[18] = shape;
+		$[19] = t11;
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+		$[23] = t15;
+		$[24] = t16;
+	} else t16 = $[24];
+	const modifiers = t16;
 	const resolvedAutoComplete = autoComplete ?? autocomplete ?? inputProps.autoComplete;
 	const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;
 	const textSecurityStyles = multiLine && type === "password" && inputProps.value?.length ? { fontFamily: "text-security-disc" } : {};
-	const textField = /* @__PURE__ */ jsxs(InputWrapperElement, {
-		ref: domRef,
-		mods: modifiers,
-		"data-size": size,
-		styles,
-		...mergeProps$1(wrapperProps, { onMouseDown: (event) => focusInputOnBoxPress(event, inputRef?.current) }),
-		children: [
-			prefix ? /* @__PURE__ */ jsx("div", {
-				"data-element": "Prefix",
-				children: prefix
-			}) : null,
-			/* @__PURE__ */ jsx(InputElement, {
-				qa: qa || "Input",
-				as: ElementType,
-				"data-input-type": "textinput",
-				...mergeProps$1(inputProps, focusProps, hoverProps),
-				ref: inputRef,
-				rows: multiLine ? rows ?? inputProps.rows ?? 1 : inputProps.rows,
-				mods: modifiers,
-				style: textSecurityStyles,
-				...resolvedAutoFocus ? { "data-autofocus": "" } : void 0,
-				autoFocus: resolvedAutoFocus,
-				"data-size": size,
-				autoComplete: resolvedAutoComplete,
-				styles: inputStyles,
-				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,
-					isLoading && loadingIndicator ? /* @__PURE__ */ jsx("div", {
-						"data-element": "State",
-						children: loadingIndicator
-					}) : /* @__PURE__ */ jsx(ValidationIndicator, {
-						isInvalid,
-						isValid,
-						isLoading
-					}),
-					suffixPosition === "after" ? suffix : null,
-					actions
-				]
-			}) : null
-		]
+	const isInputDisabled = !!(isDisabled ?? inputProps.disabled);
+	let t17;
+	if ($[25] !== isInputDisabled || $[26] !== isTooltipActive) {
+		t17 = getDisabledElementProps({
+			isDisabled: isInputDisabled,
+			keepEvents: isTooltipActive,
+			as: "input"
+		});
+		$[25] = isInputDisabled;
+		$[26] = isTooltipActive;
+		$[27] = t17;
+	} else t17 = $[27];
+	const { isInert } = t17;
+	let ownInputProps = mergeProps$1(inputProps, focusProps, hoverProps);
+	if (isInert) ownInputProps = mergeProps$1(getInertInputProps(mergeProps$1({
+		...inputProps,
+		onFocus: void 0,
+		onBlur: void 0
+	}, focusProps, hoverProps), { excludeFromTabOrder: props.excludeFromTabOrder }), {
+		readOnly: true,
+		onMouseDown: preventPointerFocus
+	});
+	const textField = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
+		const { pointerProps, focusProps: tooltipFocusProps } = splitTooltipTriggerProps(tooltipTriggerProps);
+		return /* @__PURE__ */ jsxs(InputWrapperElement, {
+			ref: tooltipRef ? mergeRefs$1(domRef, tooltipRef) : domRef,
+			mods: modifiers,
+			"data-size": size,
+			styles,
+			...mergeProps$1(wrapperProps, pointerProps, { onMouseDown: (event) => focusInputOnBoxPress(event, inputRef?.current) }),
+			children: [
+				prefix ? /* @__PURE__ */ jsx("div", {
+					"data-element": "Prefix",
+					children: prefix
+				}) : null,
+				/* @__PURE__ */ jsx(InputElement, {
+					qa: qa || "Input",
+					as: ElementType,
+					"data-input-type": "textinput",
+					...mergeTooltipFocusProps(ownInputProps, tooltipFocusProps),
+					ref: inputRef,
+					rows: multiLine ? rows ?? inputProps.rows ?? 1 : inputProps.rows,
+					mods: modifiers,
+					style: textSecurityStyles,
+					...resolvedAutoFocus ? { "data-autofocus": "" } : void 0,
+					autoFocus: resolvedAutoFocus,
+					"data-size": size,
+					autoComplete: resolvedAutoComplete,
+					styles: inputStyles,
+					disabled: isInputDisabled && !isInert,
+					maxLength: maxLength ?? inputProps.maxLength,
+					minLength: minLength ?? inputProps.minLength
+				}),
+				children,
+				showValidationIndicator || suffix || actions ? /* @__PURE__ */ jsxs("div", {
+					"data-element": "Suffix",
+					children: [
+						suffixPosition === "before" ? suffix : null,
+						isLoading && loadingIndicator ? /* @__PURE__ */ jsx("div", {
+							"data-element": "State",
+							children: loadingIndicator
+						}) : /* @__PURE__ */ jsx(ValidationIndicator, {
+							isInvalid,
+							isValid,
+							isLoading
+						}),
+						suffixPosition === "after" ? suffix : null,
+						actions
+					]
+				}) : null
+			]
+		});
+	}, "top");
+	return wrapWithField(textField, {
+		...props,
+		...field,
+		tooltip: void 0,
+		...isInert ? { labelProps: {
+			...props.labelProps,
+			htmlFor: void 0,
+			for: void 0
+		} } : null
 	});
-	return wrapWithField(textField, props);
 }
-const TextInputBase = forwardRef(_TextInputBase);
+const _TextInputBase = forwardRef(TextInputBase);
 //#endregion
-export { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, TextInputBase };
+export { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, _TextInputBase as TextInputBase };
 
 //# sourceMappingURL=TextInputBase.js.map