@instructure/ui-view 8.33.1 → 8.33.2

package/lib/ContextView/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +35,6 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   var _theme$borders, _theme$colors, _theme$colors2, _theme$colors3;
-
   const componentVariables = {
     arrowSize: '0.5rem',
     arrowBorderWidth: theme === null || theme === void 0 ? void 0 : (_theme$borders = theme.borders) === null || _theme$borders === void 0 ? void 0 : _theme$borders.widthSmall,
@@ -45,9 +43,9 @@ const generateComponentTheme = theme => {
     arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.licorice,
     arrowBorderColorInverse: 'transparent'
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/View/__examples__/View.examples.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,9 +28,10 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const SHADOW_TYPES = _emotion.ThemeablePropValues.SHADOW_TYPES,
-      BORDER_WIDTHS = _emotion.ThemeablePropValues.BORDER_WIDTHS,
-      BORDER_RADII = _emotion.ThemeablePropValues.BORDER_RADII;
+  BORDER_WIDTHS = _emotion.ThemeablePropValues.BORDER_WIDTHS,
+  BORDER_RADII = _emotion.ThemeablePropValues.BORDER_RADII;
 var _default = {
   maxExamplesPerPage: 50,
   maxExamples: 500,
@@ -59,11 +58,15 @@ var _default = {
   },
   excludeProps: ['padding', 'shouldAnimateFocus', 'display', 'focusColor', 'focusPosition', 'borderColor', 'overflowX', 'overflowY'],
   filter: props => {
-    return (// Border radius and border width list 0 in addition to none in their object values
+    return (
+      // Border radius and border width list 0 in addition to none in their object values
       // so we filter those here as they are redundant
-      props.withFocusOutline && props.position !== 'relative' || // Only generate a 1 variation for withVisualDebug
-      props.withVisualDebug && (props.background !== 'transparent' || props.borderRadius !== '0' || props.position !== 'static' || props.shadow !== 'none' || props.textAlign !== 'center') || // Only generate a 1 variation for non-'transparent' background
-      props.background !== 'transparent' && (props.borderRadius !== '0' || props.position !== 'static' || props.shadow !== 'none' || props.textAlign !== 'center') || // Only generate a 1 variation for non-'0' borderWidth
+      props.withFocusOutline && props.position !== 'relative' ||
+      // Only generate a 1 variation for withVisualDebug
+      props.withVisualDebug && (props.background !== 'transparent' || props.borderRadius !== '0' || props.position !== 'static' || props.shadow !== 'none' || props.textAlign !== 'center') ||
+      // Only generate a 1 variation for non-'transparent' background
+      props.background !== 'transparent' && (props.borderRadius !== '0' || props.position !== 'static' || props.shadow !== 'none' || props.textAlign !== 'center') ||
+      // Only generate a 1 variation for non-'0' borderWidth
       props.borderWidth !== '0' && (props.background !== 'transparent' || props.borderRadius !== '0' || props.position !== 'static' || props.shadow !== 'none' || props.textAlign !== 'center')
     );
   }

package/lib/View/index.js

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.View = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
-
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-
 var _console = require("@instructure/console");
-
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["children", "textAlign", "background", "display", "withVisualDebug", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "overflowX", "overflowY", "stacking", "shadow", "position", "focusPosition", "focusColor", "shouldAnimateFocus", "borderColor", "className", "styles", "makeStyles"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -47,47 +30,43 @@ category: components
 let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_class2 = class View extends _react.Component {
   // TODO: Remove this code once all components are using passthroughProps in place
   // of omitProps and have removed this function
+
   // omitViewProps needs to be called on the composed View component so that the
   // View.allowedProps in the method matches the View.allowedProps that will be called in
   // the consumers. Otherwise the discrepancy could cause unexpected props being
   // allowed through.
+
   // Removes View's own props from the given object. Automatically excludes the
   // following props: 'theme', 'children', 'className', 'style', 'styles',
   // 'makeStyles', 'themeOverride'
   // @param props the object to process
   // @param Component The component whose props are processed.
   // Only needed for debug logging in non-production builds.
+
   get _element() {
     return this.ref;
   }
-
   constructor(props) {
     super(props);
     this.spanMarginVerified = void 0;
     this.ref = null;
-
     this.handleElementRef = el => {
       if (typeof this.props.elementRef === 'function') {
         this.props.elementRef(el);
       }
-
       this.ref = el;
     };
-
     this.spanMarginVerified = false;
   }
-
   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);
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // Not calling getComputedStyle can save hundreds of ms in tests and production
-
+    // Not calling getComputedStyle can save hundreds of ms in tests and production
     if (process.env.NODE_ENV === 'development' && !this.spanMarginVerified) {
       // We have to verify margins in the first 'componentDidUpdate',
       // because that is when all styles are calculated,
@@ -97,57 +76,52 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
         if (!element) {
           return;
         }
-
         const display = (0, _getComputedStyle.getComputedStyle)(element).display;
-
         if (display !== 'inline') {
           return;
         }
-
         const marginValues = margin ? margin.split(' ') : null;
-        let verticalMargin = false; // either top or bottom margin are set
+        let verticalMargin = false;
 
+        // either top or bottom margin are set
         if (margin) {
           if (marginValues && marginValues[0] && marginValues[0] !== 'none' && marginValues[0] !== '0') {
             verticalMargin = true;
           }
-
           if (marginValues && marginValues[2] && marginValues[2] !== 'none' && marginValues[2] !== '0') {
             verticalMargin = true;
           }
         }
-
         return verticalMargin;
       }(this.ref, this.props.margin), `[View] display style is set to 'inline' and will allow for horizontal margins only.`);
     }
   }
-
   render() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          textAlign = _this$props3.textAlign,
-          background = _this$props3.background,
-          display = _this$props3.display,
-          withVisualDebug = _this$props3.withVisualDebug,
-          width = _this$props3.width,
-          height = _this$props3.height,
-          minWidth = _this$props3.minWidth,
-          minHeight = _this$props3.minHeight,
-          maxWidth = _this$props3.maxWidth,
-          maxHeight = _this$props3.maxHeight,
-          overflowX = _this$props3.overflowX,
-          overflowY = _this$props3.overflowY,
-          stacking = _this$props3.stacking,
-          shadow = _this$props3.shadow,
-          position = _this$props3.position,
-          focusPosition = _this$props3.focusPosition,
-          focusColor = _this$props3.focusColor,
-          shouldAnimateFocus = _this$props3.shouldAnimateFocus,
-          borderColor = _this$props3.borderColor,
-          className = _this$props3.className,
-          styles = _this$props3.styles,
-          makeStyles = _this$props3.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      children = _this$props3.children,
+      textAlign = _this$props3.textAlign,
+      background = _this$props3.background,
+      display = _this$props3.display,
+      withVisualDebug = _this$props3.withVisualDebug,
+      width = _this$props3.width,
+      height = _this$props3.height,
+      minWidth = _this$props3.minWidth,
+      minHeight = _this$props3.minHeight,
+      maxWidth = _this$props3.maxWidth,
+      maxHeight = _this$props3.maxHeight,
+      overflowX = _this$props3.overflowX,
+      overflowY = _this$props3.overflowY,
+      stacking = _this$props3.stacking,
+      shadow = _this$props3.shadow,
+      position = _this$props3.position,
+      focusPosition = _this$props3.focusPosition,
+      focusColor = _this$props3.focusColor,
+      shouldAnimateFocus = _this$props3.shouldAnimateFocus,
+      borderColor = _this$props3.borderColor,
+      className = _this$props3.className,
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const ElementType = (0, _getElementType.getElementType)(View, this.props);
     return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       className: className,
@@ -155,7 +129,6 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
       ref: this.handleElementRef
     }), children);
   }
