@instructure/ui-grid 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-grid
+
+
+
+
+
 ## [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-grid

package/es/Grid/index.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["styles", "makeStyles"],
-      _excluded2 = ["styles"];
-
+  _excluded2 = ["styles"];
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -37,7 +35,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -48,37 +45,29 @@ let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   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 = _objectWithoutProperties(_this$props3, _excluded);
-
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     const children = Children.toArray(this.props.children);
     return children.map((child, index) => {
       if (matchComponentTypes(child, [GridRow])) {
-        return safeCloneElement(child, { ...pickProps(props, Grid.allowedProps),
-          ...child.props
-          /* child props should override parent */
-          ,
+        return safeCloneElement(child, {
+          ...pickProps(props, Grid.allowedProps),
+          ...child.props /* child props should override parent */,
           isLastRow: index + 1 === children.length
         });
       } else {
@@ -89,16 +78,14 @@ let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
 
   render() {
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          restProps = _objectWithoutProperties(_this$props4, _excluded2);
-
+      styles = _this$props4.styles,
+      restProps = _objectWithoutProperties(_this$props4, _excluded2);
     const props = omitProps(restProps, Grid.allowedProps);
     return 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 = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   colSpacing: 'medium',
   rowSpacing: 'medium',

package/es/Grid/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 { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';

package/es/Grid/styles.js

@@ -34,22 +34,23 @@
  */
 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'
@@ -57,5 +58,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Grid/theme.js

@@ -29,15 +29,15 @@
  */
 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
   };
 };
-
 export default generateComponentTheme;

package/es/GridCol/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,7 +31,6 @@ import { logWarn as warn } from '@instructure/console';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Grid
@@ -44,26 +42,21 @@ let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   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
@@ -73,37 +66,30 @@ let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
         });
       }
     }
-
     if (shouldWarn) {
       warn(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 = omitProps(this.props, GridCol.allowedProps);
     return 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 = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   textAlign: 'inherit',
   children: null,

package/es/GridCol/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';
 // TODO: get numcols from theme config
 const COL_WIDTHS = PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]);

package/es/GridCol/styles.js

@@ -34,13 +34,13 @@
  */
 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
@@ -55,7 +55,6 @@ const generateStyle = (componentTheme, props) => {
       marginBottom: 0
     }
   };
-
   const getStartGridColumnStyle = () => {
     const colSpacingVariants = {
       small: {
@@ -108,41 +107,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 {
@@ -150,12 +139,10 @@ const generateStyle = (componentTheme, props) => {
           flexShrink: 0,
           flexBasis: 'auto'
         };
-
       case 12:
         return {
           flex: '0 0 100%'
         };
-
       default:
         return {
           flexGrow: 0,
@@ -165,15 +152,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%)`,
@@ -181,22 +165,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',
@@ -209,11 +192,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'
@@ -221,5 +207,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/GridCol/theme.js

@@ -29,15 +29,15 @@
  */
 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
   };
 };
-
 export default generateComponentTheme;

package/es/GridRow/index.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["styles", "makeStyles"],
-      _excluded2 = ["styles"];
-
+  _excluded2 = ["styles"];
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +34,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Grid
@@ -48,36 +45,28 @@ let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   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 = _objectWithoutProperties(_this$props3, _excluded);
-
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     return Children.map(this.props.children, (child, index) => {
       if (matchComponentTypes(child, [GridCol])) {
-        return safeCloneElement(child, { ...pickProps(props, GridRow.allowedProps),
-          ...child.props
-          /* child props should override parent */
-          ,
+        return safeCloneElement(child, {
+          ...pickProps(props, GridRow.allowedProps),
+          ...child.props /* child props should override parent */,
           isLastRow: props.isLastRow,
           isLastCol: index + 1 === Children.count(this.props.children)
         });
@@ -89,16 +78,14 @@ let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
 
   render() {
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          restProps = _objectWithoutProperties(_this$props4, _excluded2);
-
+      styles = _this$props4.styles,
+      restProps = _objectWithoutProperties(_this$props4, _excluded2);
     const props = omitProps(restProps, GridRow.allowedProps);
     return 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 = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
   isLastRow: false

package/es/GridRow/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 { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';

package/es/GridRow/styles.js

@@ -34,13 +34,12 @@
  */
 const generateStyle = (componentTheme, props) => {
   const hAlign = props.hAlign,
-        vAlign = props.vAlign,
-        rowSpacing = props.rowSpacing,
-        colSpacing = props.colSpacing,
-        isLastRow = props.isLastRow,
-        startAt = props.startAt,
-        visualDebug = props.visualDebug;
-
+    vAlign = props.vAlign,
+    rowSpacing = props.rowSpacing,
+    colSpacing = props.colSpacing,
+    isLastRow = props.isLastRow,
+    startAt = props.startAt,
+    visualDebug = props.visualDebug;
   const getGridRowStyle = () => {
     const hAlignVariants = {
       center: {
@@ -108,21 +107,23 @@ const generateStyle = (componentTheme, props) => {
       })
     };
   };
-
-  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? { ...getGridRowStyle()
+  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
+    ...getGridRowStyle()
   } : {};
-
   return {
     gridRow: {
       label: 'gridRow',
       display: 'block',
       boxSizing: 'border-box',
       ...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 blue'
@@ -130,5 +131,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/GridRow/theme.js

@@ -29,15 +29,15 @@
  */
 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
   };
 };
-
 export default generateComponentTheme;