@instructure/ui-form-field 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-form-field
 

package/es/FormField/index.js

@@ -33,19 +33,25 @@ category: components
 @tsProps
 **/
 class FormField extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
+  static displayName = "FormField";
+  static componentId = 'FormField';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    labelAlign: 'end',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   render() {
     return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
@@ -59,15 +65,5 @@ class FormField extends Component {
 
 }
 
-FormField.displayName = "FormField";
-FormField.componentId = 'FormField';
-FormField.propTypes = propTypes;
-FormField.allowedProps = allowedProps;
-FormField.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  labelAlign: 'end',
-  vAlign: 'middle'
-};
 export default FormField;
 export { FormField };

package/es/FormFieldGroup/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["styles", "makeStyles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -43,20 +43,27 @@ category: components
 ---
 @tsProps
 **/
-let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class FormFieldGroup extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldGroup extends Component {
+  static displayName = "FormFieldGroup";
+  static componentId = 'FormFieldGroup';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'fieldset',
+    disabled: false,
+    rowSpacing: 'medium',
+    colSpacing: 'small',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -124,12 +131,6 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }), this.renderFields());
   }
 
-}, _class2.displayName = "FormFieldGroup", _class2.componentId = 'FormFieldGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  as: 'fieldset',
-  disabled: false,
-  rowSpacing: 'medium',
-  colSpacing: 'small',
-  vAlign: 'middle'
-}, _class2)) || _class);
+}) || _class);
 export default FormFieldGroup;
 export { FormFieldGroup };

package/es/FormFieldLabel/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -49,15 +49,18 @@ example: true
 ```
 
 **/
-let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class FormFieldLabel extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldLabel extends Component {
+  static displayName = "FormFieldLabel";
+  static componentId = 'FormFieldLabel';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'span'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -83,8 +86,6 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }), children);
   }
 
-}, _class2.displayName = "FormFieldLabel", _class2.componentId = 'FormFieldLabel', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  as: 'span'
-}, _class2)) || _class);
+}) || _class);
 export default FormFieldLabel;
 export { FormFieldLabel };

package/es/FormFieldLayout/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["makeStyles", "styles"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -46,32 +46,36 @@ parent: FormField
 ---
 @tsProps
 **/
-let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = (_class2 = class FormFieldLayout extends Component {
+let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = class FormFieldLayout extends Component {
+  static displayName = "FormFieldLayout";
+  static componentId = 'FormFieldLayout';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    as: 'label',
+    labelAlign: 'end'
+  };
+
   constructor(props) {
     super(props);
-    this._messagesId = void 0;
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleInputContainerRef = node => {
-      if (typeof this.props.inputContainerRef === 'function') {
-        this.props.inputContainerRef(node);
-      }
-    };
-
     this._messagesId = props.messagesId || props.deterministicId();
     error(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
       This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
   }
 
+  _messagesId;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -101,6 +105,12 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     return this.props.inline && this.props.layout === 'inline';
   }
 
+  handleInputContainerRef = node => {
+    if (typeof this.props.inputContainerRef === 'function') {
+      this.props.inputContainerRef(node);
+    }
+  };
+
   renderLabel() {
     if (this.hasVisibleLabel) {
       return jsx(Grid.Col, {
@@ -166,11 +176,6 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     }, children)), this.renderVisibleMessages()));
   }
 
-}, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  as: 'label',
-  labelAlign: 'end'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default FormFieldLayout;
 export { FormFieldLayout };

package/es/FormFieldMessage/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -48,15 +48,18 @@ example: true
 <FormFieldMessage variant="error">Invalid value</FormFieldMessage>
 ```
 **/
-let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class FormFieldMessage extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldMessage extends Component {
+  static displayName = "FormFieldMessage";
+  static componentId = 'FormFieldMessage';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    variant: 'hint'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -82,8 +85,6 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
     }, children);
   }
 
-}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  variant: 'hint'
-}, _class2)) || _class);
+}) || _class);
 export default FormFieldMessage;
 export { FormFieldMessage };

