@instructure/ui-view 11.6.0 → 11.6.1-snapshot-129

package/es/ContextView/v2/index.js

@@ -0,0 +1,125 @@
+var _dec, _class, _ContextView;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { withStyle } from '@instructure/emotion';
+import { omitProps } from '@instructure/ui-react-utils';
+import { View } from "../../View/v2/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let ContextView = (_dec = withStyle(generateStyle), _dec(_class = (_ContextView = class ContextView extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(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);
+  }
+  render() {
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      background = _this$props3.background,
+      children = _this$props3.children,
+      debug = _this$props3.debug,
+      height = _this$props3.height,
+      width = _this$props3.width,
+      maxHeight = _this$props3.maxHeight,
+      maxWidth = _this$props3.maxWidth,
+      minHeight = _this$props3.minHeight,
+      minWidth = _this$props3.minWidth,
+      margin = _this$props3.margin,
+      padding = _this$props3.padding,
+      shadow = _this$props3.shadow,
+      stacking = _this$props3.stacking,
+      style = _this$props3.style,
+      textAlign = _this$props3.textAlign,
+      styles = _this$props3.styles,
+      borderColor = _this$props3.borderColor;
+    return _jsx(View, {
+      ...omitProps(this.props, ContextView.allowedProps),
+      css: styles === null || styles === void 0 ? void 0 : styles.contextView,
+      style: style,
+      borderWidth: "none",
+      display: "inline-block",
+      as: as,
+      withVisualDebug: debug,
+      elementRef: this.handleRef,
+      margin: margin,
+      stacking: stacking,
+      children: _jsxs(View, {
+        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
+        display: "block",
+        borderRadius: styles === null || styles === void 0 ? void 0 : styles.borderRadius,
+        borderWidth: "small",
+        borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
+        background: background === 'default' ? 'primary' : 'primary-inverse',
+        withVisualDebug: debug,
+        height: height,
+        width: width,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        padding: padding,
+        shadow: shadow,
+        textAlign: textAlign,
+        children: [_jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
+        }), children]
+      })
+    });
+  }
+}, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = allowedProps, _ContextView.defaultProps = {
+  as: 'span',
+  elementRef: () => {},
+  debug: false,
+  width: 'auto',
+  height: 'auto',
+  children: null,
+  textAlign: 'start',
+  background: 'default',
+  shadow: 'above',
+  placement: 'center end'
+}, _ContextView)) || _class);
+export default ContextView;
+export { ContextView };

package/es/ContextView/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug', 'borderColor'];
+export { allowedProps };

package/es/ContextView/v2/styles.js

