@khanacademy/wonder-blocks-popover 6.3.18 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @khanacademy/wonder-blocks-popover
 
+## 7.0.0
+
+### Major Changes
+
+- 4aef2da: Refactor `Popover` to use the `wonder-blocks-floating` package (floating-ui) instead of PopperJS and the `wonder-blocks-tooltip` dependency.
+
+    Breaking / behavior changes:
+
+    - `Popover` now positions its content with floating-ui via the `Floating` component. The `@popperjs/core` and `react-popper` peer dependencies (and the `@khanacademy/wonder-blocks-tooltip` / `@khanacademy/wonder-blocks-modal` dependencies) have been removed.
+    - `PopoverContentCore` no longer renders the popover "bubble" chrome (background, border, border radius and shadow). That chrome now comes from `Floating`, so a `PopoverContentCore` rendered on its own — outside a `Popover` — no longer looks like a popover bubble and needs its own container styling.
+    - The popover tail is now rendered by `Floating` (as its arrow) instead of `TooltipTail`. The `showTail` prop is unchanged, but the tail's markup and styling now come from `Floating`.
+    - The popover is positioned with floating-ui's `fixed` strategy, so it is no longer clipped by scrolling or `overflow`-clipping ancestors the way it could be before.
+    - Focus management is now handled by floating-ui's non-modal focus manager rather than the previous custom implementation. The popover remains non-modal and focus is not trapped or cycled (it never was): tabbing past the last focusable element in the popover moves focus on to the next element after the trigger, and `dismissEnabled` popovers close when focus leaves them. The mechanism behind that is floating-ui's focus guards rather than Popover's own keydown handling.
+    - `rootBoundary` and `viewportPadding` are now remapped onto floating-ui's `flip`/`shift` middleware (prop names unchanged).
+    - `autoUpdate` is deprecated and now a no-op: the popover always keeps its position in sync with the anchor (floating-ui's `autoUpdate`).
+    - `initialFocusDelay` is deprecated and now a no-op: initial focus is applied synchronously when the popover opens.
+    - `onClose` is now called at most once per open/close cycle. floating-ui can request a close through several channels (escape, outside click, focus out), so the callback is guarded against firing more than once for a single dismissal.
+    - `testId` is now actually applied. It was previously declared on `Popover`'s props but never used; it is now forwarded to the floating element.
+
+- 4aef2da: `Popover` no longer uses `ReactDOM.findDOMNode` (removed in React 19) to find its trigger's element. The trigger now has to do one of two things for the popover to anchor to it, and most triggers already do both:
+
+    - Attach the ref it is given to its element. `Popover` only passes a ref to triggers that can receive one (host elements and `React.forwardRef` components), so a plain function component doesn't get React's "Function components cannot be given refs" error.
+    - Spread the props it is given (`id`, `aria-controls`, `aria-expanded`, the `onClick` handler that opens the popover, and the attribute that identifies the anchor) onto its element. The anchor element is then resolved from the DOM.
+
+    The trigger can be any component type (host element, `React.forwardRef` component, class component or plain function component). A trigger that does neither, e.g. a function component that ignores its props, is no longer anchored. Before, `findDOMNode` anchored the popover to the trigger's first DOM node regardless.
+
+    A trigger's own `ref` is merged rather than replaced, so it keeps resolving the same element.
+
+### Patch Changes
+
+- 4aef2da: - Updates `PopoverAnchor`, `PopoverContent`, and `PopoverContentCore` to pass `forwardRef`
+
+    - Updates different components to be function components instead of class based components.
+
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+- Updated dependencies [4aef2da]
+    - @khanacademy/wonder-blocks-floating@0.1.0
+
+## 6.3.19
+
+### Patch Changes
+
+- Updated dependencies [c56e31b]
+    - @khanacademy/wonder-blocks-modal@8.9.0
+    - @khanacademy/wonder-blocks-tooltip@4.2.8
+
 ## 6.3.18
 
 ### Patch Changes

package/dist/components/popover-anchor.d.ts

@@ -1,19 +1,22 @@
 import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-type Props = AriaProps & {
-    /**
-     * Callback to be invoked when the anchored content is mounted.
-     * This provides a reference to the anchored content, which can then be
-     * used for calculating popover content positioning.
-     */
-    anchorRef: (arg1?: HTMLElement) => unknown;
+/**
+ * The element that triggers the popover dialog. This is also used as reference
+ * to position the dialog itself.
+ *
+ * The ref it receives comes from `Floating` and resolves the element the popover
+ * is anchored to. It is passed along to the trigger, alongside the attribute
+ * that lets `Floating` resolve that element from the DOM instead, so that a
+ * trigger only has to do one of the two (see `Floating`'s `children` prop).
+ */
+declare const PopoverAnchor: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
     /**
      * The element that triggers the popover. This element will be used to
      * position the popover. It can be either a Node or a function using the
      * children-as-function pattern to pass an open function for use anywhere
      * within children. The latter provides a lot of flexibility in terms of
-     * what actions may trigger the `Popover` to launch the
-     * [PopoverDialog](#PopoverDialog).
+     * what actions may trigger the `Popover` to launch the popover dialog.
      */
     children: React.ReactElement<any> | ((arg1: {
         open: () => void;
@@ -26,13 +29,11 @@ type Props = AriaProps & {
      * Called when the anchor is clicked
      */
     onClick: () => void;
-};
-/**
- * The element that triggers the popover dialog. This is also used as reference
- * to position the dialog itself.
- */
-export default class PopoverAnchor extends React.Component<Props> {
-    componentDidMount(): void;
-    render(): React.ReactNode;
-}
-export {};
+    /**
+     * Injected by `Floating` to identify the trigger's element in the DOM. It is
+     * passed along to the trigger so that `Floating` can find that element and
+     * use it as the reference (anchor) element.
+     */
+    "data-wb-floating-reference"?: string;
+} & React.RefAttributes<HTMLElement>>;
+export default PopoverAnchor;

package/dist/components/popover-content-core.d.ts

@@ -1,6 +1,36 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-type Props = AriaProps & {
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * This is the base popover container. It’s used internally by all the variants.
+ * Also, it can be used to create flexible popovers.
+ *
+ * ### Presentation
+ *
+ * `PopoverContentCore` only lays out the popover's contents (max width,
+ * padding and the optional close button). The popover "bubble" chrome —
+ * background, border, border radius, shadow and the tail — is drawn by the
+ * `Floating` component that `Popover` renders it inside.
+ *
+ * This means that when `PopoverContentCore` is rendered **standalone**, outside
+ * of a `Popover` — which is how the examples on this page are rendered — it has
+ * no bubble around it and you need to supply your own container styling. Inside
+ * a `Popover` it looks like a popover with no extra work.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
+ *
+ * <PopoverContentCore>
+ *  <>
+ *      Some custom layout
+ *  </>
+ * </PopoverContentCore>
+ * ```
+ */
+declare const PopoverContentCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
     /**
      * The content to render inside the popover.
      */
@@ -25,29 +55,5 @@ type Props = AriaProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
-};
-type DefaultProps = {
-    closeButtonLight: Props["closeButtonLight"];
-    closeButtonVisible: Props["closeButtonVisible"];
-};
-/**
- * This is the base popover container. It’s used internally by all the variants.
- * Also, it can be used to create flexible popovers.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContentCore>
- *  <>
- *      Some custom layout
- *  </>
- * </PopoverContentCore>
- * ```
- */
-export default class PopoverContentCore extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
-}
-export {};
+} & React.RefAttributes<HTMLElement>>;
+export default PopoverContentCore;

package/dist/components/popover-content.d.ts

@@ -1,7 +1,24 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import type { PopoverContextType } from "./popover-context";
-type CommonProps = AriaProps & {
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * This is the container that is consumed by all the predefined variations. Its
+ * main responsibility is populate the contents depending on the variation used.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {PopoverContent} from "@khanacademy/wonder-blocks-popover";
+ *
+ * <PopoverContent
+ *  closeButtonVisible
+ *  content="Some content for the popover"
+ *  title="Popover with text only"
+ * />
+ * ```
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
     /**
      * The content to render inside the popover.
      */
@@ -48,8 +65,7 @@ type CommonProps = AriaProps & {
      * @ignore
      */
     uniqueId?: string;
-};
-type Props = CommonProps & {
+} & {
     /**
      * Decorate the popover with an illustrated icon. It cannot be used at the
      * same time with image.
@@ -65,36 +81,5 @@ type Props = CommonProps & {
      * the same time with icon.
      */
     image?: React.ReactElement<React.ComponentProps<"img">> | React.ReactElement<React.ComponentProps<"svg">>;
-};
-type DefaultProps = {
-    closeButtonVisible: Props["closeButtonVisible"];
-};
-/**
- * This is the container that is consumed by all the predefined variations. Its
- * main responsibility is populate the contents depending on the variation used.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContent} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContent
- *  closeButtonVisible
- *  content="Some content for the popover"
- *  title="Popover with text only"
- * />
- * ```
- */
-export default class PopoverContent extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    componentDidMount(): void;
-    /**
-     * Runtime validation in case we try to use an invalid shape
-     */
-    validateProps({ placement }: PopoverContextType): void;
-    maybeRenderImage: (context: PopoverContextType) => React.ReactElement;
-    maybeRenderIcon: () => React.ReactElement;
-    maybeRenderActions: (close: () => unknown) => React.ReactElement;
-    render(): React.ReactNode;
-}
-export {};
+} & React.RefAttributes<HTMLElement>>;
+export default PopoverContent;

package/dist/components/popover-context.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Placement } from "@khanacademy/wonder-blocks-tooltip";
+import type { Placement } from "../util/types";
 export type PopoverContextType = {
     /**
      * Facilitates passing the `onClose` handler from the Popover down to its
@@ -7,10 +7,10 @@ export type PopoverContextType = {
      */
     close?: () => unknown;
     /**
-     * Facilitates passing this value from Popover (via TooltipPopper) down to
-     * PopoverContent. This is needed here to reposition the illustration to the
-     * start or the end of the content, in case the popper changes its
-     * placement.
+     * Facilitates passing this value from Popover (via the Floating component)
+     * down to PopoverContent. This is needed here to reposition the
+     * illustration to the start or the end of the content, in case the floating
+     * element changes its placement.
      */
     placement?: Placement;
 };

