@khanacademy/wonder-blocks-popover 6.0.7 → 6.1.0

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import _extends from '@babel/runtime/helpers/extends';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { View, Id, addStyle } from '@khanacademy/wonder-blocks-core';
@@ -11,753 +11,26 @@ import { actionStyles } from '@khanacademy/wonder-blocks-styles';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-const defaultContext = {
-  close: undefined,
-  placement: "top"
-};
-const PopoverContext = React.createContext(defaultContext);
-PopoverContext.displayName = "PopoverContext";
+const defaultContext={close:undefined,placement:"top"};const PopoverContext=React.createContext(defaultContext);PopoverContext.displayName="PopoverContext";
 
-class PopoverAnchor extends React.Component {
-  componentDidMount() {
-    const anchorNode = ReactDOM.findDOMNode(this);
-    if (anchorNode) {
-      this.props.anchorRef(anchorNode);
-    }
-  }
-  render() {
-    const {
-      children,
-      id,
-      onClick,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded
-    } = this.props;
-    const sharedProps = {
-      id: id,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded
-    };
-    if (typeof children === "function") {
-      const renderedChildren = children({
-        open: onClick
-      });
-      return React.cloneElement(renderedChildren, sharedProps);
-    } else {
-      return React.cloneElement(children, _extends({}, children.props, sharedProps, {
-        onClick: children.props.onClick ? e => {
-          e.stopPropagation();
-          children.props.onClick();
-          onClick();
-        } : onClick
-      }));
-    }
-  }
-}
+class PopoverAnchor extends React.Component{componentDidMount(){const anchorNode=ReactDOM.findDOMNode(this);if(anchorNode){this.props.anchorRef(anchorNode);}}render(){const{children,id,onClick,"aria-controls":ariaControls,"aria-expanded":ariaExpanded}=this.props;const sharedProps={id:id,"aria-controls":ariaControls,"aria-expanded":ariaExpanded};if(typeof children==="function"){const renderedChildren=children({open:onClick});return React.cloneElement(renderedChildren,sharedProps)}else {return React.cloneElement(children,{...children.props,...sharedProps,onClick:children.props.onClick?e=>{e.stopPropagation();children.props.onClick();onClick();}:onClick})}}}
 
-class PopoverDialog extends React.Component {
-  componentDidUpdate(prevProps) {
-    if (prevProps.placement !== this.props.placement) {
-      this.props.onUpdate(this.props.placement);
-    }
-  }
-  render() {
-    const {
-      placement,
-      children,
-      id,
-      isReferenceHidden,
-      updateBubbleRef,
-      updateTailRef,
-      tailOffset,
-      style,
-      showTail,
-      "aria-describedby": ariaDescribedby,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel
-    } = this.props;
-    const contentProps = children.props;
-    const color = contentProps.color;
-    return React.createElement(React.Fragment, null, React.createElement(View, {
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedby,
-      "aria-labelledby": ariaLabelledBy,
-      id: id,
-      role: "dialog",
-      ref: updateBubbleRef,
-      "data-placement": placement,
-      style: [isReferenceHidden && styles$2.hide, styles$2[`content-${placement}`], style]
-    }, children, React.createElement(TooltipTail, {
-      show: showTail,
-      color: color,
-      updateRef: updateTailRef,
-      placement: placement,
-      offset: tailOffset
-    })));
-  }
-}
-const styles$2 = StyleSheet.create({
-  hide: {
-    pointerEvents: "none",
-    opacity: 0,
-    backgroundColor: "transparent",
-    color: "transparent"
-  },
-  "content-top": {
-    flexDirection: "column"
-  },
-  "content-right": {
-    flexDirection: "row-reverse"
-  },
-  "content-bottom": {
-    flexDirection: "column-reverse"
-  },
-  "content-left": {
-    flexDirection: "row"
-  }
-});
+class PopoverDialog extends React.Component{componentDidUpdate(prevProps){if(prevProps.placement!==this.props.placement){this.props.onUpdate(this.props.placement);}}render(){const{placement,children,id,isReferenceHidden,updateBubbleRef,updateTailRef,tailOffset,style,showTail,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,"aria-label":ariaLabel}=this.props;const contentProps=children.props;const color=contentProps.color;return jsx(React.Fragment,{children:jsxs(View,{"aria-label":ariaLabel,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,id:id,role:"dialog",ref:updateBubbleRef,"data-placement":placement,style:[isReferenceHidden&&styles$2.hide,styles$2[`content-${placement}`],style],children:[children,jsx(TooltipTail,{show:showTail,color:color,updateRef:updateTailRef,placement:placement,offset:tailOffset})]})})}}const styles$2=StyleSheet.create({hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"}});
 
-const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-function findFocusableNodes(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
-}
-function isFocusable(element) {
-  return element.matches(FOCUSABLE_ELEMENTS);
-}
+const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}function isFocusable(element){return element.matches(FOCUSABLE_ELEMENTS)}
 
-class PopoverEventListener extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      isFirstClick: true
-    };
-    this._handleKeyup = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose(true);
-      }
-    };
-    this._handleClick = e => {
-      var _this$props$contentRe;
-      if (this.state.isFirstClick) {
-        this.setState({
-          isFirstClick: false
-        });
-        return;
-      }
-      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
-      if (node && !node.contains(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-        const shouldReturnFocus = !isFocusable(e.target);
-        this.props.onClose(shouldReturnFocus);
-      }
-    };
-  }
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-    window.addEventListener("click", this._handleClick);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-    window.removeEventListener("click", this._handleClick);
-  }
-  render() {
-    return null;
-  }
-}
+class PopoverEventListener extends React.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);window.addEventListener("click",this._handleClick);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);window.removeEventListener("click",this._handleClick);}render(){return null}constructor(...args){super(...args),this.state={isFirstClick:true},this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose(true);}},this._handleClick=e=>{if(this.state.isFirstClick){this.setState({isFirstClick:false});return}const node=ReactDOM.findDOMNode(this.props.contentRef?.current);if(node&&!node.contains(e.target)){e.preventDefault();e.stopPropagation();const shouldReturnFocus=!isFocusable(e.target);this.props.onClose(shouldReturnFocus);}};}}
 
