@instructure/ui-grid 8.8.1-snapshot.7 → 8.9.1-snapshot.2

package/lib/GridCol/props.js

@@ -0,0 +1,64 @@
+"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.
+ */
+// TODO: get numcols from theme config
+const COL_WIDTHS = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const propTypes = {
+  children: _propTypes.default.node,
+  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  textAlign: _propTypes.default.oneOf(['start', 'end', 'center', 'inherit']),
+  hAlign: _propTypes.default.oneOf(['start', 'center', 'end', 'space-around', 'space-between']),
+  vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
+  startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
+  visualDebug: _propTypes.default.bool,
+  width: _propTypes.default.oneOfType([_propTypes.default.oneOf(COL_WIDTHS), _propTypes.default.shape({
+    small: _propTypes.default.oneOf(COL_WIDTHS),
+    medium: _propTypes.default.oneOf(COL_WIDTHS),
+    large: _propTypes.default.oneOf(COL_WIDTHS),
+    xLarge: _propTypes.default.oneOf(COL_WIDTHS)
+  })]),
+  offset: _propTypes.default.oneOfType([_propTypes.default.oneOf(COL_WIDTHS), _propTypes.default.shape({
+    small: _propTypes.default.oneOf(COL_WIDTHS),
+    medium: _propTypes.default.oneOf(COL_WIDTHS),
+    large: _propTypes.default.oneOf(COL_WIDTHS),
+    xLarge: _propTypes.default.oneOf(COL_WIDTHS)
+  })]),
+  isLastRow: _propTypes.default.bool,
+  isLastCol: _propTypes.default.bool,
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'colSpacing', 'rowSpacing', 'textAlign', 'hAlign', 'vAlign', 'startAt', 'visualDebug', 'width', 'offset', 'isLastRow', 'isLastCol', 'elementRef'];
+exports.allowedProps = allowedProps;

package/lib/GridRow/index.js

@@ -11,10 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
@@ -23,8 +19,6 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 
-var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _GridCol = require("../GridCol");
 
 var _emotion = require("@instructure/emotion");
@@ -33,6 +27,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["styles", "makeStyles"],
       _excluded2 = ["styles"];
 
@@ -45,9 +41,6 @@ id: Grid.Row
 ---
 **/
 let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class GridRow extends _react.Component {
-  /* eslint-disable react/require-default-props */
-
-  /* eslint-enable react/require-default-props */
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -82,24 +75,11 @@ let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           restProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
     const props = (0, _omitProps.omitProps)(restProps, GridRow.propTypes);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
-      css: styles.gridRow
+      css: styles === null || styles === void 0 ? void 0 : styles.gridRow
     }), this.renderChildren());
   }
 
-}, _class2.displayName = "GridRow", _class2.componentId = 'Grid.Row', _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,
-  children: _Children.Children.oneOf([_GridCol.GridCol, _ScreenReaderContent.ScreenReaderContent]),
-  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
-  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
-  hAlign: _propTypes.default.oneOf(['start', 'center', 'end', 'space-around', 'space-between']),
-  vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
-  startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
-  visualDebug: _propTypes.default.bool,
-  isLastRow: _propTypes.default.bool
-}, _class2.defaultProps = {
+}, _class2.displayName = "GridRow", _class2.componentId = 'Grid.Row', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   isLastRow: false
 }, _temp)) || _class);

package/lib/GridRow/props.js