package/dist/components/popover-dialog.d.ts

@@ -1,13 +1,20 @@
 import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-import type { Placement, PopperElementProps } from "@khanacademy/wonder-blocks-tooltip";
+import type { Placement } from "../util/types";
 import PopoverContent from "./popover-content";
 import PopoverContentCore from "./popover-content-core";
-type Props = AriaProps & 
 /**
- * Required to correctly position the elements inside the dialog
- * @ignore
- */ PopperElementProps & {
+ * This is an internal component that we use to render the dialog wrapper that
+ * appears when a popover shows. It wraps the popover content (of type
+ * [PopoverContent](#PopoverContent) or
+ * [PopoverContentCore](#PopoverContentCore)) and provides the `dialog` role
+ * along with its accessibility wiring.
+ *
+ * Positioning and the tail/arrow are handled by the `Floating` component, so
+ * this component only provides the semantic dialog container.
+ */
+declare const PopoverDialog: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
     /**
      * The content to render inside the dialog.
      */
@@ -17,30 +24,9 @@ type Props = AriaProps &
      */
     id?: string;
     /**
-     * Called when popper changes its placement
-     */
-    onUpdate: (placement: Placement) => unknown;
-    /**
-     * Whether to show the popover tail or not.
+     * The current placement of the popover, reflected on the `data-placement`
+     * attribute.
      */
-    showTail: boolean;
-};
-/**
- * This is an internal component that we use to render the stuff that appears
- * when a popover shows. It's composed by two elements: The popover content,
- * that can be of type [PopoverContent](#PopoverContent) or
- * [PopoverContentCore](#PopoverContentCore), and the
- * [TooltipTail](#TooltipTail).
- *
- * The main difference with [TooltipBubble](#TooltipBubble) is that bubble
- * handles hover states and PopoverDialog doesn't need to handle any states at
- * all (for now). Also, PopoverDialog needs to coordinate different background
- * colors for the content and tail components.
- *
- * Note that without explicit positioning, the tail will not be centered.
- */
-export default class PopoverDialog extends React.Component<Props> {
-    componentDidUpdate(prevProps: Props): void;
-    render(): React.ReactNode;
-}
-export {};
+    placement: Placement;
+} & React.RefAttributes<HTMLElement>>;
+export default PopoverDialog;

package/dist/components/popover.d.ts

@@ -1,22 +1,22 @@
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-import type { Placement } from "@khanacademy/wonder-blocks-tooltip";
-import type { RootBoundary } from "@popperjs/core";
 import PopoverContent from "./popover-content";
 import PopoverContentCore from "./popover-content-core";
+import type { Placement, RootBoundary } from "../util/types";
 type PopoverContents = React.ReactElement<React.ComponentProps<typeof PopoverContent>> | React.ReactElement<React.ComponentProps<typeof PopoverContentCore>>;
-type Props = AriaProps & Readonly<{
-    /**
-     * Whether the popover should update its position when the anchor
-     * element changes size or position. Defaults to false.
-     */
-    autoUpdate?: boolean;
+type Props = AriaProps & {
     /**
      * The element that triggers the popover. This element will be used to
      * position the popover. It can be either a Node or a function using the
      * children-as-function pattern to pass an open function for use anywhere
      * within children. The latter provides a lot of flexibility in terms of
      * what actions may trigger the `Popover` to launch the popover dialog.
+     *
+     * The trigger can be any component type, but it has to either attach the
+     * ref it is given or spread the props it is given onto its element, so
+     * that the popover can be anchored to it. Spreading the props is
+     * recommended, since they include the ARIA attributes and the `onClick`
+     * handler that opens the popover. See the "Custom Triggers" example.
      */
     children: React.ReactElement<any> | ((arg1: {
         open: () => void;
@@ -35,8 +35,9 @@ type Props = AriaProps & Readonly<{
     }) => PopoverContents);
     /**
      * Where the popover should try to appear in relation to the trigger element.
+     * Defaults to "top".
      */
-    placement: Placement;
+    placement?: Placement;
     /**
      * When enabled, user can hide the popover content by pressing the `esc` key
      * or clicking/tapping outside of it.
@@ -67,13 +68,6 @@ type Props = AriaProps & Readonly<{
      * popover content will be used.
      */
     initialFocusId?: string;
-    /**
-     * The delay in milliseconds before the initial focus is set.
-     * This allows any active event listeners to finish before focusing.
-     *
-     * Defaults to 0.
-     */
-    initialFocusDelay?: number;
     /**
      * Renders the popover when true, renders nothing when false.
      *
@@ -93,7 +87,7 @@ type Props = AriaProps & Readonly<{
     /**
      * Whether to show the popover tail or not. Defaults to true.
      */
-    showTail: boolean;
+    showTail?: boolean;
     /**
      * Optional property to enable the portal functionality of popover.
      * This is very handy in cases where the Popover can't be easily
@@ -109,47 +103,45 @@ type Props = AriaProps & Readonly<{
      */
     portal?: boolean;
     /**
-     * Optional property to set what the root boundary is for the popper behavior.
-     * This is set to "viewport" by default, causing the popper to be positioned based
-     * on the user's viewport. If set to "document", it will position itself based
-     * on where there is available room within the document body.
+     * Optional property to set what the root boundary is for the positioning
+     * behavior. This is set to "viewport" by default, causing the popover to be
+     * positioned based on the user's viewport. If set to "document", it will
+     * position itself based on where there is available room within the
+     * document body.
      */
     rootBoundary?: RootBoundary;
     /**
      * If `rootBoundary` is `viewport`, this padding value is used to provide
-     * spacing between the popper and the viewport. If not provided, default
+     * spacing between the popover and the viewport. If not provided, default
      * spacing of 12px is applied.
      */
     viewportPadding?: number;
-}>;
-type State = Readonly<{
     /**
-     * Keeps a reference of the dialog state
-     */
-    opened: boolean;
-    /**
-     * Anchor element DOM reference
+     * Whether the popover should update its position when the anchor
+     * element changes size or position.
+     *
+     * @deprecated The popover now always keeps its position in sync with the
+     * anchor element (via floating-ui's `autoUpdate`), so this prop no longer
+     * has any effect.
      */
-    anchorElement?: HTMLElement;
+    autoUpdate?: boolean;
     /**
-     * Current popper placement
+     * The delay in milliseconds before the initial focus is set.
+     *
+     * @deprecated Initial focus is now handled by floating-ui and is applied
+     * synchronously when the popover opens, so this prop no longer has any
+     * effect.
      */
-    placement: Placement;
-}>;
-type DefaultProps = Readonly<{
-    placement: Props["placement"];
-    showTail: Props["showTail"];
-    portal: Props["portal"];
-    rootBoundary: Props["rootBoundary"];
-}>;
+    initialFocusDelay?: number;
+};
 /**
  * Popovers provide additional information that is related to a particular
  * element and/or content. They can include text, links, icons and
  * illustrations. The main difference with `Tooltip` is that they must be
  * dismissed by clicking an element.
  *
- * This component uses the `PopoverPopper` component to position the
- * `PopoverContentCore` component according to the children it is wrapping.
+ * This component uses the `Floating` component (powered by floating-ui) to
+ * position the popover content according to the element it is wrapping.
  *
  * ### Usage
  *
@@ -165,35 +157,5 @@ type DefaultProps = Readonly<{
  *  </Popover>
  * ```
  */
-export default class Popover extends React.Component<Props, State> {
-    static defaultProps: DefaultProps;
-    /**
-     * Used to sync the `opened` state when Popover acts as a controlled
-     * component
-     */
-    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null | undefined;
-    state: State;
-    /**
-     * Popover content ref
-     */
-    contentRef: React.RefObject<PopoverContent | PopoverContentCore>;
-    /**
-     * Returns focus to a given element.
-     */
-    maybeReturnFocus: () => void;
-    /**
-     * Popover dialog closed
-     */
-    handleClose: (shouldReturnFocus?: boolean) => void;
-    /**
-     * Popover dialog opened
-     */
-    handleOpen: () => void;
-    updateRef: (actualRef?: HTMLElement) => void;
-    renderContent(uniqueId: string): PopoverContents;
-    renderPopper(uniqueId: string): React.ReactNode;
-    getHost(): Element | null | undefined;
-    renderPortal(uniqueId: string, opened: boolean): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+declare function Popover(props: Props): React.JSX.Element;
+export default Popover;

package/dist/es/index.js

@@ -1,12 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { View, keys, Id, addStyle } from '@khanacademy/wonder-blocks-core';
-import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
-import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
+import { useMergeRefs, getElementRef, FloatingReferenceAttributeName, canAcceptRef, Floating } from '@khanacademy/wonder-blocks-floating';
+import { View, addStyle } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
-import { border, semanticColor, boxShadow, sizing } from '@khanacademy/wonder-blocks-tokens';
+import { sizing } from '@khanacademy/wonder-blocks-tokens';
 import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
 import { actionStyles } from '@khanacademy/wonder-blocks-styles';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
@@ -14,24 +11,16 @@ import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
 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,{...children.props,...sharedProps,onClick:children.props.onClick?e=>{e.stopPropagation();children.props.onClick();onClick();}:onClick})}}}
