@instructure/ui-form-field 11.6.0 → 11.6.1-snapshot-129

package/es/FormFieldMessages/v2/index.js

@@ -0,0 +1,88 @@
+var _dec, _class, _FormFieldMessages;
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { omitProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import { FormFieldMessage } from "../../FormFieldMessage/v2/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: FormField
+---
+
+A FormFieldMessages component
+
+```js
+---
+type: example
+---
+<FormFieldMessages messages={[
+  { text: 'Invalid name', type: 'error' },
+  { text: 'Good job!', type: 'success' },
+  { text: 'Full name, first and last', type: 'hint' },
+]} />
+```
+**/
+let FormFieldMessages = (_dec = withStyle(generateStyle), _dec(_class = (_FormFieldMessages = class FormFieldMessages extends Component {
+  constructor(...args) {
+    super(...args);
+    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;
+    return messages && messages.length > 0 ? _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages,
+      ...omitProps(this.props, FormFieldMessages.allowedProps),
+      ref: this.handleRef,
+      children: messages.map((msg, i) => {
+        return _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.message,
+          children: _jsx(FormFieldMessage, {
+            variant: msg.type,
+            children: msg.text
+          })
+        }, `error${i}`);
+      })
+    }) : null;
+  }
+}, _FormFieldMessages.displayName = "FormFieldMessages", _FormFieldMessages.componentId = 'FormFieldMessages', _FormFieldMessages.allowedProps = allowedProps, _FormFieldMessages.defaultProps = {}, _FormFieldMessages)) || _class);
+export default FormFieldMessages;
+export { FormFieldMessages };

package/es/FormFieldMessages/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['messages', 'gridArea'];
+export { allowedProps };

package/es/FormFieldMessages/v2/styles.js

@@ -0,0 +1,50 @@
+/*
+ * 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
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (_componentTheme, props) => {
+  return {
+    formFieldMessages: {
+      label: 'formFieldMessages',
+      padding: 0,
+      display: 'block',
+      ...(props.gridArea && {
+        gridArea: props.gridArea
+      })
+    },
+    message: {
+      label: 'formFieldMessages__message',
+      display: 'block'
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { FormField } from "./FormField/index.js";
-export { FormFieldLabel } from "./FormFieldLabel/index.js";
-export { FormFieldMessage } from "./FormFieldMessage/index.js";
-export { FormFieldMessages } from "./FormFieldMessages/index.js";
-export { FormFieldLayout } from "./FormFieldLayout/index.js";
-export { FormFieldGroup } from "./FormFieldGroup/index.js";
+export { FormField } from "../FormField/v1/index.js";
+export { FormFieldLabel } from "../FormFieldLabel/v1/index.js";
+export { FormFieldMessage } from "../FormFieldMessage/v1/index.js";
+export { FormFieldMessages } from "../FormFieldMessages/v1/index.js";
+export { FormFieldLayout } from "../FormFieldLayout/v1/index.js";
+export { FormFieldGroup } from "../FormFieldGroup/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+export { FormField } from "../FormField/v2/index.js";
+export { FormFieldLabel } from "../FormFieldLabel/v2/index.js";
+export { FormFieldMessage } from "../FormFieldMessage/v2/index.js";
+export { FormFieldMessages } from "../FormFieldMessages/v2/index.js";
+export { FormFieldLayout } from "../FormFieldLayout/v2/index.js";
+export { FormFieldGroup } from "../FormFieldGroup/v2/index.js";

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

@@ -7,7 +7,7 @@ exports.default = exports.FormField = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _FormFieldLayout = require("../FormFieldLayout");
+var _v = require("../../FormFieldLayout/v1");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -52,9 +52,9 @@ class FormField extends _react.Component {
     };
   }
   render() {
-    return (0, _jsxRuntime.jsx)(_FormFieldLayout.FormFieldLayout, {
+    return (0, _jsxRuntime.jsx)(_v.FormFieldLayout, {
       ...(0, _omitProps.omitProps)(this.props, FormField.allowedProps),
-      ...(0, _pickProps.pickProps)(this.props, _FormFieldLayout.FormFieldLayout.allowedProps),
+      ...(0, _pickProps.pickProps)(this.props, _v.FormFieldLayout.allowedProps),
       label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label"

package/lib/FormField/v2/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormField = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _props = require("../../FormFieldLayout/v2/props");
+var _v = require("../../FormFieldLayout/v2");
+var _props2 = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * 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
+---
+**/
+class FormField extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  render() {
+    return (0, _jsxRuntime.jsx)(_v.FormFieldLayout, {
+      ...(0, _omitProps.omitProps)(this.props, FormField.allowedProps),
+      ...(0, _pickProps.pickProps)(this.props, _props.allowedProps),
+      label: this.props.label,
+      vAlign: this.props.vAlign,
+      as: "label"
+      // This makes the control in focus when the label is clicked
+      // This is needed to prevent the wrong element to be focused, e.g.
+      // multi selects Tag-s
+      ,
+      htmlFor: this.props.id,
+      elementRef: this.handleRef,
+      margin: this.props.margin,
+      isRequired: this.props.isRequired,
+      disabled: this.props.disabled,
+      readOnly: this.props.readOnly
+    });
+  }
+}
+exports.FormField = FormField;
+FormField.displayName = "FormField";
+FormField.componentId = 'FormField';
+FormField.allowedProps = _props2.allowedProps;
+FormField.defaultProps = {
+  inline: false,
+  layout: 'stacked',
+  labelAlign: 'end',
+  vAlign: 'middle'
+};
+var _default = exports.default = FormField;