-
 }, _class2.displayName = "View", _class2.componentId = 'View', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   display: 'auto',
   overflowX: 'visible',
@@ -170,13 +143,11 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
   // We don't want the theming and styling props to pass
   // (these are added and handled by the `@withStyle` decorator)
   const propsToOmit = [..._class2.allowedProps, 'styles', 'makeStyles', 'themeOverride'];
-
   if (process.env.NODE_ENV !== 'production') {
     Object.keys((0, _pickProps.pickProps)(props, propsToOmit)).forEach(prop => {
       (0, _console.logError)(false, `[${Component.name}] prop '${prop}' is not allowed.`);
     });
   }
-
   return (0, _omitProps.omitProps)(props, propsToOmit);
 }, _class2)) || _class) || _class);
 exports.View = View;

package/lib/View/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 _cursor = require("@instructure/ui-prop-types/lib/cursor.js");
-
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,6 +32,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   as: _propTypes.default.elementType,
   elementRef: _propTypes.default.func,
@@ -72,10 +67,11 @@ const propTypes = {
   shouldAnimateFocus: _propTypes.default.bool,
   withVisualDebug: _propTypes.default.bool,
   dir: _propTypes.default.oneOf(Object.values(_textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION))
-}; // This variable will be attached as static property on the `View` component
+};
+
+// This variable will be attached as static property on the `View` component
 // so we don't rely on the `PropTypes` validators for our internal logic.
 // This means on prod builds the consuming applications can safely delete propTypes.