@@ -0,0 +1,256 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { mirrorPlacement } from '@instructure/ui-position';
+const endPlacements = ['end center', 'end top', 'end bottom', 'end stretch', 'center end', 'end'];
+const startPlacements = ['start center', 'start top', 'start bottom', 'start stretch', 'center start', 'start'];
+const bottomPlacements = ['bottom', 'bottom end', 'bottom start', 'bottom stretch', 'bottom center'];
+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,
+      paddingInlineEnd: '0'
+    };
+  }
+  if (startPlacements.includes(placement)) {
+    return {
+      paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
+      paddingInlineStart: '0'
+    };
+  }
+  if (bottomPlacements.includes(placement)) {
+    return {
+      paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+    };
+  }
+  if (topPlacements.includes(placement)) {
+    return {
+      paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+    };
+  }
+  return {
+    position: 'absolute',
+    left: '-999em'
+  };
+};
+const getArrowCorrections = (placement, theme) => {
+  const center = ['top', 'bottom', 'top center', 'bottom center', 'top stretch', 'bottom stretch'];
+  const start = ['top start', 'bottom start'];
+  const end = ['top end', 'bottom end'];
+  const top = ['start top', 'end top'];
+  const bottom = ['start bottom', 'end bottom'];
+  if (center.includes(placement)) {
+    return {
+      insetInlineStart: '50%'
+    };
+  }
+  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)`,
+      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)`,
+      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)`
+    };
+  }
+  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)`
+    };
+  }
+  return {};
+};
+const getArrowPlacementVariant = (placement, background, theme, props) => {
+  const transformedPlacement = mirrorPlacement(placement, ' ');
+  const isInversed = background === 'inverse';
+  const borderColor = props.borderColor;
+  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}))`,
+        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),
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      },
+      __after: {
+        insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineStart: 'auto',
+        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : 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
+      }
+    };
+  }
+  if (startPlacements.includes(transformedPlacement)) {
+    return {
+      main: {
+        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}))`,
+        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),
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      },
+      __after: {
+        insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineEnd: 'auto',
+        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : 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
+      }
+    };
+  }
+  if (bottomPlacements.includes(transformedPlacement)) {
+    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}))`,
+        marginInlineEnd: '0',
+        borderBottomWidth: '0',
+        borderBottomColor: 'transparent',
+        borderInlineStartColor: 'transparent',
+        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})`,
+        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
+      }
+    };
+  }
+  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}))`,
+      marginInlineEnd: '0',
+      borderTopWidth: '0',
+      borderTopColor: 'transparent',
+      borderInlineStartColor: 'transparent',
+      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})`,
+      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
+    }
+  };
+};
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @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 arrowBaseStyles = {
+    content: '""',
+    height: '0',
+    width: '0',
+    position: 'absolute',
+    display: 'block',
+    boxSizing: 'border-box',
+    pointerEvents: 'none',
+    borderStyle: 'solid'
+  };
+  const arrowBackGroundVariants = {
+    default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
+    inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
+  };
+  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
+  return {
+    borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderRadius,
+    contextView: {
+      label: 'contextView',
+      boxSizing: 'border-box',
+      minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
+      ...getPlacementStyle(placement, componentTheme)
+    },
+    contextView__content: {
+      label: 'contextView__content',
+      position: 'relative'
+    },
+    contextView__arrow: {
+      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})`,
+      borderColor: borderColor || arrowBackGroundVariants[background],
+      ...arrowPlacementVariant.main,
+      ...getArrowCorrections(placement, componentTheme),
+      '&::after': {
+        borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
+        borderColor: arrowBackGroundVariants[background],
+        ...arrowPlacementVariant.__after,
+        ...arrowBaseStyles
+      }
+    },
+    arrowSize: componentTheme.arrowSize,
+    arrowBorderWidth: componentTheme.arrowBorderWidth
+  };
+};
+export default generateStyle;

package/es/View/{index.js → v1/index.js}

@@ -30,7 +30,7 @@ import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';
 import { logError as error } from '@instructure/console';
 import { getElementType, omitProps, pickProps, passthroughProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/View/v2/index.js

@@ -0,0 +1,167 @@
+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;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
+import { logError as error } from '@instructure/console';
+import { getElementType, omitProps, pickProps, passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+@module View
+**/
+let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_View = class View extends Component {
+  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);
+
+    // Not calling getCSSStyleDeclaration 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,
+      // but we only want to check once, using a flag
+      this.spanMarginVerified = true;
+      error(!function verifySpanMargin(element, margin, _getCSSStyleDeclarati) {
+        if (!element) {
+          return;
+        }
+        const display = (_getCSSStyleDeclarati = getCSSStyleDeclaration(element)) === null || _getCSSStyleDeclarati === void 0 ? void 0 : _getCSSStyleDeclarati.display;
+        if (display !== 'inline') {
+          return;
+        }
+        const marginValues = margin ? margin.split(' ') : null;
+        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,
+      overscrollBehavior = _this$props3.overscrollBehavior,
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
+    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],
+      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) => {
+  // 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'];
+  let shouldLogError = true;
+  try {
+    shouldLogError = process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true';
+  } catch (e) {
+    if (e instanceof ReferenceError) {
+      // if process is not available a ReferenceError is thrown
+      shouldLogError = false;
+    } else {
+      throw e;
+    }
+  }
+  if (shouldLogError) {
+    Object.keys(pickProps(props, propsToOmit)).forEach(prop => {
+      error(false, `[${Component.name}] prop '${prop}' is not allowed.`);
+    });
+  }
+  return omitProps(props, propsToOmit);
+}, _View)) || _class) || _class);
+export default View;
+export { View };

package/es/View/v2/props.js

@@ -0,0 +1,29 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// 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.
+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', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius', 'focusWithin'];
+export { allowedProps };