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

package/lib/ContextView/v1/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
 var _mirrorPlacement = require("@instructure/ui-position/lib/mirrorPlacement.js");
 /*
  * The MIT License (MIT)
@@ -36,24 +37,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 {
@@ -74,24 +75,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 {};
@@ -99,31 +100,33 @@ const getArrowCorrections = (placement, theme) => {
 const getArrowPlacementVariant = (placement, background, theme, props) => {
   const transformedPlacement = (0, _mirrorPlacement.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
       }
     };
   }
@@ -133,24 +136,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
       }
     };
   }
@@ -158,7 +161,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',
@@ -166,21 +169,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',
@@ -188,14 +191,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
     }
   };
 };
@@ -211,9 +214,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',
@@ -225,15 +230,15 @@ 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 {
     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: {
@@ -244,12 +249,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/lib/ContextView/v1/theme.js

@@ -34,13 +34,12 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _theme$borders, _theme$colors, _theme$colors$contras, _theme$colors2, _theme$colors2$contra, _theme$colors3, _theme$colors3$contra;
   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,
-    arrowBackgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : (_theme$colors$contras = _theme$colors.contrasts) === null || _theme$colors$contras === void 0 ? void 0 : _theme$colors$contras.white1010,
-    arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : (_theme$colors2$contra = _theme$colors2.contrasts) === null || _theme$colors2$contra === void 0 ? void 0 : _theme$colors2$contra.grey1424,
-    arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : (_theme$colors3$contra = _theme$colors3.contrasts) === null || _theme$colors3$contra === void 0 ? void 0 : _theme$colors3$contra.grey125125,
+    arrowBorderWidth: theme?.borders?.widthSmall,
+    arrowBackgroundColor: theme?.colors?.contrasts?.white1010,
+    arrowBorderColor: theme?.colors?.contrasts?.grey1424,
+    arrowBackgroundColorInverse: theme?.colors?.contrasts?.grey125125,
     arrowBorderColorInverse: 'transparent'
   };
   return {

package/lib/ContextView/v2/index.js

@@ -12,7 +12,7 @@ var _v = require("../../View/v2");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ContextView;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -41,49 +41,62 @@ var _dec, _class, _ContextView;
 category: components
 ---
 **/
-let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ContextView = class ContextView extends _react.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);
-      }
-    };
-  }
+let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class ContextView extends _react.Component {
+  static displayName = "ContextView";
+  static componentId = 'ContextView';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    as: 'span',
+    elementRef: () => {},
+    debug: false,
+    width: 'auto',
+    height: 'auto',
+    children: null,
+    textAlign: 'start',
+    background: 'default',
+    shadow: 'above',
+    placement: 'center end'
+  };
   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;
-    (_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?.();
   }
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   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;
+    const {
+      as,
+      background,
+      children,
+      debug,
+      height,
+      width,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+      margin,
+      padding,
+      shadow,
+      stacking,
+      style,
+      textAlign,
+      styles,
+      borderColor
+    } = this.props;
     return (0, _jsxRuntime.jsx)(_v.View, {
       ...(0, _omitProps.omitProps)(this.props, ContextView.allowedProps),
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView,
+      css: styles?.contextView,
       style: style,
       borderWidth: "none",
       display: "inline-block",
@@ -93,9 +106,9 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       margin: margin,
       stacking: stacking,
       children: (0, _jsxRuntime.jsxs)(_v.View, {
-        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
+        css: styles?.contextView__content,
         display: "block",
-        borderRadius: styles === null || styles === void 0 ? void 0 : styles.borderRadius,
+        borderRadius: styles?.borderRadius,
         borderWidth: "small",
         borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
         background: background === 'default' ? 'primary' : 'primary-inverse',
@@ -110,21 +123,10 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
         shadow: shadow,
         textAlign: textAlign,
         children: [(0, _jsxRuntime.jsx)("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
+          css: styles?.contextView__arrow
         }), children]
       })
     });
   }
-}, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = _props.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);
+}) || _class);
 var _default = exports.default = ContextView;

package/lib/ContextView/v2/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
 var _mirrorPlacement = require("@instructure/ui-position/lib/mirrorPlacement.js");
 /*
  * The MIT License (MIT)
@@ -36,24 +37,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 {
@@ -74,24 +75,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 {};
@@ -99,31 +100,33 @@ const getArrowCorrections = (placement, theme) => {
 const getArrowPlacementVariant = (placement, background, theme, props) => {
   const transformedPlacement = (0, _mirrorPlacement.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
       }
     };
   }
@@ -133,24 +136,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
       }
     };
   }
@@ -158,7 +161,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',
@@ -166,21 +169,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',
@@ -188,14 +191,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
     }
   };
 };
@@ -210,9 +213,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',
@@ -224,16 +229,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: {
@@ -244,12 +249,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