@instructure/ui-text-input 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/types/TextInput/v1/index.d.ts

@@ -7,6 +7,7 @@ tags: form, field
 ---
 **/
 declare class TextInput extends Component<TextInputProps, TextInputState> {
+    static displayName: string;
     static readonly componentId = "TextInput";
     static allowedProps: readonly (keyof {
         renderLabel?: import("@instructure/shared-types").Renderable;

package/types/TextInput/v1/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v1/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAmB3C,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,SAAS,CAAA;AAGhB;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC/D,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAElC,MAAM,CAAC,YAAY;;;;;;;;;MAUlB;gBAEW,KAAK,EAAE,cAAc;IAUjC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,aAAa,CAA+B;IAEpD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IAEpC,OAAO,CAAC,cAAc,CAAkC;IAExD,SAAS,GAAI,IAAI,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAejB,oBAAoB;IAMpB,kBAAkB,CAAC,SAAS,EAAE,cAAc;IAmB5C,wBAAwB;IA6BxB,cAAc,QAAO,mBAAmB,CAavC;IAED,KAAK;IAIL,IAAI,WAAW,0DAEd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,OAAO,YAOV;IAED,IAAI,OAAO,YAEV;IAED,IAAI,KAAK,uBAER;IAED,IAAI,EAAE,WAEL;IAED,cAAc,GAAI,MAAM,gBAAgB,GAAG,IAAI,UAM9C;IAED,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAIvD;IAED,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAOpD;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAOrD;IAED,WAAW;IA8CX,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IA4B1C,MAAM;CAsFP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v1/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAmB3C,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,SAAS,CAAA;AAGhB;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC/D,MAAM,CAAC,WAAW,SAAc;IAChC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAElC,MAAM,CAAC,YAAY;;;;;;;;;MAUlB;gBAEW,KAAK,EAAE,cAAc;IAUjC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,aAAa,CAA+B;IAEpD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IAEpC,OAAO,CAAC,cAAc,CAAkC;IAExD,SAAS,GAAI,IAAI,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAejB,oBAAoB;IAMpB,kBAAkB,CAAC,SAAS,EAAE,cAAc;IAmB5C,wBAAwB;IA6BxB,cAAc,QAAO,mBAAmB,CAavC;IAED,KAAK;IAIL,IAAI,WAAW,0DAEd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,OAAO,YAOV;IAED,IAAI,OAAO,YAEV;IAED,IAAI,KAAK,uBAER;IAED,IAAI,EAAE,WAEL;IAED,cAAc,GAAI,MAAM,gBAAgB,GAAG,IAAI,UAM9C;IAED,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAIvD;IAED,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAOpD;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAOrD;IAED,WAAW;IA8CX,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IA4B1C,MAAM;CAsFP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/types/TextInput/v2/index.d.ts

@@ -8,6 +8,7 @@ tags: form, field, input
 ---
 **/
 declare class TextInput extends Component<TextInputProps> {
+    static displayName: string;
     static readonly componentId = "TextInput";
     static allowedProps: readonly (keyof {
         renderLabel?: Renderable;

package/types/TextInput/v2/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v2/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAcjD,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAE3D;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAElC,MAAM,CAAC,YAAY;;;;;;;;;MAUlB;gBAEW,KAAK,EAAE,cAAc;IAMjC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,OAAO,CAAC,MAAM,CAAgC;IAE9C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IAEpC,OAAO,CAAC,cAAc,CAAkC;IAExD,SAAS,GAAI,IAAI,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAWjB,oBAAoB;IAMpB,kBAAkB;IAIlB,gBAAgB,CAAC,eAAe,EAAE,UAAU;IAsB5C,cAAc,QAAO,mBAAmB,CAavC;IAED,KAAK;IAIL,IAAI,WAAW,0DAEd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,OAAO,YAOV;IAED,IAAI,OAAO,YAEV;IAED,IAAI,KAAK,uBAER;IAED,IAAI,EAAE,WAEL;IAED,cAAc,GAAI,MAAM,gBAAgB,GAAG,IAAI,UAM9C;IAED,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAIvD;IAED,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAIpD;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAIrD;IAED,WAAW;IA8CX,MAAM;CAgEP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v2/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAcjD,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAE3D;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,WAAW,SAAc;IAChC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAElC,MAAM,CAAC,YAAY;;;;;;;;;MAUlB;gBAEW,KAAK,EAAE,cAAc;IAMjC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,OAAO,CAAC,MAAM,CAAgC;IAE9C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IAEpC,OAAO,CAAC,cAAc,CAAkC;IAExD,SAAS,GAAI,IAAI,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAWjB,oBAAoB;IAMpB,kBAAkB;IAIlB,gBAAgB,CAAC,eAAe,EAAE,UAAU;IAsB5C,cAAc,QAAO,mBAAmB,CAavC;IAED,KAAK;IAIL,IAAI,WAAW,0DAEd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,OAAO,YAOV;IAED,IAAI,OAAO,YAEV;IAED,IAAI,KAAK,uBAER;IAED,IAAI,EAAE,WAEL;IAED,cAAc,GAAI,MAAM,gBAAgB,GAAG,IAAI,UAM9C;IAED,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAIvD;IAED,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAIpD;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAIrD;IAED,WAAW;IA8CX,MAAM;CAgEP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/types/TextInput/v2/styles.d.ts

@@ -1,5 +1,5 @@
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes';
-import { TextInputProps, TextInputStyle, TextInputStyleProps } from './props';
+import { TextInputProps, TextInputStyle, TextInputStyleProps } from './props.js';
 /**
  * ---
  * private: true

package/types/TextInput/v2/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v2/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG7E;;;;;;;;;;GAUG;AACH,QAAA,MAAM,aAAa,GACjB,gBAAgB,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,EAC1D,OAAO,cAAc,EACrB,cAAc,YAAY,EAC1B,OAAO,mBAAmB,KACzB,cAkLF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TextInput/v2/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGhF;;;;;;;;;;GAUG;AACH,QAAA,MAAM,aAAa,GACjB,gBAAgB,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,EAC1D,OAAO,cAAc,EACrB,cAAc,YAAY,EAC1B,OAAO,mBAAmB,KACzB,cAoLF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/exports/a.d.ts

@@ -1,3 +1,3 @@
-export { TextInput } from '../TextInput/v1';
+export { TextInput } from '../TextInput/v1/index.js';
 export type { TextInputProps } from '../TextInput/v1/props';
 //# sourceMappingURL=a.d.ts.map

package/types/exports/a.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a.d.ts","sourceRoot":"","sources":["../../src/exports/a.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"a.d.ts","sourceRoot":"","sources":["../../src/exports/a.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/types/exports/b.d.ts

@@ -1,3 +1,3 @@
-export { TextInput } from '../TextInput/v2';
+export { TextInput } from '../TextInput/v2/index.js';
 export type { TextInputProps } from '../TextInput/v2/props';
 //# sourceMappingURL=b.d.ts.map

package/types/exports/b.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"b.d.ts","sourceRoot":"","sources":["../../src/exports/b.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"b.d.ts","sourceRoot":"","sources":["../../src/exports/b.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/lib/TextInput/v1/index.js

@@ -1,329 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextInput = void 0;
-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 _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 _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"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class;
-/*
- * 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
----
-**/
-let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class TextInput extends _react.Component {
-  static displayName = "TextInput";
-  static componentId = 'TextInput';
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'text',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
-    isRequired: false,
-    display: 'block',
-    shouldNotWrap: false,
-    size: 'medium',
-    textAlign: 'start',
-    messages: []
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-      afterElementHasWidth: undefined
-    };
-    this._defaultId = props.deterministicId();
-    this._messagesId = props.deterministicId('TextInput-messages');
-  }
-  ref = null;
-  _input = null;
-  _afterElement = null;
-  _defaultId;
-  _messagesId;
-  _focusListener = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  componentDidMount() {
-    if (this._input) {
-      this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
-    this.adjustAfterElementHeight();
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  componentWillUnmount() {
-    if (this._focusListener) {
-      this._focusListener.remove();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
-      this.setState({
-        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
-      });
-    }
-    if ((0, _getInteraction.getInteraction)({
-      props: prevProps
-    }) !== 'disabled' && (0, _getInteraction.getInteraction)({
-      props: this.props
-    }) === 'disabled') {
-      this.setState({
-        hasFocus: false
-      });
-    }
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  adjustAfterElementHeight() {
-    const afterElementChild = this._afterElement?.firstElementChild;
-
-    // Check if the child is a button, then get the button's first child (the content span)
-    const buttonContentSpan = 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?.tagName === 'SPAN' && afterElementChild.firstElementChild?.tagName === 'BUTTON' ? afterElementChild.firstElementChild.firstElementChild : null;
-    const targetSpan = 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';
-    }
-  }
-  makeStyleProps = () => {
-    const {
-      interaction
-    } = this;
-    const {
-      hasFocus,
-      afterElementHasWidth
-    } = this.state;
-    const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
-    return {
-      disabled: interaction === 'disabled',
-      invalid: this.invalid,
-      focused: hasFocus,
-      afterElementHasWidth: afterElementHasWidth,
-      beforeElementExists: !!beforeElement
-    };
-  };
-  focus() {
-    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() {
-    return this._input?.value;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  handleInputRef = node => {
-    this._input = node;
-    if (typeof this.props.inputRef === 'function') {
-      this.props.inputRef(node);
-    }
-  };
-  handleChange = event => {
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(event, event.target.value);
-    }
-  };
-  handleBlur = event => {
-    if (typeof this.props.onBlur === 'function') {
-      this.props.onBlur(event);
-    }
-    this.setState({
-      hasFocus: false
-    });
-  };
-  handleFocus = event => {
-    if (typeof this.props.onFocus === 'function') {
-      this.props.onFocus(event);
-    }
-    this.setState({
-      hasFocus: true
-    });
-  };
-  renderInput() {
-    const {
-      type,
-      size,
-      htmlSize,
-      display,
-      textAlign,
-      placeholder,
-      value,
-      defaultValue,
-      isRequired,
-      onFocus,
-      ...rest
-    } = this.props;
-    const props = (0, _passthroughProps.passthroughProps)(rest);
-    const {
-      interaction
-    } = this;
-    let descriptionIds = '';
-    if (props['aria-describedby']) {
-      descriptionIds = `${props['aria-describedby']}`;
-    }
-    return (0, _jsxRuntime.jsx)("input", {
-      ...props,
-      css: this.props.styles?.textInput,
-      defaultValue: defaultValue,
-      value: value,
-      placeholder: placeholder,
-      ref: this.handleInputRef,
-      type: type,
-      id: this.id,
-      required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : undefined,
-      disabled: interaction === 'disabled',
-      readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
-      size: htmlSize,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur
-    });
-  }
-  getElementHasWidth(element) {
-    if (!element) {
-      return undefined;
-    }
-    const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element);
-    if (!computedStyle) {
-      return undefined;
-    }
-    const {
-      width,
-      paddingInlineStart,
-      paddingInlineEnd
-    } = computedStyle;
-    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 {
-      width,
-      display,
-      renderLabel,
-      renderBeforeInput,
-      renderAfterInput,
-      messages,
-      inputContainerRef,
-      isRequired,
-      styles
-    } = this.props;
-    const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
-    const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
-    const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
-    const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [rawLabel, isRequired && (0, _jsxRuntime.jsxs)("span", {
-        css: this.invalid ? styles?.requiredInvalid : {},
-        "aria-hidden": true,
-        children: [' ', "*"]
-      })]
-    }) : rawLabel;
-    return (0, _jsxRuntime.jsx)(_v11_.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,
-      "data-cid": "TextInput",
-      children: (0, _jsxRuntime.jsx)("span", {
-        css: styles?.facade,
-        children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
-          css: styles?.layout,
-          children: [beforeElement, (0, _jsxRuntime.jsxs)("span", {
-            css: styles?.inputLayout,
-            children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
-              css: styles?.afterElement,
-              ref: e => {
-                this._afterElement = e;
-              },
-              children: afterElement
-            })]
-          })]
-        }) : (/* If no prepended or appended content, don't render Flex layout */
-        this.renderInput())
-      })
-    });
-  }
-}) || _class) || _class);
-var _default = exports.default = TextInput;

