@instructure/ui-text-input 11.6.0 → 11.6.1-snapshot-129

package/lib/TextInput/{index.js → v1/index.js}

@@ -14,7 +14,7 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
-var _FormField = require("@instructure/ui-form-field/lib/FormField");
+var _v11_ = require("@instructure/ui-form-field/v11_6");
 var _emotion = require("@instructure/emotion");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -52,7 +52,7 @@ category: components
 tags: form, field
 ---
 **/
-let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends _react.Component {
+let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -277,7 +277,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
         children: [' ', "*"]
       })]
     }) : rawLabel;
-    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
+    return (0, _jsxRuntime.jsx)(_v11_.FormField, {
       id: this.id,
       label: label,
       messagesId: this._messagesId,

package/lib/TextInput/v2/index.js

@@ -0,0 +1,319 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextInput = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
+var _latest = require("@instructure/ui-form-field/latest");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired", "onFocus"];
+var _dec, _dec2, _class, _TextInput;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+tags: form, field, input
+---
+**/
+let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_TextInput = class TextInput extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._input = null;
+    this._afterElement = null;
+    this._defaultId = void 0;
+    this._messagesId = void 0;
+    this._focusListener = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.makeStyleProps = () => {
+      const afterElementHasWidth = this.state.afterElementHasWidth;
+      const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
+      const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
+      return {
+        interaction: this.interaction,
+        invalid: this.invalid,
+        success: success,
+        afterElementHasWidth: afterElementHasWidth,
+        beforeElementExists: !!beforeElement
+      };
+    };
+    this.handleInputRef = node => {
+      this._input = node;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(node);
+      }
+    };
+    this.handleChange = event => {
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(event, event.target.value);
+      }
+    };
+    this.handleBlur = event => {
+      if (typeof this.props.onBlur === 'function') {
+        this.props.onBlur(event);
+      }
+    };
+    this.handleFocus = event => {
+      if (typeof this.props.onFocus === 'function') {
+        this.props.onFocus(event);
+      }
+    };
+    this.state = {
+      afterElementHasWidth: void 0
+    };
+    this._defaultId = props.deterministicId();
+    this._messagesId = props.deterministicId('TextInput-messages');
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    if (this._input) {
+      this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
+      this.setState({
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
+    }
+    this.adjustAfterElementHeight();
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
+  }
+  componentWillUnmount() {
+    if (this._focusListener) {
+      this._focusListener.remove();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
+      this.setState({
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+  }
+  renderInstUIIcon(elementToRender) {
+    var _type;
+    if (!elementToRender) {
+      return null;
+    }
+    const rendered = (0, _callRenderProp.callRenderProp)(elementToRender);
+    // Map sizes to Lucide icon semantic size tokens
+    const linkSizeToIconSize = {
+      small: 'sm',
+      medium: 'md',
+      large: 'lg'
+    };
+    const iconSize = linkSizeToIconSize[this.props.size || 'medium'];
+    if (/*#__PURE__*/(0, _react.isValidElement)(elementToRender) && ((_type = elementToRender.type) === null || _type === void 0 ? void 0 : _type.name) === 'WrappedIcon') {
+      return (0, _safeCloneElement.safeCloneElement)(rendered, {
+        size: iconSize
+      });
+    }
+    return rendered;
+  }
+  adjustAfterElementHeight() {
+    var _this$_afterElement, _afterElementChild$fi;
+    const afterElementChild = (_this$_afterElement = this._afterElement) === null || _this$_afterElement === void 0 ? void 0 : _this$_afterElement.firstElementChild;
+
+    // Check if the child is a button, then get the button's first child (the content span)
+    const buttonContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'BUTTON' ? afterElementChild.firstElementChild : null;
+
+    // This is a necessary workaround for DateInput2 because it uses a Popover, which has a nested Button as an afterElement
+    // Check if the child is a Popover's inner span containing a button, then get the button's first child (the content span)
+    const popoverContentSpan = (afterElementChild === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'SPAN' && ((_afterElementChild$fi = afterElementChild.firstElementChild) === null || _afterElementChild$fi === void 0 ? void 0 : _afterElementChild$fi.tagName) === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
+    const targetSpan = buttonContentSpan !== null && buttonContentSpan !== void 0 ? buttonContentSpan : popoverContentSpan;
+    if (targetSpan) {
+      // Set the height to 36px (the height of a medium TextInput) to avoid layout shift when the afterElement content changes
+      // this temporary workaround is necessary because otherwise the layout breaks, later on IconButton's default height will be adjusted to the TextInput size
+      // so this workaround will not be needed anymore
+      targetSpan.style.height = '36px';
+    }
+  }
+  focus() {
+    var _this$_input;
+    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+  }
+  get interaction() {
+    return (0, _getInteraction.getInteraction)({
+      props: this.props
+    });
+  }
+  get hasMessages() {
+    return !!this.props.messages && this.props.messages.length > 0;
+  }
+  get invalid() {
+    return !!this.props.messages && this.props.messages.findIndex(message => {
+      return message.type === 'error' || message.type === 'newError';
+    }) >= 0;
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this._input);
+  }
+  get value() {
+    var _this$_input2;
+    return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
+  }
+  get id() {
+    return this.props.id || this._defaultId;
+  }
+  renderInput() {
+    var _this$props$styles;
+    const _this$props3 = this.props,
+      type = _this$props3.type,
+      size = _this$props3.size,
+      htmlSize = _this$props3.htmlSize,
+      display = _this$props3.display,
+      textAlign = _this$props3.textAlign,
+      placeholder = _this$props3.placeholder,
+      value = _this$props3.value,
+      defaultValue = _this$props3.defaultValue,
+      isRequired = _this$props3.isRequired,
+      onFocus = _this$props3.onFocus,
+      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const props = (0, _passthroughProps.passthroughProps)(rest);
+    const interaction = this.interaction;
+    let descriptionIds = '';
+    if (props['aria-describedby']) {
+      descriptionIds = `${props['aria-describedby']}`;
+    }
+    return (0, _jsxRuntime.jsx)("input", {
+      ...props,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
+      defaultValue: defaultValue,
+      value: value,
+      placeholder: interaction === 'enabled' ? placeholder : void 0,
+      ref: this.handleInputRef,
+      type: type,
+      id: this.id,
+      required: isRequired,
+      "aria-invalid": this.invalid ? 'true' : void 0,
+      disabled: interaction === 'disabled',
+      readOnly: interaction === 'readonly',
+      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
+      size: htmlSize,
+      onChange: this.handleChange,
+      onBlur: this.handleBlur
+    });
+  }
+  getElementHasWidth(element) {
+    if (!element) {
+      return void 0;
+    }
+    const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element);
+    if (!computedStyle) {
+      return void 0;
+    }
+    const width = computedStyle.width,
+      paddingInlineStart = computedStyle.paddingInlineStart,
+      paddingInlineEnd = computedStyle.paddingInlineEnd;
+    if (width === 'auto' || width === '') {
+      // This is a workaround for an edge-case, when the TextInput's parent
+      // is hidden on load, so the element is not visible either.
+      // In this case the computed width is going to be either 'auto' or '',
+      // so we assume it has width so that the padding won't be removed.
+      return true;
+    }
+    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
+    return elementWidth > 0;
+  }
+  render() {
+    const _this$props4 = this.props,
+      width = _this$props4.width,
+      display = _this$props4.display,
+      renderLabel = _this$props4.renderLabel,
+      renderBeforeInput = _this$props4.renderBeforeInput,
+      renderAfterInput = _this$props4.renderAfterInput,
+      messages = _this$props4.messages,
+      inputContainerRef = _this$props4.inputContainerRef,
+      isRequired = _this$props4.isRequired,
+      styles = _this$props4.styles;
+    const beforeElement = this.renderInstUIIcon(renderBeforeInput);
+    const afterElement = this.renderInstUIIcon(renderAfterInput);
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== void 0 || renderAfterInput !== void 0;
+    const label = (0, _callRenderProp.callRenderProp)(renderLabel);
+    return (0, _jsxRuntime.jsx)(_latest.FormField, {
+      id: this.id,
+      label: label,
+      messagesId: this._messagesId,
+      messages: messages,
+      inline: display === 'inline-block',
+      width: width,
+      inputContainerRef: inputContainerRef,
+      layout: this.props.layout,
+      elementRef: this.handleRef,
+      margin: this.props.margin,
+      isRequired: isRequired,
+      disabled: this.interaction === 'disabled',
+      readOnly: this.interaction === 'readonly',
+      "data-cid": "TextInput",
+      children: (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.layout,
+          children: [beforeElement, (0, _jsxRuntime.jsxs)("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
+            children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
+              css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+              ref: e => {
+                this._afterElement = e;
+              },
+              children: 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.defaultProps = {
+  type: 'text',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  isRequired: false,
+  display: 'block',
+  shouldNotWrap: false,
+  size: 'medium',
+  textAlign: 'start',
+  messages: []
+}, _TextInput)) || _class) || _class);
+var _default = exports.default = TextInput;

package/lib/TextInput/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];

package/lib/TextInput/v2/styles.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param props the props of the component, the style is applied to
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @param state the state of the component, the style is applied to
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens, state) => {
+  const size = props.size,
+    textAlign = props.textAlign,
+    shouldNotWrap = props.shouldNotWrap;
+  const interaction = state.interaction,
+    success = state.success,
+    invalid = state.invalid,
+    afterElementHasWidth = state.afterElementHasWidth,
+    beforeElementExists = state.beforeElementExists;
+  const sizeVariants = {
+    small: {
+      fontSize: componentTheme.fontSizeSm,
+      height: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`,
+      lineHeight: `calc(${componentTheme.heightSm} - (2 * ${componentTheme.borderWidth}))`
+    },
+    medium: {
+      fontSize: componentTheme.fontSizeMd,
+      height: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`,
+      lineHeight: `calc(${componentTheme.heightMd} - (2 * ${componentTheme.borderWidth}))`
+    },
+    large: {
+      fontSize: componentTheme.fontSizeLg,
+      height: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`,
+      lineHeight: `calc(${componentTheme.heightLg} - (2 * ${componentTheme.borderWidth}))`
+    }
+  };
+  const paddingHorizontalVariants = {
+    small: componentTheme.paddingHorizontalSm,
+    medium: componentTheme.paddingHorizontalMd,
+    large: componentTheme.paddingHorizontalLg
+  };
+  const inputInteractionStates = {
+    ...(interaction === 'enabled' && {
+      color: componentTheme.textColor,
+      '&::placeholder': {
+        color: componentTheme.placeholderColor
+      },
+      '&:hover::placeholder': {
+        color: componentTheme.placeholderHoverColor
+      }
+      // placeholder is not rendered in the `readOnly` and `disabled` state
+    }),
+    ...(interaction === 'readonly' && {
+      color: componentTheme.textReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      color: componentTheme.textDisabledColor
+    })
+  };
+  const inputStyle = {
+    all: 'initial',
+    width: '100%',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    appearance: 'none',
+    margin: 0,
+    display: 'block',
+    boxSizing: 'border-box',
+    outline: 'none',
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: componentTheme.fontWeight,
+    // padding of the text in the input
+    padding: `0 ${componentTheme.gapContent} 0  ${componentTheme.gapContent}`,
+    background: 'transparent',
+    border: 'none',
+    verticalAlign: 'baseline',
+    '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
+      display: 'none !important'
+    },
+    '&:focus': {
+      boxShadow: 'initial'
+    },
+    ...sizeVariants[size],
+    textAlign: textAlign,
+    ...inputInteractionStates
+  };
+  const viewBase = {
+    boxSizing: 'border-box',
+    fontFamily: componentTheme.fontFamily,
+    maxWidth: '100%',
+    overflow: 'visible',
+    unicodeBidi: 'isolate'
+  };
+  const containerInteractionStates = {
+    ...(interaction === 'enabled' && {
+      backgroundColor: componentTheme.backgroundColor,
+      borderColor: componentTheme.borderColor,
+      ...(success && {
+        borderColor: componentTheme.successBorderColor
+      }),
+      ...(invalid && {
+        borderColor: componentTheme.errorBorderColor
+      }),
+      '&:hover': {
+        backgroundColor: componentTheme.backgroundHoverColor,
+        borderColor: componentTheme.borderHoverColor,
+        ...(success && {
+          borderColor: componentTheme.successBorderColor
+        }),
+        ...(invalid && {
+          borderColor: componentTheme.errorBorderColor
+        })
+      }
+    }),
+    ...(interaction === 'readonly' && {
+      backgroundColor: componentTheme.backgroundReadonlyColor,
+      borderColor: componentTheme.borderReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      backgroundColor: componentTheme.backgroundDisabledColor,
+      borderColor: componentTheme.borderDisabledColor
+    })
+  };
+  const focusOutline = (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
+    focusColor: invalid ? 'danger' : success ? 'success' : void 0,
+    // Only display the focus outline when the input is focused.
+    // This is to prevent double focus ring when e.g., a Button is rendered in
+    // `renderBeforeInput`
+    customCSSSelector: '&:has(input:focus)'
+  });
+  return {
+    textInput: {
+      label: 'textInput',
+      ...inputStyle,
+      '&:is(input)[type]': inputStyle,
+      '&:-webkit-any(input)[type]': inputStyle
+    },
+    facade: {
+      label: 'textInput__facade',
+      position: 'relative',
+      display: 'block',
+      boxSizing: 'border-box',
+      border: `${componentTheme.borderWidth} solid`,
+      borderRadius: componentTheme.borderRadius,
+      color: componentTheme.textColor,
+      ...containerInteractionStates,
+      ...focusOutline
+    },
+    layout: {
+      label: 'textInput__layout',
+      ...viewBase,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexDirection: 'row',
+      ...(!shouldNotWrap && {
+        flexWrap: 'wrap'
+      }),
+      // left padding of the `renderBeforeInput` element
+      ...(beforeElementExists && {
+        paddingInlineStart: paddingHorizontalVariants[size]
+      })
+    },
+    inputLayout: {
+      label: 'textInput__inputLayout',
+      flexGrow: 1,
+      ...viewBase,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexDirection: 'row'
+    },
+    afterElement: {
+      // the next couple lines (until the `label`) is needed so the IconButton looks OK inside the TextInput
+      // explanation: if the content inside is not a button or a popover (which could contain a button) it should have some padding on the right
+      // lineHeight is only needed if it is not popover or button
+      '& > :not(button):not([data-position^="Popover"])': {
+        marginRight: paddingHorizontalVariants[size]
+        // TODO check if it looks OK with the new buttons. With this it does not look OK with new icons
+        //...(sizeVariants[size!] && {
+        //  lineHeight: sizeVariants[size!]?.lineHeight
+        //})
+      },
+      display: 'flex',
+      alignItems: 'center',
+      // Spread all sizeVariants except lineHeight (handled above)
+      ...(sizeVariants[size] ?
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      (({
+        lineHeight,
+        ...rest
+      }) => rest)(sizeVariants[size]) : {}),
+      label: 'textInput__afterElement',
+      ...viewBase,
+      borderRadius: componentTheme.borderRadius,
+      flexShrink: 0,
+      // we only override the padding once the width is calculated,
+      // it needs the padding on render
+      ...(afterElementHasWidth === false && {
+        paddingInlineEnd: 0
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;