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

package/es/Popover/v2/index.js

@@ -0,0 +1,499 @@
+var _dec, _dec2, _dec3, _class, _Popover;
+/*
+ * 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 keycode from 'keycode';
+import { Position, parsePlacement, mirrorHorizontalPlacement } from '@instructure/ui-position';
+import { ContextView, View } from '@instructure/ui-view/latest';
+import { Dialog } from '@instructure/ui-dialog';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
+import { findDOMNode, containsActiveElement, requestAnimationFrame, handleMouseOverOut } from '@instructure/ui-dom-utils';
+import { safeCloneElement, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
+import { createChainedFunction, shallowEqual, px, combineDataCid } from '@instructure/ui-utils';
+import { logError as error } from '@instructure/console';
+import { FocusRegion } from '@instructure/ui-a11y-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+tags: overlay, portal, dialog
+---
+**/
+let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = withStyle(generateStyle), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends Component {
+  constructor(props) {
+    super(props);
+    this._handleMouseOver = void 0;
+    this._handleMouseOut = void 0;
+    this._id = void 0;
+    this._raf = [];
+    this._trigger = null;
+    this._view = null;
+    this._dialog = null;
+    this._contentElement = null;
+    this._focusRegion = void 0;
+    // renderTrigger needs to be a variable because if it's a function it will
+    // recreate the trigger on each render which will trigger MouseOver events
+    // that will make the tooltip reappear and the trigger cannot accept
+    // onClick events (since the state change caused by MouseDown recreates it)
+    this._renderTrigger = void 0;
+    this._renderTriggerProp = void 0;
+    this.mouseOutTimeout = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.show = event => {
+      var _this$props$onShowCon, _this$props;
+      if (typeof this.props.isShowingContent === 'undefined') {
+        this.setState({
+          isShowingContent: true
+        });
+      }
+      (_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
+    };
+    this.hide = (event, documentClick = false) => {
+      const _this$props2 = this.props,
+        onHideContent = _this$props2.onHideContent,
+        isShowingContent = _this$props2.isShowingContent;
+      if (typeof isShowingContent === 'undefined') {
+        // uncontrolled, set state, fire callbacks
+        this.setState(({
+          isShowingContent
+        }) => {
+          if (isShowingContent) {
+            onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
+              documentClick
+            });
+          }
+          return {
+            isShowingContent: false
+          };
+        });
+      } else if (isShowingContent) {
+        // controlled, fire callback
+        onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
+          documentClick
+        });
+      }
+    };
+    this.toggle = event => {
+      if (this.shown) {
+        this.hide(event);
+      } else {
+        this.show(event);
+      }
+    };
+    this.handleDialogDismiss = (event, documentClick) => {
+      if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
+        const trigger = findDOMNode(this._trigger);
+        if (trigger && typeof trigger.focus === 'function') {
+          ;
+          trigger.focus();
+        }
+      }
+      this.hide(event, documentClick);
+    };
+    this.handleDialogBlur = event => {
+      if (event.keyCode === keycode.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
+        return;
+      }
+      this.hide(event);
+    };
+    this.handleTriggerKeyDown = event => {
+      if (!this.props.shouldFocusContentOnTriggerBlur) {
+        return;
+      }
+      if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
+        event.preventDefault();
+        this._raf.push(requestAnimationFrame(() => {
+          this._dialog && this._dialog.focus();
+        }));
+      }
+    };
+    this.handleTriggerKeyUp = event => {
+      if (event.keyCode === keycode.codes.esc && this.shown && this.isTooltip) {
+        // if popover is tooltip, it is managing its own focus region so we need
+        // to prevent esc keyup event from reaching FocusRegionManager
+        event.preventDefault();
+        this.hide(event);
+      }
+    };
+    this.handleTriggerBlur = event => {
+      const on = this.props.on;
+      if (on && on.indexOf('focus') > -1) {
+        this._raf.push(requestAnimationFrame(() => {
+          if (!containsActiveElement(this._view)) {
+            this.hide(event);
+          }
+        }));
+      }
+    };
+    this.handlePositioned = position => {
+      var _this$props$onPositio, _this$props3;
+      const placement = position.placement;
+      this.setState({
+        placement,
+        ...this.computeOffsets(placement)
+      });
+      (_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
+    };
+    this.handlePositionChanged = position => {
+      var _this$props$onPositio2, _this$props4;
+      const placement = position.placement;
+      this.setState({
+        placement,
+        ...this.computeOffsets(placement)
+      });
+      (_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
+    };
+    this._renderTriggerProp = this.props.renderTrigger;
+    this._renderTrigger = callRenderProp(this.props.renderTrigger);
+    this.state = {
+      placement: props.placement,
+      offsetX: props.offsetX,
+      offsetY: props.offsetY,
+      isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : void 0
+    };
+    this._id = this.props.id || props.deterministicId();
+    this._raf = [];
+    this._handleMouseOver = handleMouseOverOut.bind(null, event => {
+      this.show(event);
+      clearTimeout(this.mouseOutTimeout);
+    });
+    this._handleMouseOut = handleMouseOverOut.bind(null, event => {
+      // this is needed bc the trigger mouseOut fires before tooltip mouseOver
+      this.mouseOutTimeout = setTimeout(() => {
+        this.hide(event);
+      }, 1);
+    });
+  }
+  get isTooltip() {
+    return this.props.shouldRenderOffscreen && !this.props.shouldReturnFocus && !this.props.shouldContainFocus && !this.props.shouldFocusContentOnTriggerBlur;
+  }
+  componentDidMount() {
+    if (this.isTooltip) {
+      // if popover is being used as a tooltip with no focusable content
+      // manage its FocusRegion internally rather than registering it with
+      // the FocusRegionManager via Dialog
+      this._focusRegion = new FocusRegion(this._contentElement, {
+        shouldCloseOnEscape: this.props.shouldCloseOnEscape,
+        shouldCloseOnDocumentClick: false,
+        onDismiss: this.hide,
+        isTooltip: true
+      });
+      if (this.shown) {
+        this._focusRegion.activate();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this._raf.forEach(request => request.cancel());
+    this._raf = [];
+    if (this._focusRegion) {
+      this._focusRegion.deactivate();
+      this._focusRegion.blur();
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this._focusRegion && this.isTooltip) {
+      // if focus region exists, popover is acting as a tooltip
+      // so we manually activate and deactivate the region when showing/hiding
+      if (!prevProps.isShowingContent && this.props.isShowingContent || !prevState.isShowingContent && this.state.isShowingContent) {
+        // changed from hiding to showing
+        this._focusRegion.activate();
+        this._focusRegion.focus();
+      }
+      if (prevProps.isShowingContent && !this.props.isShowingContent || prevState.isShowingContent && !this.state.isShowingContent) {
+        // changed from showing to hiding
+        this._focusRegion.deactivate();
+      }
+    }
+
+    // since `offsetX`, `offsetY` and `placement` are saved into the state
+    // in the constructor and used from the state later,
+    // we need to update the state if these props change
+    if (this.props.offsetX !== prevProps.offsetX || this.props.offsetY !== prevProps.offsetY || this.props.placement !== prevProps.placement || this.props.shouldAlignArrow !== prevProps.shouldAlignArrow || this.props.withArrow !== prevProps.withArrow) {
+      this.setState({
+        ...this.computeOffsets(this.placement)
+      });
+    }
+  }
+
+  /**
+   * Offsets the popover by the arrow size
+   */
+  computeOffsets(placement) {
+    let _this$props5 = this.props,
+      offsetX = _this$props5.offsetX,
+      offsetY = _this$props5.offsetY;
+    if (this.props.shouldAlignArrow && this._view) {
+      const secondaryPlacement = parsePlacement(placement)[1];
+
+      // arrowSize and arrowBorderWidth are component theme variables
+      // declared in ContextView's styles.js
+      const _ref = this._view.props.styles,
+        _ref$arrowSize = _ref.arrowSize,
+        arrowSize = _ref$arrowSize === void 0 ? 0 : _ref$arrowSize,
+        _ref$arrowBorderWidth = _ref.arrowBorderWidth,
+        arrowBorderWidth = _ref$arrowBorderWidth === void 0 ? 0 : _ref$arrowBorderWidth;
+      const offsetAmount = (px(arrowSize) + px(arrowBorderWidth)) * 2;
+      if (secondaryPlacement === 'start') {
+        offsetX = offsetAmount;
+      } else if (secondaryPlacement === 'end') {
+        offsetX = -offsetAmount;
+      } else if (secondaryPlacement === 'top') {
+        offsetY = offsetAmount;
+      } else if (secondaryPlacement === 'bottom') {
+        offsetY = -offsetAmount;
+      }
+    }
+    return {
+      offsetX,
+      offsetY
+    };
+  }
+  get placement() {
+    let placement = this.props.placement;
+    const dir = this.props.dir;
+    const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
+    if (isRtl) {
+      placement = mirrorHorizontalPlacement(placement, ' ');
+    }
+    return !this.shown && this.props.shouldRenderOffscreen ? 'offscreen' : placement;
+  }
+  get positionProps() {
+    return {
+      offsetX: this.state.offsetX,
+      offsetY: this.state.offsetY,
+      shouldTrackPosition: this.props.shouldTrackPosition && this.shown,
+      insertAt: this.props.insertAt,
+      placement: this.placement,
+      constrain: this.props.constrain,
+      onPositioned: this.handlePositioned,
+      onPositionChanged: this.handlePositionChanged,
+      target: this.props.positionTarget,
+      containerDisplay: this.props.positionContainerDisplay,
+      mountNode: this.props.mountNode,
+      id: this._id
+    };
+  }
+  get shown() {
+    return typeof this.props.isShowingContent === 'undefined' ? this.state.isShowingContent : this.props.isShowingContent;
+  }
+  get defaultFocusElement() {
+    return this.props.defaultFocusElement;
+  }
+  renderTrigger() {
+    if (this._renderTriggerProp != this.props.renderTrigger) {
+      this._renderTriggerProp = this.props.renderTrigger;
+      this._renderTrigger = callRenderProp(this.props.renderTrigger);
+    }
+    let trigger = this._renderTrigger;
+    if (trigger) {
+      const on = this.props.on;
+      let onClick = void 0;
+      let onFocus = void 0;
+      let onMouseOut = void 0;
+      let onMouseOver = void 0;
+      let expanded;
+      if (on && on.indexOf('click') > -1) {
+        onClick = event => {
+          this.toggle(event);
+        };
+      }
+      if (on && on.indexOf('hover') > -1) {
+        error(!(on === 'hover'), '[Popover] Specifying only the `"hover"` trigger limits the visibility' + ' of the Popover to just mouse users. Consider also including the `"focus"` trigger ' + 'so that touch and keyboard only users can see the Popover content as well.');
+        onMouseOver = this._handleMouseOver;
+        onMouseOut = this._handleMouseOut;
+      }
+      if (on && on.indexOf('focus') > -1) {
+        onFocus = event => {
+          this.show(event);
+        };
+      }
+      if (this.props.shouldSetAriaExpanded) {
+        // only set aria-expanded if popover can contain focus
+        expanded = this.shown ? 'true' : 'false';
+        if ('aria-expanded' in this.props) {
+          // @ts-expect-error It is an escape hatch, in case someone
+          // wants to remove/override aria-expanded even when shouldSetAriaExpanded is set
+          expanded = this.props['aria-expanded'];
+        }
+      } else {
+        expanded = void 0;
+      }
+      trigger = safeCloneElement(trigger, {
+        ref: el => {
+          this._trigger = el;
+        },
+        'aria-expanded': expanded,
+        'data-popover-trigger': true,
+        onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
+        onKeyUp: createChainedFunction(this.handleTriggerKeyUp, this.props.onKeyUp),
+        onClick: createChainedFunction(onClick, this.props.onClick),
+        onBlur: createChainedFunction(this.handleTriggerBlur, this.props.onBlur),
+        onFocus: createChainedFunction(onFocus, this.props.onFocus),
+        onMouseOut: createChainedFunction(onMouseOut, this.props.onMouseOut),
+        onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
+      });
+    }
+    return trigger;
+  }
+  renderContent() {
+    let content = callRenderProp(this.props.children);
+    if (this.shown && !this.isTooltip) {
+      // if popover is NOT being used as a tooltip, create a Dialog
+      // to manage the content FocusRegion, when showing
+      content = _jsx(Dialog, {
+        open: this.shown,
+        label: this.props.screenReaderLabel,
+        ref: el => {
+          this._dialog = el;
+        },
+        display: "block",
+        onBlur: this.handleDialogBlur,
+        onDismiss: this.handleDialogDismiss,
+        liveRegion: this.props.liveRegion,
+        defaultFocusElement: this.props.defaultFocusElement,
+        shouldContainFocus: this.props.shouldContainFocus,
+        shouldReturnFocus: this.props.shouldReturnFocus,
+        shouldFocusOnOpen: !this.props.shouldFocusContentOnTriggerBlur,
+        shouldCloseOnDocumentClick: this.props.shouldCloseOnDocumentClick,
+        shouldCloseOnEscape: this.props.shouldCloseOnEscape,
+        children: content
+      });
+    }
+    if (this.shown || this.props.shouldRenderOffscreen) {
+      const color = this.props.color;
+      let viewProps = {
+        // TODO: try to type `ref` better, LegacyRef<T> was not compatible
+        ref: c => this._view = c,
+        elementRef: el => {
+          var _this$props$contentRe, _this$props6;
+          this._contentElement = el;
+          (_this$props$contentRe = (_this$props6 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props6, el);
+        },
+        background: color,
+        stacking: this.props.stacking,
+        shadow: this.props.shadow,
+        display: 'block'
+      };
+      if (this.isTooltip) {
+        viewProps = {
+          ...viewProps,
+          // Because of a11y reasons popovers should not be hidden when hovered over
+          onMouseOver: this._handleMouseOver,
+          onMouseOut: this._handleMouseOut
+        };
+      }
+      const placement = this.state.placement;
+      const styles = this.props.styles;
+      if (this.props.withArrow) {
+        viewProps = {
+          ...viewProps,
+          // TODO: remove background override after contextview is updated
+          background: color === 'primary' ? 'default' : 'inverse',
+          placement: this.props.dir === textDirectionContextConsumer.DIRECTION.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
+        };
+        return _jsx(ContextView, {
+          ...viewProps,
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          children: content
+        });
+      } else {
+        viewProps = {
+          ...viewProps,
+          borderWidth: this.props.borderWidth || 'small',
+          borderRadius: 'medium',
+          ...(color === 'primary-inverse' && {
+            borderColor: 'transparent'
+          })
+        };
+        return _jsx(View, {
+          ...viewProps,
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          borderRadius: styles === null || styles === void 0 ? void 0 : styles.borderRadius,
+          children: content
+        });
+      }
+    } else {
+      return null;
+    }
+  }
+  render() {
+    const positionProps = this.positionProps;
+    if (this.props.positionTarget) {
+      return _jsxs("span", {
+        ref: this.handleRef,
+        children: [this.renderTrigger(), _jsx(Position, {
+          ...positionProps,
+          "data-cid": combineDataCid('Popover', this.props),
+          children: this.renderContent()
+        })]
+      });
+    } else {
+      return _jsx(Position, {
+        "data-cid": combineDataCid('Popover', this.props),
+        ...positionProps,
+        renderTarget: this.renderTrigger(),
+        elementRef: this.handleRef,
+        children: this.renderContent()
+      });
+    }
+  }
+}, _Popover.displayName = "Popover", _Popover.componentId = 'Popover', _Popover.allowedProps = allowedProps, _Popover.defaultProps = {
+  defaultIsShowingContent: false,
+  placement: 'bottom center',
+  stacking: 'topmost',
+  shadow: 'above',
+  offsetX: 0,
+  offsetY: 0,
+  color: 'primary',
+  on: ['hover', 'focus'],
+  withArrow: true,
+  constrain: 'window',
+  insertAt: 'bottom',
+  shouldAlignArrow: false,
+  shouldTrackPosition: true,
+  shouldRenderOffscreen: false,
+  shouldContainFocus: false,
+  shouldReturnFocus: true,
+  shouldCloseOnDocumentClick: true,
+  shouldFocusContentOnTriggerBlur: false,
+  shouldCloseOnEscape: true,
+  shouldSetAriaExpanded: true
+}, _Popover)) || _class) || _class) || _class);
+export default Popover;
+export { Popover };