package/lib/TextInput/v1/props.js

@@ -1,31 +0,0 @@
-"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/v1/styles.js

@@ -1,224 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props, state) => {
-  const {
-    size,
-    textAlign,
-    shouldNotWrap
-  } = props;
-  const {
-    disabled,
-    invalid,
-    focused,
-    afterElementHasWidth,
-    beforeElementExists
-  } = state;
-  const sizeVariants = {
-    small: {
-      fontSize: componentTheme.smallFontSize,
-      height: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    medium: {
-      fontSize: componentTheme.mediumFontSize,
-      height: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    large: {
-      fontSize: componentTheme.largeFontSize,
-      height: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`
-    }
-  };
-  const disabledStyle = disabled ? {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-    opacity: '0.5'
-  } : {};
-  const focusedStyle = focused ? {
-    opacity: 1,
-    transform: 'scale(1)'
-  } : {
-    opacity: 0,
-    transform: 'scale(0.95)'
-  };
-  const invalidStyle = invalid ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const invalidAndFocusedStyle = invalid && focused ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const inputStyle = {
-    all: 'initial',
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    width: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    appearance: 'none',
-    margin: 0,
-    display: 'block',
-    boxSizing: 'border-box',
-    outline: 'none',
-    fontFamily: componentTheme.fontFamily,
-    fontWeight: componentTheme.fontWeight,
-    color: componentTheme.color,
-    padding: `0 ${componentTheme.padding}`,
-    background: 'transparent',
-    border: 'none',
-    verticalAlign: 'baseline',
-    '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
-      display: 'none !important'
-    },
-    '&:focus': {
-      boxShadow: 'initial'
-    },
-    '&::placeholder': {
-      color: componentTheme.placeholderColor
-    },
-    ...sizeVariants[size],
-    textAlign: textAlign
-  };
-  const viewBase = {
-    boxSizing: 'border-box',
-    fontFamily: componentTheme.fontFamily,
-    maxWidth: '100%',
-    overflow: 'visible',
-    unicodeBidi: 'isolate'
-  };
-  const flexBase = {
-    ...viewBase,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexDirection: 'row'
-  };
-  return {
-    requiredInvalid: {
-      color: componentTheme.requiredInvalidColor
-    },
-    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} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
-      borderRadius: componentTheme.borderRadius,
-      background: componentTheme.background,
-      color: componentTheme.color,
-      '&::before': {
-        content: '""',
-        pointerEvents: 'none',
-        position: 'absolute',
-        display: 'block',
-        boxSizing: 'border-box',
-        top: '-0.25rem',
-        bottom: '-0.25rem',
-        left: '-0.25rem',
-        right: '-0.25rem',
-        border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        transition: 'all 0.2s',
-        ...focusedStyle,
-        // properties to transition on :focus
-        ...invalidAndFocusedStyle
-      },
-      ...disabledStyle,
-      ...invalidStyle
-    },
-    layout: {
-      label: 'textInput__layout',
-      ...viewBase,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      flexDirection: 'row',
-      ...(!shouldNotWrap && {
-        flexWrap: 'wrap'
-      }),
-      ...(beforeElementExists && {
-        paddingInlineStart: componentTheme.padding
-      })
-    },
-    inputLayout: {
-      label: 'textInput__inputLayout',
-      flexGrow: 1,
-      ...flexBase
-    },
-    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: componentTheme.padding,
-        ...(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;