-class InitialFocus extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.setInitialFocusableElement = node => {
-      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
-      if (firstFocusableElement === node) {
-        node.tabIndex = -1;
-      }
-      setTimeout(() => {
-        firstFocusableElement.focus();
-      }, 0);
-    };
-  }
-  componentDidMount() {
-    const node = ReactDOM.findDOMNode(this);
-    if (!node) {
-      return;
-    }
-    this.setInitialFocusableElement(node);
-  }
-  maybeGetInitialFocusElement(node) {
-    const {
-      initialFocusId
-    } = this.props;
-    if (!initialFocusId) {
-      return null;
-    }
-    return node.querySelector(`#${initialFocusId}`);
-  }
-  maybeGetFirstFocusableElement(node) {
-    const focusableElements = findFocusableNodes(node);
-    if (!focusableElements.length) {
-      return null;
-    }
-    return focusableElements[0];
-  }
-  render() {
-    return this.props.children;
-  }
-}
+class InitialFocus extends React.Component{componentDidMount(){const node=ReactDOM.findDOMNode(this);if(!node){return}this.setInitialFocusableElement(node);}maybeGetInitialFocusElement(node){const{initialFocusId}=this.props;if(!initialFocusId){return null}return node.querySelector(`#${initialFocusId}`)}maybeGetFirstFocusableElement(node){const focusableElements=findFocusableNodes(node);if(!focusableElements.length){return null}return focusableElements[0]}render(){return this.props.children}constructor(...args){super(...args),this.setInitialFocusableElement=node=>{const firstFocusableElement=this.maybeGetInitialFocusElement(node)||this.maybeGetFirstFocusableElement(node)||node;if(firstFocusableElement===node){node.tabIndex=-1;}setTimeout(()=>{firstFocusableElement.focus();},this.props.delay||0);};}}
 