package/es/FormFieldMessages/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -52,15 +52,16 @@ example: true
 ]} />
 ```
 **/
-let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class FormFieldMessages extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldMessages extends Component {
+  static displayName = "FormFieldMessages";
+  static componentId = 'FormFieldMessages';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {};
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -92,6 +93,6 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
     })) : null;
   }
 
-}, _class2.displayName = "FormFieldMessages", _class2.componentId = 'FormFieldMessages', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2)) || _class);
+}) || _class);
 export default FormFieldMessages;
 export { FormFieldMessages };

package/lib/FormField/index.js

@@ -48,19 +48,25 @@ category: components
 @tsProps
 **/
 class FormField extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
+  static displayName = "FormField";
+  static componentId = 'FormField';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    labelAlign: 'end',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   render() {
     return /*#__PURE__*/_react.default.createElement(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormField.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldLayout.FormFieldLayout.allowedProps), {
@@ -75,15 +81,5 @@ class FormField extends _react.Component {
 }
 
 exports.FormField = FormField;
-FormField.displayName = "FormField";
-FormField.componentId = 'FormField';
-FormField.propTypes = _props.propTypes;
-FormField.allowedProps = _props.allowedProps;
-FormField.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  labelAlign: 'end',
-  vAlign: 'middle'
-};
 var _default = FormField;
 exports.default = _default;

package/lib/FormFieldGroup/index.js

@@ -29,7 +29,7 @@ var _props = require("./props");
 
 const _excluded = ["styles", "makeStyles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -37,20 +37,27 @@ category: components
 ---
 @tsProps
 **/
-let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class FormFieldGroup extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldGroup extends _react.Component {
+  static displayName = "FormFieldGroup";
+  static componentId = 'FormFieldGroup';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    as: 'fieldset',
+    disabled: false,
+    rowSpacing: 'medium',
+    colSpacing: 'small',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -117,13 +124,7 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     }), this.renderFields());
   }
 
-}, _class2.displayName = "FormFieldGroup", _class2.componentId = 'FormFieldGroup', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  as: 'fieldset',
-  disabled: false,
-  rowSpacing: 'medium',
-  colSpacing: 'small',
-  vAlign: 'middle'
-}, _class2)) || _class);
+}) || _class);
 exports.FormFieldGroup = FormFieldGroup;
 var _default = FormFieldGroup;
 exports.default = _default;

package/lib/FormFieldLabel/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -40,15 +40,18 @@ example: true
 ```
 
 **/
-let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class FormFieldLabel extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
+  static displayName = "FormFieldLabel";
+  static componentId = 'FormFieldLabel';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    as: 'span'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -74,9 +77,7 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     }), children);
   }
 
-}, _class2.displayName = "FormFieldLabel", _class2.componentId = 'FormFieldLabel', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  as: 'span'
-}, _class2)) || _class);
+}) || _class);
 exports.FormFieldLabel = FormFieldLabel;
 var _default = FormFieldLabel;
 exports.default = _default;

package/lib/FormFieldLayout/index.js

@@ -39,7 +39,7 @@ var _props = require("./props");
 
 const _excluded = ["makeStyles", "styles"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /**
 ---
@@ -47,32 +47,36 @@ parent: FormField
 ---
 @tsProps
 **/
-let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = (_class2 = class FormFieldLayout extends _react.Component {
+let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = class FormFieldLayout extends _react.Component {
+  static displayName = "FormFieldLayout";
+  static componentId = 'FormFieldLayout';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    as: 'label',
+    labelAlign: 'end'
+  };
+
   constructor(props) {
     super(props);
-    this._messagesId = void 0;
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleInputContainerRef = node => {
-      if (typeof this.props.inputContainerRef === 'function') {
-        this.props.inputContainerRef(node);
-      }
-    };
-
     this._messagesId = props.messagesId || props.deterministicId();
     (0, _console.logError)(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
       This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
   }
 
+  _messagesId;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -102,6 +106,12 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
     return this.props.inline && this.props.layout === 'inline';
   }
 
+  handleInputContainerRef = node => {
+    if (typeof this.props.inputContainerRef === 'function') {
+      this.props.inputContainerRef(node);
+    }
+  };
+
   renderLabel() {
     if (this.hasVisibleLabel) {
       return (0, _emotion.jsx)(_Grid.Grid.Col, {
@@ -165,12 +175,7 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
     }, children)), this.renderVisibleMessages()));
   }
 
-}, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  as: 'label',
-  labelAlign: 'end'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 exports.FormFieldLayout = FormFieldLayout;
 var _default = FormFieldLayout;
 exports.default = _default;

package/lib/FormFieldMessage/index.js

@@ -19,7 +19,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -37,15 +37,18 @@ example: true
 <FormFieldMessage variant="error">Invalid value</FormFieldMessage>
 ```
 **/
-let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class FormFieldMessage extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldMessage extends _react.Component {
+  static displayName = "FormFieldMessage";
+  static componentId = 'FormFieldMessage';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    variant: 'hint'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -71,9 +74,7 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
     }, children);
   }
 
-}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  variant: 'hint'
-}, _class2)) || _class);
+}) || _class);
 exports.FormFieldMessage = FormFieldMessage;
 var _default = FormFieldMessage;
 exports.default = _default;