feat(popover): popover & tooltip shared logic moved to aria-utils, popover in progress

packages/components/popover/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/popover
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/popover
+# or
+npm i @nextui-org/popover
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/popover/__tests__/popover.test.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Popover} from "../src";
+
+describe("Popover", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Popover />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Popover ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+});

packages/components/popover/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@nextui-org/popover",
+  "version": "2.0.0-beta.1",
+  "description": "A popover is an overlay element positioned relative to a trigger.",
+  "keywords": [
+    "popover"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/popover"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@nextui-org/aria-utils": "workspace:*",
+    "@nextui-org/dom-utils": "workspace:*",
+    "@nextui-org/framer-transitions": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "@react-aria/dialog": "^3.5.1",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/overlays": "^3.13.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-stately/overlays": "^3.5.0",
+    "@react-aria/focus": "^3.11.0",
+    "framer-motion": "^10.6.0"
+  },
+  "devDependencies": {
+    "@nextui-org/button": "workspace:*",
+    "@react-types/overlays": "^3.7.0",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/components/popover/src/index.ts

@@ -0,0 +1,14 @@
+import Popover from "./popover";
+import PopoverTrigger from "./popover-trigger";
+import PopoverContent from "./popover-content";
+
+// export types
+export type {PopoverProps} from "./popover";
+export type {PopoverTriggerProps} from "./popover-trigger";
+export type {PopoverContentProps} from "./popover-content";
+
+// export hooks
+export {usePopover} from "./use-popover";
+
+// export components
+export {Popover, PopoverTrigger, PopoverContent};

packages/components/popover/src/popover-content.tsx

@@ -0,0 +1,90 @@
+import {ReactNode, useMemo, useCallback} from "react";
+import {OverlayContainer, DismissButton} from "@react-aria/overlays";
+import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
+import {forwardRef} from "@nextui-org/system";
+import {AnimatePresence, motion} from "framer-motion";
+import {getTransformOrigins} from "@nextui-org/aria-utils";
+import {clsx} from "@nextui-org/shared-utils";
+
+import {usePopoverContext} from "./popover-context";
+
+export interface PopoverContentProps {
+  children: ReactNode;
+}
+
+const PopoverContent = forwardRef<PopoverContentProps, "div">((props, ref) => {
+  const {children, as, className: classNameProp, ...otherProps} = props;
+
+  const {
+    Component: OverlayComponent,
+    isOpen,
+    placement,
+    showArrow,
+    motionProps,
+    disableAnimation,
+    getPopoverProps,
+    getArrowProps,
+    onClose,
+  } = usePopoverContext();
+
+  const Component = as || OverlayComponent || "div";
+
+  const {className, ...otherPopoverProps} = getPopoverProps(otherProps, ref);
+
+  const arrowContent = useMemo(() => {
+    if (!showArrow) return null;
+
+    return <span {...getArrowProps()} />;
+  }, [showArrow, getArrowProps]);
+
+  const ContentWrapper = useCallback(
+    ({children}: {children: ReactNode}) => {
+      return (
+        <Component className={clsx(className, classNameProp)}>
+          <DismissButton onDismiss={onClose} />
+          {children}
+          {arrowContent}
+          <DismissButton onDismiss={onClose} />
+        </Component>
+      );
+    },
+    [Component, className, classNameProp, arrowContent, onClose],
+  );
+
+  const animatedContent = useMemo(() => {
+    return (
+      <div {...otherPopoverProps}>
+        <motion.div
+          animate="enter"
+          exit="exit"
+          initial="exit"
+          style={{
+            ...getTransformOrigins(placement),
+          }}
+          variants={TRANSITION_VARIANTS.scaleSpring}
+          {...motionProps}
+        >
+          <ContentWrapper>{children}</ContentWrapper>
+        </motion.div>
+      </div>
+    );
+  }, [otherPopoverProps, placement, motionProps, ContentWrapper, children]);
+
+  return (
+    <>
+      {disableAnimation && isOpen ? (
+        <OverlayContainer>
+          <ContentWrapper {...otherPopoverProps}>{children}</ContentWrapper>;
+        </OverlayContainer>
+      ) : (
+        <AnimatePresence initial={false}>
+          {isOpen ? <OverlayContainer>{animatedContent}</OverlayContainer> : null}
+        </AnimatePresence>
+      )}
+    </>
+  );
+});
+
+PopoverContent.displayName = "NextUI.PopoverContent";
+
+export default PopoverContent;

packages/components/popover/src/popover-context.ts

@@ -0,0 +1,9 @@
+import {createContext} from "@nextui-org/shared-utils";
+
+import {UsePopoverReturn} from "./use-popover";
+
+export const [PopoverProvider, usePopoverContext] = createContext<UsePopoverReturn>({
+  name: "PopoverContext",
+  errorMessage:
+    "usePopoverContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Popover />`",
+});

packages/components/popover/src/popover-trigger.tsx

@@ -0,0 +1,42 @@
+import {forwardRef} from "@nextui-org/system";
+import React, {Children, cloneElement} from "react";
+import {warn} from "@nextui-org/shared-utils";
+import {mergeProps} from "@react-aria/utils";
+
+import {usePopoverContext} from "./popover-context";
+
+export interface PopoverTriggerProps {
+  children?: React.ReactNode;
+}
+
+/**
+ * PopoverTrigger opens the popover's content. It must be an interactive element
+ * such as `button` or `a`.
+ */
+const PopoverTrigger = forwardRef<PopoverTriggerProps, "button">((props, _) => {
+  const {getTriggerProps} = usePopoverContext();
+
+  const {children, ...otherProps} = props;
+
+  let trigger: React.ReactElement;
+
+  try {
+    /**
+     * Ensure tooltip has only one child node
+     */
+    const child = Children.only(children) as React.ReactElement & {
+      ref?: React.Ref<any>;
+    };
+
+    trigger = cloneElement(child, getTriggerProps(mergeProps(child.props, otherProps), child.ref));
+  } catch (error) {
+    trigger = <span />;
+    warn("PopoverTrigger must have only one child node. Please, check your code.");
+  }
+
+  return trigger;
+});
+
+PopoverTrigger.displayName = "NextUI.PopoverTrigger";
+
+export default PopoverTrigger;

packages/components/popover/src/popover.tsx

@@ -0,0 +1,32 @@
+import {forwardRef} from "@nextui-org/system";
+import {OverlayContainer} from "@react-aria/overlays";
+import {Children, ReactNode} from "react";
+
+import {UsePopoverProps, usePopover} from "./use-popover";
+import {PopoverProvider} from "./popover-context";
+
+export interface PopoverProps extends Omit<UsePopoverProps, "ref"> {
+  /**
+   * The content of the popover. It is usually the `PopoverTrigger`,
+   * and `Popover.Content`
+   */
+  children: ReactNode[];
+}
+
+const Popover = forwardRef<PopoverProps, "div">((props, ref) => {
+  const {children, ...otherProps} = props;
+  const context = usePopover({ref, ...otherProps});
+
+  const [trigger, content] = Children.toArray(children);
+
+  return (
+    <PopoverProvider value={context}>
+      {trigger}
+      <OverlayContainer>{content}</OverlayContainer>
+    </PopoverProvider>
+  );
+});
+
+Popover.displayName = "NextUI.Popover";
+
+export default Popover;

packages/components/popover/src/use-popover.ts

@@ -0,0 +1,234 @@
+import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-org/theme";
+import type {HTMLMotionProps} from "framer-motion";
+import type {OverlayPlacement, OverlayOptions} from "@nextui-org/aria-utils";
+import type {RefObject, Ref} from "react";
+
+import {useOverlayTriggerState} from "@react-stately/overlays";
+import {
+  AriaOverlayProps,
+  useOverlayTrigger,
+  useOverlayPosition,
+  useOverlay,
+  useModal,
+} from "@react-aria/overlays";
+import {useDialog} from "@react-aria/dialog";
+import {OverlayTriggerProps} from "@react-types/overlays";
+import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils";
+import {useFocusRing} from "@react-aria/focus";
+import {popover} from "@nextui-org/theme";
+import {chain, mergeProps, mergeRefs} from "@react-aria/utils";
+import {createDOMRef} from "@nextui-org/dom-utils";
+import {ReactRef, clsx} from "@nextui-org/shared-utils";
+import {useId, useMemo, useCallback, useImperativeHandle, useRef, useEffect} from "react";
+
+export interface Props extends HTMLNextUIProps<"div", PopoverVariantProps> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * The ref for the element which the overlay positions itself with respect to.
+   */
+  triggerRef?: RefObject<HTMLElement>;
+  /**
+   * The placement of the element with respect to its anchor element.
+   * @default 'top'
+   */
+  placement?: OverlayPlacement;
+  /**
+   * Type of overlay that is opened by the trigger.
+   */
+  triggerType?: "dialog" | "menu" | "listbox" | "tree" | "grid";
+  /** Whether the element will be auto focused. */
+  autoFocus?: boolean;
+  /**
+   * The properties passed to the underlying `Collapse` component.
+   */
+  motionProps?: HTMLMotionProps<"div">;
+  /**
+   * Classname or List of classes to change the styles of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <Popover styles={{
+   *    base:"base-classes",
+   *    arrow: "arrow-classes",
+   * }} />
+   * ```
+   */
+  styles?: SlotsToClasses<PopoverSlots>;
+  /** Handler that is called when the overlay should close. */
+  onClose?: () => void;
+}
+
+export type UsePopoverProps = Props & AriaOverlayProps & OverlayTriggerProps & OverlayOptions;
+
+export function usePopover(originalProps: UsePopoverProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, popover.variantKeys);
+
+  const {
+    ref,
+    as,
+    children,
+    triggerRef: triggerRefProp,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    shouldFlip = true,
+    containerPadding = 12,
+    placement: placementProp = "top",
+    triggerType = "dialog",
+    showArrow = false,
+    offset = 7,
+    crossOffset = 0,
+    isDismissable = true,
+    shouldCloseOnBlur = true,
+    isKeyboardDismissDisabled = false,
+    shouldCloseOnInteractOutside,
+    autoFocus = false,
+    motionProps,
+    className,
+    styles,
+    onClose,
+    ...otherProps
+  } = props;
+
+  const Component = as || "div";
+  const popoverId = useId();
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const domTriggerRef = useRef<HTMLElement>(null);
+
+  const triggerRef = triggerRefProp || domTriggerRef;
+
+  // Sync ref with overlayRef from passed ref.
+  useImperativeHandle(ref, () =>
+    // @ts-ignore
+    createDOMRef(overlayRef),
+  );
+
+  const {isFocusVisible, focusProps} = useFocusRing({autoFocus});
+
+  const state = useOverlayTriggerState({
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+  });
+
+  const {triggerProps, overlayProps: overlayTriggerProps} = useOverlayTrigger(
+    {type: triggerType},
+    state,
+    triggerRef,
+  );
+
+  const {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
+    isOpen: isOpen,
+    targetRef: triggerRef,
+    placement: toReactAriaPlacement(placementProp),
+    overlayRef,
+    offset: showArrow ? offset + 3 : offset,
+    crossOffset,
+    shouldFlip,
+    containerPadding,
+  });
+
+  const {overlayProps} = useOverlay(
+    {
+      onClose,
+      isOpen: state.isOpen,
+      isDismissable: isDismissable && state.isOpen,
+      shouldCloseOnBlur,
+      isKeyboardDismissDisabled,
+      shouldCloseOnInteractOutside,
+    },
+    overlayRef,
+  );
+
+  const {modalProps} = useModal({isDisabled: true});
+
+  const {dialogProps} = useDialog(
+    {
+      role: "dialog",
+    },
+    overlayRef,
+  );
+
+  const handleClose = useCallback(() => {
+    onClose?.();
+    state.close();
+  }, [state, onClose]);
+
+  // control open state from outside
+  useEffect(() => {
+    if (isOpen === undefined) return;
+
+    if (isOpen !== state.isOpen) {
+      isOpen ? state.open() : handleClose();
+    }
+  }, [isOpen, handleClose]);
+
+  const slots = useMemo(
+    () =>
+      popover({
+        ...variantProps,
+        isFocusVisible,
+      }),
+    [...Object.values(variantProps), isFocusVisible],
+  );
+
+  const baseStyles = clsx(styles?.base, className);
+
+  const getPopoverProps: PropGetter = (props = {}, _ref: Ref<any> | null | undefined = null) => ({
+    ref: mergeRefs(_ref, overlayRef),
+    className: slots.base({class: baseStyles}),
+    ...mergeProps(
+      overlayTriggerProps,
+      overlayProps,
+      modalProps,
+      dialogProps,
+      positionProps,
+      focusProps,
+      otherProps,
+      props,
+    ),
+    id: popoverId,
+  });
+
+  const getTriggerProps = useCallback<PropGetter>(
+    (props = {}, _ref: Ref<any> | null | undefined = null) => ({
+      ...mergeProps(triggerProps, props),
+      ref: mergeRefs(_ref, triggerRef),
+      "aria-describedby": isOpen ? popoverId : undefined,
+      onClick: chain(props.onClick, triggerProps.onPress),
+    }),
+    [isOpen, popoverId, triggerProps, triggerRef],
+  );
+
+  const getArrowProps = useCallback<PropGetter>(
+    () => ({
+      className: slots.arrow({class: styles?.arrow}),
+      "data-placement": getArrowPlacement(placement, placementProp),
+      ...arrowProps,
+    }),
+    [arrowProps, placement, placementProp, slots, styles],
+  );
+
+  return {
+    Component,
+    children,
+    styles,
+    showArrow,
+    placement: placementProp,
+    isOpen: state.isOpen,
+    onClose: handleClose,
+    disableAnimation: originalProps.disableAnimation,
+    motionProps,
+    getPopoverProps,
+    getTriggerProps,
+    getArrowProps,
+  };
+}
+
+export type UsePopoverReturn = ReturnType<typeof usePopover>;