+const PopoverAnchor=React.forwardRef(function PopoverAnchor(props,ref){const{children,id,onClick,"aria-controls":ariaControls,"aria-expanded":ariaExpanded,[FloatingReferenceAttributeName]:floatingReferenceId}=props;const isFunctionChildren=typeof children==="function";const renderedChildren=isFunctionChildren?children({open:onClick}):children;const triggerRef=useMergeRefs([ref,getElementRef(renderedChildren)]);const sharedProps={id:id,"aria-controls":ariaControls,"aria-expanded":ariaExpanded,[FloatingReferenceAttributeName]:floatingReferenceId,...canAcceptRef(renderedChildren)?{ref:triggerRef}:undefined};if(isFunctionChildren){return React.cloneElement(renderedChildren,sharedProps)}return React.cloneElement(renderedChildren,{...renderedChildren.props,...sharedProps,onClick:renderedChildren.props.onClick?e=>{e.stopPropagation();renderedChildren.props.onClick();onClick();}:onClick})});PopoverAnchor.displayName="PopoverAnchor";
 
-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:tokens.semanticColor.core.transparent,color:tokens.semanticColor.core.transparent},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"}});
+const PopoverDialog=React.forwardRef(function PopoverDialog(props,ref){const{children,id,placement,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,"aria-label":ariaLabel}=props;return jsx(View,{"aria-label":ariaLabel,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,id:id,role:"dialog",ref:ref,"data-placement":placement,children:children})});PopoverDialog.displayName="PopoverDialog";
 
