@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/List/components/ListOption/ListOption.js

@@ -1,15 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import { useHover, usePress, mergeProps, clsx } from "@koobiq/react-core";
+import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
 import { useOption } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import s from "./ListOption.module.css.js";
 const textVariant = utilClasses.typography;
-function ListOption({
-  item,
-  state
-}) {
+const { listItem } = utilClasses;
+function ListOption({ item, state }) {
+  const { href, className, style } = item.props;
   const ref = useRef(null);
   const {
     optionProps,
@@ -19,21 +17,18 @@ function ListOption({
   } = useOption({ key: item.key }, state, ref);
   const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
   const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
-  const Tag = item.props.href ? "a" : "li";
+  const Tag = href ? "a" : "li";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...mergeProps(optionProps, hoverProps, pressProps),
-      className: clsx(
-        s.base,
-        hovered && s.hovered,
-        pressed && s.pressed,
-        selected && s.selected,
-        textVariant["text-normal"],
-        disabled && s.disabled,
-        focusVisible && s.focusVisible
-      ),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      style,
       ref,
+      "data-hovered": hovered,
+      "data-pressed": pressed,
+      "data-disabled": disabled,
+      "data-selected": selected,
       "data-focus-visible": focusVisible,
       children: item.rendered
     }

package/dist/components/List/components/ListSection/ListSection.d.ts

@@ -1,5 +1,6 @@
 import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListSection<T>({ section, state, }: {
+export type ListSectionProps<T> = {
     section: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListSection<T>({ section, state }: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListSection/ListSection.js

@@ -4,10 +4,7 @@ import { useListBoxSection } from "@koobiq/react-primitives";
 import s from "./ListSection.module.css.js";
 import { ListOption } from "../ListOption/ListOption.js";
 import { Typography } from "../../../Typography/Typography.js";
-function ListSection({
-  section,
-  state
-}) {
+function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]

package/dist/components/List/index.d.ts

@@ -1,4 +1,4 @@
 export * from './List';
+export * from './components/ListItemText';
 export * from './types';
-export * from './ListItem';
-export * from './ListSection';
+export { Item as ListItem, Section as ListSection } from '../Collections';

package/dist/components/List/types.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaListBoxProps } from '@koobiq/react-primitives';
+import type { TypographyProps } from '../Typography';
 export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
 export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
 export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
@@ -14,8 +15,11 @@ export type ListBaseProps<T extends object> = {
     label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** The type of selection that is allowed in the collection. */
     selectionMode?: ListPropSelectionMode;
+    /** Ref to the HTML ul-element. */
     ref?: Ref<HTMLElement>;
     /** The contents of the collection. */
     children?: ListPropChildren<T>;
@@ -36,7 +40,14 @@ export type ListBaseProps<T extends object> = {
     onAction?: ListPropOnAction<T>;
     /** How multiple selection should behave in the collection. */
     selectionBehavior?: ListPropSelectionBehavior<T>;
+    /** Whether to autofocus the list or an option. */
+    autoFocus?: boolean | 'first' | 'last';
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: TypographyProps;
+        list?: ComponentPropsWithRef<'div'>;
+    };
 };
 export type ListProps<T extends object> = ListBaseProps<T>;
 export type ListRef = ComponentRef<'ul'>;
-export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;
+export type ListComponentProps = <T extends object>(props: ListProps<T>) => ReactElement | null;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,15 @@
+import { Pressable } from '@koobiq/react-core';
+import { Divider, Item, Section, Header } from '../Collections';
+import { ListItemText } from '../List';
+import type { MenuComponentProps } from './index';
+declare const MenuComponent: MenuComponentProps;
+type CompoundedComponent = typeof MenuComponent & {
+    Item: typeof Item;
+    Header: typeof Header;
+    Section: typeof Section;
+    Divider: typeof Divider;
+    ItemText: typeof ListItemText;
+    Control: typeof Pressable;
+};
+export declare const Menu: CompoundedComponent;
+export {};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
+import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
+import s from "./Menu.module.css.js";
+import { MenuInner } from "./components/MenuInner/MenuInner.js";
+import { Header } from "../Collections/Header.js";
+import { Divider } from "../Collections/Divider.js";
+import { PopoverInner } from "../Popover/Popover.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+function MenuRender(props, ref) {
+  const {
+    placement = "bottom start",
+    "data-testid": testId,
+    control,
+    style,
+    open,
+    anchorRef,
+    className,
+    slotProps,
+    ...otherProps
+  } = props;
+  const state = useMenuTriggerState({ ...props, isOpen: open });
+  const domRef = useDOMRef(ref);
+  const controlRef = useRef(null);
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    {},
+    state,
+    controlRef
+  );
+  const { isDisabled, ...otherMenuTriggerProps } = menuTriggerProps;
+  const popoverProps = mergeProps(
+    {
+      style,
+      state,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      popoverRef: domRef,
+      "data-testid": testId,
+      anchorRef: anchorRef || controlRef,
+      className: clsx(s.popover, className)
+    },
+    slotProps?.popover
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      disabled: isDisabled,
+      ...otherMenuTriggerProps
+    }),
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...otherProps, ...menuProps }) })
+  ] });
+}
+const MenuComponent = forwardRef(MenuRender);
+const Menu = MenuComponent;
+Menu.Item = Item;
+Menu.Section = Section;
+Menu.Header = Header;
+Menu.Divider = Divider;
+Menu.ItemText = ListItemText;
+Menu.Control = Pressable;
+export {
+  Menu
+};