package/es/Popover/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 = ['isShowingContent', 'defaultIsShowingContent', 'on', 'withArrow', 'color', 'placement', 'shadow', 'stacking', 'contentRef', 'defaultFocusElement', 'screenReaderLabel', 'offsetX', 'offsetY', 'constrain', 'positionTarget', 'positionContainerDisplay', 'mountNode', 'insertAt', 'liveRegion', 'id', 'shouldAlignArrow', 'shouldTrackPosition', 'shouldRenderOffscreen', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'shouldFocusContentOnTriggerBlur', 'onShowContent', 'onHideContent', 'onPositioned', 'onPositionChanged', 'onClick', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'onMouseOut', 'renderTrigger', 'children', 'elementRef', 'borderWidth', 'shouldSetAriaExpanded'];
+export { allowedProps };

package/es/Popover/v2/styles.js

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    borderColor: componentTheme.borderColor,
+    borderRadius: componentTheme.borderRadius
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Popover } from "./Popover/index.js";
+export { Popover } from "../Popover/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Popover } from './Popover'
-export type { PopoverOwnProps, PopoverProps } from './Popover/props'
+export { Popover } from "../Popover/v2/index.js";

package/lib/Popover/{index.js → v1/index.js}

@@ -10,8 +10,7 @@ var _keycode = _interopRequireDefault(require("keycode"));
 var _Position = require("@instructure/ui-position/lib/Position");
 var _parsePlacement = require("@instructure/ui-position/lib/parsePlacement.js");
 var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
-var _ContextView = require("@instructure/ui-view/lib/ContextView");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
@@ -30,7 +29,7 @@ var _FocusRegion = require("@instructure/ui-a11y-utils/lib/FocusRegion.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
+var _props = require("../v1/props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _dec3, _class, _Popover;
 /*
@@ -62,7 +61,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends _react.Component {
+let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends _react.Component {
   constructor(props) {
     super(props);
     this._handleMouseOver = void 0;
@@ -445,7 +444,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
           background: color === 'primary' ? 'default' : 'inverse',
           placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
         };
-        return (0, _jsxRuntime.jsx)(_ContextView.ContextView, {
+        return (0, _jsxRuntime.jsx)(_v11_.ContextView, {
           ...viewProps,
           borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
           children: content
@@ -459,7 +458,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
             borderColor: 'transparent'
           })
         };
-        return (0, _jsxRuntime.jsx)(_View.View, {
+        return (0, _jsxRuntime.jsx)(_v11_.View, {
           ...viewProps,
           borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
           children: content