-
 exports.propTypes = propTypes;
 const allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug'];
 exports.allowedProps = allowedProps;

package/lib/View/styles.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _uiI18n = require("@instructure/ui-i18n");
-
 var _emotion = require("@instructure/emotion");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _console = require("@instructure/console");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,36 +31,35 @@ var _console = require("@instructure/console");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const getBorderStyle = _ref => {
   let borderRadius = _ref.borderRadius,
-      borderWidth = _ref.borderWidth,
-      dir = _ref.dir,
-      theme = _ref.theme;
+    borderWidth = _ref.borderWidth,
+    dir = _ref.dir,
+    theme = _ref.theme;
   const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
   return {
     borderRadius: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandCorners)(borderRadius) : borderRadius, 'borderRadius'),
     borderWidth: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(borderWidth) : borderWidth, 'borderWidth')
   };
 };
-
 const getSpacingStyle = _ref2 => {
   let margin = _ref2.margin,
-      padding = _ref2.padding,
-      dir = _ref2.dir,
-      theme = _ref2.theme;
+    padding = _ref2.padding,
+    dir = _ref2.dir,
+    theme = _ref2.theme;
   const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
   return {
     margin: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(margin) : margin, 'margin'),
     padding: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(padding) : padding, 'padding')
   };
 };