package/dist/components/Menu/Menu.module.css.js

@@ -0,0 +1,8 @@
+const popover = "kbq-menu-popover-e1857c";
+const s = {
+  popover
+};
+export {
+  s as default,
+  popover
+};

package/dist/components/Menu/components/MenuHeader/MenuHeader.d.ts

@@ -0,0 +1,5 @@
+import type { Node } from '@koobiq/react-primitives';
+export type MenuHeaderProps<T> = {
+    item: Node<T>;
+};
+export declare function MenuHeader<T>({ item }: MenuHeaderProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuHeader/MenuHeader.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function MenuHeader({ item }) {
+  const { key, rendered, props } = item;
+  return /* @__PURE__ */ jsx("header", { role: "presentation", ...props, children: rendered }, key);
+}
+export {
+  MenuHeader
+};

package/dist/components/Menu/components/MenuHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuHeader';

package/dist/components/Menu/components/MenuInner/MenuInner.d.ts

@@ -0,0 +1,3 @@
+import type { AriaMenuOptions } from '@koobiq/react-primitives';
+export type MenuInnerProps<T> = AriaMenuOptions<T>;
+export declare function MenuInner<T extends object>(props: MenuInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuInner/MenuInner.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useTreeState, useMenu } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./MenuInner.module.css.js";
+import { MenuSection } from "../MenuSection/MenuSection.js";
+import { Divider } from "../../../Divider/Divider.js";
+import { MenuHeader } from "../MenuHeader/MenuHeader.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+const { list } = utilClasses;
+function MenuInner(props) {
+  const state = useTreeState(props);
+  const ref = useRef(null);
+  const { menuProps } = useMenu(props, state, ref);
+  const multiple = props.selectionMode === "multiple";
+  const renderItems = (treeState) => [...treeState.collection].map((item) => {
+    switch (item.type) {
+      case "header":
+        return /* @__PURE__ */ jsx(MenuHeader, { item }, item.key);
+      case "divider":
+        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+      case "item":
+        return /* @__PURE__ */ jsx(MenuItem, { item, state }, item.key);
+      case "section":
+        return /* @__PURE__ */ jsx(MenuSection, { section: item, state }, item.key);
+      default:
+        return null;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...menuProps,
+      className: clsx(s.base, list),
+      ...multiple && { "aria-multiselectable": true },
+      ref,
+      children: renderItems(state)
+    }
+  );
+}
+export {
+  MenuInner
+};

package/dist/components/Menu/components/MenuInner/MenuInner.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-menuinner-0117f8";
+const divider = "kbq-menuinner-divider-acbe04";
+const s = {
+  base,
+  divider
+};
+export {
+  base,
+  s as default,
+  divider
+};

package/dist/components/Menu/components/MenuInner/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuInner';

package/dist/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,6 @@
+import type { Node, TreeState } from '@koobiq/react-primitives';
+export type MenuItemProps<T> = {
+    item: Node<T>;
+    state: TreeState<T>;
+};
+export declare function MenuItem<T>({ item, state }: MenuItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuItem/MenuItem.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
+import { useMenuItem } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+const { listItem } = utilClasses;
+const textVariant = utilClasses.typography;
+function MenuItem({ item, state }) {
+  const ref = useRef(null);
+  const {
+    menuItemProps,
+    isSelected: selected,
+    isDisabled: disabled,
+    isFocusVisible: focusVisible
+  } = useMenuItem({ key: item.key }, state, ref);
+  const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
+  const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
+  const Tag = item.props.href ? "a" : "li";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...mergeProps(menuItemProps, hoverProps, pressProps),
+      "data-hovered": hovered,
+      "data-pressed": pressed,
+      "data-selected": selected,
+      "data-focus-visible": focusVisible,
+      className: clsx(listItem, textVariant["text-normal"]),
+      ref,
+      children: item.rendered
+    }
+  );
+}
+export {
+  MenuItem
+};

package/dist/components/Menu/components/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuItem';

package/dist/components/Menu/components/MenuSection/MenuSection.d.ts

@@ -0,0 +1,6 @@
+import type { Node, TreeState } from '@koobiq/react-primitives';
+export type MenuSectionProps<T> = {
+    section: Node<T>;
+    state: TreeState<T>;
+};
+export declare function MenuSection<T>({ section, state }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuSection/MenuSection.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useMenuSection } from "@koobiq/react-primitives";
+import s from "./MenuSection.module.css.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+import { Typography } from "../../../Typography/Typography.js";
+function MenuSection({ section, state }) {
+  const { itemProps, headingProps, groupProps } = useMenuSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { ...itemProps, children: [
+    section.rendered && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        display: "block",
+        variant: "caps-compact-strong",
+        color: "contrast-secondary",
+        className: s.heading,
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(MenuItem, { item: node, state }, node.key)) })
+  ] }) });
+}
+export {
+  MenuSection
+};