-const FOCUSABLE_ELEMENTS='button:not([tabindex="-1"]), [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{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{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{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===keys.tab&&e.shiftKey){e.preventDefault();this.props.anchorElement?.focus();}},this.handleKeydownLastFocusableElement=e=>{if(this.nextElementAfterPopover&&e.key===keys.tab&&!e.shiftKey){e.preventDefault();this.nextElementAfterPopover?.focus();}if(e.key===keys.tab&&!e.shiftKey){this.props.onFocusOut?.();}},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.changeFocusabilityInsidePopover=(enabled=true)=>{const tabIndex=enabled?"0":"-1";this.elementsThatCanBeFocusableInsidePopover.forEach(element=>{element.setAttribute("tabIndex",tabIndex);});},this.handleKeydownPreviousFocusableElement=e=>{if(e.key===keys.tab&&!e.shiftKey){e.preventDefault();this.firstFocusableElementInPopover?.focus();}if(e.key===keys.tab&&e.shiftKey){this.props.onFocusOut?.();}},this.handleKeydownNextFocusableElement=e=>{if(e.key===keys.tab&&e.shiftKey){e.preventDefault();this.lastFocusableElementInPopover?.focus();}};}}
-
-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{autoUpdate,dismissEnabled,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 shouldAnchorExist=autoUpdate?anchorElement:true;if(!shouldAnchorExist){return null}const popperContent=jsx(TooltipPopper,{anchorElement:anchorElement,autoUpdate:autoUpdate,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,onFocusOut:dismissEnabled?this.handleClose:undefined,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"};
+function Popover(props){const{children,content,placement:placementProp="top",dismissEnabled,id,closedFocusId,initialFocusId,opened:openedProp,onClose,showTail=true,portal=true,rootBoundary="viewport",viewportPadding,testId,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy}=props;const isControlled=typeof openedProp==="boolean";const[internalOpened,setInternalOpened]=React.useState(!!openedProp);const opened=isControlled?openedProp:internalOpened;const[placement,setPlacement]=React.useState(placementProp);const initialFocusRef=React.useRef(null);const returnFocusRef=React.useRef(null);const closeFiredRef=React.useRef(false);const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;React.useEffect(()=>{if(opened&&closedFocusId){returnFocusRef.current=document.getElementById(closedFocusId);}},[opened,closedFocusId]);const handleOpenChange=React.useCallback(nextOpened=>{if(!isControlled){setInternalOpened(nextOpened);}if(nextOpened){closeFiredRef.current=false;}else if(!closeFiredRef.current){closeFiredRef.current=true;onClose?.();}},[isControlled,onClose]);const handleClose=React.useCallback(()=>{handleOpenChange(false);},[handleOpenChange]);const handleAnchorClick=React.useCallback(()=>{if(!opened){handleOpenChange(true);}else if(dismissEnabled){handleOpenChange(false);}},[opened,dismissEnabled,handleOpenChange]);const handlePlacementChange=React.useCallback(nextPlacement=>{setPlacement(nextPlacement.split("-")[0]);},[]);const handleDialogRef=React.useCallback(node=>{if(node&&initialFocusId){initialFocusRef.current=node.querySelector(`#${initialFocusId}`);}},[initialFocusId]);const renderContent=()=>{const popoverContents=typeof content==="function"?content({close:handleClose}):content;return React.cloneElement(popoverContents,{uniqueId})};const describedBy=ariaDescribedBy||`${uniqueId}-content`;const ariaLabelledBy=ariaLabel?undefined:`${uniqueId}-title`;const dialog=jsx(PopoverDialog,{ref:handleDialogRef,id:uniqueId,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":describedBy,children:renderContent()});return jsx(PopoverContext.Provider,{value:{close:handleClose,placement:placement},children:jsx(Floating,{open:opened,strategy:"fixed",onOpenChange:handleOpenChange,placement:placementProp,onPlacementChange:handlePlacementChange,content:dialog,dismissEnabled:!!dismissEnabled,closeOnFocusOut:!!dismissEnabled,showArrow:showTail,portal:portal,rootBoundary:rootBoundary,shiftPadding:viewportPadding,initialFocusRef:initialFocusId?initialFocusRef:undefined,returnFocus:closedFocusId?returnFocusRef:true,testId:testId,children:jsx(PopoverAnchor,{id:`${uniqueId}-anchor`,"aria-controls":uniqueId,"aria-expanded":opened?"true":"false",onClick:handleAnchorClick,children:children})})})}
 
 class CloseButton extends React.Component{render(){const{"aria-label":ariaLabel="Close Popover",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 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.core.border.neutral.subtle}`,backgroundColor:semanticColor.core.background.base.default,boxShadow:boxShadow.mid,margin:0,maxInlineSize:`calc(${sizing.size_160} * 18)`,padding:sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040,insetBlockStart:sizing.size_040,zIndex:1}});
+const PopoverContentCore=React.forwardRef(function PopoverContentCore({"aria-label":ariaLabel,children,closeButtonLight=false,closeButtonLabel,closeButtonVisible=false,style,testId},ref){return jsxs(View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,ref:ref,children:[closeButtonVisible&&jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})});PopoverContentCore.displayName="PopoverContentCore";const styles$1=StyleSheet.create({content:{margin:0,maxInlineSize:`calc(${sizing.size_160} * 18)`,padding:sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040,insetBlockStart:sizing.size_040,zIndex: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,titleHeadingTag,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(Heading,{size:"medium",tag:titleHeadingTag,id:`${uniqueId}-title`,style:styles.title,children:title}),jsx(BodyText,{tag:"span",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:{marginBlockStart:sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:sizing.size_640,inlineSize:sizing.size_640,minInlineSize:sizing.size_640,marginInlineEnd:sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:sizing.size_240,marginBlockStart:`calc(-1 * ${sizing.size_240})`,marginInline:`calc(-1 * ${sizing.size_240})`,inlineSize:`calc(100% + ${sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${sizing.size_240})`,marginBlockStart:sizing.size_240,order:1}});
+const StyledImg=addStyle("img");const PopoverContent=React.forwardRef(function PopoverContent(props,ref){const{actions,closeButtonLabel,closeButtonVisible=false,content,icon,iconAlt,image,style,title,titleHeadingTag,testId,uniqueId}=props;const{close,placement}=React.useContext(PopoverContext);React.useEffect(()=>{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.")}},[image,icon]);const validateProps=React.useCallback(({placement})=>{if(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`.")}},[image]);const maybeRenderImage=context=>{if(!image){return null}return jsx(View,{style:[styles.image,context.placement==="bottom"&&styles.imageToBottom],children:image})};const maybeRenderIcon=()=>{if(!icon){return null}return jsx(View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})};const maybeRenderActions=close=>{if(!actions){return null}return jsx(View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};validateProps({close,placement});return jsxs(PopoverContentCore,{closeButtonLight:!!image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,ref:ref,children:[jsxs(View,{style:!!icon&&styles.withIcon,children:[maybeRenderImage({placement}),maybeRenderIcon(),jsxs(View,{style:styles.text,children:[jsx(Heading,{size:"medium",tag:titleHeadingTag,id:`${uniqueId}-title`,style:styles.title,children:title}),jsx(BodyText,{tag:"span",id:`${uniqueId}-content`,children:content})]})]}),maybeRenderActions(close)]})});PopoverContent.displayName="PopoverContent";const styles=StyleSheet.create({actions:{marginBlockStart:sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:sizing.size_640,inlineSize:sizing.size_640,minInlineSize:sizing.size_640,marginInlineEnd:sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:sizing.size_240,marginBlockStart:`calc(-1 * ${sizing.size_240})`,marginInline:`calc(-1 * ${sizing.size_240})`,inlineSize:`calc(100% + ${sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${sizing.size_240})`,marginBlockStart:sizing.size_240,order:1}});
 
 export { Popover, PopoverContent, PopoverContentCore };

package/dist/index.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var ReactDOM = require('react-dom');
+var wonderBlocksFloating = require('@khanacademy/wonder-blocks-floating');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var wonderBlocksTooltip = require('@khanacademy/wonder-blocks-tooltip');
-var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var aphrodite = require('aphrodite');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
@@ -36,32 +34,22 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
 const defaultContext={close:undefined,placement:"top"};const PopoverContext=React__namespace.createContext(defaultContext);PopoverContext.displayName="PopoverContext";
 
-class PopoverAnchor extends React__namespace.Component{componentDidMount(){const anchorNode=ReactDOM__namespace.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__namespace.cloneElement(renderedChildren,sharedProps)}else {return React__namespace.cloneElement(children,{...children.props,...sharedProps,onClick:children.props.onClick?e=>{e.stopPropagation();children.props.onClick();onClick();}:onClick})}}}
+const PopoverAnchor=React__namespace.forwardRef(function PopoverAnchor(props,ref){const{children,id,onClick,"aria-controls":ariaControls,"aria-expanded":ariaExpanded,[wonderBlocksFloating.FloatingReferenceAttributeName]:floatingReferenceId}=props;const isFunctionChildren=typeof children==="function";const renderedChildren=isFunctionChildren?children({open:onClick}):children;const triggerRef=wonderBlocksFloating.useMergeRefs([ref,wonderBlocksFloating.getElementRef(renderedChildren)]);const sharedProps={id:id,"aria-controls":ariaControls,"aria-expanded":ariaExpanded,[wonderBlocksFloating.FloatingReferenceAttributeName]:floatingReferenceId,...wonderBlocksFloating.canAcceptRef(renderedChildren)?{ref:triggerRef}:undefined};if(isFunctionChildren){return React__namespace.cloneElement(renderedChildren,sharedProps)}return React__namespace.cloneElement(renderedChildren,{...renderedChildren.props,...sharedProps,onClick:renderedChildren.props.onClick?e=>{e.stopPropagation();renderedChildren.props.onClick();onClick();}:onClick})});PopoverAnchor.displayName="PopoverAnchor";
 
-class PopoverDialog extends React__namespace.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 jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.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,jsxRuntime.jsx(wonderBlocksTooltip.TooltipTail,{show:showTail,color:color,updateRef:updateTailRef,placement:placement,offset:tailOffset})]})})}}const styles$2=aphrodite.StyleSheet.create({hide:{pointerEvents:"none",opacity:0,backgroundColor:tokens__namespace.semanticColor.core.transparent,color:tokens__namespace.semanticColor.core.transparent},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"}});
+const PopoverDialog=React__namespace.forwardRef(function PopoverDialog(props,ref){const{children,id,placement,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,"aria-label":ariaLabel}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{"aria-label":ariaLabel,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,id:id,role:"dialog",ref:ref,"data-placement":placement,children:children})});PopoverDialog.displayName="PopoverDialog";
 
-const FOCUSABLE_ELEMENTS='button:not([tabindex="-1"]), [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__namespace.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__namespace.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__namespace.Component{componentDidMount(){const node=ReactDOM__namespace.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__namespace.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 jsxRuntime.jsx("div",{ref:this.getComponentRootNode,onClick:()=>{this.changeFocusabilityInsidePopover(true);},onFocus:()=>{this.changeFocusabilityInsidePopover(true);},onBlur:()=>{this.changeFocusabilityInsidePopover(false);},children:jsxRuntime.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===wonderBlocksCore.keys.tab&&e.shiftKey){e.preventDefault();this.props.anchorElement?.focus();}},this.handleKeydownLastFocusableElement=e=>{if(this.nextElementAfterPopover&&e.key===wonderBlocksCore.keys.tab&&!e.shiftKey){e.preventDefault();this.nextElementAfterPopover?.focus();}if(e.key===wonderBlocksCore.keys.tab&&!e.shiftKey){this.props.onFocusOut?.();}},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__namespace.findDOMNode(node);if(!rootNode){throw new Error("Assertion error: root node should exist after mount")}this.rootNode=rootNode;},this.changeFocusabilityInsidePopover=(enabled=true)=>{const tabIndex=enabled?"0":"-1";this.elementsThatCanBeFocusableInsidePopover.forEach(element=>{element.setAttribute("tabIndex",tabIndex);});},this.handleKeydownPreviousFocusableElement=e=>{if(e.key===wonderBlocksCore.keys.tab&&!e.shiftKey){e.preventDefault();this.firstFocusableElementInPopover?.focus();}if(e.key===wonderBlocksCore.keys.tab&&e.shiftKey){this.props.onFocusOut?.();}},this.handleKeydownNextFocusableElement=e=>{if(e.key===wonderBlocksCore.keys.tab&&e.shiftKey){e.preventDefault();this.lastFocusableElementInPopover?.focus();}};}}
-
-class Popover extends React__namespace.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__namespace.cloneElement(popoverContents,{ref:this.contentRef,uniqueId})}renderPopper(uniqueId){const{autoUpdate,dismissEnabled,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 shouldAnchorExist=autoUpdate?anchorElement:true;if(!shouldAnchorExist){return null}const popperContent=jsxRuntime.jsx(wonderBlocksTooltip.TooltipPopper,{anchorElement:anchorElement,autoUpdate:autoUpdate,placement:placement,rootBoundary:rootBoundary,viewportPadding:viewportPadding,children:props=>jsxRuntime.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 jsxRuntime.jsx(FocusManager,{anchorElement:anchorElement,initialFocusId:initialFocusId,initialFocusDelay:initialFocusDelay,onFocusOut:dismissEnabled?this.handleClose:undefined,children:popperContent})}else {return jsxRuntime.jsx(InitialFocus,{initialFocusId:initialFocusId,delay:initialFocusDelay,children:popperContent})}}getHost(){return wonderBlocksModal.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__namespace.createPortal(this.renderPopper(uniqueId),popperHost)}return this.renderPopper(uniqueId)}render(){const{children,dismissEnabled,id}=this.props;const{opened,placement}=this.state;return jsxRuntime.jsxs(PopoverContext.Provider,{value:{close:this.handleClose,placement:placement},children:[jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.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&&jsxRuntime.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__namespace.createRef(),this.maybeReturnFocus=()=>{const{anchorElement}=this.state;const{closedFocusId}=this.props;if(closedFocusId){const focusElement=ReactDOM__namespace.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"};
+function Popover(props){const{children,content,placement:placementProp="top",dismissEnabled,id,closedFocusId,initialFocusId,opened:openedProp,onClose,showTail=true,portal=true,rootBoundary="viewport",viewportPadding,testId,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy}=props;const isControlled=typeof openedProp==="boolean";const[internalOpened,setInternalOpened]=React__namespace.useState(!!openedProp);const opened=isControlled?openedProp:internalOpened;const[placement,setPlacement]=React__namespace.useState(placementProp);const initialFocusRef=React__namespace.useRef(null);const returnFocusRef=React__namespace.useRef(null);const closeFiredRef=React__namespace.useRef(false);const generatedUniqueId=React__namespace.useId();const uniqueId=id??generatedUniqueId;React__namespace.useEffect(()=>{if(opened&&closedFocusId){returnFocusRef.current=document.getElementById(closedFocusId);}},[opened,closedFocusId]);const handleOpenChange=React__namespace.useCallback(nextOpened=>{if(!isControlled){setInternalOpened(nextOpened);}if(nextOpened){closeFiredRef.current=false;}else if(!closeFiredRef.current){closeFiredRef.current=true;onClose?.();}},[isControlled,onClose]);const handleClose=React__namespace.useCallback(()=>{handleOpenChange(false);},[handleOpenChange]);const handleAnchorClick=React__namespace.useCallback(()=>{if(!opened){handleOpenChange(true);}else if(dismissEnabled){handleOpenChange(false);}},[opened,dismissEnabled,handleOpenChange]);const handlePlacementChange=React__namespace.useCallback(nextPlacement=>{setPlacement(nextPlacement.split("-")[0]);},[]);const handleDialogRef=React__namespace.useCallback(node=>{if(node&&initialFocusId){initialFocusRef.current=node.querySelector(`#${initialFocusId}`);}},[initialFocusId]);const renderContent=()=>{const popoverContents=typeof content==="function"?content({close:handleClose}):content;return React__namespace.cloneElement(popoverContents,{uniqueId})};const describedBy=ariaDescribedBy||`${uniqueId}-content`;const ariaLabelledBy=ariaLabel?undefined:`${uniqueId}-title`;const dialog=jsxRuntime.jsx(PopoverDialog,{ref:handleDialogRef,id:uniqueId,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":describedBy,children:renderContent()});return jsxRuntime.jsx(PopoverContext.Provider,{value:{close:handleClose,placement:placement},children:jsxRuntime.jsx(wonderBlocksFloating.Floating,{open:opened,strategy:"fixed",onOpenChange:handleOpenChange,placement:placementProp,onPlacementChange:handlePlacementChange,content:dialog,dismissEnabled:!!dismissEnabled,closeOnFocusOut:!!dismissEnabled,showArrow:showTail,portal:portal,rootBoundary:rootBoundary,shiftPadding:viewportPadding,initialFocusRef:initialFocusId?initialFocusRef:undefined,returnFocus:closedFocusId?returnFocusRef:true,testId:testId,children:jsxRuntime.jsx(PopoverAnchor,{id:`${uniqueId}-anchor`,"aria-controls":uniqueId,"aria-expanded":opened?"true":"false",onClick:handleAnchorClick,children:children})})})}
 
 class CloseButton extends React__namespace.Component{render(){const{"aria-label":ariaLabel="Close Popover",style,testId}=this.props;return jsxRuntime.jsx(PopoverContext.Consumer,{children:({close})=>{return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}CloseButton.defaultProps={"aria-label":"Close Popover"};
 
-class PopoverContentCore extends React__namespace.Component{render(){const{"aria-label":ariaLabel,children,closeButtonLight,closeButtonLabel,closeButtonVisible,style,testId}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&wonderBlocksStyles.actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})}}PopoverContentCore.defaultProps={closeButtonLight:false,closeButtonVisible:false};const styles$1=aphrodite.StyleSheet.create({content:{borderRadius:tokens.border.radius.radius_040,border:`solid 1px ${tokens.semanticColor.core.border.neutral.subtle}`,backgroundColor:tokens.semanticColor.core.background.base.default,boxShadow:tokens.boxShadow.mid,margin:0,maxInlineSize:`calc(${tokens.sizing.size_160} * 18)`,padding:tokens.sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:tokens.sizing.size_040,insetBlockStart:tokens.sizing.size_040,zIndex:1}});
+const PopoverContentCore=React__namespace.forwardRef(function PopoverContentCore({"aria-label":ariaLabel,children,closeButtonLight=false,closeButtonLabel,closeButtonVisible=false,style,testId},ref){return jsxRuntime.jsxs(wonderBlocksCore.View,{testId:testId,style:[styles$1.content,style],"aria-label":ariaLabel,ref:ref,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&wonderBlocksStyles.actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})});PopoverContentCore.displayName="PopoverContentCore";const styles$1=aphrodite.StyleSheet.create({content:{margin:0,maxInlineSize:`calc(${wonderBlocksTokens.sizing.size_160} * 18)`,padding:wonderBlocksTokens.sizing.size_240,overflow:"hidden",justifyContent:"center"},closeButton:{margin:0,position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_040,insetBlockStart:wonderBlocksTokens.sizing.size_040,zIndex:1}});
 
-const StyledImg=wonderBlocksCore.addStyle("img");class PopoverContent extends React__namespace.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,titleHeadingTag,testId,uniqueId}=this.props;return jsxRuntime.jsx(PopoverContext.Consumer,{children:({close,placement})=>{this.validateProps({close,placement});return jsxRuntime.jsxs(PopoverContentCore,{closeButtonLight:image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:!!icon&&styles.withIcon,children:[this.maybeRenderImage({placement}),this.maybeRenderIcon(),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.text,children:[jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",tag:titleHeadingTag,id:`${uniqueId}-title`,style:styles.title,children:title}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",id:`${uniqueId}-content`,children:content})]})]}),this.maybeRenderActions(close)]})}})}constructor(...args){super(...args),this.maybeRenderImage=({placement})=>{const{image}=this.props;if(!image){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.image,placement==="bottom"&&styles.imageToBottom],children:image})},this.maybeRenderIcon=()=>{const{icon,iconAlt}=this.props;if(!icon){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsxRuntime.jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})},this.maybeRenderActions=close=>{const{actions}=this.props;if(!actions){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};}}PopoverContent.defaultProps={closeButtonVisible:false};const styles=aphrodite.StyleSheet.create({actions:{marginBlockStart:tokens.sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:tokens.sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:tokens.sizing.size_640,inlineSize:tokens.sizing.size_640,minInlineSize:tokens.sizing.size_640,marginInlineEnd:tokens.sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:tokens.sizing.size_240,marginBlockStart:`calc(-1 * ${tokens.sizing.size_240})`,marginInline:`calc(-1 * ${tokens.sizing.size_240})`,inlineSize:`calc(100% + ${tokens.sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${tokens.sizing.size_240})`,marginBlockStart:tokens.sizing.size_240,order:1}});
+const StyledImg=wonderBlocksCore.addStyle("img");const PopoverContent=React__namespace.forwardRef(function PopoverContent(props,ref){const{actions,closeButtonLabel,closeButtonVisible=false,content,icon,iconAlt,image,style,title,titleHeadingTag,testId,uniqueId}=props;const{close,placement}=React__namespace.useContext(PopoverContext);React__namespace.useEffect(()=>{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.")}},[image,icon]);const validateProps=React__namespace.useCallback(({placement})=>{if(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`.")}},[image]);const maybeRenderImage=context=>{if(!image){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.image,context.placement==="bottom"&&styles.imageToBottom],children:image})};const maybeRenderIcon=()=>{if(!icon){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.iconContainer,children:typeof icon!=="string"?icon:jsxRuntime.jsx(StyledImg,{src:icon,style:styles.icon,alt:iconAlt||""})})};const maybeRenderActions=close=>{if(!actions){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actions,children:typeof actions==="function"?actions({close:close}):actions})};validateProps({close,placement});return jsxRuntime.jsxs(PopoverContentCore,{closeButtonLight:!!image&&placement==="top",closeButtonLabel:closeButtonLabel,closeButtonVisible:closeButtonVisible,style:style,testId:testId,ref:ref,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:!!icon&&styles.withIcon,children:[maybeRenderImage({placement}),maybeRenderIcon(),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.text,children:[jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",tag:titleHeadingTag,id:`${uniqueId}-title`,style:styles.title,children:title}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",id:`${uniqueId}-content`,children:content})]})]}),maybeRenderActions(close)]})});PopoverContent.displayName="PopoverContent";const styles=aphrodite.StyleSheet.create({actions:{marginBlockStart:wonderBlocksTokens.sizing.size_240,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},text:{justifyContent:"center"},title:{marginBlockEnd:wonderBlocksTokens.sizing.size_080},iconContainer:{alignItems:"center",justifyContent:"center",blockSize:wonderBlocksTokens.sizing.size_640,inlineSize:wonderBlocksTokens.sizing.size_640,minInlineSize:wonderBlocksTokens.sizing.size_640,marginInlineEnd:wonderBlocksTokens.sizing.size_160,overflow:"hidden"},icon:{width:"100%"},withIcon:{flexDirection:"row"},image:{marginBlockEnd:wonderBlocksTokens.sizing.size_240,marginBlockStart:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginInline:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,inlineSize:`calc(100% + ${wonderBlocksTokens.sizing.size_480})`},imageToBottom:{marginBlockEnd:`calc(-1 * ${wonderBlocksTokens.sizing.size_240})`,marginBlockStart:wonderBlocksTokens.sizing.size_240,order:1}});
 
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;

