@instructure/ui-grid 8.33.1 → 8.33.2-snapshot-5

package/lib/Grid/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,36 +19,21 @@ Object.defineProperty(exports, "GridRow", {
   }
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _GridRow = require("../GridRow");
-
 var _GridCol = require("../GridCol");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["styles", "makeStyles"],
-      _excluded2 = ["styles"];
-
+  _excluded2 = ["styles"];
 var _dec, _class, _class2;
-
 /**
 ---
 category: components
@@ -61,38 +44,29 @@ let Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   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);
   }
-
   renderChildren() {
     const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          makeStyles = _this$props3.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const children = _react.Children.toArray(this.props.children);
-
     return children.map((child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_GridRow.GridRow])) {
-        return (0, _safeCloneElement.safeCloneElement)(child, { ...(0, _pickProps.pickProps)(props, Grid.allowedProps),
-          ...child.props
-          /* child props should override parent */
-          ,
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          ...(0, _pickProps.pickProps)(props, Grid.allowedProps),
+          ...child.props /* child props should override parent */,
           isLastRow: index + 1 === children.length
         });
       } else {
@@ -103,15 +77,14 @@ let Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
   render() {
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
+      styles = _this$props4.styles,
+      restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
     const props = (0, _omitProps.omitProps)(restProps, Grid.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: styles === null || styles === void 0 ? void 0 : styles.grid,
       ref: this.handleRef
     }), this.renderChildren());
   }
-
 }, _class2.displayName = "Grid", _class2.componentId = 'Grid', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   colSpacing: 'medium',
   rowSpacing: 'medium',

package/lib/Grid/props.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = 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 _GridRow = require("../GridRow");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,6 +32,7 @@ var _GridRow = require("../GridRow");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _Children.Children.oneOf([_GridRow.GridRow, _ScreenReaderContent.ScreenReaderContent]),
   colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),

package/lib/Grid/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,22 +40,23 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const startAt = props.startAt,
-        visualDebug = props.visualDebug;
-
+    visualDebug = props.visualDebug;
   const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
     boxSizing: 'border-box'
   } : {};
-
   return {
     grid: {
       label: 'grid',
       display: 'block',
       ...getStartAtVariants('small'),
-      [`@media screen and (${componentTheme.mediumMin})`]: { ...getStartAtVariants('medium')
+      [`@media screen and (${componentTheme.mediumMin})`]: {
+        ...getStartAtVariants('medium')
       },
-      [`@media screen and (${componentTheme.largeMin})`]: { ...getStartAtVariants('large')
+      [`@media screen and (${componentTheme.largeMin})`]: {
+        ...getStartAtVariants('large')
       },
-      [`@media screen and (${componentTheme.xLargeMin})`]: { ...getStartAtVariants('x-large')
+      [`@media screen and (${componentTheme.xLargeMin})`]: {
+        ...getStartAtVariants('x-large')
       },
       ...(visualDebug && {
         outline: '0.0625rem dashed red'
@@ -64,6 +64,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Grid/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,16 +35,16 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const spacing = theme.spacing,
-        media = theme.media;
+    media = theme.media;
   const componentVariables = {
     spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
     spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
     ...media
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/GridCol/index.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GridCol = void 0;
-
 var _react = require("react");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _console = require("@instructure/console");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Grid
@@ -34,26 +24,21 @@ let GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
   }
-
   widthCheck() {
     const width = this.props.width;
     let shouldWarn = false;
-
     if (width) {
       if (typeof width === 'number' && width <= 0) {
         shouldWarn = true;
       }
-
       if (typeof width === 'object') {
         Object.keys(width).forEach(breakpoint => {
           //@ts-expect-error Ts doesn't understand Object.keys properly
@@ -63,37 +48,30 @@ let GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         });
       }
     }
-
     if (shouldWarn) {
       (0, _console.logWarn)(false, 'Col width must be positive!');
     }
   }
-
   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.widthCheck();
   }
-
   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.widthCheck();
   }
-
   render() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          styles = _this$props3.styles;
+      children = _this$props3.children,
+      styles = _this$props3.styles;
     const props = (0, _omitProps.omitProps)(this.props, GridCol.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.gridCol
     }), children);
   }
-
 }, _class2.displayName = "GridCol", _class2.componentId = 'Grid.Col', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   textAlign: 'inherit',
   children: null,

package/lib/GridCol/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,9 +29,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * 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 = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['auto'])]);
-
 const propTypes = {
   children: _propTypes.default.node,
   colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),