package/dist/components/Menu/components/MenuSection/MenuSection.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-menusection-6a5530";
+const heading = "kbq-menusection-heading-2be1f1";
+const s = {
+  base,
+  heading
+};
+export {
+  base,
+  s as default,
+  heading
+};

package/dist/components/Menu/components/MenuSection/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuSection';

package/dist/components/Menu/components/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuInner';

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Menu';
+export * from './types';

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,62 @@
+import type { ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
+import type { PopoverInnerProps, PopoverPropPlacement } from '../Popover';
+export type MenuPropControl = (props: ButtonOptions & {
+    ref?: Ref<HTMLButtonElement>;
+}) => ReactElement;
+export type MenuPropChildren<T extends object> = AriaMenuProps<T>['children'];
+export type MenuPropItems<T extends object> = AriaMenuProps<T>['items'];
+export declare const menuPropSelectionMode: readonly ["none", "single", "multiple"];
+export type MenuPropSelectionMode = (typeof menuPropSelectionMode)[number];
+export type MenuPropOnAction<T extends object> = AriaMenuProps<T>['onAction'];
+export type MenuPropSelected<T extends object> = AriaMenuProps<T>['selectedKeys'];
+export type MenuPropSelectionChange<T extends object> = AriaMenuProps<T>['onSelectionChange'];
+export type MenuPropDisabledKeys<T extends object> = AriaMenuProps<T>['disabledKeys'];
+export type MenuPropPlacement = PopoverPropPlacement;
+export type MenuProps<T extends object> = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The contents of the collection. */
+    children?: MenuPropChildren<T>;
+    /** The render function of the control for displaying the modal window. */
+    control?: MenuPropControl;
+    /** Whether the overlay is open by default (controlled). */
+    open?: boolean;
+    /** Whether the overlay is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the overlay's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Item objects in the collection. */
+    items?: MenuPropItems<T>;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: MenuPropSelectionMode;
+    /**
+     * Handler that is called when a user performs an action on an item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: MenuPropOnAction<T>;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: MenuPropSelected<T>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: MenuPropSelectionChange<T>;
+    disabledKeys?: MenuPropDisabledKeys<T>;
+    /** The ref for the element which the popover positions itself with respect to. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**
+     * The placement of the element with respect to its anchor element.
+     * @default bottom start
+     * */
+    placement?: MenuPropPlacement;
+    /** Ref to the popover */
+    ref?: Ref<HTMLDivElement>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverInnerProps;
+    };
+};
+export type MenuComponentProps = <T extends object>(props: MenuProps<T>) => ReactElement | null;
+export type MenuRef = ComponentRef<'div'>;