package/dist/util/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The coarse placement of the popover relative to its anchor.
+ *
+ * NOTE: Wonder Blocks Floating (floating-ui) supports more granular placements
+ * (e.g. `top-start`), but Popover only exposes and reasons about these four
+ * coarse values. The resolved floating-ui placement is normalized down to one
+ * of these before being shared via `PopoverContext`.
+ */
+export type Placement = "top" | "bottom" | "left" | "right";
+/**
+ * The root boundary that the popover is kept within when it is repositioned to
+ * stay in view.
+ *
+ * - `"viewport"`: keep the popover within the user's viewport.
+ * - `"document"`: keep the popover within the document body.
+ */
+export type RootBoundary = "viewport" | "document";

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "6.3.18",
+  "version": "7.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,20 +21,17 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.5.0",
+    "@khanacademy/wonder-blocks-floating": "0.1.0",
     "@khanacademy/wonder-blocks-icon-button": "12.0.1",
-    "@khanacademy/wonder-blocks-modal": "8.8.4",
     "@khanacademy/wonder-blocks-styles": "0.4.0",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.2.7",
     "@khanacademy/wonder-blocks-typography": "5.0.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
-    "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-popper": "^2.3.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "3.3.0"

package/dist/components/focus-manager.d.ts

@@ -1,107 +0,0 @@
-import * as React from "react";
-type Props = {
-    /**
-     * The popover content container
-     */
-    children: React.ReactElement<any>;
-    /**
-     * A reference to the trigger element
-     */
-    anchorElement: HTMLElement | null | undefined;
-    /**
-     * The selector for the element that will be focused when the dialog shows.
-     * When not set, the first tabbable element within the dialog will be used.
-     */
-    initialFocusId?: string;
-    /**
-     * The delay in milliseconds before the initial focus is set.
-     * This is to ensure that any active event listeners have time to finish.
-     *
-     * Defaults to 0.
-     */
-    initialFocusDelay?: number;
-    /**
-     * The callback to be called when the focus is lost (tabbing out of the
-     * popover).
-     */
-    onFocusOut?: () => void;
-};
-/**
- * This component ensures that focus flows correctly when the popover is open.
- *
- * Inside the popover:
- * - `tab`: Moves focus to the next focusable element.
- * - `shift + tab`: Moves focus to the previous focusable element.
- *
- * After the focus reaches the start/end of the popover,  then we handle two
- * different scenarios:
- *
- * 1. If the focus has reached the last focusable element inside the popover,
- *    the next tab will set focus on the next focusable element that exists
- *    after the PopoverAnchor.
- * 2. If the focus is set to the first focusable element inside the popover, the
- *    next shift + tab will set focus on the PopoverAnchor element.
- *
- */
-export default class FocusManager extends React.Component<Props> {
-    /**
-     * The focusable element that is positioned after the trigger element
-     */
-    nextElementAfterPopover: HTMLElement | null | undefined;
-    /**
-     * Tabbing is restricted to descendents of this element.
-     */
-    rootNode: HTMLElement | null | undefined;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    /**
-     * Remove keydown listeners
-     */
-    componentWillUnmount(): void;
-    /**
-     * List of focusable elements within the popover content
-     */
-    elementsThatCanBeFocusableInsidePopover: Array<HTMLElement>;
-    /**
-     * The first focusable element inside the popover (if it exists)
-     */
-    firstFocusableElementInPopover: HTMLElement | null | undefined;
-    /**
-     * The last focusable element inside the popover (if it exists)
-     */
-    lastFocusableElementInPopover: HTMLElement | null | undefined;
-    /**
-     * Add keydown listeners
-     */
-    addEventListeners: () => void;
-    removeEventListeners(): void;
-    handleKeydownFirstFocusableElement: (e: KeyboardEvent) => void;
-    handleKeydownLastFocusableElement: (e: KeyboardEvent) => void;
-    /**
-     * Gets the next focusable element after the anchor element
-     */
-    getNextFocusableElement: () => HTMLElement | null | undefined;
-    /**
-     * Gets the list of focusable elements inside the popover
-     */
-    getComponentRootNode: () => void;
-    /**
-     * Toggle focusability for all the focusable elements inside the popover.
-     * This is useful to prevent the user from tabbing into the popover when it
-     * reaches to the last focusable element within the document.
-     */
-    changeFocusabilityInsidePopover: (enabled?: boolean) => void;
-    /**
-     * Triggered when the focus is leaving the previous focusable element. This
-     * way, the focus is redirected to the first focusable element inside the
-     * popover.
-     */
-    handleKeydownPreviousFocusableElement: (e: KeyboardEvent) => void;
-    /**
-     * Triggered when the focus is leaving the next focusable element. This way,
-     * the focus is redirected to the last focusable element inside the popover.
-     */
-    handleKeydownNextFocusableElement: (e: KeyboardEvent) => void;
-    render(): React.ReactNode;
-}
-export {};