-class FocusManager extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.nextElementAfterPopover = void 0;
-    this.rootNode = void 0;
-    this.elementsThatCanBeFocusableInsidePopover = [];
-    this.firstFocusableElementInPopover = null;
-    this.lastFocusableElementInPopover = null;
-    this.addEventListeners = () => {
-      const {
-        anchorElement
-      } = this.props;
-      if (anchorElement) {
-        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement);
-      }
-      if (this.rootNode) {
-        this.elementsThatCanBeFocusableInsidePopover = findFocusableNodes(this.rootNode);
-        this.firstFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[0];
-        this.lastFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[this.elementsThatCanBeFocusableInsidePopover.length - 1];
-      }
-      this.nextElementAfterPopover = this.getNextFocusableElement();
-      if (!this.nextElementAfterPopover) {
-        window.addEventListener("blur", () => {
-          this.changeFocusabilityInsidePopover(true);
-        });
-      }
-      if (this.firstFocusableElementInPopover) {
-        this.firstFocusableElementInPopover.addEventListener("keydown", this.handleKeydownFirstFocusableElement);
-      }
-      if (this.lastFocusableElementInPopover) {
-        this.lastFocusableElementInPopover.addEventListener("keydown", this.handleKeydownLastFocusableElement);
-      }
-      if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement);
-      }
-    };
-    this.handleKeydownFirstFocusableElement = e => {
-      if (e.key === "Tab" && e.shiftKey) {
-        var _this$props$anchorEle;
-        e.preventDefault();
-        (_this$props$anchorEle = this.props.anchorElement) == null || _this$props$anchorEle.focus();
-      }
-    };
-    this.handleKeydownLastFocusableElement = e => {
-      if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
-        var _this$nextElementAfte;
-        e.preventDefault();
-        (_this$nextElementAfte = this.nextElementAfterPopover) == null || _this$nextElementAfte.focus();
-      }
-    };
-    this.getNextFocusableElement = () => {
-      const {
-        anchorElement
-      } = this.props;
-      if (!anchorElement) {
-        return;
-      }
-      const focusableElements = findFocusableNodes(document);
-      const focusableElementsOutside = focusableElements.filter(element => {
-        const index = this.elementsThatCanBeFocusableInsidePopover.indexOf(element);
-        return index < 0;
-      });
-      const anchorIndex = focusableElementsOutside.indexOf(anchorElement);
-      if (anchorIndex >= 0 && anchorIndex !== focusableElementsOutside.length - 1) {
-        const nextElementIndex = anchorIndex < focusableElementsOutside.length - 1 ? anchorIndex + 1 : 0;
-        return focusableElementsOutside[nextElementIndex];
-      }
-      return;
-    };
-    this.getComponentRootNode = node => {
-      if (!node) {
-        return;
-      }
-      const rootNode = ReactDOM.findDOMNode(node);
-      if (!rootNode) {
-        throw new Error("Assertion error: root node should exist after mount");
-      }
-      this.rootNode = rootNode;
-    };
-    this.handleFocusPreviousFocusableElement = () => {
-      if (this.props.anchorElement) {
-        this.props.anchorElement.focus();
-      }
-    };
-    this.changeFocusabilityInsidePopover = (enabled = true) => {
-      const tabIndex = enabled ? "0" : "-1";
-      this.elementsThatCanBeFocusableInsidePopover.forEach(element => {
-        element.setAttribute("tabIndex", tabIndex);
-      });
-    };
-    this.handleFocusNextFocusableElement = () => {
-      if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.focus();
-      }
-    };
-    this.handleKeydownPreviousFocusableElement = e => {
-      if (e.key === "Tab" && !e.shiftKey) {
-        var _this$firstFocusableE;
-        e.preventDefault();
-        (_this$firstFocusableE = this.firstFocusableElementInPopover) == null || _this$firstFocusableE.focus();
-      }
-    };
-    this.handleKeydownNextFocusableElement = e => {
-      if (e.key === "Tab" && e.shiftKey) {
-        var _this$lastFocusableEl;
-        e.preventDefault();
-        (_this$lastFocusableEl = this.lastFocusableElementInPopover) == null || _this$lastFocusableEl.focus();
-      }
-    };
-  }
-  componentDidMount() {
-    this.addEventListeners();
-  }
-  componentDidUpdate() {
-    this.removeEventListeners();
-    this.addEventListeners();
-  }
-  componentWillUnmount() {
-    this.changeFocusabilityInsidePopover(true);
-    this.removeEventListeners();
-  }
-  removeEventListeners() {
-    const {
-      anchorElement
-    } = this.props;
-    if (anchorElement) {
-      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement);
-    }
-    if (!this.nextElementAfterPopover) {
-      window.removeEventListener("blur", () => {
-        this.changeFocusabilityInsidePopover(true);
-      });
-    }
-    if (this.firstFocusableElementInPopover) {
-      this.firstFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownFirstFocusableElement);
-    }
-    if (this.lastFocusableElementInPopover) {
-      this.lastFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownLastFocusableElement);
-    }
-    if (this.nextElementAfterPopover) {
-      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement);
-    }
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return (React.createElement("div", {
-        ref: this.getComponentRootNode,
-        onClick: () => {
-          this.changeFocusabilityInsidePopover(true);
-        },
-        onFocus: () => {
-          this.changeFocusabilityInsidePopover(true);
-        },
-        onBlur: () => {
-          this.changeFocusabilityInsidePopover(false);
-        }
-      }, React.createElement(InitialFocus, {
-        initialFocusId: this.props.initialFocusId
-      }, children))
-    );
-  }
-}
+class FocusManager extends React.Component{componentDidMount(){this.addEventListeners();}componentDidUpdate(){this.removeEventListeners();this.addEventListeners();}componentWillUnmount(){this.changeFocusabilityInsidePopover(true);this.removeEventListeners();}removeEventListeners(){const{anchorElement}=this.props;if(anchorElement){anchorElement.removeEventListener("keydown",this.handleKeydownPreviousFocusableElement);}if(!this.nextElementAfterPopover){window.removeEventListener("blur",()=>{this.changeFocusabilityInsidePopover(true);});}if(this.firstFocusableElementInPopover){this.firstFocusableElementInPopover.removeEventListener("keydown",this.handleKeydownFirstFocusableElement);}if(this.lastFocusableElementInPopover){this.lastFocusableElementInPopover.removeEventListener("keydown",this.handleKeydownLastFocusableElement);}if(this.nextElementAfterPopover){this.nextElementAfterPopover.removeEventListener("keydown",this.handleKeydownNextFocusableElement);}}render(){const{children}=this.props;return jsx("div",{ref:this.getComponentRootNode,onClick:()=>{this.changeFocusabilityInsidePopover(true);},onFocus:()=>{this.changeFocusabilityInsidePopover(true);},onBlur:()=>{this.changeFocusabilityInsidePopover(false);},children:jsx(InitialFocus,{initialFocusId:this.props.initialFocusId,delay:this.props.initialFocusDelay,children:children})})}constructor(...args){super(...args),this.elementsThatCanBeFocusableInsidePopover=[],this.firstFocusableElementInPopover=null,this.lastFocusableElementInPopover=null,this.addEventListeners=()=>{const{anchorElement}=this.props;if(anchorElement){anchorElement.addEventListener("keydown",this.handleKeydownPreviousFocusableElement);}if(this.rootNode){this.elementsThatCanBeFocusableInsidePopover=findFocusableNodes(this.rootNode);this.firstFocusableElementInPopover=this.elementsThatCanBeFocusableInsidePopover[0];this.lastFocusableElementInPopover=this.elementsThatCanBeFocusableInsidePopover[this.elementsThatCanBeFocusableInsidePopover.length-1];}this.nextElementAfterPopover=this.getNextFocusableElement();if(!this.nextElementAfterPopover){window.addEventListener("blur",()=>{this.changeFocusabilityInsidePopover(true);});}if(this.firstFocusableElementInPopover){this.firstFocusableElementInPopover.addEventListener("keydown",this.handleKeydownFirstFocusableElement);}if(this.lastFocusableElementInPopover){this.lastFocusableElementInPopover.addEventListener("keydown",this.handleKeydownLastFocusableElement);}if(this.nextElementAfterPopover){this.nextElementAfterPopover.addEventListener("keydown",this.handleKeydownNextFocusableElement);}},this.handleKeydownFirstFocusableElement=e=>{if(e.key==="Tab"&&e.shiftKey){e.preventDefault();this.props.anchorElement?.focus();}},this.handleKeydownLastFocusableElement=e=>{if(this.nextElementAfterPopover&&e.key==="Tab"&&!e.shiftKey){e.preventDefault();this.nextElementAfterPopover?.focus();}},this.getNextFocusableElement=()=>{const{anchorElement}=this.props;if(!anchorElement){return}const focusableElements=findFocusableNodes(document);const focusableElementsOutside=focusableElements.filter(element=>{const index=this.elementsThatCanBeFocusableInsidePopover.indexOf(element);return index<0});const anchorIndex=focusableElementsOutside.indexOf(anchorElement);if(anchorIndex>=0&&anchorIndex!==focusableElementsOutside.length-1){const nextElementIndex=anchorIndex<focusableElementsOutside.length-1?anchorIndex+1:0;return focusableElementsOutside[nextElementIndex]}return},this.getComponentRootNode=node=>{if(!node){return}const rootNode=ReactDOM.findDOMNode(node);if(!rootNode){throw new Error("Assertion error: root node should exist after mount")}this.rootNode=rootNode;},this.handleFocusPreviousFocusableElement=()=>{if(this.props.anchorElement){this.props.anchorElement.focus();}},this.changeFocusabilityInsidePopover=(enabled=true)=>{const tabIndex=enabled?"0":"-1";this.elementsThatCanBeFocusableInsidePopover.forEach(element=>{element.setAttribute("tabIndex",tabIndex);});},this.handleFocusNextFocusableElement=()=>{if(this.nextElementAfterPopover){this.nextElementAfterPopover.focus();}},this.handleKeydownPreviousFocusableElement=e=>{if(e.key==="Tab"&&!e.shiftKey){e.preventDefault();this.firstFocusableElementInPopover?.focus();}},this.handleKeydownNextFocusableElement=e=>{if(e.key==="Tab"&&e.shiftKey){e.preventDefault();this.lastFocusableElementInPopover?.focus();}};}}
 