package/dist/components/Menu/types.js

@@ -0,0 +1,4 @@
+const menuPropSelectionMode = ["none", "single", "multiple"];
+export {
+  menuPropSelectionMode
+};

package/dist/components/Modal/Modal.d.ts

@@ -1,2 +1,10 @@
+import { Dialog } from '../Dialog';
 import type { ModalProps } from './types';
-export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof ModalComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const Modal: CompoundedComponent;
+export {};

package/dist/components/Modal/Modal.js

@@ -7,21 +7,22 @@ import { Transition } from "react-transition-group";
 import s from "./Modal.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const Modal = forwardRef((props, ref) => {
+const ModalComponent = forwardRef((props, ref) => {
   const {
-    hideCloseButton = false,
     size = "medium",
-    disableExitOnEscapeKeyDown,
-    disableExitOnClickOutside,
-    disableFocusManagement,
-    portalContainer,
-    open: openProp,
-    hideBackdrop,
-    onOpenChange,
-    defaultOpen,
-    children,
+    hideCloseButton = false,
     control,
+    children,
     slotProps,
+    defaultOpen,
+    hideBackdrop,
+    onOpenChange,
+    open: openProp,
+    portalContainer,
+    disableFocusManagement,
+    disableExitOnClickOutside,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
     ...other
   } = props;
   const state = useOverlayTriggerState({
@@ -41,6 +42,7 @@ const Modal = forwardRef((props, ref) => {
   const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
     {
       ...props,
+      shouldCloseOnInteractOutside,
       isDismissable: !disableExitOnClickOutside,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
     },
@@ -55,9 +57,9 @@ const Modal = forwardRef((props, ref) => {
   };
   const containerProps = mergeProps(
     {
-      className: clsx(s.base, s[size]),
       ref: containerRef,
-      "data-size": size
+      "data-size": size,
+      className: clsx(s.base, s[size])
     },
     other
   );
@@ -83,10 +85,9 @@ const Modal = forwardRef((props, ref) => {
     },
     slotProps?.modal
   );
-  const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+  const { isDisabled, ...otherTriggerProps } = triggerProps;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     control?.({
-      onClick: onPress,
       disabled: isDisabled,
       ...otherTriggerProps
     }),
@@ -115,7 +116,11 @@ const Modal = forwardRef((props, ref) => {
     )
   ] });
 });
-Modal.displayName = "Modal";
+ModalComponent.displayName = "Modal";
+const Modal = ModalComponent;
+Modal.Header = Dialog.Header;
+Modal.Body = Dialog.Body;
+Modal.Footer = Dialog.Footer;
 export {
   Modal
 };

package/dist/components/Modal/index.d.ts

@@ -1,4 +1,17 @@
 export * from './Modal';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as ModalHeader, DialogContent as ModalContent, DialogFooter as ModalFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Header` instead.
+ */
+export declare const ModalHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Body` instead.
+ */
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Modal.Footer` instead.
+ */
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const ModalHeader = Dialog.Header;
+const ModalContent = Dialog.Body;
+const ModalFooter = Dialog.Footer;
+export {
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+};

package/dist/components/Modal/types.d.ts

@@ -58,6 +58,13 @@ export type ModalProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/Popover/Popover.d.ts

@@ -1,2 +1,12 @@
-import type { PopoverProps } from './types';
-export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+import type { FC } from 'react';
+import { Dialog } from '../Dialog';
+import type { PopoverInnerProps } from './types';
+export declare const PopoverInner: FC<PopoverInnerProps>;
+declare const PopoverComponent: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof PopoverComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const Popover: CompoundedComponent;
+export {};