@instructure/ui-view 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/es/ContextView/v2/styles.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -30,24 +31,24 @@ const topPlacements = ['top', 'top start', 'top end', 'top stretch', 'top center
 const getPlacementStyle = (placement, theme) => {
   if (endPlacements.includes(placement)) {
     return {
-      paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
+      paddingInlineStart: theme?.arrowSize,
       paddingInlineEnd: '0'
     };
   }
   if (startPlacements.includes(placement)) {
     return {
-      paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
+      paddingInlineEnd: theme?.arrowSize,
       paddingInlineStart: '0'
     };
   }
   if (bottomPlacements.includes(placement)) {
     return {
-      paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      paddingTop: theme?.arrowSize
     };
   }
   if (topPlacements.includes(placement)) {
     return {
-      paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      paddingBottom: theme?.arrowSize
     };
   }
   return {
@@ -68,24 +69,24 @@ const getArrowCorrections = (placement, theme) => {
   }
   if (start.includes(placement)) {
     return {
-      insetInlineStart: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
+      insetInlineStart: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
       insetInlineEnd: 'auto'
     };
   }
   if (end.includes(placement)) {
     return {
-      insetInlineStart: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
+      insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
       insetInlineEnd: 'auto'
     };
   }
   if (top.includes(placement)) {
     return {
-      top: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
+      top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
     };
   }
   if (bottom.includes(placement)) {
     return {
-      top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
+      top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
     };
   }
   return {};
@@ -93,31 +94,33 @@ const getArrowCorrections = (placement, theme) => {
 const getArrowPlacementVariant = (placement, background, theme, props) => {
   const transformedPlacement = mirrorPlacement(placement, ' ');
   const isInversed = background === 'inverse';
-  const borderColor = props.borderColor;
+  const {
+    borderColor
+  } = props;
   if (endPlacements.includes(transformedPlacement)) {
     return {
       main: {
         top: '50%',
         insetInlineStart: '100%',
         insetInlineEnd: 'auto',
-        marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
-        borderInlineStartColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
+        borderInlineStartColor: borderColor || (isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+        borderInlineStartWidth: theme?.arrowSize
       },
       __after: {
-        insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineEnd: theme?.arrowBorderWidth,
         insetInlineStart: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+        marginTop: `calc(-1 * ${theme?.arrowSize})`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-        borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
+        borderInlineStartWidth: theme?.arrowSize,
+        borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
@@ -127,24 +130,24 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
         top: '50%',
         insetInlineEnd: '100%',
         insetInlineStart: 'auto',
-        marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
-        borderInlineEndColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
+        borderInlineEndColor: borderColor || (isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+        borderInlineEndWidth: theme?.arrowSize
       },
       __after: {
-        insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineStart: theme?.arrowBorderWidth,
         insetInlineEnd: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+        marginTop: `calc(-1 * ${theme?.arrowSize})`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-        borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
+        borderInlineEndWidth: theme?.arrowSize,
+        borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
@@ -152,7 +155,7 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
     return {
       main: {
         top: '100%',
-        marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
+        marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         marginInlineEnd: '0',
         borderBottomWidth: '0',
         borderBottomColor: 'transparent',
@@ -160,21 +163,21 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
         borderInlineEndColor: 'transparent'
       },
       __after: {
-        bottom: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-        marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+        bottom: theme?.arrowBorderWidth,
+        marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
         marginInlineEnd: '0',
         borderBottomWidth: '0',
         borderBottomColor: 'transparent',
         borderInlineStartColor: 'transparent',
         borderInlineEndColor: 'transparent',
-        borderTopColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
+        borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
   return {
     main: {
       bottom: '100%',
-      marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
+      marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
       marginInlineEnd: '0',
       borderTopWidth: '0',
       borderTopColor: 'transparent',
@@ -182,14 +185,14 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
       borderInlineEndColor: 'transparent'
     },
     __after: {
-      top: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-      marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+      top: theme?.arrowBorderWidth,
+      marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
       marginInlineEnd: '0',
       borderTopWidth: '0',
       borderTopColor: 'transparent',
       borderInlineStartColor: 'transparent',
       borderInlineEndColor: 'transparent',
-      borderBottomColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
+      borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
     }
   };
 };
@@ -204,9 +207,11 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const placement = props.placement,
-    background = props.background,
-    borderColor = props.borderColor;
+  const {
+    placement,
+    background,
+    borderColor
+  } = props;
   const arrowBaseStyles = {
     content: '""',
     height: '0',
@@ -218,16 +223,16 @@ const generateStyle = (componentTheme, props) => {
     borderStyle: 'solid'
   };
   const arrowBackGroundVariants = {
-    default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
-    inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
+    default: componentTheme?.arrowBorderColor,
+    inverse: componentTheme?.arrowBorderColorInverse
   };
   const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
   return {
-    borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderRadius,
+    borderRadius: componentTheme?.borderRadius,
     contextView: {
       label: 'contextView',
       boxSizing: 'border-box',
-      minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
+      minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
       ...getPlacementStyle(placement, componentTheme)
     },
     contextView__content: {
@@ -238,12 +243,12 @@ const generateStyle = (componentTheme, props) => {
       label: 'contextView__arrow',
       ...arrowBaseStyles,
       display: 'block',
-      borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
+      borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
       borderColor: borderColor || arrowBackGroundVariants[background],
       ...arrowPlacementVariant.main,
       ...getArrowCorrections(placement, componentTheme),
       '&::after': {
-        borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
+        borderWidth: componentTheme?.arrowSize,
         borderColor: arrowBackGroundVariants[background],
         ...arrowPlacementVariant.__after,
         ...arrowBaseStyles

package/es/View/v1/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "textAlign", "background", "display", "withVisualDebug", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "overflowX", "overflowY", "stacking", "shadow", "position", "focusPosition", "focusColor", "shouldAnimateFocus", "borderColor", "className", "overscrollBehavior", "styles", "makeStyles"];
-var _dec, _dec2, _class, _View;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -41,42 +39,73 @@ category: components
 ---
 @module View
 **/
-let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_View = class View extends Component {
+let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class View extends Component {
+  static displayName = "View";
+  static componentId = 'View';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    display: 'auto',
+    overflowX: 'visible',
+    overflowY: 'visible',
+    withVisualDebug: false,
+    borderColor: 'primary',
+    position: 'static',
+    focusPosition: 'offset',
+    focusColor: 'info',
+    shouldAnimateFocus: true,
+    overscrollBehavior: 'auto'
+  };
+
+  // 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.
+  static omitViewProps = (props, Component) => {
+    // We don't want the theming and styling props to pass
+    // (these are added and handled by the `@withStyle` decorator)
+    const propsToOmit = [...View.allowedProps, 'styles', 'makeStyles', 'themeOverride'];
+    if (typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production') {
+      Object.keys(pickProps(props, propsToOmit)).forEach(prop => {
+        error(false, `[${Component.name}] prop '${prop}' is not allowed.`);
+      });
+    }
+    return omitProps(props, propsToOmit);
+  };
+  spanMarginVerified;
   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);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2, _process, _process$env;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
 
     // Not calling getCSSStyleDeclaration can save hundreds of ms in tests and production
-    if (typeof process !== 'undefined' && ((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development' && !this.spanMarginVerified) {
+    if (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development' && !this.spanMarginVerified) {
       // We have to verify margins in the first 'componentDidUpdate',
       // because that is when all styles are calculated,
       // but we only want to check once, using a flag
       this.spanMarginVerified = true;
       error(!function verifySpanMargin(element, margin) {
-        var _getCSSStyleDeclarati;
         if (!element) {
           return;
         }
-        const display = (_getCSSStyleDeclarati = getCSSStyleDeclaration(element)) === null || _getCSSStyleDeclarati === void 0 ? void 0 : _getCSSStyleDeclarati.display;
+        const display = getCSSStyleDeclaration(element)?.display;
         if (display !== 'inline') {
           return;
         }
@@ -96,64 +125,50 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
       }(this.ref, this.props.margin), `[View] display style is set to 'inline' and will allow for horizontal margins only.`);
     }
   }
+  ref = null;
+  handleElementRef = el => {
+    if (typeof this.props.elementRef === 'function') {
+      this.props.elementRef(el);
+    }
+    this.ref = el;
+  };
   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,
-      overscrollBehavior = _this$props3.overscrollBehavior,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      children,
+      textAlign,
+      background,
+      display,
+      withVisualDebug,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      overflowX,
+      overflowY,
+      stacking,
+      shadow,
+      position,
+      focusPosition,
+      focusColor,
+      shouldAnimateFocus,
+      borderColor,
+      className,
+      overscrollBehavior,
+      styles,
+      makeStyles,
+      ...props
+    } = this.props;
     const ElementType = getElementType(View, this.props);
     return _jsx(ElementType, {
       ...passthroughProps(props),
       className: className,
-      css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
+      css: [styles?.view, styles?.inlineStyles],
       ref: this.handleElementRef,
       children: children
     });
   }
-}, _View.displayName = "View", _View.componentId = 'View', _View.allowedProps = allowedProps, _View.defaultProps = {
-  display: 'auto',
-  overflowX: 'visible',
-  overflowY: 'visible',
-  withVisualDebug: false,
-  borderColor: 'primary',
-  position: 'static',
-  focusPosition: 'offset',
-  focusColor: 'info',
-  shouldAnimateFocus: true,
-  overscrollBehavior: 'auto'
-}, _View.omitViewProps = (props, Component) => {
-  var _process2, _process2$env;
-  // We don't want the theming and styling props to pass
-  // (these are added and handled by the `@withStyle` decorator)
-  const propsToOmit = [..._View.allowedProps, 'styles', 'makeStyles', 'themeOverride'];
-  if (typeof process !== 'undefined' && ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.NODE_ENV) !== 'production') {
-    Object.keys(pickProps(props, propsToOmit)).forEach(prop => {
-      error(false, `[${Component.name}] prop '${prop}' is not allowed.`);
-    });
-  }
-  return omitProps(props, propsToOmit);
-}, _View)) || _class) || _class);
+}) || _class) || _class);
 export default View;
 export { View };

package/es/View/v1/styles.js

@@ -97,15 +97,19 @@ const getStyleProps = ({
   return whitelisted;
 };
 const withBorder = props => {
-  const borderWidth = props.borderWidth;
+  const {
+    borderWidth
+  } = props;
   return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
 };
 const getFocusStyles = (props, componentTheme) => {
-  const focusColor = props.focusColor,
-    focusPosition = props.focusPosition,
-    shouldAnimateFocus = props.shouldAnimateFocus,
-    withFocusOutline = props.withFocusOutline,
-    focusWithin = props.focusWithin;
+  const {
+    focusColor,
+    focusPosition,
+    shouldAnimateFocus,
+    withFocusOutline,
+    focusWithin
+  } = props;
   const focusPos = focusPosition == 'offset' || focusPosition == 'inset' ? focusPosition : 'offset';
   const focusPositionVariants = {
     offset: {
@@ -159,32 +163,34 @@ const getFocusStyles = (props, componentTheme) => {
  * @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,
-    textAlign = props.textAlign,
-    borderColor = props.borderColor,
-    background = props.background,
-    stacking = props.stacking,
-    shadow = props.shadow,
-    overflowY = props.overflowY,
-    overflowX = props.overflowX,
-    overscrollBehavior = props.overscrollBehavior,
-    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 {
+    borderRadius,
+    borderWidth,
+    margin,
+    padding,
+    position,
+    display,
+    textAlign,
+    borderColor,
+    background,
+    stacking,
+    shadow,
+    overflowY,
+    overflowX,
+    overscrollBehavior,
+    insetBlockEnd,
+    insetBlockStart,
+    insetInlineEnd,
+    insetInlineStart,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    withVisualDebug,
+    dir
+  } = props;
   const borderStyle = getBorderStyle({
     theme: componentTheme,
     borderRadius,

package/es/View/v1/theme.js

@@ -31,15 +31,16 @@ import { makeThemeVars } from '@instructure/emotion';
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22;
-  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;
+  const {
+    colors,
+    typography,
+    borders,
+    breakpoints,
+    spacing,
+    shadows,
+    stacking,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -51,43 +52,43 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    colorPrimaryInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    borderColorPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1424,
-    borderColorSecondary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
-    borderColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.green4570,
-    borderColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
-    borderColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
-    borderColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
-    borderColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.orange4570,
-    borderColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.red4570,
+    fontFamily: typography?.fontFamily,
+    color: colors?.contrasts?.grey125125,
+    colorPrimaryInverse: colors?.contrasts?.white1010,
+    borderColorPrimary: colors?.contrasts?.grey1424,
+    borderColorSecondary: colors?.contrasts?.grey3045,
+    borderColorSuccess: colors?.contrasts?.green4570,
+    borderColorBrand: colors?.contrasts?.blue4570,
+    borderColorInfo: colors?.contrasts?.blue4570,
+    borderColorAlert: colors?.contrasts?.blue4570,
+    borderColorWarning: colors?.contrasts?.orange4570,
+    borderColorDanger: colors?.contrasts?.red4570,
     borderColorTransparent: 'transparent',
-    debugOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.red4570,
-    backgroundPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
-    backgroundSecondary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1111,
-    backgroundPrimaryInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey125125,
-    backgroundBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
-    backgroundInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.blue4570,
-    backgroundAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.blue4570,
-    backgroundSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.green4570,
-    backgroundDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.red4570,
-    backgroundWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.orange4570,
+    debugOutlineColor: colors?.contrasts?.red4570,
+    backgroundPrimary: colors?.contrasts?.white1010,
+    backgroundSecondary: colors?.contrasts?.grey1111,
+    backgroundPrimaryInverse: colors?.contrasts?.grey125125,
+    backgroundBrand: colors?.contrasts?.blue4570,
+    backgroundInfo: colors?.contrasts?.blue4570,
+    backgroundAlert: colors?.contrasts?.blue4570,
+    backgroundSuccess: colors?.contrasts?.green4570,
+    backgroundDanger: colors?.contrasts?.red4570,
+    backgroundWarning: colors?.contrasts?.orange4570,
     arrowSize: '0.5rem',
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders?.style,
+    focusOutlineWidth: borders?.widthMedium,
     focusOutlineOffset: '0.3125rem',
     focusOutlineInset: '0rem',
     // do not use unitless zero (for CSS calc())
 
-    focusColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.blue4570,
-    focusColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.red4570,
-    focusColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.green4570,
-    focusColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.white1010,
-    xSmallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
-    smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
-    mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
-    largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
+    focusColorInfo: colors?.contrasts?.blue4570,
+    focusColorDanger: colors?.contrasts?.red4570,
+    focusColorSuccess: colors?.contrasts?.green4570,
+    focusColorInverse: colors?.contrasts?.white1010,
+    xSmallMaxWidth: breakpoints?.xSmall,
+    smallMaxWidth: breakpoints?.small,
+    mediumMaxWidth: breakpoints?.medium,
+    largeMaxWidth: breakpoints?.large,
     ...makeThemeVars('margin', spacing),
     ...makeThemeVars('padding', spacing),
     ...makeThemeVars('shadow', shadows),