-
 const getOffsetStyle = _ref3 => {
   let insetBlockStart = _ref3.insetBlockStart,
-      insetBlockEnd = _ref3.insetBlockEnd,
-      insetInlineStart = _ref3.insetInlineStart,
-      insetInlineEnd = _ref3.insetInlineEnd,
-      dir = _ref3.dir;
+    insetBlockEnd = _ref3.insetBlockEnd,
+    insetInlineStart = _ref3.insetInlineStart,
+    insetInlineEnd = _ref3.insetInlineEnd,
+    dir = _ref3.dir;
   const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
   const blockStart = {
     top: insetBlockStart,
@@ -79,80 +73,71 @@ const getOffsetStyle = _ref3 => {
     left: isRtlDirection ? insetInlineEnd : insetInlineStart,
     right: isRtlDirection ? insetInlineStart : insetInlineEnd
   };
-  return { ...blockStart,
+  return {
+    ...blockStart,
     ...blockEnd,
     ...horizontalOffsets
   };
 };
-
 const getStyleProps = _ref4 => {
   let cursor = _ref4.cursor,
-      style = _ref4.style;
-  const whitelisted = (0, _pickProps.pickProps)(style || {}, {}, [// Position/calculateElementPosition:
-  'top', 'left', 'position', 'display', 'transform', 'overflow', 'minWidth', 'minHeight', // Img:
-  'filter', // Flex.Item:
-  'flexBasis', // Avatar:
-  'backgroundImage', // Popover:
+    style = _ref4.style;
+  const whitelisted = (0, _pickProps.pickProps)(style || {}, {}, [
+  // Position/calculateElementPosition:
+  'top', 'left', 'position', 'display', 'transform', 'overflow', 'minWidth', 'minHeight',
+  // Img:
+  'filter',
+  // Flex.Item:
+  'flexBasis',
+  // Avatar:
+  'backgroundImage',
+  // Popover:
   'pointerEvents']);
-
   if (cursor) {
     whitelisted.cursor = cursor;
   }
-
   return whitelisted;
 };
-
 const verifyUniformValues = (initialValue, input) => {
   if (typeof input !== 'string') {
     return false;
   }
-
   return input.trim().split(' ').every(value => initialValue === value);
 };
-
 const getFocusRingRadius = borderRadius => {
   const baseRadiusStyle = 'focusRing--radius';
   const initialValue = (borderRadius || '').trim().split(' ')[0];
-
   if (verifyUniformValues(initialValue, borderRadius)) {
     const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
-
     if (['small', 'medium', 'large'].includes(initialValue)) return `${baseRadiusStyle}${capitalize(initialValue)}`;
     if (['circle', 'pill'].includes(initialValue)) return `${baseRadiusStyle}Inherit`;
   }
-
   return `${baseRadiusStyle}None`;
 };
-
 const getFocusOutline = props => {
   const position = props.position,
-        display = props.display,
-        focusPosition = props.focusPosition,
-        shouldDisplayFocusOutline = props.withFocusOutline;
-
+    display = props.display,
+    focusPosition = props.focusPosition,
+    shouldDisplayFocusOutline = props.withFocusOutline;
   if (typeof shouldDisplayFocusOutline === 'undefined') {
     return shouldDisplayFocusOutline;
   }
-
   if (shouldDisplayFocusOutline) {
     (0, _console.logError)(display === 'inline' || position === 'relative', '[View] the focus outline will only show if the `position` prop is `relative`.');
     (0, _console.logError)(display !== 'inline' || focusPosition === 'inset', '[View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.');
   }
-
   return shouldDisplayFocusOutline;
 };
-
 const withBorder = props => {
   const borderWidth = props.borderWidth;
   return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
 };
-
 const getFocusStyles = (props, componentTheme) => {
   const focusColor = props.focusColor,
-        focusPosition = props.focusPosition,
-        position = props.position,
-        shouldAnimateFocus = props.shouldAnimateFocus,
-        borderRadius = props.borderRadius;
+    focusPosition = props.focusPosition,
+    position = props.position,
+    shouldAnimateFocus = props.shouldAnimateFocus,
+    borderRadius = props.borderRadius;
   const focusOutline = getFocusOutline(props);
   const shouldUseBrowserFocus = typeof focusOutline === 'undefined';
   const focusPositionVariants = {
@@ -175,7 +160,6 @@ const getFocusStyles = (props, componentTheme) => {
     success: componentTheme.focusColorSuccess,
     danger: componentTheme.focusColorDanger
   };
-
   if (position === 'relative') {
     const focusRingRadius = getFocusRingRadius(borderRadius);
     const focusRingVariants = {
@@ -229,7 +213,8 @@ const getFocusStyles = (props, componentTheme) => {
       },
       '&:focus': {
         outline: 'none',
-        '&::before': { ...(shouldUseBrowserFocus ? {
+        '&::before': {
+          ...(shouldUseBrowserFocus ? {
             opacity: 1,
             transform: 'scale(1)'
           } : {})
@@ -237,7 +222,6 @@ const getFocusStyles = (props, componentTheme) => {
       }
     };
   }
-
   return {
     '&::before': {
       borderStyle: 'none'
@@ -248,13 +232,15 @@ const getFocusStyles = (props, componentTheme) => {
       outlineWidth: componentTheme.focusOutlineWidth,
       outlineStyle: componentTheme.focusOutlineStyle
     } : {}),
-    '&:focus': { ...(shouldUseBrowserFocus ? {
+    '&:focus': {
+      ...(shouldUseBrowserFocus ? {
         outlineWidth: componentTheme.focusOutlineWidth,
         outlineStyle: componentTheme.focusOutlineStyle
       } : {})
     }
   };
 };
+
 /**
  * ---
  * private: true
@@ -265,35 +251,33 @@ const getFocusStyles = (props, componentTheme) => {
  * @param  {Object} extraArgs
  * @return {Object} The final style object, which will be used in the component
  */
-
-
 const generateStyle = (componentTheme, props) => {
   const borderRadius = props.borderRadius,
-        borderWidth = props.borderWidth,
-        margin = props.margin,
-        padding = props.padding,
-        position = props.position,
-        display = props.display,
-        focusPosition = props.focusPosition,
-        textAlign = props.textAlign,
-        borderColor = props.borderColor,
-        background = props.background,
-        stacking = props.stacking,
-        shadow = props.shadow,
-        overflowY = props.overflowY,
-        overflowX = props.overflowX,
-        insetBlockEnd = props.insetBlockEnd,
-        insetBlockStart = props.insetBlockStart,
-        insetInlineEnd = props.insetInlineEnd,
-        insetInlineStart = props.insetInlineStart,
-        width = props.width,
-        height = props.height,
-        minWidth = props.minWidth,
-        minHeight = props.minHeight,
-        maxWidth = props.maxWidth,
-        maxHeight = props.maxHeight,
-        withVisualDebug = props.withVisualDebug,
-        dir = props.dir;
+    borderWidth = props.borderWidth,
+    margin = props.margin,
+    padding = props.padding,
+    position = props.position,
+    display = props.display,
+    focusPosition = props.focusPosition,
+    textAlign = props.textAlign,
+    borderColor = props.borderColor,
+    background = props.background,
+    stacking = props.stacking,
+    shadow = props.shadow,
+    overflowY = props.overflowY,
+    overflowX = props.overflowX,
+    insetBlockEnd = props.insetBlockEnd,
+    insetBlockStart = props.insetBlockStart,
+    insetInlineEnd = props.insetInlineEnd,
+    insetInlineStart = props.insetInlineStart,
+    width = props.width,
+    height = props.height,
+    minWidth = props.minWidth,
+    minHeight = props.minHeight,
+    maxWidth = props.maxWidth,
+    maxHeight = props.maxHeight,
+    withVisualDebug = props.withVisualDebug,
+    dir = props.dir;
   const borderStyle = getBorderStyle({
     theme: componentTheme,
     borderRadius,
@@ -476,7 +460,8 @@ const generateStyle = (componentTheme, props) => {
     inlineStyles: {
       //every '&' symbol will add another class to the rule, so it will be stronger
       //making an accidental override less likely
-      '&&&&&&&&&&': { ...spacingStyle,
+      '&&&&&&&&&&': {
+        ...spacingStyle,
         ...borderStyle,
         ...offsetStyle,
         width,
@@ -490,6 +475,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/View/theme.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -40,13 +38,13 @@ var _emotion = require("@instructure/emotion");
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        borders = theme.borders,
-        breakpoints = theme.breakpoints,
-        spacing = theme.spacing,
-        shadows = theme.shadows,
-        stacking = theme.stacking,
-        themeName = theme.key;
+    typography = theme.typography,
+    borders = theme.borders,
+    breakpoints = theme.breakpoints,
+    spacing = theme.spacing,
+    shadows = theme.shadows,
+    stacking = theme.stacking,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -86,6 +84,7 @@ const generateComponentTheme = theme => {
     focusOutlineOffset: '0.3125rem',
     focusOutlineInset: '0rem',
     // do not use unitless zero (for CSS calc())
+
     focusColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
     focusColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
     focusColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
@@ -100,10 +99,10 @@ const generateComponentTheme = theme => {
     ...(0, _emotion.makeThemeVars)('stacking', stacking),
     ...(0, _emotion.makeThemeVars)('border', borders)
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "View", {
     return _View.View;
   }
 });
-
 var _ContextView = require("./ContextView");
-
 var _View = require("./View");