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

package/es/ContextView/__examples__/ContextView.examples.js

@@ -1,5 +1,4 @@
 var _span;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,6 +22,7 @@ var _span;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 export default {
   sectionProp: 'background',

package/es/ContextView/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,8 +22,8 @@ var _dec, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
+
 import { Component } from 'react';
 import { jsx, withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -32,7 +31,6 @@ import { View } from '../View';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -43,48 +41,41 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   constructor() {
     super(...arguments);
     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;
+      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;
     return jsx(View, Object.assign({}, omitProps(this.props, ContextView.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
@@ -116,7 +107,6 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
     }), children));
   }
-
 }, _class2.displayName = "ContextView", _class2.componentId = 'ContextView', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   as: 'span',
   elementRef: () => {},

package/es/ContextView/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 { ThemeablePropTypes } from '@instructure/emotion';
 import { PositionPropTypes } from '@instructure/ui-position';
@@ -29,19 +30,16 @@ const propTypes = {
    * The element to render as the component root
    */
   as: PropTypes.elementType,
-
   /**
    * provides a reference to the underlying html root element
    */
   elementRef: PropTypes.func,
-
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
   margin: ThemeablePropTypes.spacing,
-
   /**
    * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -54,38 +52,31 @@ const propTypes = {
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * The children to render inside the `<ContextView />`
    */
   children: PropTypes.node,
-
   /**
    * Designates the text alignment within the `<ContextView />`
    */
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
   /**
    * Controls the shadow depth for the `<ContextView />`
    */
   shadow: ThemeablePropTypes.shadow,
-
   /**
    * Controls the z-index depth for the `<ContextView />`
    */
   stacking: ThemeablePropTypes.stacking,
-
   /**
    * Designates the background style of the `<ContextView />`
    */
   background: PropTypes.oneOf(['default', 'inverse']),
-
   /**
    * Specifies how the arrow for `<ContextView />` will be rendered.
    * Ex. `placement="top"` will render with an arrow pointing down.
    */
   placement: PositionPropTypes.placement,
-
   /**
    * Activate an outline around the component to make building your
    * layout easier

package/es/ContextView/styles.js

@@ -21,12 +21,12 @@
  * 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', 'center end', 'end'];
 const startPlacements = ['start center', 'start top', 'start bottom', 'center start', 'start'];
 const bottomPlacements = ['bottom', 'bottom end', 'bottom start', 'bottom center'];
 const topPlacements = ['top', 'top start', 'top end', 'top center'];
-
 const getPlacementStyle = (placement, theme) => {
   if (endPlacements.includes(placement)) {
     return {
@@ -34,78 +34,65 @@ const getPlacementStyle = (placement, theme) => {
       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'];
   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) => {
   const transformedPlacement = mirrorPlacement(placement, ' ');
   const isInversed = background === 'inverse';
-
   if (endPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -133,7 +120,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   if (startPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -161,7 +147,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   if (bottomPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -185,7 +170,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   return {
     main: {
       bottom: '100%',
@@ -208,6 +192,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
     }
   };
 };
+
 /**
  * ---
  * private: true
@@ -218,11 +203,9 @@ const getArrowPlacementVariant = (placement, background, theme) => {
  * @param  {Object} state the state 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;
+    background = props.background;
   const arrowBaseStyles = {
     content: '""',
     height: '0',
@@ -268,5 +251,4 @@ const generateStyle = (componentTheme, props) => {
     arrowBorderWidth: componentTheme.arrowBorderWidth
   };
 };
-
 export default generateStyle;

package/es/ContextView/theme.js

@@ -29,7 +29,6 @@
  */
 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,
@@ -38,8 +37,8 @@ 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
   };
 };
-
 export default generateComponentTheme;

package/es/View/__examples__/View.examples.js

@@ -21,10 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { ThemeablePropValues } from '@instructure/emotion';
 const SHADOW_TYPES = ThemeablePropValues.SHADOW_TYPES,
-      BORDER_WIDTHS = ThemeablePropValues.BORDER_WIDTHS,
-      BORDER_RADII = ThemeablePropValues.BORDER_RADII;
+  BORDER_WIDTHS = ThemeablePropValues.BORDER_WIDTHS,
+  BORDER_RADII = ThemeablePropValues.BORDER_RADII;
 export default {
   maxExamplesPerPage: 50,
   maxExamples: 500,
@@ -51,11 +52,15 @@ export 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/es/View/index.js

@@ -1,8 +1,6 @@
 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", "styles", "makeStyles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -37,7 +35,6 @@ import { jsx, withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -48,47 +45,43 @@ category: components
 let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_class2 = class View extends 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,
@@ -98,58 +91,52 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
         if (!element) {
           return;
         }
-
         const display = 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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_this$props3, _excluded);
     const ElementType = getElementType(View, this.props);
     return jsx(ElementType, Object.assign({}, passthroughProps(props), {
       className: className,
@@ -157,7 +144,6 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
       ref: this.handleElementRef
     }), children);
   }
-
 }, _class2.displayName = "View", _class2.componentId = 'View', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   display: 'auto',
   overflowX: 'visible',
@@ -172,13 +158,11 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
   // 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(pickProps(props, propsToOmit)).forEach(prop => {
       error(false, `[${Component.name}] prop '${prop}' is not allowed.`);
     });
   }
-
   return omitProps(props, propsToOmit);
 }, _class2)) || _class) || _class);
 export default View;

package/es/View/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 { cursor as cursorPropTypes } from '@instructure/ui-prop-types';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';
@@ -59,9 +60,10 @@ const propTypes = {
   shouldAnimateFocus: PropTypes.bool,
   withVisualDebug: PropTypes.bool,
   dir: PropTypes.oneOf(Object.values(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.
-
 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'];
 export { propTypes, allowedProps };