package/dist/components/initial-focus.d.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-type Props = {
-    /**
-     * The container to apply the initial focus
-     */
-    children: React.ReactElement<any>;
-    /**
-     * The selector for the element that will be focused when the component shows.
-     * When not set, the first tabbable element within the component will be used.
-     */
-    initialFocusId?: string;
-    /**
-     * The delay in milliseconds before the initial focus is set.
-     * This is to ensure that any active event listeners have time to finish.
-     *
-     * Defaults to 0.
-     */
-    delay?: number;
-};
-/**
- * This component finds which element (from within the children) needs to
- * receive focus. After that, the children is rendered with the focus assigned.
- */
-export default class InitialFocus extends React.Component<Props> {
-    componentDidMount(): void;
-    /**
-     * Gets the focusable element and applies focus to it
-     */
-    setInitialFocusableElement: (node: HTMLElement) => void;
-    /**
-     * Returns an element specified by the user
-     */
-    maybeGetInitialFocusElement(node: HTMLElement): HTMLElement | null;
-    /**
-     * Returns the first focusable element found inside the children
-     */
-    maybeGetFirstFocusableElement(node: HTMLElement): HTMLElement | null;
-    render(): React.ReactNode;
-}
-export {};

package/dist/components/popover-event-listener.d.ts

@@ -1,34 +0,0 @@
-import * as React from "react";
-import PopoverContent from "./popover-content";
-import PopoverContentCore from "./popover-content-core";
-type Props = {
-    /**
-     * Called when `esc` is pressed
-     */
-    onClose: (shouldReturnFocus: boolean) => unknown;
-    /**
-     * Popover Content ref.
-     * Will close the popover when clicking outside this element.
-     */
-    contentRef?: React.RefObject<PopoverContentCore | PopoverContent>;
-};
-type State = {
-    /**
-     * Tracks the first click triggered by the click event listener.
-     */
-    isFirstClick: boolean;
-};
-/**
- * A component that, when mounted, calls `onClose` when certain events occur.
- * This includes when pressing Escape or clicking outside the Popover.
- * @see @khanacademy/wonder-blocks-modal/components/modal-launcher.js
- */
-export default class PopoverEventListener extends React.Component<Props, State> {
-    state: State;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    _handleKeyup: (e: KeyboardEvent) => void;
-    _handleClick: (e: MouseEvent) => void;
-    render(): React.ReactElement | null;
-}
-export {};