package/lib/GridCol/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,13 +40,13 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const vAlign = props.vAlign,
-        textAlign = props.textAlign,
-        rowSpacing = props.rowSpacing,
-        colSpacing = props.colSpacing,
-        isLastRow = props.isLastRow,
-        isLastCol = props.isLastCol,
-        startAt = props.startAt,
-        visualDebug = props.visualDebug;
+    textAlign = props.textAlign,
+    rowSpacing = props.rowSpacing,
+    colSpacing = props.colSpacing,
+    isLastRow = props.isLastRow,
+    isLastCol = props.isLastCol,
+    startAt = props.startAt,
+    visualDebug = props.visualDebug;
   const rowSpacingVariants = {
     small: {
       marginBottom: componentTheme.spacingSmall
@@ -62,7 +61,6 @@ const generateStyle = (componentTheme, props) => {
       marginBottom: 0
     }
   };
-
   const getStartGridColumnStyle = () => {
     const colSpacingVariants = {
       small: {
@@ -115,41 +113,31 @@ const generateStyle = (componentTheme, props) => {
       ...(textAlign && textAlignVariants[textAlign])
     };
   };
-
   const enabledBreakpoints = () => {
     const breakpoints = ['small', 'medium', 'large', 'x-large', null];
     return breakpoints.slice(breakpoints.indexOf(startAt));
   };
-
   const breakpointIsEnabled = breakpoint => {
     return enabledBreakpoints().includes(breakpoint);
   };
-
   const getColSize = breakpoint => {
     let width = props.width;
     if (!width) return;
-
     if (width && typeof width === 'object') {
       width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
-
     return width;
   };
-
   const getColOffset = breakpoint => {
     let offset = props.offset;
     if (!offset) return;
-
     if (offset && typeof offset === 'object') {
       offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
-
     return offset;
   };
-
   const getFlexColumnBySize = function () {
     let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
-
     switch (size) {
       case 'auto':
         return {
@@ -157,12 +145,10 @@ const generateStyle = (componentTheme, props) => {
           flexShrink: 0,
           flexBasis: 'auto'
         };
-
       case 12:
         return {
           flex: '0 0 100%'
         };
-
       default:
         return {
           flexGrow: 0,
@@ -172,15 +158,12 @@ const generateStyle = (componentTheme, props) => {
         };
     }
   };
-
   const getColumnOffsetBySize = function () {
     let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
-
     switch (size) {
       case 'auto':
       case 12:
         return {};
-
       default:
         return {
           marginInlineStart: `calc(${size} / 12 * 99.999%)`,
@@ -188,22 +171,21 @@ const generateStyle = (componentTheme, props) => {
         };
     }
   };
-
-  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? { ...getStartGridColumnStyle()
+  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
+    ...getStartGridColumnStyle()
   } : {};
-
   const getGridColumnsForBreakpoint = breakpoint => {
     const size = getColSize(breakpoint);
     const offset = getColOffset(breakpoint);
-    return breakpointIsEnabled(breakpoint) ? { ...(size && getFlexColumnBySize(size)),
+    return breakpointIsEnabled(breakpoint) ? {
+      ...(size && getFlexColumnBySize(size)),
       ...(offset && getColumnOffsetBySize(size))
     } : {};
   };
-
-  const getBreakpointStyles = breakpoint => ({ ...getStartAtVariants(breakpoint),
+  const getBreakpointStyles = breakpoint => ({
+    ...getStartAtVariants(breakpoint),
     ...getGridColumnsForBreakpoint(breakpoint)
   });
-
   return {
     gridCol: {
       label: 'gridCol',
@@ -216,11 +198,14 @@ const generateStyle = (componentTheme, props) => {
         marginBottom: 0
       }),
       ...getBreakpointStyles('small'),
-      [`@media screen and (${componentTheme.mediumMin})`]: { ...getBreakpointStyles('medium')
+      [`@media screen and (${componentTheme.mediumMin})`]: {
+        ...getBreakpointStyles('medium')
       },
-      [`@media screen and (${componentTheme.largeMin})`]: { ...getBreakpointStyles('large')
+      [`@media screen and (${componentTheme.largeMin})`]: {
+        ...getBreakpointStyles('large')
       },
-      [`@media screen and (${componentTheme.xLargeMin})`]: { ...getBreakpointStyles('x-large')
+      [`@media screen and (${componentTheme.xLargeMin})`]: {
+        ...getBreakpointStyles('x-large')
       },
       ...(visualDebug && {
         outline: '0.0625rem dashed red'
@@ -228,6 +213,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/GridCol/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,16 +35,16 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const spacing = theme.spacing,
-        media = theme.media;
+    media = theme.media;
   const componentVariables = {
     spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
     spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
     ...media
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/GridRow/index.js

@@ -1,41 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GridRow = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _GridCol = require("../GridCol");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["styles", "makeStyles"],
-      _excluded2 = ["styles"];
-
+  _excluded2 = ["styles"];
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Grid
@@ -47,35 +31,28 @@ let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   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);
   }
-
   renderChildren() {
     const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          makeStyles = _this$props3.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return _react.Children.map(this.props.children, (child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_GridCol.GridCol])) {
-        return (0, _safeCloneElement.safeCloneElement)(child, { ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
-          ...child.props
-          /* child props should override parent */
-          ,
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
+          ...child.props /* child props should override parent */,
           isLastRow: props.isLastRow,
           isLastCol: index + 1 === _react.Children.count(this.props.children)
         });
@@ -87,15 +64,14 @@ let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
   render() {
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
+      styles = _this$props4.styles,
+      restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
     const props = (0, _omitProps.omitProps)(restProps, GridRow.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: styles === null || styles === void 0 ? void 0 : styles.gridRow,
       ref: this.handleRef
     }), this.renderChildren());
   }
-
 }, _class2.displayName = "GridRow", _class2.componentId = 'Grid.Row', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   children: null,
   isLastRow: false

package/lib/GridRow/props.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = 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)
  *
@@ -38,6 +32,7 @@ var _GridCol = require("../GridCol");
  * 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']),