@instructure/ui-view 8.33.1 → 8.33.2

package/es/View/styles.js

@@ -21,41 +21,39 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { DIRECTION } from '@instructure/ui-i18n';
 import { getShorthandPropValue, mirrorShorthandEdges, mirrorShorthandCorners } from '@instructure/emotion';
 import { pickProps } from '@instructure/ui-react-utils';
 import { logError as error } from '@instructure/console';
-
 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 === DIRECTION.rtl;
   return {
     borderRadius: getShorthandPropValue('View', theme, isRtlDirection ? mirrorShorthandCorners(borderRadius) : borderRadius, 'borderRadius'),
     borderWidth: getShorthandPropValue('View', theme, isRtlDirection ? 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 === DIRECTION.rtl;
   return {
     margin: getShorthandPropValue('View', theme, isRtlDirection ? mirrorShorthandEdges(margin) : margin, 'margin'),
     padding: getShorthandPropValue('View', theme, isRtlDirection ? 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 === DIRECTION.rtl;
   const blockStart = {
     top: insetBlockStart,
@@ -69,80 +67,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 = 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 = 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) {
     error(display === 'inline' || position === 'relative', '[View] the focus outline will only show if the `position` prop is `relative`.');
     error(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 = {
@@ -165,7 +154,6 @@ const getFocusStyles = (props, componentTheme) => {
     success: componentTheme.focusColorSuccess,
     danger: componentTheme.focusColorDanger
   };
-
   if (position === 'relative') {
     const focusRingRadius = getFocusRingRadius(borderRadius);
     const focusRingVariants = {
@@ -219,7 +207,8 @@ const getFocusStyles = (props, componentTheme) => {
       },
       '&:focus': {
         outline: 'none',
-        '&::before': { ...(shouldUseBrowserFocus ? {
+        '&::before': {
+          ...(shouldUseBrowserFocus ? {
             opacity: 1,
             transform: 'scale(1)'
           } : {})
@@ -227,7 +216,6 @@ const getFocusStyles = (props, componentTheme) => {
       }
     };
   }
-
   return {
     '&::before': {
       borderStyle: 'none'
@@ -238,13 +226,15 @@ const getFocusStyles = (props, componentTheme) => {
       outlineWidth: componentTheme.focusOutlineWidth,
       outlineStyle: componentTheme.focusOutlineStyle
     } : {}),
-    '&:focus': { ...(shouldUseBrowserFocus ? {
+    '&:focus': {
+      ...(shouldUseBrowserFocus ? {
         outlineWidth: componentTheme.focusOutlineWidth,
         outlineStyle: componentTheme.focusOutlineStyle
       } : {})
     }
   };
 };
+
 /**
  * ---
  * private: true
@@ -255,35 +245,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,
@@ -466,7 +454,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,
@@ -480,5 +469,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/View/theme.js

@@ -23,8 +23,8 @@
  */
 
 /* Global variables (colors, typography, spacing, etc.) are defined in lib/themes */
-import { makeThemeVars } from '@instructure/emotion';
 
+import { makeThemeVars } from '@instructure/emotion';
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
@@ -32,13 +32,13 @@ import { makeThemeVars } from '@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'],
@@ -78,6 +78,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,
@@ -92,9 +93,9 @@ const generateComponentTheme = theme => {
     ...makeThemeVars('stacking', stacking),
     ...makeThemeVars('border', borders)
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/index.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { ContextView } from './ContextView';
 export { View } from './View';

package/lib/ContextView/__examples__/ContextView.examples.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _span;
-
 var _default = {
   sectionProp: 'background',
   propValues: {

package/lib/ContextView/index.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ContextView = void 0;
-
 var _react = require("react");
-
 var _emotion = require("@instructure/emotion");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _View = require("../View");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _class, _class2;
-
 /**
 ---
 category: components
@@ -33,48 +23,41 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   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 (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, ContextView.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
@@ -106,7 +89,6 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
     }), children));
   }
-
 }, _class2.displayName = "ContextView", _class2.componentId = 'ContextView', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'span',
   elementRef: () => {},

package/lib/ContextView/props.js

@@ -1,18 +1,13 @@
 "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 _emotion = require("@instructure/emotion");
-
 var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,24 +31,22 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   /**
    * The element to render as the component root
    */
   as: _propTypes.default.elementType,
-
   /**
    * provides a reference to the underlying html root element
    */
   elementRef: _propTypes.default.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: _emotion.ThemeablePropTypes.spacing,
-
   /**
    * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -66,38 +59,31 @@ const propTypes = {
   maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
   /**
    * The children to render inside the `<ContextView />`
    */
   children: _propTypes.default.node,
-
   /**
    * Designates the text alignment within the `<ContextView />`
    */
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
-
   /**
    * Controls the shadow depth for the `<ContextView />`
    */
   shadow: _emotion.ThemeablePropTypes.shadow,
-
   /**
    * Controls the z-index depth for the `<ContextView />`
    */
   stacking: _emotion.ThemeablePropTypes.stacking,
-
   /**
    * Designates the background style of the `<ContextView />`
    */
   background: _propTypes.default.oneOf(['default', 'inverse']),
-
   /**
    * Specifies how the arrow for `<ContextView />` will be rendered.
    * Ex. `placement="top"` will render with an arrow pointing down.
    */
   placement: _PositionPropTypes.PositionPropTypes.placement,
-
   /**
    * Activate an outline around the component to make building your
    * layout easier

package/lib/ContextView/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _mirrorPlacement = require("@instructure/ui-position/lib/mirrorPlacement.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,11 +28,11 @@ var _mirrorPlacement = require("@instructure/ui-position/lib/mirrorPlacement.js"
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 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 {
@@ -42,78 +40,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 = (0, _mirrorPlacement.mirrorPlacement)(placement, ' ');
   const isInversed = background === 'inverse';
-
   if (endPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -141,7 +126,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   if (startPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -169,7 +153,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   if (bottomPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -193,7 +176,6 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       }
     };
   }
-
   return {
     main: {
       bottom: '100%',
@@ -216,6 +198,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
     }
   };
 };
+
 /**
  * ---
  * private: true
@@ -226,11 +209,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',
@@ -276,6 +257,5 @@ const generateStyle = (componentTheme, props) => {
     arrowBorderWidth: componentTheme.arrowBorderWidth
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;