@instructure/ui-text-input 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/TextInput/v1/index.js

@@ -5,7 +5,6 @@ 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");
@@ -21,8 +20,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 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;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -52,72 +50,46 @@ category: components
 tags: form, field
 ---
 **/
-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 {
+let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_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.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 interaction = this.interaction;
-      const _this$state = this.state,
-        hasFocus = _this$state.hasFocus,
-        afterElementHasWidth = _this$state.afterElementHasWidth;
-      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
-      };
-    };
-    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.setState({
-        hasFocus: false
-      });
-    };
-    this.handleFocus = event => {
-      if (typeof this.props.onFocus === 'function') {
-        this.props.onFocus(event);
-      }
-      this.setState({
-        hasFocus: true
-      });
-    };
     this.state = {
       hasFocus: false,
-      afterElementHasWidth: void 0
+      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() {
-    var _this$props$makeStyle, _this$props;
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
       this.setState({
@@ -125,7 +97,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       });
     }
     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());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   componentWillUnmount() {
     if (this._focusListener) {
@@ -133,7 +105,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     }
   }
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props2;
     if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
       this.setState({
         afterElementHasWidth: this.getElementHasWidth(this._afterElement)
@@ -148,19 +119,18 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
         hasFocus: false
       });
     }
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   adjustAfterElementHeight() {
-    var _this$_afterElement, _afterElementChild$fi;
-    const afterElementChild = (_this$_afterElement = this._afterElement) === null || _this$_afterElement === void 0 ? void 0 : _this$_afterElement.firstElementChild;
+    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 === null || afterElementChild === void 0 ? void 0 : afterElementChild.tagName) === 'BUTTON' ? afterElementChild.firstElementChild : null;
+    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 === 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;
+    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
@@ -168,9 +138,25 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       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() {
-    var _this$_input;
-    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+    this._input?.focus();
   }
   get interaction() {
     return (0, _getInteraction.getInteraction)({
@@ -189,35 +175,63 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     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;
+    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() {
-    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 {
+      type,
+      size,
+      htmlSize,
+      display,
+      textAlign,
+      placeholder,
+      value,
+      defaultValue,
+      isRequired,
+      onFocus,
+      ...rest
+    } = this.props;
     const props = (0, _passthroughProps.passthroughProps)(rest);
-    const interaction = this.interaction;
+    const {
+      interaction
+    } = this;
     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,
+      css: this.props.styles?.textInput,
       defaultValue: defaultValue,
       value: value,
       placeholder: placeholder,
@@ -225,10 +239,10 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       type: type,
       id: this.id,
       required: isRequired,
-      "aria-invalid": this.invalid ? 'true' : void 0,
+      "aria-invalid": this.invalid ? 'true' : undefined,
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
-      "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
+      "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur
@@ -236,15 +250,17 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
   }
   getElementHasWidth(element) {
     if (!element) {
-      return void 0;
+      return undefined;
     }
     const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element);
     if (!computedStyle) {
-      return void 0;
+      return undefined;
     }
-    const width = computedStyle.width,
-      paddingInlineStart = computedStyle.paddingInlineStart,
-      paddingInlineEnd = computedStyle.paddingInlineEnd;
+    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.
@@ -256,23 +272,24 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     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 {
+      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 !== void 0 || renderAfterInput !== void 0;
+    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 === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+        css: this.invalid ? styles?.requiredInvalid : {},
         "aria-hidden": true,
         children: [' ', "*"]
       })]
@@ -290,13 +307,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       margin: this.props.margin,
       "data-cid": "TextInput",
       children: (0, _jsxRuntime.jsx)("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        css: styles?.facade,
         children: renderBeforeOrAfter ? (0, _jsxRuntime.jsxs)("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.layout,
+          css: styles?.layout,
           children: [beforeElement, (0, _jsxRuntime.jsxs)("span", {
-            css: styles === null || styles === void 0 ? void 0 : styles.inputLayout,
+            css: styles?.inputLayout,
             children: [this.renderInput(), afterElement && (0, _jsxRuntime.jsx)("span", {
-              css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+              css: styles?.afterElement,
               ref: e => {
                 this._afterElement = e;
               },
@@ -308,15 +325,5 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       })
     });
   }
-}, _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);
+}) || _class) || _class);
 var _default = exports.default = TextInput;

package/lib/TextInput/v1/styles.js

@@ -39,14 +39,18 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    textAlign = props.textAlign,
-    shouldNotWrap = props.shouldNotWrap;
-  const disabled = state.disabled,
-    invalid = state.invalid,
-    focused = state.focused,
-    afterElementHasWidth = state.afterElementHasWidth,
-    beforeElementExists = state.beforeElementExists;
+  const {
+    size,
+    textAlign,
+    shouldNotWrap
+  } = props;
+  const {
+    disabled,
+    invalid,
+    focused,
+    afterElementHasWidth,
+    beforeElementExists
+  } = state;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,

package/lib/TextInput/v1/theme.js

@@ -34,13 +34,14 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
-  const colors = theme.colors,
-    typography = theme.typography,
-    borders = theme.borders,
-    spacing = theme.spacing,
-    forms = theme.forms,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    borders,
+    spacing,
+    forms,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -48,28 +49,28 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
-    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
-    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.red4570,
-    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
-    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
-    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
+    borderColor: colors?.contrasts?.grey3045,
+    borderRadius: borders?.radiusMedium,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    requiredInvalidColor: colors?.contrasts?.red5782,
+    padding: spacing?.small,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineStyle: borders?.style,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    errorBorderColor: colors?.contrasts?.red4570,
+    errorOutlineColor: colors?.contrasts?.red4570,
+    placeholderColor: colors?.contrasts?.grey4570,
+    smallFontSize: typography?.fontSizeSmall,
+    smallHeight: forms?.inputHeightSmall,
+    mediumFontSize: typography?.fontSizeMedium,
+    mediumHeight: forms?.inputHeightMedium,
+    largeFontSize: typography?.fontSizeLarge,
+    largeHeight: forms?.inputHeightLarge
   };
   return {
     ...componentVariables,