packages/components/popover/stories/popover.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {popover} from "@nextui-org/theme";
+import {Button} from "@nextui-org/button";
+
+import {Popover, PopoverTrigger, PopoverContent, PopoverProps} from "../src";
+
+export default {
+  title: "Components/Popover",
+  component: Popover,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
+      },
+    },
+    color: {
+      control: {
+        type: "select",
+        options: ["neutral", "foreground", "primary", "secondary", "success", "warning", "danger"],
+      },
+    },
+    radius: {
+      control: {
+        type: "select",
+        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
+      },
+    },
+    placement: {
+      control: {
+        type: "select",
+        options: [
+          "top",
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "left-start",
+          "left-end",
+          "right-start",
+          "right-end",
+        ],
+      },
+    },
+    offset: {
+      control: {
+        type: "number",
+      },
+    },
+    defaultOpen: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    showArrow: {
+      control: {
+        type: "boolean",
+      },
+    },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
+    children: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Popover>;
+
+const defaultProps = {
+  ...popover.defaultVariants,
+};
+
+const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
+  return (
+    <Popover {...args}>
+      <PopoverTrigger>
+        <Button>Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-xs">This is a content of the popover</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
+  showArrow: true,
+};

packages/components/popover/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    }
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/tooltip/package.json

@@ -39,11 +39,10 @@
   "dependencies": {
     "@nextui-org/dom-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/framer-transitions": "workspace:*",
-    "@react-aria/focus": "^3.11.0",
     "@react-aria/overlays": "^3.13.0",
     "@react-aria/tooltip": "^3.4.0",
     "@react-stately/tooltip": "^3.3.0",

packages/components/tooltip/src/index.ts

@@ -2,7 +2,7 @@ import Tooltip from "./tooltip";
 
 // export types
 export type {TooltipProps} from "./tooltip";
-export type {TooltipPlacement} from "./types";
+export type {OverlayPlacement as TooltipPlacement} from "@nextui-org/aria-utils";
 
 // export hooks
 export {useTooltip} from "./use-tooltip";

packages/components/tooltip/src/tooltip-transition.ts

@@ -1,33 +0,0 @@
-import {Variants} from "framer-motion";
-import {TRANSITION_EASINGS} from "@nextui-org/framer-transitions";
-
-export const scale: Variants = {
-  exit: {
-    scale: 0.6,
-    opacity: 0,
-    transition: {
-      opacity: {
-        duration: 0.15,
-        easings: "easeInOut",
-      },
-      scale: {
-        duration: 0.2,
-        easings: "easeInOut",
-      },
-    },
-  },
-  enter: {
-    scale: 1,
-    opacity: 1,
-    transition: {
-      opacity: {
-        easings: "easeOut",
-        duration: 0.2,
-      },
-      scale: {
-        duration: 0.3,
-        ease: TRANSITION_EASINGS.softSpring,
-      },
-    },
-  },
-};

packages/components/tooltip/src/tooltip.tsx

@@ -2,12 +2,12 @@ import {forwardRef} from "@nextui-org/system";
 import {useMemo} from "react";
 import {OverlayContainer} from "@react-aria/overlays";
 import {AnimatePresence, motion} from "framer-motion";
+import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
 import {warn} from "@nextui-org/shared-utils";
 import {Children, cloneElement} from "react";
+import {getTransformOrigins} from "@nextui-org/aria-utils";
 
 import {UseTooltipProps, useTooltip} from "./use-tooltip";
-import {scale} from "./tooltip-transition";
-import {getOrigins} from "./utils";
 
 export interface TooltipProps extends Omit<UseTooltipProps, "ref"> {}
 
@@ -61,9 +61,9 @@ const Tooltip = forwardRef<TooltipProps, "div">((props, ref) => {
           exit="exit"
           initial="exit"
           style={{
-            ...getOrigins(placement),
+            ...getTransformOrigins(placement),
           }}
-          variants={scale}
+          variants={TRANSITION_VARIANTS.scaleSpring}
           {...motionProps}
         >
           <Component className={className}>

packages/components/tooltip/src/types.ts

@@ -1,13 +0,0 @@
-export type TooltipPlacement =
-  | "top"
-  | "bottom"
-  | "right"
-  | "left"
-  | "top-start"
-  | "top-end"
-  | "bottom-start"
-  | "bottom-end"
-  | "left-start"
-  | "left-end"
-  | "right-start"
-  | "right-end";

packages/components/tooltip/src/use-tooltip.ts

@@ -1,8 +1,8 @@
-import type {TooltipVariantProps, SlotsToClasses, TooltipSlots} from "@nextui-org/theme";
+import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-org/theme";
 import type {AriaTooltipProps} from "@react-types/tooltip";
 import type {OverlayTriggerProps} from "@react-types/overlays";
 import type {HTMLMotionProps} from "framer-motion";
-import type {TooltipPlacement} from "./types";
+import type {OverlayOptions} from "@nextui-org/aria-utils";
 
 import {ReactNode, Ref, useEffect, useId, useImperativeHandle} from "react";
 import {useTooltipTriggerState} from "@react-stately/tooltip";
@@ -10,18 +10,13 @@ import {mergeProps} from "@react-aria/utils";
 import {useTooltip as useReactAriaTooltip, useTooltipTrigger} from "@react-aria/tooltip";
 import {useOverlayPosition, useOverlay, AriaOverlayProps} from "@react-aria/overlays";
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
-import {tooltip} from "@nextui-org/theme";
+import {popover} from "@nextui-org/theme";
 import {ReactRef, mergeRefs, clsx} from "@nextui-org/shared-utils";
 import {createDOMRef} from "@nextui-org/dom-utils";
 import {useMemo, useRef, useCallback} from "react";
+import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils";
 
-import {toReactAriaPlacement, getArrowPlacement} from "./utils";
-
-export interface UseTooltipProps
-  extends HTMLNextUIProps<"div", TooltipVariantProps>,
-    AriaTooltipProps,
-    AriaOverlayProps,
-    OverlayTriggerProps {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
@@ -38,11 +33,6 @@ export interface UseTooltipProps
    * Whether the tooltip should be disabled, independent from the trigger.
    */
   isDisabled?: boolean;
-  /**
-   * Whether the tooltip should have an arrow.
-   * @default false
-   */
-  showArrow?: boolean;
   /**
    * The delay time for the tooltip to show up.
    * @default 0
@@ -53,39 +43,10 @@ export interface UseTooltipProps
    * @default 0
    */
   closeDelay?: number;
-  /**
-   * The additional offset applied along the main axis between the element and its
-   * anchor element.
-   * @default 7 (px) - if `showArrow` is true the default value is 10 (px)
-   */
-  offset?: number;
-  /**
-   * The additional offset applied along the cross axis between the element and its
-   * anchor element.
-   * @default 0
-   */
-  crossOffset?: number;
-  /**
-   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when
-   * there is insufficient room for it to render completely.
-   * @default true
-   */
-  shouldFlip?: boolean;
   /**
    * By default, opens for both focus and hover. Can be made to open only for focus.
    */
   trigger?: "focus";
-  /**
-   * The placement of the element with respect to its anchor element.
-   * @default 'top'
-   */
-  placement?: TooltipPlacement;
-  /**
-   * The placement padding that should be applied between the element and its
-   * surrounding container.
-   * @default 12
-   */
-  containerPadding?: number;
   /**
    * The properties passed to the underlying `Collapse` component.
    */
@@ -102,13 +63,18 @@ export interface UseTooltipProps
    * }} />
    * ```
    */
-  styles?: SlotsToClasses<TooltipSlots>;
-  /** Handler that is called when the overlay should close. */
-  onClose?: () => void;
+  styles?: SlotsToClasses<PopoverSlots>;
 }
 
+export type UseTooltipProps = Props &
+  AriaTooltipProps &
+  AriaOverlayProps &
+  OverlayTriggerProps &
+  OverlayOptions &
+  PopoverVariantProps;
+
 export function useTooltip(originalProps: UseTooltipProps) {
-  const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
+  const [props, variantProps] = mapPropsVariants(originalProps, popover.variantKeys);
 
   const {
     ref,
@@ -193,11 +159,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
     state,
   );
 
-  const {
-    overlayProps: positionProps,
-    arrowProps,
-    placement,
-  } = useOverlayPosition({
+  const {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
     isOpen: isOpen,
     targetRef: triggerRef,
     placement: toReactAriaPlacement(placementProp),
@@ -222,7 +184,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
 
   const slots = useMemo(
     () =>
-      tooltip({
+      popover({
         ...variantProps,
       }),
     [...Object.values(variantProps)],
@@ -266,7 +228,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
       "data-placement": getArrowPlacement(placement, placementProp),
       ...arrowProps,
     }),
-    [arrowProps, placement, slots, styles],
+    [arrowProps, placement, placementProp, slots, styles],
   );
 
   return {

packages/components/tooltip/stories/tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {ComponentStory, ComponentMeta} from "@storybook/react";
-import {ButtonVariantProps, tooltip} from "@nextui-org/theme";
+import {ButtonVariantProps, popover} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 
 import {Tooltip, TooltipProps} from "../src";
@@ -87,7 +87,7 @@ export default {
 } as ComponentMeta<typeof Tooltip>;
 
 const defaultProps = {
-  ...tooltip.defaultVariants,
+  ...popover.defaultVariants,
   placement: "top",
   delay: 0,
   offset: 7,

packages/core/system/package.json

@@ -50,6 +50,7 @@
     ]
   },
   "dependencies": {
-    "@react-aria/ssr": "^3.5.0"
+    "@react-aria/ssr": "^3.5.0",
+    "@react-aria/overlays": "^3.13.0"
   }
 }

packages/core/system/src/provider.tsx

@@ -1,3 +1,14 @@
 import {SSRProvider} from "@react-aria/ssr";
+import {OverlayProvider} from "@react-aria/overlays";
 
-export const NextUIProvider = SSRProvider;
+export interface NextUIProviderProps {
+  children: React.ReactNode;
+}
+
+export const NextUIProvider: React.FC<NextUIProviderProps> = ({children}) => {
+  return (
+    <SSRProvider>
+      <OverlayProvider>{children}</OverlayProvider>
+    </SSRProvider>
+  );
+};

packages/core/theme/src/components/index.ts

@@ -8,7 +8,7 @@ export * from "./button-group";
 export * from "./drip";
 export * from "./spinner";
 export * from "./code";
-export * from "./tooltip";
+export * from "./popover";
 export * from "./snippet";
 export * from "./chip";
 export * from "./badge";

packages/core/theme/src/components/popover.ts

@@ -2,22 +2,22 @@ import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "tailwind-variants";
 
-import {colorVariants} from "../utils";
+import {colorVariants, ringClasses} from "../utils";
 /**
- * Tooltip wrapper **Tailwind Variants** component
+ * Popover wrapper **Tailwind Variants** component
  *
- * const { base, arrow } = tooltip({...})
+ * const { base, arrow } = popover({...})
  *
  * @example
  * <div>
  *  <button>your trigger</button>
- *  <div role="tooltip" className={base()}>
- *    // tooltip content
+ *  <div className={base()}>
+ *    // popover content
  *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
  *  </div>
  * </div>
  */
-const tooltip = tv({
+const popover = tv({
   slots: {
     base: [
       "z-10",
@@ -99,6 +99,11 @@ const tooltip = tv({
       xl: {base: "rounded-xl"},
       full: {base: "rounded-full"},
     },
+    isFocusVisible: {
+      true: {
+        base: [...ringClasses],
+      },
+    },
     disableAnimation: {
       true: {base: "animate-none"},
     },
@@ -294,7 +299,7 @@ const tooltip = tv({
   ],
 });
 
-export type TooltipVariantProps = VariantProps<typeof tooltip>;
-export type TooltipSlots = keyof ReturnType<typeof tooltip>;
+export type PopoverVariantProps = VariantProps<typeof popover>;
+export type PopoverSlots = keyof ReturnType<typeof popover>;
 
-export {tooltip};
+export {popover};

packages/storybook/.storybook/preview.js

@@ -1,13 +1,16 @@
 import React from "react";
 import {themes} from "@storybook/theming";
+import {NextUIProvider} from "@nextui-org/react";
 import Style from "./style";
 
 export const decorators = [
   (Story) => (
-    <div className="bg-dark">
-      <Style />
-      <Story />
-    </div>
+    <NextUIProvider>
+      <div className="bg-dark">
+        <Style />
+        <Story />
+      </div>
+    </NextUIProvider>
   ),
 ];
 

packages/storybook/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@nextui-org/theme": "workspace:*",
+    "@nextui-org/react": "workspace:*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/utilities/aria-utils/package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@react-types/shared": "^3.17.0",
+    "@react-types/overlays": "^3.7.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0"
   },

packages/utilities/aria-utils/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./collections";
 export * from "./utils";
 export * from "./type-utils";
+export * from "./overlays";

packages/utilities/aria-utils/src/overlays/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./utils";

packages/utilities/aria-utils/src/overlays/types.ts

@@ -0,0 +1,52 @@
+export type OverlayPlacement =
+  | "top"
+  | "bottom"
+  | "right"
+  | "left"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "left-start"
+  | "left-end"
+  | "right-start"
+  | "right-end";
+
+export interface OverlayOptions {
+  /**
+   * Whether the element should render an arrow.
+   * @default false
+   */
+  showArrow?: boolean;
+  /**
+   * The additional offset applied along the main axis between the element and its
+   * anchor element.
+   * @default 7 (px) - if `showArrow` is true the default value is 10 (px)
+   */
+  offset?: number;
+  /**
+   * The additional offset applied along the cross axis between the element and its
+   * anchor element.
+   * @default 0
+   */
+  crossOffset?: number;
+  /**
+   * Whether the element should flip its orientation (e.g. top to bottom or left to right) when
+   * there is insufficient room for it to render completely.
+   * @default true
+   */
+  shouldFlip?: boolean;
+  /**
+   * The placement of the element with respect to its anchor element.
+   * @default 'top'
+   */
+  placement?: OverlayPlacement;
+  /**
+   * The placement padding that should be applied between the element and its
+   * surrounding container.
+   * @default 12
+   */
+  containerPadding?: number;
+  /** Handler that is called when the overlay should close. */
+  onClose?: () => void;
+}

packages/utilities/aria-utils/src/overlays/utils.ts

@@ -1,10 +1,10 @@
-import type {TooltipPlacement} from "./types";
+import type {OverlayPlacement} from "./types";
 
 import {Placement, PlacementAxis} from "@react-types/overlays";
 
-export const getOrigins = (placement: TooltipPlacement) => {
+export const getTransformOrigins = (placement: OverlayPlacement) => {
   const origins: Record<
-    TooltipPlacement,
+    OverlayPlacement,
     {
       originX?: number;
       originY?: number;
@@ -59,8 +59,8 @@ export const getOrigins = (placement: TooltipPlacement) => {
   return origins?.[placement] || {};
 };
 
-export const toReactAriaPlacement = (placement: TooltipPlacement) => {
-  const mapPositions: Record<TooltipPlacement, Placement> = {
+export const toReactAriaPlacement = (placement: OverlayPlacement) => {
+  const mapPositions: Record<OverlayPlacement, Placement> = {
     top: "top",
     bottom: "bottom",
     left: "left",
@@ -78,7 +78,7 @@ export const toReactAriaPlacement = (placement: TooltipPlacement) => {
   return mapPositions[placement];
 };
 
-export const getArrowPlacement = (dynamicPlacement: PlacementAxis, placement: TooltipPlacement) => {
+export const getArrowPlacement = (dynamicPlacement: PlacementAxis, placement: OverlayPlacement) => {
   if (placement.includes("-")) {
     const [, position] = placement.split("-");
 

packages/utilities/framer-transitions/src/transition-utils.ts

@@ -46,6 +46,36 @@ export const TRANSITION_EASINGS = {
 } as const;
 
 export const TRANSITION_VARIANTS = {
+  scaleSpring: {
+    enter: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        opacity: {
+          easings: "easeOut",
+          duration: 0.2,
+        },
+        scale: {
+          duration: 0.3,
+          ease: TRANSITION_EASINGS.softSpring,
+        },
+      },
+    },
+    exit: {
+      scale: 0.6,
+      opacity: 0,
+      transition: {
+        opacity: {
+          duration: 0.15,
+          easings: "easeInOut",
+        },
+        scale: {
+          duration: 0.2,
+          easings: "easeInOut",
+        },
+      },
+    },
+  },
   scale: {
     enter: {scale: 1},
     exit: {scale: 0.95},

pnpm-lock.yaml

@@ -937,6 +937,61 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
 
+  packages/components/popover:
+    dependencies:
+      '@nextui-org/aria-utils':
+        specifier: workspace:*
+        version: link:../../utilities/aria-utils
+      '@nextui-org/dom-utils':
+        specifier: workspace:*
+        version: link:../../utilities/dom-utils
+      '@nextui-org/framer-transitions':
+        specifier: workspace:*
+        version: link:../../utilities/framer-transitions
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      '@react-aria/dialog':
+        specifier: ^3.5.1
+        version: 3.5.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/focus':
+        specifier: ^3.11.0
+        version: 3.11.0(react@18.2.0)
+      '@react-aria/interactions':
+        specifier: ^3.14.0
+        version: 3.14.0(react@18.2.0)
+      '@react-aria/overlays':
+        specifier: ^3.13.0
+        version: 3.13.0(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/utils':
+        specifier: ^3.15.0
+        version: 3.15.0(react@18.2.0)
+      '@react-stately/overlays':
+        specifier: ^3.5.0
+        version: 3.5.0(react@18.2.0)
+      framer-motion:
+        specifier: ^10.6.0
+        version: 10.6.0(react-dom@18.2.0)(react@18.2.0)
+    devDependencies:
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
+      '@react-types/overlays':
+        specifier: ^3.7.0
+        version: 3.7.0(react@18.2.0)
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+
   packages/components/progress:
     dependencies:
       '@nextui-org/dom-utils':
@@ -1127,15 +1182,15 @@ importers:
 
   packages/components/tooltip:
     dependencies:
+      '@nextui-org/aria-utils':
+        specifier: workspace:*
+        version: link:../../utilities/aria-utils
       '@nextui-org/dom-utils':
         specifier: workspace:*
         version: link:../../utilities/dom-utils
       '@nextui-org/framer-transitions':
         specifier: workspace:*
         version: link:../../utilities/framer-transitions
-      '@nextui-org/react-utils':
-        specifier: workspace:*
-        version: link:../../utilities/react-utils
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
@@ -1145,9 +1200,6 @@ importers:
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../../core/theme
-      '@react-aria/focus':
-        specifier: ^3.11.0
-        version: 3.11.0(react@18.2.0)
       '@react-aria/interactions':
         specifier: ^3.14.0
         version: 3.14.0(react@18.2.0)
@@ -1292,6 +1344,9 @@ importers:
 
   packages/core/system:
     dependencies:
+      '@react-aria/overlays':
+        specifier: ^3.13.0
+        version: 3.13.0(react-dom@18.2.0)(react@18.2.0)
       '@react-aria/ssr':
         specifier: ^3.5.0
         version: 3.5.0(react@18.2.0)
@@ -1524,6 +1579,9 @@ importers:
 
   packages/storybook:
     dependencies:
+      '@nextui-org/react':
+        specifier: workspace:*
+        version: link:../core/react
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../core/theme
@@ -1616,6 +1674,9 @@ importers:
         specifier: ^3.6.0
         version: 3.6.0(react@18.2.0)
     devDependencies:
+      '@react-types/overlays':
+        specifier: ^3.7.0
+        version: 3.7.0(react@18.2.0)
       '@react-types/shared':
         specifier: ^3.17.0
         version: 3.17.0(react@18.2.0)
@@ -4182,6 +4243,12 @@ packages:
       '@swc/helpers': 0.4.14
     dev: false
 
+  /@internationalized/date@3.2.0:
+    resolution: {integrity: sha512-VDMHN1m33L4eqPs5BaihzgQJXyaORbMoHOtrapFxx179J8ucY5CRIHYsq5RRLKPHZWgjNfa5v6amWWDkkMFywA==}
+    dependencies:
+      '@swc/helpers': 0.4.14
+    dev: false
+
   /@internationalized/message@3.1.0:
     resolution: {integrity: sha512-Oo5m70FcBdADf7G8NkUffVSfuCdeAYVfsvNjZDi9ELpjvkc4YNJVTHt/NyTI9K7FgAVoELxiP9YmN0sJ+HNHYQ==}
     dependencies:
@@ -5781,14 +5848,44 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/dialog@3.5.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-nvBIO7GbRSoLPtbS38wCuCHXEbRUIAhD87XKGsFslsmK8csZgJiJa8ZQQNknfvNcEBRIYzNRz2XMPJmnN4H1og==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/focus': 3.12.0(react@18.2.0)
+      '@react-aria/overlays': 3.14.0(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-stately/overlays': 3.5.1(react@18.2.0)
+      '@react-types/dialog': 3.5.1(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+    transitivePeerDependencies:
+      - react-dom
+    dev: false
+
   /@react-aria/focus@3.11.0(react@18.2.0):
     resolution: {integrity: sha512-yPuWs9bAR9CMfIwyOPm2oXLPF19gNkUqW+ozSPhWbLMTEa8Ma09eHW1br4xbN+4ONOm/dCJsIkxTNPUkiLdQoA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/interactions': 3.14.0(react@18.2.0)
-      '@react-aria/utils': 3.15.0(react@18.2.0)
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-aria/interactions': 3.15.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      clsx: 1.2.1
+      react: 18.2.0
+    dev: false
+
+  /@react-aria/focus@3.12.0(react@18.2.0):
+    resolution: {integrity: sha512-nY6/2lpXzLep6dzQEESoowiSqNcy7DFWuRD/qHj9uKcQwWpYH/rqBrHVS/RNvL6Cz/fBA7L/4AzByJ6pTBtoeA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/interactions': 3.15.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       '@swc/helpers': 0.4.14
       clsx: 1.2.1
       react: 18.2.0
@@ -5810,6 +5907,22 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/i18n@3.7.1(react@18.2.0):
+    resolution: {integrity: sha512-2fu1cv8yD3V+rlhOqstTdGAubadoMFuPE7lA1FfYdaJNxXa09iWqvpipUPlxYJrahW0eazkesOPDKFwOEMF1iA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@internationalized/date': 3.2.0
+      '@internationalized/message': 3.1.0
+      '@internationalized/number': 3.2.0
+      '@internationalized/string': 3.1.0
+      '@react-aria/ssr': 3.6.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+    dev: false
+
   /@react-aria/interactions@3.14.0(react@18.2.0):
     resolution: {integrity: sha512-e1Tkr0UTuYFpV21PJrXy7jEY542Vl+C2Fo70oukZ1fN+wtfQkzodsTIzyepXb7kVMGmC34wDisMJUrksVkfY2w==}
     peerDependencies:
@@ -5820,6 +5933,18 @@ packages:
       '@swc/helpers': 0.4.14
       react: 18.2.0
 
+  /@react-aria/interactions@3.15.0(react@18.2.0):
+    resolution: {integrity: sha512-8br5uatPDISEWMINKGs7RhNPtqLhRsgwQsooaH7Jgxjs0LBlylODa8l7D3NA1uzVzlvfnZm/t2YN/y8ieRSDcQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/ssr': 3.6.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+    dev: false
+
   /@react-aria/label@3.5.0(react@18.2.0):
     resolution: {integrity: sha512-sNiPYiFg06s1zGuifEUeUqRiYje0lfHem+GIUh0Y5ZxfpqIyxEmyV9Aw+C7TTjjo8BAG4NZ4bR7iF9ujf9QvKQ==}
     peerDependencies:
@@ -5852,16 +5977,37 @@ packages:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/focus': 3.11.0(react@18.2.0)
-      '@react-aria/i18n': 3.7.0(react@18.2.0)
-      '@react-aria/interactions': 3.14.0(react@18.2.0)
-      '@react-aria/ssr': 3.5.0(react@18.2.0)
-      '@react-aria/utils': 3.15.0(react@18.2.0)
-      '@react-aria/visually-hidden': 3.7.0(react@18.2.0)
-      '@react-stately/overlays': 3.5.0(react@18.2.0)
-      '@react-types/button': 3.7.1(react@18.2.0)
-      '@react-types/overlays': 3.7.0(react@18.2.0)
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-aria/focus': 3.12.0(react@18.2.0)
+      '@react-aria/i18n': 3.7.1(react@18.2.0)
+      '@react-aria/interactions': 3.15.0(react@18.2.0)
+      '@react-aria/ssr': 3.6.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-aria/visually-hidden': 3.8.0(react@18.2.0)
+      '@react-stately/overlays': 3.5.1(react@18.2.0)
+      '@react-types/button': 3.7.2(react@18.2.0)
+      '@react-types/overlays': 3.7.1(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@react-aria/overlays@3.14.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lt4vOj44ho0LpmpaHwQ4VgX7eNfKXig9VD7cvE9u7uyECG51jqt9go19s4+/O+otX7pPrhdYlEB2FxLFJocxfw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/focus': 3.12.0(react@18.2.0)
+      '@react-aria/i18n': 3.7.1(react@18.2.0)
+      '@react-aria/interactions': 3.15.0(react@18.2.0)
+      '@react-aria/ssr': 3.6.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-aria/visually-hidden': 3.8.0(react@18.2.0)
+      '@react-stately/overlays': 3.5.1(react@18.2.0)
+      '@react-types/button': 3.7.2(react@18.2.0)
+      '@react-types/overlays': 3.7.1(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       '@swc/helpers': 0.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -5886,7 +6032,7 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/focus': 3.11.0(react@18.2.0)
+      '@react-aria/focus': 3.12.0(react@18.2.0)
       '@react-aria/i18n': 3.7.0(react@18.2.0)
       '@react-aria/interactions': 3.14.0(react@18.2.0)
       '@react-aria/label': 3.5.0(react@18.2.0)
@@ -5903,7 +6049,7 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/focus': 3.11.0(react@18.2.0)
+      '@react-aria/focus': 3.12.0(react@18.2.0)
       '@react-aria/i18n': 3.7.0(react@18.2.0)
       '@react-aria/interactions': 3.14.0(react@18.2.0)
       '@react-aria/utils': 3.15.0(react@18.2.0)
@@ -5922,6 +6068,15 @@ packages:
       '@swc/helpers': 0.4.14
       react: 18.2.0
 
+  /@react-aria/ssr@3.6.0(react@18.2.0):
+    resolution: {integrity: sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+    dev: false
+
   /@react-aria/switch@3.4.0(react@18.2.0):
     resolution: {integrity: sha512-FWbjqNcY+fAjRNXVQTvOx93udhaySgXLsMNLRAVUcFm45FqTaxAhHhNGtRnVhDvzHTJY/Y+kpcGzCcW2rXzPxg==}
     peerDependencies:
@@ -5939,7 +6094,7 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/focus': 3.11.0(react@18.2.0)
+      '@react-aria/focus': 3.12.0(react@18.2.0)
       '@react-aria/interactions': 3.14.0(react@18.2.0)
       '@react-aria/utils': 3.15.0(react@18.2.0)
       '@react-stately/toggle': 3.5.0(react@18.2.0)
@@ -5955,7 +6110,7 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-aria/focus': 3.11.0(react@18.2.0)
+      '@react-aria/focus': 3.12.0(react@18.2.0)
       '@react-aria/interactions': 3.14.0(react@18.2.0)
       '@react-aria/utils': 3.15.0(react@18.2.0)
       '@react-stately/tooltip': 3.3.0(react@18.2.0)
@@ -5977,6 +6132,19 @@ packages:
       clsx: 1.2.1
       react: 18.2.0
 
+  /@react-aria/utils@3.16.0(react@18.2.0):
+    resolution: {integrity: sha512-BumpgENDlXuoRPQm1OfVUYRcxY9vwuXw1AmUpwF61v55gAZT3LvJWsfF8jgfQNzLJr5jtr7xvUx7pXuEyFpJMA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/ssr': 3.6.0(react@18.2.0)
+      '@react-stately/utils': 3.6.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      clsx: 1.2.1
+      react: 18.2.0
+    dev: false
+
   /@react-aria/visually-hidden@3.7.0(react@18.2.0):
     resolution: {integrity: sha512-v/0ujJ67H6LjwY8J7mIGPVB1K8suBArLV+w8UGdX/wFXRL7H4r2fiqlrwAElWSmNbhDQl5BDm/Zh/ub9jB9yzA==}
     peerDependencies:
@@ -5990,6 +6158,19 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/visually-hidden@3.8.0(react@18.2.0):
+    resolution: {integrity: sha512-Ox7VcO8vfdA1rCHPcUuP9DWfCI9bNFVlvN/u66AfjwBLH40MnGGdob5hZswQnbxOY4e0kwkMQDmZwNPYzBQgsg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/interactions': 3.15.0(react@18.2.0)
+      '@react-aria/utils': 3.16.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      clsx: 1.2.1
+      react: 18.2.0
+    dev: false
+
   /@react-bootstrap/babel-preset@2.1.0:
     resolution: {integrity: sha512-ICZwkMZhEnPcx2HtRMf/18skbJg7GxaF1lBn95arYXDAbJhmlTf7XyOAlB+qTKmRCk+8oRLLtz6sWQuKd8HXiQ==}
     dependencies:
@@ -6061,6 +6242,17 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-stately/overlays@3.5.1(react@18.2.0):
+    resolution: {integrity: sha512-lDKqqpdaIQdJb8DS4+tT7p0TLyCeaUaFpEtWZNjyv1/nguoqYtSeRwnyPR4p/YM4AW7SJspNiTJSLQxkTMIa8w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-stately/utils': 3.6.0(react@18.2.0)
+      '@react-types/overlays': 3.7.1(react@18.2.0)
+      '@swc/helpers': 0.4.14
+      react: 18.2.0
+    dev: false
+
   /@react-stately/radio@3.7.0(react@18.2.0):
     resolution: {integrity: sha512-TKyR6RfX1qZRPAxVWIKMTt2s3J+IlxFZHykiEl85gHBmABSWW4JO4RjkgcmbaAGLAhu1pJU8ktJOyi+MyndpHA==}
     peerDependencies:
@@ -6092,7 +6284,7 @@ packages:
     dependencies:
       '@react-stately/utils': 3.6.0(react@18.2.0)
       '@react-types/checkbox': 3.4.2(react@18.2.0)
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       '@swc/helpers': 0.4.14
       react: 18.2.0
     dev: false
@@ -6146,6 +6338,15 @@ packages:
       '@react-types/shared': 3.17.0(react@18.2.0)
       react: 18.2.0
 
+  /@react-types/button@3.7.2(react@18.2.0):
+    resolution: {integrity: sha512-P7L+r+k4yVrvsfEWx3wlzbb+G7c9XNWzxEBfy6WX9HnKb/J5bo4sP5Zi8/TFVaKTlaG60wmVhdr+8KWSjL0GuQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@react-types/checkbox@3.4.2(react@18.2.0):
     resolution: {integrity: sha512-/NWFCEQLvVgo25afPt2jv4syxYvZeY/D/n2Y92IGtoNV4akdz4AuQ65+1X+JOhQc/ZbAblWw5fFWUZoQs3CLZg==}
     peerDependencies:
@@ -6154,12 +6355,22 @@ packages:
       '@react-types/shared': 3.17.0(react@18.2.0)
       react: 18.2.0
 
+  /@react-types/dialog@3.5.1(react@18.2.0):
+    resolution: {integrity: sha512-a0eeGIITFuOxY2fIL1WkJT5yWIMIQ+VM4vE5MtS59zV9JynDaiL4uNL4yg08kJZm8oyzxIWwrov4gAbEVVWbDQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-types/overlays': 3.7.1(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@react-types/label@3.7.2(react@18.2.0):
     resolution: {integrity: sha512-UlsIvxQjBMl9WwJw1bYoJMwiPvYwRsSLl2yoeeGfGr6IaYn5T/2kzBhDLwe5cpKrmi4Mehn1rbReFLGITOy8+g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       react: 18.2.0
     dev: false
 
@@ -6180,6 +6391,15 @@ packages:
       '@react-types/shared': 3.17.0(react@18.2.0)
       react: 18.2.0
 
+  /@react-types/overlays@3.7.1(react@18.2.0):
+    resolution: {integrity: sha512-2AwYQkelr4p1uXR1KJIGQEbubOumzM853Hsyup2y/TaMbjvBWOVyzYWSrQURex667JZmpwUb0qjkEH+4z3Q74g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-types/shared': 3.18.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@react-types/progress@3.3.0(react@18.2.0):
     resolution: {integrity: sha512-k4xivWiEYogsROLyNqVDVjl33rm+X9RKNbKQXg5pqjGikaC8T9hmIwE4tJr26XkMIIvQS6duEBCcuQN/U1+dGQ==}
     peerDependencies:
@@ -6202,7 +6422,7 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       react: 18.2.0
     dev: false
 
@@ -6213,13 +6433,21 @@ packages:
     dependencies:
       react: 18.2.0
 
+  /@react-types/shared@3.18.0(react@18.2.0):
+    resolution: {integrity: sha512-WJj7RAPj7NLdR/VzFObgvCju9NMDktWSruSPJ3DrL5qyrrvJoyMW67L4YjNoVp2b7Y+k10E0q4fSMV0PlJoL0w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-types/switch@3.3.0(react@18.2.0):
     resolution: {integrity: sha512-6h+s//PwWf7/WJQOZKT6k1vdOQCcvPmMZW333AqyxtZX8WV8Q0illgcLMYo5qxT3IWsjYNuPIqMCY+tRbSeA2Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
     dependencies:
       '@react-types/checkbox': 3.4.2(react@18.2.0)
-      '@react-types/shared': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.18.0(react@18.2.0)
       react: 18.2.0
     dev: false