package/lib/FormField/v2/props.js

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

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

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.FormFieldGroup = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _Grid = require("@instructure/ui-grid/lib/Grid");
+var _v11_ = require("@instructure/ui-grid/v11_6");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _emotion = require("@instructure/emotion");
-var _FormFieldLayout = require("../FormFieldLayout");
+var _props = require("../../FormFieldLayout/v1/props");
+var _v = require("../../FormFieldLayout/v1");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
+var _props2 = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["styles", "makeStyles", "isGroup"];
 var _dec, _class, _FormFieldGroup;
@@ -46,7 +47,7 @@ var _dec, _class, _FormFieldGroup;
 category: components
 ---
 **/
-let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends _react.Component {
+let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -82,19 +83,19 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
   }
   renderColumns() {
     return _react.Children.map(this.props.children, (child, index) => {
-      return child ? (0, _jsxRuntime.jsx)(_Grid.Grid.Col, {
+      return child ? (0, _jsxRuntime.jsx)(_v11_.Grid.Col, {
         width: child.props && child.props.width ? 'auto' : void 0,
         children: child
       }, index) : null;
     });
   }
   renderChildren() {
-    return (0, _jsxRuntime.jsx)(_Grid.Grid, {
+    return (0, _jsxRuntime.jsx)(_v11_.Grid, {
       colSpacing: this.props.colSpacing,
       rowSpacing: this.props.rowSpacing,
       vAlign: this.props.vAlign,
       startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null),
-      children: (0, _jsxRuntime.jsx)(_Grid.Grid.Row, {
+      children: (0, _jsxRuntime.jsx)(_v11_.Grid.Row, {
         children: this.renderColumns()
       })
     });
@@ -121,9 +122,9 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
     if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
       ariaInvalid = 'true';
     }
-    return (0, _jsxRuntime.jsx)(_FormFieldLayout.FormFieldLayout, {
+    return (0, _jsxRuntime.jsx)(_v.FormFieldLayout, {
       ...(0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps),
-      ...(0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps),
+      ...(0, _pickProps.pickProps)(props, _props.allowedProps),
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
@@ -134,7 +135,7 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
       children: this.renderFields()
     });
   }
-}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = _props.allowedProps, _FormFieldGroup.defaultProps = {
+}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = _props2.allowedProps, _FormFieldGroup.defaultProps = {
   as: 'fieldset',
   disabled: false,
   rowSpacing: 'medium',

package/lib/FormFieldGroup/v2/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormFieldGroup = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _latest = require("@instructure/ui-grid/latest");
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _emotion = require("@instructure/emotion");
+var _props = require("../../FormFieldLayout/v2/props");
+var _v = require("../../FormFieldLayout/v2");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props2 = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["styles", "makeStyles", "isGroup"];
+var _dec, _class, _FormFieldGroup;
+/*
+ * 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
+---
+**/
+let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    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);
+  }
+  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 invalid() {
+    return !!this.props.messages && this.props.messages.findIndex(message => {
+      return message.type === 'error' || message.type === 'newError';
+    }) >= 0;
+  }
+  renderColumns() {
+    return _react.Children.map(this.props.children, (child, index) => {
+      return child ? (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
+        width: child.props && child.props.width ? 'auto' : void 0,
+        children: child
+      }, index) : null;
+    });
+  }
+  renderChildren() {
+    return (0, _jsxRuntime.jsx)(_latest.Grid, {
+      colSpacing: this.props.colSpacing,
+      rowSpacing: this.props.rowSpacing,
+      vAlign: this.props.vAlign,
+      startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null),
+      children: (0, _jsxRuntime.jsx)(_latest.Grid.Row, {
+        children: this.renderColumns()
+      })
+    });
+  }
+  renderFields() {
+    const styles = this.props.styles;
+    return (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup,
+      children: this.renderChildren()
+    }, "fields");
+  }
+  render() {
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      isGroup = _this$props3.isGroup,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    // This is quite ugly, but according to ARIA spec the `aria-invalid` prop
+    // can only be used with certain roles see
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid#associated_roles
+    // `aria-invalid` is put on in FormFieldLayout because the error message
+    // DOM part gets there its ID.
+    let ariaInvalid = void 0;
+    if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
+      ariaInvalid = 'true';
+    }
+    return (0, _jsxRuntime.jsx)(_v.FormFieldLayout, {
+      ...(0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps),
+      ...(0, _pickProps.pickProps)(props, _props.allowedProps),
+      vAlign: props.vAlign,
+      layout: props.layout === 'inline' ? 'inline' : 'stacked',
+      label: props.description,
+      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-invalid": ariaInvalid,
+      elementRef: this.handleRef,
+      isGroup: isGroup,
+      children: this.renderFields()
+    });
+  }
+}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = _props2.allowedProps, _FormFieldGroup.defaultProps = {
+  as: 'fieldset',
+  disabled: false,
+  rowSpacing: 'medium',
+  colSpacing: 'small',
+  vAlign: 'middle',
+  isGroup: true
+}, _FormFieldGroup)) || _class);
+var _default = exports.default = FormFieldGroup;

package/lib/FormFieldGroup/v2/props.js

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

package/lib/FormFieldGroup/v2/styles.js

@@ -0,0 +1,55 @@
+"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) => {
+  const disabled = props.disabled;
+  return {
+    formFieldGroup: {
+      label: 'formFieldGroup',
+      display: 'block',
+      ...(disabled && {
+        opacity: 0.6,
+        cursor: 'not-allowed',
+        pointerEvents: 'none'
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -55,7 +55,7 @@ type: example
  @deprecated since version 10. This is an internal component that will be
  removed in the future
 **/
-let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends _react.Component {
+let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;