-class Popover extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      opened: !!this.props.opened,
-      placement: this.props.placement
-    };
-    this.contentRef = React.createRef();
-    this.maybeReturnFocus = () => {
-      const {
-        anchorElement
-      } = this.state;
-      const {
-        closedFocusId
-      } = this.props;
-      if (closedFocusId) {
-        const focusElement = ReactDOM.findDOMNode(document.getElementById(closedFocusId));
-        focusElement == null || focusElement.focus();
-        return;
-      }
-      if (anchorElement) {
-        anchorElement.focus();
-      }
-    };
-    this.handleClose = (shouldReturnFocus = true) => {
-      this.setState({
-        opened: false
-      }, () => {
-        var _this$props$onClose, _this$props;
-        (_this$props$onClose = (_this$props = this.props).onClose) == null || _this$props$onClose.call(_this$props);
-        if (shouldReturnFocus) {
-          this.maybeReturnFocus();
-        }
-      });
-    };
-    this.handleOpen = () => {
-      if (this.props.dismissEnabled && this.state.opened) {
-        this.handleClose(true);
-      } else {
-        this.setState({
-          opened: true
-        });
-      }
-    };
-    this.updateRef = actualRef => {
-      if (actualRef && this.state.anchorElement !== actualRef) {
-        this.setState({
-          anchorElement: actualRef
-        });
-      }
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
-  }
-  renderContent(uniqueId) {
-    const {
-      content
-    } = this.props;
-    const popoverContents = typeof content === "function" ? content({
-      close: this.handleClose
-    }) : content;
-    return React.cloneElement(popoverContents, {
-      ref: this.contentRef,
-      uniqueId
-    });
-  }
-  renderPopper(uniqueId) {
-    const {
-      initialFocusId,
-      placement,
-      showTail,
-      portal,
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedBy,
-      rootBoundary,
-      viewportPadding
-    } = this.props;
-    const {
-      anchorElement
-    } = this.state;
-    const describedBy = ariaDescribedBy || `${uniqueId}-content`;
-    const ariaLabelledBy = ariaLabel ? undefined : `${uniqueId}-title`;
-    const popperContent = React.createElement(TooltipPopper, {
-      anchorElement: anchorElement,
-      placement: placement,
-      rootBoundary: rootBoundary,
-      viewportPadding: viewportPadding
-    }, props => React.createElement(PopoverDialog, _extends({}, props, {
-      "aria-label": ariaLabel,
-      "aria-describedby": describedBy,
-      "aria-labelledby": ariaLabelledBy,
-      id: uniqueId,
-      onUpdate: placement => this.setState({
-        placement
-      }),
-      showTail: showTail
-    }), this.renderContent(uniqueId)));
-    if (portal) {
-      return React.createElement(FocusManager, {
-        anchorElement: anchorElement,
-        initialFocusId: initialFocusId
-      }, popperContent);
-    } else {
-      return (React.createElement(InitialFocus, {
-          initialFocusId: initialFocusId
-        }, popperContent)
-      );
-    }
-  }
-  getHost() {
-    return maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
-  }
-  renderPortal(uniqueId, opened) {
-    if (!opened) {
-      return null;
-    }
-    const {
-      portal
-    } = this.props;
-    const popperHost = this.getHost();
-    if (portal && popperHost) {
-      return ReactDOM.createPortal(this.renderPopper(uniqueId), popperHost);
-    }
-    return this.renderPopper(uniqueId);
-  }
-  render() {
-    const {
-      children,
-      dismissEnabled,
-      id
-    } = this.props;
-    const {
-      opened,
-      placement
-    } = this.state;
-    return React.createElement(PopoverContext.Provider, {
-      value: {
-        close: this.handleClose,
-        placement: placement
-      }
-    }, React.createElement(Id, {
-      id: id
-    }, uniqueId => React.createElement(React.Fragment, null, React.createElement(PopoverAnchor, {
-      anchorRef: this.updateRef,
-      id: `${uniqueId}-anchor`,
-      "aria-controls": uniqueId,
-      "aria-expanded": opened ? "true" : "false",
-      onClick: this.handleOpen
-    }, children), this.renderPortal(uniqueId, opened))), dismissEnabled && opened && React.createElement(PopoverEventListener, {
-      onClose: this.handleClose,
-      contentRef: this.contentRef
-    }));
-  }
-}
-Popover.defaultProps = {
-  placement: "top",
-  showTail: true,
-  portal: true,
-  rootBoundary: "viewport"
-};
+class Popover extends React.Component{static getDerivedStateFromProps(props,state){return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}renderContent(uniqueId){const{content}=this.props;const popoverContents=typeof content==="function"?content({close:this.handleClose}):content;return React.cloneElement(popoverContents,{ref:this.contentRef,uniqueId})}renderPopper(uniqueId){const{initialFocusId,placement,showTail,portal,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,rootBoundary,viewportPadding,initialFocusDelay}=this.props;const{anchorElement}=this.state;const describedBy=ariaDescribedBy||`${uniqueId}-content`;const ariaLabelledBy=ariaLabel?undefined:`${uniqueId}-title`;const popperContent=jsx(TooltipPopper,{anchorElement:anchorElement,placement:placement,rootBoundary:rootBoundary,viewportPadding:viewportPadding,children:props=>jsx(PopoverDialog,{...props,"aria-label":ariaLabel,"aria-describedby":describedBy,"aria-labelledby":ariaLabelledBy,id:uniqueId,onUpdate:placement=>this.setState({placement}),showTail:showTail,children:this.renderContent(uniqueId)})});if(portal){return jsx(FocusManager,{anchorElement:anchorElement,initialFocusId:initialFocusId,initialFocusDelay:initialFocusDelay,children:popperContent})}else {return jsx(InitialFocus,{initialFocusId:initialFocusId,delay:initialFocusDelay,children:popperContent})}}getHost(){return maybeGetPortalMountedModalHostElement(this.state.anchorElement)||document.body}renderPortal(uniqueId,opened){if(!opened){return null}const{portal}=this.props;const popperHost=this.getHost();if(portal&&popperHost){return ReactDOM.createPortal(this.renderPopper(uniqueId),popperHost)}return this.renderPopper(uniqueId)}render(){const{children,dismissEnabled,id}=this.props;const{opened,placement}=this.state;return jsxs(PopoverContext.Provider,{value:{close:this.handleClose,placement:placement},children:[jsx(Id,{id:id,children:uniqueId=>jsxs(React.Fragment,{children:[jsx(PopoverAnchor,{anchorRef:this.updateRef,id:`${uniqueId}-anchor`,"aria-controls":uniqueId,"aria-expanded":opened?"true":"false",onClick:this.handleOpen,children:children}),this.renderPortal(uniqueId,opened)]})}),dismissEnabled&&opened&&jsx(PopoverEventListener,{onClose:this.handleClose,contentRef:this.contentRef})]})}constructor(...args){super(...args),this.state={opened:!!this.props.opened,placement:this.props.placement},this.contentRef=React.createRef(),this.maybeReturnFocus=()=>{const{anchorElement}=this.state;const{closedFocusId}=this.props;if(closedFocusId){const focusElement=ReactDOM.findDOMNode(document.getElementById(closedFocusId));focusElement?.focus();return}if(anchorElement){anchorElement.focus();}},this.handleClose=(shouldReturnFocus=true)=>{this.setState({opened:false},()=>{this.props.onClose?.();if(shouldReturnFocus){this.maybeReturnFocus();}});},this.handleOpen=()=>{if(this.props.dismissEnabled&&this.state.opened){this.handleClose(true);}else {this.setState({opened:true});}},this.updateRef=actualRef=>{if(actualRef&&this.state.anchorElement!==actualRef){this.setState({anchorElement:actualRef});}};}}Popover.defaultProps={placement:"top",showTail:true,portal:true,rootBoundary:"viewport"};
 
