@instructure/ui-form-field 8.33.1 → 8.33.2-snapshot-5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
+
+
+
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-form-field

package/es/FormField/index.js

@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { FormFieldLayout } from '../FormFieldLayout';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -36,17 +36,14 @@ class FormField 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);
       }
     };
   }
-
   render() {
     return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
       label: this.props.label,
@@ -56,9 +53,7 @@ class FormField extends Component {
       elementRef: this.handleRef
     }));
   }
-
 }
-
 FormField.displayName = "FormField";
 FormField.componentId = 'FormField';
 FormField.propTypes = propTypes;

package/es/FormField/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {

package/es/FormFieldGroup/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["styles", "makeStyles"];
-
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +34,6 @@ import { FormFieldLayout } from '../FormFieldLayout';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -47,41 +44,32 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
-
   get makeStylesVariables() {
     return {
       invalid: this.invalid
     };
   }
-
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
       return message.type === 'error';
     }) >= 0;
   }
-
   renderColumns() {
     return Children.map(this.props.children, (child, index) => {
       return child ? jsx(Grid.Col, {
@@ -90,7 +78,6 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       }, child) : null;
     });
   }
-
   renderChildren() {
     return jsx(Grid, {
       colSpacing: this.props.colSpacing,
@@ -99,7 +86,6 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null)
     }, jsx(Grid.Row, null, this.renderColumns()));
   }
-
   renderFields() {
     const styles = this.props.styles;
     return jsx("span", {
@@ -107,13 +93,11 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
     }, this.renderChildren());
   }
-
   render() {
     const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          makeStyles = _this$props3.makeStyles,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
@@ -123,7 +107,6 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       elementRef: this.handleRef
     }), this.renderFields());
   }
-
 }, _class2.displayName = "FormFieldGroup", _class2.componentId = 'FormFieldGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   as: 'fieldset',
   disabled: false,

package/es/FormFieldGroup/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {

package/es/FormFieldGroup/styles.js

@@ -53,5 +53,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/FormFieldGroup/theme.js

@@ -29,8 +29,8 @@
  */
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        spacing = theme.spacing;
+    colors = theme.colors,
+    spacing = theme.spacing;
   const componentVariables = {
     borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
@@ -39,8 +39,8 @@ const generateComponentTheme = theme => {
     errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/FormFieldLabel/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -31,7 +30,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: FormField
@@ -53,35 +51,28 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     const ElementType = getElementType(FormFieldLabel, this.props);
     const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          children = _this$props3.children;
+      styles = _this$props3.styles,
+      children = _this$props3.children;
     return jsx(ElementType, Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef
     }), children);
   }
-
 }, _class2.displayName = "FormFieldLabel", _class2.componentId = 'FormFieldLabel', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   as: 'span'
 }, _class2)) || _class);

package/es/FormFieldLabel/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node.isRequired,

