@instructure/ui-form-field 8.8.1-snapshot.3 → 8.9.0

package/lib/FormFieldLayout/index.js

@@ -11,8 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
@@ -35,10 +33,10 @@ var _FormFieldLabel = require("../FormFieldLabel");
 
 var _FormFieldMessages = require("../FormFieldMessages");
 
-var _FormPropTypes = require("../FormPropTypes");
-
 var _styles = _interopRequireDefault(require("./styles"));
 
+var _props = require("./props");
+
 const _excluded = ["makeStyles", "styles"];
 
 var _dec, _class, _class2, _temp;
@@ -136,7 +134,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_cl
     return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(props, { ...FormFieldLayout.propTypes,
       ..._Grid.Grid.propTypes
     }), {
-      css: styles.formFieldLayout,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
         width
       },
@@ -151,52 +149,12 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_cl
     }, children)), this.renderVisibleMessages()));
   }
 
-}, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  label: _propTypes.default.node.isRequired,
-
-  /**
-   * the id of the input (to link it to its label for a11y)
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * the element type to render as
-   */
-  as: _propTypes.default.elementType,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.string,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * id for the form field messages
-   */
-  messagesId: _propTypes.default.string,
-  children: _propTypes.default.node,
-  inline: _propTypes.default.bool,
-  layout: _propTypes.default.oneOf(['stacked', 'inline']),
-  labelAlign: _propTypes.default.oneOf(['start', 'end']),
-  width: _propTypes.default.string,
-  inputContainerRef: _propTypes.default.func
-}, _class2.defaultProps = {
-  id: void 0,
-  width: void 0,
-  messages: void 0,
-  messagesId: void 0,
+}, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   inline: false,
   layout: 'stacked',
   as: 'label',
-  labelAlign: 'end',
-  inputContainerRef: void 0
+  labelAlign: 'end'
 }, _temp)) || _class);
 exports.FormFieldLayout = FormFieldLayout;
 var _default = FormFieldLayout;

package/lib/FormFieldLayout/props.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormPropTypes = require("../FormPropTypes");
+
+/*
+ * 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 propTypes = {
+  label: _propTypes.default.node.isRequired,
+
+  /**
+   * the id of the input (to link it to its label for a11y)
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * the element type to render as
+   */
+  as: _propTypes.default.elementType,
+
+  /**
+   * object with shape: `{
+   * text: PropTypes.string,
+   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   *   }`
+   */
+  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
+
+  /**
+   * id for the form field messages
+   */
+  messagesId: _propTypes.default.string,
+  children: _propTypes.default.node,
+  inline: _propTypes.default.bool,
+  layout: _propTypes.default.oneOf(['stacked', 'inline']),
+  labelAlign: _propTypes.default.oneOf(['start', 'end']),
+  width: _propTypes.default.string,
+  inputContainerRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef'];
+exports.allowedProps = allowedProps;

package/lib/FormFieldMessage/index.js

@@ -9,8 +9,6 @@ exports.FormFieldMessage = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 
 var _emotion = require("@instructure/emotion");
@@ -19,6 +17,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _class, _class2, _temp;
 
 /**
@@ -50,18 +50,11 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
           children = _this$props.children,
           styles = _this$props.styles;
     return this.props.variant !== 'screenreader-only' ? (0, _emotion.jsx)("span", {
-      css: styles.formFieldMessage
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage
     }, children) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, children);
   }
 
-}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only']),
-  children: _propTypes.default.node
-}, _class2.defaultProps = {
+}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   variant: 'hint',
   children: null
 }, _temp)) || _class);

package/lib/FormFieldMessage/props.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * 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 propTypes = {
+  variant: _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only']),
+  children: _propTypes.default.node
+};
+exports.propTypes = propTypes;
+const allowedProps = ['variant', 'children'];
+exports.allowedProps = allowedProps;

package/lib/FormFieldMessages/index.js

@@ -9,20 +9,18 @@ exports.FormFieldMessages = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
 var _emotion = require("@instructure/emotion");
 
-var _FormPropTypes = require("../FormPropTypes");
-
 var _FormFieldMessage = require("../FormFieldMessage");
 
 var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _class, _class2, _temp;
 
 /**
@@ -57,33 +55,18 @@ let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
           messages = _this$props.messages,
           styles = _this$props.styles;
     return messages && messages.length > 0 ? (0, _emotion.jsx)("span", Object.assign({
-      css: styles.formFieldMessages
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, (0, _omitProps.omitProps)(this.props, FormFieldMessages.propTypes)), messages.map((msg, i) => {
       return (0, _emotion.jsx)("span", {
         key: `error${i}`,
-        css: styles.message
+        css: styles === null || styles === void 0 ? void 0 : styles.message
       }, (0, _emotion.jsx)(_FormFieldMessage.FormFieldMessage, {
         variant: msg.type
       }, msg.text));
     })) : null;
   }
 
-}, _class2.displayName = "FormFieldMessages", _class2.componentId = 'FormFieldMessages', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.string,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message)
-}, _class2.defaultProps = {
-  messages: void 0
-}, _temp)) || _class);
+}, _class2.displayName = "FormFieldMessages", _class2.componentId = 'FormFieldMessages', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _temp)) || _class);
 exports.FormFieldMessages = FormFieldMessages;
 var _default = FormFieldMessages;
 exports.default = _default;

package/lib/FormFieldMessages/props.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormPropTypes = require("../FormPropTypes");
+
+/*
+ * 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 propTypes = {
+  /**
+   * object with shape: `{
+   * text: PropTypes.string,
+   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   *   }`
+   */
+  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message)
+};
+exports.propTypes = propTypes;
+const allowedProps = ['messages'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.9.0",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-a11y-content": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-a11y-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-grid": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-icons": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/uid": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.9.0",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-a11y-content": "8.9.0",
+    "@instructure/ui-a11y-utils": "8.9.0",
+    "@instructure/ui-grid": "8.9.0",
+    "@instructure/ui-icons": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-utils": "8.9.0",
+    "@instructure/uid": "8.9.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,6 +47,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  }
 }

package/src/FormField/index.tsx

@@ -23,13 +23,13 @@
  */
 
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
 
-import { FormPropTypes } from '../FormPropTypes'
 import { FormFieldLayout } from '../FormFieldLayout'
-import { FormFieldProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { FormFieldProps } from './props'
 
 /**
 ---
@@ -39,39 +39,14 @@ category: components
 class FormField extends Component<FormFieldProps> {
   static readonly componentId = 'FormField'
 
-  static propTypes = {
-    label: PropTypes.node.isRequired,
-    /**
-     * the id of the input (to link it to its label for a11y)
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * object with shape: `{
-     *   text: PropTypes.string,
-     *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-     * }`
-     */
-    messages: PropTypes.arrayOf(FormPropTypes.message),
-    messagesId: PropTypes.string,
-    children: PropTypes.node,
-    inline: PropTypes.bool,
-    layout: PropTypes.oneOf(['stacked', 'inline']),
-    labelAlign: PropTypes.oneOf(['start', 'end']),
-    vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
-    width: PropTypes.string,
-    inputContainerRef: PropTypes.func
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     inline: false,
     layout: 'stacked',
     labelAlign: 'end',
     vAlign: 'middle',
-    messages: undefined,
-    messagesId: undefined,
-    children: null,
-    width: undefined,
-    inputContainerRef: undefined
+    children: null
   }
 
   render() {