@instructure/ui-text-input 10.7.0 → 10.7.1-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.7.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.7.0...v10.7.1-snapshot-0) (2024-12-06)
+
+
+### Bug Fixes
+
+* **ui-select,ui-text-input:** fix long before elements overflowing in TextInput, Select, SimpleSelect ([ee9cafd](https://github.com/instructure/instructure-ui/commit/ee9cafdd027b9a1caaa0791d1b6dc4f8401c87e7))
+
+
+
+
+
 # [10.7.0](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.7.0) (2024-12-03)
 
 

package/es/TextInput/index.js

@@ -48,7 +48,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     super(props);
     this.ref = null;
     this._input = null;
-    this._beforeElement = null;
     this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
@@ -64,14 +63,13 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       const interaction = this.interaction;
       const _this$state = this.state,
         hasFocus = _this$state.hasFocus,
-        beforeElementHasWidth = _this$state.beforeElementHasWidth,
         afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
         focused: hasFocus,
-        beforeElementHasWidth,
-        afterElementHasWidth
+        afterElementHasWidth: afterElementHasWidth,
+        beforeElementExists: this.props.renderBeforeInput != void 0
       };
     };
     this.handleInputRef = node => {
@@ -103,7 +101,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
     this.state = {
       hasFocus: false,
-      beforeElementHasWidth: void 0,
       afterElementHasWidth: void 0
     };
     this._defaultId = props.deterministicId();
@@ -114,7 +111,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (this._input) {
       this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
       this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
@@ -127,11 +123,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
-      this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
-      });
-    }
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
@@ -265,25 +256,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       elementRef: this.handleRef
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
-    }, renderBeforeOrAfter ? jsx("div", null, jsx("span", {
+    }, renderBeforeOrAfter ? jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.layout
-    }, beforeElement && jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
-      ref: e => {
-        this._beforeElement = e;
-      }
-    }, beforeElement), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, jsx("span", {
+    }, beforeElement, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, this.renderInput()), afterElement && jsx("span", {
+    }, this.renderInput(), afterElement && jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
       ref: e => {
         this._afterElement = e;
       }
-    }, afterElement))))) : (/* If no prepended or appended content, don't render Flex layout */
+    }, afterElement))) : (/* If no prepended or appended content, don't render Flex layout */
     this.renderInput())));
   }
 }, _TextInput.displayName = "TextInput", _TextInput.componentId = 'TextInput', _TextInput.allowedProps = allowedProps, _TextInput.propTypes = propTypes, _TextInput.defaultProps = {

package/es/TextInput/styles.js

@@ -39,8 +39,8 @@ const generateStyle = (componentTheme, props, state) => {
   const disabled = state.disabled,
     invalid = state.invalid,
     focused = state.focused,
-    beforeElementHasWidth = state.beforeElementHasWidth,
-    afterElementHasWidth = state.afterElementHasWidth;
+    afterElementHasWidth = state.afterElementHasWidth,
+    beforeElementExists = state.beforeElementExists;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,
@@ -81,11 +81,11 @@ const generateStyle = (componentTheme, props, state) => {
     '&::-ms-clear': {
       display: 'none'
     },
+    width: '100%',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     appearance: 'none',
     margin: 0,
-    width: '100%',
     display: 'block',
     boxSizing: 'border-box',
     outline: 'none',
@@ -122,10 +122,6 @@ const generateStyle = (componentTheme, props, state) => {
     justifyContent: 'flex-start',
     flexDirection: 'row'
   };
-  const flexItemBase = {
-    ...viewBase,
-    flexShrink: 0
-  };
   return {
     requiredInvalid: {
       color: componentTheme.requiredInvalidColor
@@ -167,32 +163,21 @@ const generateStyle = (componentTheme, props, state) => {
     },
     layout: {
       label: 'textInput__layout',
-      ...flexBase,
+      ...viewBase,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexDirection: 'row',
       ...(!shouldNotWrap && {
         flexWrap: 'wrap'
+      }),
+      ...(beforeElementExists && {
+        paddingInlineStart: componentTheme.padding
       })
     },
-    beforeElement: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      label: 'textInput__beforeElement',
-      ...flexItemBase,
-      paddingInlineStart: componentTheme.padding,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(beforeElementHasWidth === false && {
-        paddingInlineStart: 0
-      })
-    },
-    innerWrapper: {
-      label: 'textInput__innerWrapper',
-      ...flexItemBase,
-      minWidth: '0.0625rem',
-      flexShrink: 1,
-      flexGrow: 1
-    },
     inputLayout: {
       label: 'textInput__inputLayout',
+      flexGrow: 1,
       ...flexBase
     },
     afterElement: {
@@ -202,7 +187,8 @@ const generateStyle = (componentTheme, props, state) => {
       marginTop: '-1px',
       marginBottom: '-1px',
       label: 'textInput__afterElement',
-      ...flexItemBase,
+      ...viewBase,
+      flexShrink: 0,
       paddingInlineEnd: componentTheme.padding,
       // we only override the padding once the width is calculated,
       // it needs the padding on render

package/lib/TextInput/index.js

@@ -58,7 +58,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     super(props);
     this.ref = null;
     this._input = null;
-    this._beforeElement = null;
     this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
@@ -74,14 +73,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       const interaction = this.interaction;
       const _this$state = this.state,
         hasFocus = _this$state.hasFocus,
-        beforeElementHasWidth = _this$state.beforeElementHasWidth,
         afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
         focused: hasFocus,
-        beforeElementHasWidth,
-        afterElementHasWidth
+        afterElementHasWidth: afterElementHasWidth,
+        beforeElementExists: this.props.renderBeforeInput != void 0
       };
     };
     this.handleInputRef = node => {
@@ -113,7 +111,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     };
     this.state = {
       hasFocus: false,
-      beforeElementHasWidth: void 0,
       afterElementHasWidth: void 0
     };
     this._defaultId = props.deterministicId();
@@ -124,7 +121,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
       this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       });
     }
@@ -137,11 +133,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
   }
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
-      this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
-      });
-    }
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
@@ -275,25 +266,16 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       elementRef: this.handleRef
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
-    }, renderBeforeOrAfter ? (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", {
+    }, renderBeforeOrAfter ? (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.layout
-    }, beforeElement && (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
-      ref: e => {
-        this._beforeElement = e;
-      }
-    }, beforeElement), (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, (0, _emotion.jsx)("span", {
+    }, beforeElement, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, this.renderInput()), afterElement && (0, _emotion.jsx)("span", {
+    }, this.renderInput(), afterElement && (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
       ref: e => {
         this._afterElement = e;
       }
-    }, afterElement))))) : (/* If no prepended or appended content, don't render Flex layout */
+    }, afterElement))) : (/* If no prepended or appended content, don't render Flex layout */
     this.renderInput())));
   }
 }, _TextInput.displayName = "TextInput", _TextInput.componentId = 'TextInput', _TextInput.allowedProps = _props.allowedProps, _TextInput.propTypes = _props.propTypes, _TextInput.defaultProps = {

package/lib/TextInput/styles.js

@@ -45,8 +45,8 @@ const generateStyle = (componentTheme, props, state) => {
   const disabled = state.disabled,
     invalid = state.invalid,
     focused = state.focused,
-    beforeElementHasWidth = state.beforeElementHasWidth,
-    afterElementHasWidth = state.afterElementHasWidth;
+    afterElementHasWidth = state.afterElementHasWidth,
+    beforeElementExists = state.beforeElementExists;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,
@@ -87,11 +87,11 @@ const generateStyle = (componentTheme, props, state) => {
     '&::-ms-clear': {
       display: 'none'
     },
+    width: '100%',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     appearance: 'none',
     margin: 0,
-    width: '100%',
     display: 'block',
     boxSizing: 'border-box',
     outline: 'none',
@@ -128,10 +128,6 @@ const generateStyle = (componentTheme, props, state) => {
     justifyContent: 'flex-start',
     flexDirection: 'row'
   };
-  const flexItemBase = {
-    ...viewBase,
-    flexShrink: 0
-  };
   return {
     requiredInvalid: {
       color: componentTheme.requiredInvalidColor
@@ -173,32 +169,21 @@ const generateStyle = (componentTheme, props, state) => {
     },
     layout: {
       label: 'textInput__layout',
-      ...flexBase,
+      ...viewBase,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexDirection: 'row',
       ...(!shouldNotWrap && {
         flexWrap: 'wrap'
+      }),
+      ...(beforeElementExists && {
+        paddingInlineStart: componentTheme.padding
       })
     },
-    beforeElement: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      label: 'textInput__beforeElement',
-      ...flexItemBase,
-      paddingInlineStart: componentTheme.padding,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(beforeElementHasWidth === false && {
-        paddingInlineStart: 0
-      })
-    },
-    innerWrapper: {
-      label: 'textInput__innerWrapper',
-      ...flexItemBase,
-      minWidth: '0.0625rem',
-      flexShrink: 1,
-      flexGrow: 1
-    },
     inputLayout: {
       label: 'textInput__inputLayout',
+      flexGrow: 1,
       ...flexBase
     },
     afterElement: {
@@ -208,7 +193,8 @@ const generateStyle = (componentTheme, props, state) => {
       marginTop: '-1px',
       marginBottom: '-1px',
       label: 'textInput__afterElement',
-      ...flexItemBase,
+      ...viewBase,
+      flexShrink: 0,
       paddingInlineEnd: componentTheme.padding,
       // we only override the padding once the width is calculated,
       // it needs the padding on render

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "10.7.0",
+  "version": "10.7.1-snapshot-0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,12 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.7.0",
-    "@instructure/ui-babel-preset": "10.7.0",
-    "@instructure/ui-badge": "10.7.0",
-    "@instructure/ui-color-utils": "10.7.0",
-    "@instructure/ui-test-utils": "10.7.0",
-    "@instructure/ui-themes": "10.7.0",
+    "@instructure/ui-axe-check": "10.7.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.7.1-snapshot-0",
+    "@instructure/ui-badge": "10.7.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.7.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.7.1-snapshot-0",
+    "@instructure/ui-themes": "10.7.1-snapshot-0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.7.0",
-    "@instructure/shared-types": "10.7.0",
-    "@instructure/ui-dom-utils": "10.7.0",
-    "@instructure/ui-form-field": "10.7.0",
-    "@instructure/ui-icons": "10.7.0",
-    "@instructure/ui-prop-types": "10.7.0",
-    "@instructure/ui-react-utils": "10.7.0",
-    "@instructure/ui-tag": "10.7.0",
-    "@instructure/ui-testable": "10.7.0",
+    "@instructure/emotion": "10.7.1-snapshot-0",
+    "@instructure/shared-types": "10.7.1-snapshot-0",
+    "@instructure/ui-dom-utils": "10.7.1-snapshot-0",
+    "@instructure/ui-form-field": "10.7.1-snapshot-0",
+    "@instructure/ui-icons": "10.7.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.7.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.7.1-snapshot-0",
+    "@instructure/ui-tag": "10.7.1-snapshot-0",
+    "@instructure/ui-testable": "10.7.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/TextInput/README.md

@@ -205,7 +205,7 @@ Focusable content will be focused separately from the input itself.
             value={this.state.value}
             onChange={this.handleChange}
             renderBeforeInput={
-              <View display="block" padding="xxx-small 0">
+              <>
                 {this.state.value !== '' && (
                   <Tag
                     text={this.state.value}
@@ -233,7 +233,7 @@ Focusable content will be focused separately from the input itself.
                   margin="xxx-small xxx-small xxx-small none"
                   onClick={() => console.log('Strawberry')}
                 />
-              </View>
+              </>
             }
             renderAfterInput={() => (
               <Avatar name="Paula Panda" src={avatarSquare} size="x-small" />
@@ -260,7 +260,7 @@ Focusable content will be focused separately from the input itself.
           value={value}
           onChange={handleChange}
           renderBeforeInput={
-            <View display="block" padding="xxx-small 0">
+            <>
               {value !== '' && (
                 <Tag
                   text={value}
@@ -288,7 +288,7 @@ Focusable content will be focused separately from the input itself.
                 margin="xxx-small xxx-small xxx-small none"
                 onClick={() => console.log('Strawberry')}
               />
-            </View>
+            </>
           }
           renderAfterInput={() => (
             <Avatar name="Paula Panda" src={avatarSquare} size="x-small" />
@@ -346,7 +346,7 @@ type: example
     <TextInput
       renderLabel="I will wrap"
       renderBeforeInput={
-        <div>
+        <>
           <Tag
             text="English 101"
             margin="xx-small xxx-small"
@@ -355,7 +355,7 @@ type: example
             text="History 205"
             margin="xx-small xxx-small"
           />
-        </div>
+        </>
       }
       renderAfterInput={<Avatar name="Paula Panda" src={avatarSquare} size="x-small" />}
     />
@@ -374,6 +374,7 @@ type: embed
     <Figure.Item>Left align text (exceptions may apply)</Figure.Item>
     <Figure.Item>Place labels on top or to the left (inline)</Figure.Item>
     <Figure.Item>Make placeholder text different than the label</Figure.Item>
+    <Figure.Item>Use React fragments for <code>renderBeforeInput</code>. This will nicely float the text input box to the remaining space</Figure.Item>
   </Figure>
   <Figure recommendation="no" title="Don't">
     <Figure.Item>Place labels to the right of the input</Figure.Item>

package/src/TextInput/index.tsx

@@ -77,7 +77,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     super(props)
     this.state = {
       hasFocus: false,
-      beforeElementHasWidth: undefined,
       afterElementHasWidth: undefined
     }
     this._defaultId = props.deterministicId!()
@@ -87,7 +86,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   ref: Element | null = null
 
   private _input: HTMLInputElement | null = null
-  private _beforeElement: HTMLSpanElement | null = null
   private _afterElement: HTMLSpanElement | null = null
 
   private readonly _defaultId: string
@@ -112,13 +110,10 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         'focus',
         this.handleFocus
       )
-
       this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
       })
     }
-
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
@@ -129,11 +124,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   }
 
   componentDidUpdate(prevProps: TextInputProps) {
-    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
-      this.setState({
-        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
-      })
-    }
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
@@ -154,13 +144,13 @@ class TextInput extends Component<TextInputProps, TextInputState> {
 
   makeStyleProps = (): TextInputStyleProps => {
     const { interaction } = this
-    const { hasFocus, beforeElementHasWidth, afterElementHasWidth } = this.state
+    const { hasFocus, afterElementHasWidth } = this.state
     return {
       disabled: interaction === 'disabled',
       invalid: this.invalid,
       focused: hasFocus,
-      beforeElementHasWidth,
-      afterElementHasWidth
+      afterElementHasWidth: afterElementHasWidth,
+      beforeElementExists: this.props.renderBeforeInput != undefined
     }
   }
 
@@ -282,7 +272,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     )
   }
 
-  getElementHasWidth(element: HTMLSpanElement | null) {
+  getElementHasWidth(element: Element | null) {
     if (!element) {
       return undefined
     }
@@ -360,39 +350,24 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       >
         <span css={styles?.facade}>
           {renderBeforeOrAfter ? (
-            <div>
-              <span css={styles?.layout}>
-                {beforeElement && (
+            <span css={styles?.layout}>
+              {beforeElement}
+              {/* The input and content after input should not wrap,
+                so they're in their own flex container */}
+              <span css={styles?.inputLayout}>
+                {this.renderInput()}
+                {afterElement && (
                   <span
-                    css={styles?.beforeElement}
+                    css={styles?.afterElement}
                     ref={(e) => {
-                      this._beforeElement = e
+                      this._afterElement = e
                     }}
                   >
-                    {beforeElement}
+                    {afterElement}
                   </span>
                 )}
-                <span css={styles?.innerWrapper}>
-                  {/*
-                    The input and content after input should not wrap,
-                    so they're in their own flex container
-                  */}
-                  <span css={styles?.inputLayout}>
-                    <span css={styles?.innerWrapper}>{this.renderInput()}</span>
-                    {afterElement && (
-                      <span
-                        css={styles?.afterElement}
-                        ref={(e) => {
-                          this._afterElement = e
-                        }}
-                      >
-                        {afterElement}
-                      </span>
-                    )}
-                  </span>
-                </span>
               </span>
-            </div>
+            </span>
           ) : (
             /* If no prepended or appended content, don't render Flex layout */
             this.renderInput()

package/src/TextInput/props.ts

@@ -193,11 +193,9 @@ type TextInputStyle = ComponentStyle<
   | 'textInput'
   | 'facade'
   | 'layout'
-  | 'beforeElement'
-  | 'innerWrapper'
-  | 'inputLayout'
   | 'afterElement'
   | 'requiredInvalid'
+  | 'inputLayout'
 >
 
 const propTypes: PropValidators<PropKeys> = {
@@ -254,7 +252,6 @@ const allowedProps: AllowedPropKeys = [
 
 type TextInputState = {
   hasFocus: boolean
-  beforeElementHasWidth?: boolean
   afterElementHasWidth?: boolean
 }
 
@@ -262,8 +259,8 @@ type TextInputStyleProps = {
   disabled: boolean
   invalid: boolean
   focused: TextInputState['hasFocus']
-  beforeElementHasWidth: TextInputState['beforeElementHasWidth']
   afterElementHasWidth: TextInputState['afterElementHasWidth']
+  beforeElementExists: boolean
 }
 
 export type {