package/es/FormFieldLabel/styles.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 /**
  * ---
  * private: true
@@ -59,5 +59,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/FormFieldLabel/theme.js

@@ -29,8 +29,8 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        themeName = theme.key;
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
@@ -43,9 +43,9 @@ const generateComponentTheme = theme => {
     fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/FormFieldLayout/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["makeStyles", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -39,7 +37,6 @@ import { FormFieldLabel } from '../FormFieldLabel';
 import { FormFieldMessages } from '../FormFieldMessages';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: FormField
@@ -51,56 +48,43 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     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.`);
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get hasVisibleLabel() {
     return this.props.label && hasVisibleChildren(this.props.label);
   }
-
   get hasMessages() {
     return this.props.messages && this.props.messages.length > 0;
   }
-
   get elementType() {
     return getElementType(FormFieldLayout, this.props);
   }
-
   get inlineContainerAndLabel() {
     // Return if both the component container and label will display inline
     return this.props.inline && this.props.layout === 'inline';
   }
-
   renderLabel() {
     if (this.hasVisibleLabel) {
       return jsx(Grid.Col, {
@@ -116,7 +100,6 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
       return null;
     }
   }
-
   renderLegend() {
     // note: the legend element must be the first child of a fieldset element for SR
     // so we render it twice in that case (once for SR-only and one that is visible)
@@ -126,7 +109,6 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
       messages: this.props.messages
     }));
   }
-
   renderVisibleMessages() {
     return this.hasMessages ? jsx(Grid.Row, null, jsx(Grid.Col, {
       offset: this.inlineContainerAndLabel ? void 0 : 3,
@@ -136,19 +118,16 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
       messages: this.props.messages
     }))) : null;
   }
-
   render() {
     // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType;
-
     const _this$props3 = this.props,
-          makeStyles = _this$props3.makeStyles,
-          styles = _this$props3.styles,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
+      makeStyles = _this$props3.makeStyles,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     const width = props.width,
-          layout = props.layout,
-          children = props.children;
+      layout = props.layout,
+      children = props.children;
     return jsx(ElementType, Object.assign({}, omitProps(props, [...FormFieldLayout.allowedProps, ...Grid.allowedProps]), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
@@ -165,7 +144,6 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
       elementRef: this.handleInputContainerRef
     }, children)), this.renderVisibleMessages()));
   }
-
 }, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   inline: false,
   layout: 'stacked',

package/es/FormFieldLayout/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
@@ -38,8 +39,11 @@ const propTypes = {
   inputContainerRef: PropTypes.func,
   elementRef: PropTypes.func
 };
-const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef' // added vAlign because FormField and FormFieldGroup passes it, but not adding
+const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
+
+// added vAlign because FormField and FormFieldGroup passes it, but not adding
 // it to allowedProps to prevent it from getting passed through accidentally
 //'vAlign'
 ];
+
 export { propTypes, allowedProps };

package/es/FormFieldLayout/styles.js

@@ -55,5 +55,4 @@ const generateStyle = (_componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/FormFieldMessage/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -31,7 +30,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: FormField
@@ -52,28 +50,22 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          styles = _this$props3.styles;
+      children = _this$props3.children,
+      styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
@@ -81,7 +73,6 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
       elementRef: this.handleRef
     }, children);
   }
-
 }, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   variant: 'hint'
 }, _class2)) || _class);

package/es/FormFieldMessage/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { formMessageTypePropType, formMessageChildPropType } from '../FormPropTypes';
 const propTypes = {
   variant: formMessageTypePropType,

package/es/FormFieldMessage/styles.js

@@ -58,5 +58,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/FormFieldMessage/theme.js

@@ -29,8 +29,8 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        themeName = theme.key;
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       colorHint: theme['ic-brand-font-color-dark']
@@ -45,9 +45,9 @@ const generateComponentTheme = theme => {
     fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/FormFieldMessages/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,7 +31,6 @@ import { FormFieldMessage } from '../FormFieldMessage';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: FormField
@@ -56,28 +54,22 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     const _this$props3 = this.props,
-          messages = _this$props3.messages,
-          styles = _this$props3.styles;
+      messages = _this$props3.messages,
+      styles = _this$props3.styles;
     return messages && messages.length > 0 ? jsx("span", Object.assign({
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, omitProps(this.props, FormFieldMessages.allowedProps), {
@@ -91,7 +83,6 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
       }, msg.text));
     })) : null;
   }
-
 }, _class2.displayName = "FormFieldMessages", _class2.componentId = 'FormFieldMessages', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2)) || _class);
 export default FormFieldMessages;
 export { FormFieldMessages };

package/es/FormFieldMessages/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {

package/es/FormFieldMessages/styles.js

@@ -46,5 +46,4 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 export default generateStyle;

package/es/FormFieldMessages/theme.js

@@ -32,8 +32,8 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     topMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/FormPropTypes.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const formMessageTypePropType = PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']);
 const formMessageChildPropType = PropTypes.node;
-
 /**
  * ---
  * category: utilities/form

package/es/index.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { FormField } from './FormField';
 export { FormFieldLabel } from './FormFieldLabel';
 export { FormFieldMessage } from './FormFieldMessage';