@@ -0,0 +1,53 @@
+"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 _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+
+var _GridCol = require("../GridCol");
+
+/*
+ * 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 = {
+  children: _Children.Children.oneOf([_GridCol.GridCol, _ScreenReaderContent.ScreenReaderContent]),
+  rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
+  hAlign: _propTypes.default.oneOf(['start', 'center', 'end', 'space-around', 'space-between']),
+  vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
+  startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
+  visualDebug: _propTypes.default.bool,
+  isLastRow: _propTypes.default.bool
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'rowSpacing', 'colSpacing', 'hAlign', 'vAlign', 'startAt', 'visualDebug', 'isLastRow'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-grid",
-  "version": "8.8.1-snapshot.7+90b251d58",
+  "version": "8.9.1-snapshot.2+7f5faa3df",
   "description": "A Grid component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,20 +25,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-a11y-content": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-testable": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-utils": "8.8.1-snapshot.7+90b251d58",
+    "@instructure/emotion": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/shared-types": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-a11y-content": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-prop-types": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-react-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-testable": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-utils": "8.9.1-snapshot.2+7f5faa3df",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-themes": "8.8.1-snapshot.7+90b251d58"
+    "@instructure/ui-babel-preset": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-color-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-themes": "8.9.1-snapshot.2+7f5faa3df"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "90b251d580c75205b6cbb884fe922059cfc494dd"
+  "gitHead": "7f5faa3df83667636304e0901ef1008d98dffc9a"
 }

package/src/Grid/index.tsx

@@ -24,16 +24,13 @@
 
 /** @jsx jsx */
 import { Component, Children, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import {
   safeCloneElement,
   matchComponentTypes,
   omitProps,
   pickProps
 } from '@instructure/ui-react-utils'
-import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 import { GridRow } from '../GridRow'
 import { GridCol } from '../GridCol'
@@ -42,7 +39,9 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { GridProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { GridProps } from './props'
 
 /**
 ---
@@ -53,26 +52,8 @@ category: components
 class Grid extends Component<GridProps> {
   static readonly componentId = 'Grid'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    children: ChildrenPropTypes.oneOf([GridRow, ScreenReaderContent]),
-    colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
-    rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
-    hAlign: PropTypes.oneOf([
-      'start',
-      'center',
-      'end',
-      'space-around',
-      'space-between'
-    ]),
-    vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
-    startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
-    visualDebug: PropTypes.bool
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     colSpacing: 'medium',
     rowSpacing: 'medium',
@@ -121,7 +102,7 @@ class Grid extends Component<GridProps> {
     const props = omitProps(restProps, Grid.propTypes)
 
     return (
-      <span {...props} css={styles.grid}>
+      <span {...props} css={styles?.grid}>
         {this.renderChildren()}
       </span>
     )

package/src/Grid/props.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { GridRow } from '../GridRow'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+import type { GridBreakpoints } from '../GridTypes'
+
+type GridOwnProps = {
+  children?: React.ReactNode // TODO: oneOf([GridRow, ScreenReaderContent])
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  hAlign?: 'start' | 'center' | 'end' | 'space-around' | 'space-between'
+  vAlign?: 'top' | 'middle' | 'bottom'
+  startAt?: GridBreakpoints
+  visualDebug?: boolean
+}
+
+type PropKeys = keyof GridOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type GridProps = GridOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  children: ChildrenPropTypes.oneOf([GridRow, ScreenReaderContent]),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  hAlign: PropTypes.oneOf([
+    'start',
+    'center',
+    'end',
+    'space-around',
+    'space-between'
+  ]),
+  vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
+  visualDebug: PropTypes.bool
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'colSpacing',
+  'rowSpacing',
+  'hAlign',
+  'vAlign',
+  'startAt',
+  'visualDebug'
+]
+
+export type { GridProps }
+export { propTypes, allowedProps }

package/src/Grid/styles.ts

@@ -24,7 +24,7 @@
 
 import { GridTheme } from '@instructure/shared-types'
 import { GridBreakpoints } from '../GridTypes'
-import { GridProps } from './types'
+import { GridProps } from './props'
 
 /**
  * ---

package/src/GridCol/index.tsx

@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { omitProps } from '@instructure/ui-react-utils'
 
@@ -32,10 +31,9 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { GridColProps } from './types'
 
-// TODO: get numcols from theme config
-const COL_WIDTHS = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+import { propTypes, allowedProps } from './props'
+import type { GridColProps } from './props'
 
 /**
 ---
@@ -47,56 +45,13 @@ id: Grid.Col
 class GridCol extends Component<GridColProps> {
   static readonly componentId = 'Grid.Col'
 
-  /* eslint-disable react/require-default-props */
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    children: PropTypes.node,
-    colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
-    rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
-    textAlign: PropTypes.oneOf(['start', 'end', 'center', 'inherit']),
-    hAlign: PropTypes.oneOf([
-      'start',
-      'center',
-      'end',
-      'space-around',
-      'space-between'
-    ]),
-    vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
-    startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
-    visualDebug: PropTypes.bool,
-    width: PropTypes.oneOfType([
-      PropTypes.oneOf(COL_WIDTHS),
-      PropTypes.shape({
-        small: PropTypes.oneOf(COL_WIDTHS),
-        medium: PropTypes.oneOf(COL_WIDTHS),
-        large: PropTypes.oneOf(COL_WIDTHS),
-        xLarge: PropTypes.oneOf(COL_WIDTHS)
-      })
-    ]),
-    offset: PropTypes.oneOfType([
-      PropTypes.oneOf(COL_WIDTHS),
-      PropTypes.shape({
-        small: PropTypes.oneOf(COL_WIDTHS),
-        medium: PropTypes.oneOf(COL_WIDTHS),
-        large: PropTypes.oneOf(COL_WIDTHS),
-        xLarge: PropTypes.oneOf(COL_WIDTHS)
-      })
-    ]),
-    isLastRow: PropTypes.bool,
-    isLastCol: PropTypes.bool,
-    elementRef: PropTypes.func
-  }
-  /* eslint-enable react/require-default-props */
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     textAlign: 'inherit',
     children: null,
     isLastCol: false,
-    isLastRow: false,
-    elementRef: undefined
+    isLastRow: false
   }
 
   componentDidMount() {
@@ -116,7 +71,7 @@ class GridCol extends Component<GridColProps> {
     const props = omitProps(this.props, GridCol.propTypes)
 
     return (
-      <span {...props} ref={this.props.elementRef} css={styles.gridCol}>
+      <span {...props} ref={this.props.elementRef} css={styles?.gridCol}>
         {children}
       </span>
     )