-class CloseButton extends React.Component {
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      style,
-      testId
-    } = this.props;
-    return React.createElement(PopoverContext.Consumer, null, ({
-      close
-    }) => {
-      return React.createElement(IconButton, {
-        icon: xIcon,
-        "aria-label": ariaLabel,
-        onClick: close,
-        kind: "tertiary",
-        actionType: "neutral",
-        style: style,
-        testId: testId
-      });
-    });
-  }
-}
-CloseButton.defaultProps = {
-  "aria-label": "Close Popover"
-};
+class CloseButton extends React.Component{render(){const{"aria-label":ariaLabel,style,testId}=this.props;return jsx(PopoverContext.Consumer,{children:({close})=>{return jsx(IconButton,{icon:xIcon,"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}CloseButton.defaultProps={"aria-label":"Close Popover"};
 
-class PopoverContentCore extends React.Component {
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      children,
-      closeButtonLight,
-      closeButtonLabel,
-      closeButtonVisible,
-      style,
-      testId
-    } = this.props;
-    return React.createElement(View, {
-      testId: testId,
-      style: [styles$1.content, style],
-      "aria-label": ariaLabel
-    }, closeButtonVisible && React.createElement(CloseButton, {
-      "aria-label": closeButtonLabel,
-      style: [styles$1.closeButton, closeButtonLight && actionStyles.inverse],
-      testId: `${testId || "popover"}-close-btn`
-    }), children);
-  }
-}
-PopoverContentCore.defaultProps = {
-  closeButtonLight: false,
-  closeButtonVisible: false
-};
-const styles$1 = StyleSheet.create({
-  content: {
-    borderRadius: border.radius.radius_040,
-    border: `solid 1px ${semanticColor.border.primary}`,
-    backgroundColor: semanticColor.surface.primary,
-    boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
-    margin: 0,
-    maxWidth: spacing.medium_16 * 18,
-    padding: spacing.large_24,
-    overflow: "hidden",
-    justifyContent: "center"
-  },
-  closeButton: {
-    margin: 0,
-    position: "absolute",
-    right: spacing.xxxSmall_4,
-    top: spacing.xxxSmall_4,
-    zIndex: 1
-  }
-});
+class PopoverContentCore extends React.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxs(View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=StyleSheet.create({content:{borderRadius:border.radius.radius_040,border:`solid 1px ${semanticColor.border.primary}`,backgroundColor:semanticColor.surface.primary,boxShadow:`0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,margin:0,maxWidth:spacing.medium_16*18,padding:spacing.large_24,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",right:spacing.xxxSmall_4,top:spacing.xxxSmall_4,zIndex:1}});
 
-const StyledImg = addStyle("img");
-class PopoverContent extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.maybeRenderImage = ({
-      placement
-    }) => {
-      const {
-        image
-      } = this.props;
-      if (!image) {
-        return null;
-      }
-      return React.createElement(View, {
-        style: [styles.image, placement === "bottom" && styles.imageToBottom]
-      }, image);
-    };
-    this.maybeRenderIcon = () => {
-      const {
-        icon,
-        iconAlt
-      } = this.props;
-      if (!icon) {
-        return null;
-      }
-      return React.createElement(View, {
-        style: styles.iconContainer
-      }, typeof icon !== "string" ? icon : React.createElement(StyledImg, {
-        src: icon,
-        style: styles.icon,
-        alt: iconAlt || ""
-      }));
-    };
-    this.maybeRenderActions = close => {
-      const {
-        actions
-      } = this.props;
-      if (!actions) {
-        return null;
-      }
-      return React.createElement(View, {
-        style: styles.actions
-      }, typeof actions === "function" ? actions({
-        close: close
-      }) : actions);
-    };
-  }
-  componentDidMount() {
-    const {
-      icon,
-      image
-    } = this.props;
-    if (image && icon) {
-      throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
-    }
-  }
-  validateProps({
-    placement
-  }) {
-    if (this.props.image && (placement === "left" || placement === "right")) {
-      throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
-    }
-  }
-  render() {
-    const {
-      closeButtonLabel,
-      closeButtonVisible,
-      content,
-      icon,
-      image,
-      style,
-      title,
-      testId,
-      uniqueId
-    } = this.props;
-    return React.createElement(PopoverContext.Consumer, null, ({
-      close,
-      placement
-    }) => {
-      this.validateProps({
-        close,
-        placement
-      });
-      return React.createElement(PopoverContentCore, {
-        closeButtonLight: image && placement === "top",
-        closeButtonLabel: closeButtonLabel,
-        closeButtonVisible: closeButtonVisible,
-        style: style,
-        testId: testId
-      }, React.createElement(View, {
-        style: !!icon && styles.withIcon
-      }, this.maybeRenderImage({
-        placement
-      }), this.maybeRenderIcon(), React.createElement(View, {
-        style: styles.text
-      }, React.createElement(HeadingSmall, {
-        id: `${uniqueId}-title`,
-        style: styles.title
-      }, title), React.createElement(Body, {
-        id: `${uniqueId}-content`
-      }, content))), this.maybeRenderActions(close));
-    });
-  }
-}
-PopoverContent.defaultProps = {
-  closeButtonVisible: false
-};
-const styles = StyleSheet.create({
-  actions: {
-    marginTop: spacing.large_24,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end"
-  },
-  text: {
-    justifyContent: "center"
-  },
-  title: {
-    marginBottom: spacing.xSmall_8
-  },
-  iconContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    height: spacing.xxxLarge_64,
-    width: spacing.xxxLarge_64,
-    minWidth: spacing.xxxLarge_64,
-    marginRight: spacing.medium_16,
-    overflow: "hidden"
-  },
-  icon: {
-    width: "100%"
-  },
-  withIcon: {
-    flexDirection: "row"
-  },
-  image: {
-    marginBottom: spacing.large_24,
-    marginLeft: -spacing.large_24,
-    marginRight: -spacing.large_24,
-    marginTop: -spacing.large_24,
-    width: `calc(100% + ${spacing.large_24 * 2}px)`
-  },
-  imageToBottom: {
-    marginBottom: -spacing.large_24,
-    marginTop: spacing.large_24,
-    order: 1
-  }
-});
+const StyledImg=addStyle("img");class PopoverContent extends React.Component{componentDidMount(){const{icon,image}=this.props;if(image&&icon){throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.")}}validateProps({placement}){if(this.props.image&&(placement==="left"||placement==="right")){throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.")}}render(){const{closeButtonLabel,closeButtonVisible,content,icon,image,style,title,testId,uniqueId}=this.props;return jsx(PopoverContext.Consumer,{children:({close,placement})=>{this.validateProps({close,placement});return jsxs(PopoverContentCore,{closeButtonLight:image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,children:[jsxs(View,{style:!!icon&&styles.withIcon,children:[this.maybeRenderImage({placement}),this.maybeRenderIcon(),jsxs(View,{style:styles.text,children:[jsx(HeadingSmall,{id:`${uniqueId}-title`,style:styles.title,children:title}),jsx(Body,{id:`${uniqueId}-content`,children:content})]})]}),this.maybeRenderActions(close)]})}})}constructor(...args){super(...args),this.maybeRenderImage=({placement})=>{const{image}=this.props;if(!image){return null}return jsx(View,{style:[styles.image,placement==="bottom"&&styles.imageToBottom],children:image})},this.maybeRenderIcon=()=>{const{icon,iconAlt}=this.props;if(!icon){return null}return jsx(View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})},this.maybeRenderActions=close=>{const{actions}=this.props;if(!actions){return null}return jsx(View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};}}PopoverContent.defaultProps={closeButtonVisible:false};const styles=StyleSheet.create({actions:{marginTop:spacing.large_24,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBottom:spacing.xSmall_8},iconContainer:{alignItems:"center",justifyContent:"center",height:spacing.xxxLarge_64,width:spacing.xxxLarge_64,minWidth:spacing.xxxLarge_64,marginRight:spacing.medium_16,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBottom:spacing.large_24,marginLeft:-spacing.large_24,marginRight:-spacing.large_24,marginTop:-spacing.large_24,width:`calc(100% + ${spacing.large_24*2}px)`},imageToBottom:{marginBottom:-spacing.large_24,marginTop:spacing.large_24,order:1}});
 
 export { Popover, PopoverContent, PopoverContentCore };