@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

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

@@ -0,0 +1,81 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const modal: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "header" | "content" | "modal" | "backdrop" | "closeButton" | "pushElement", {
+    /**
+     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+     */
+    fixedFooter: {
+        true: {
+            modal: {
+                display: "flex";
+                flexDirection: "column";
+                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                overflow: "clip";
+            };
+            content: {
+                flex: "[1]";
+                overflowX: "hidden";
+                overflowY: "auto";
+                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+            };
+            footer: {
+                flex: "[0]";
+            };
+        };
+    };
+    /**
+     * The state of the modal.
+     */
+    status: {
+        initial: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        close: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        open: {
+            backdrop: {
+                bg: "colour.system.backdrop.fill";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        unmounted: {
+            backdrop: {
+                display: "none";
+            };
+            modal: {
+                display: "none";
+            };
+        };
+    };
+    /**
+     * When set to `true`, the modal will act like a static element when open.
+     * This means it will not lock scroll or focus within the modal.
+     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+     */
+    static: {
+        true: {
+            backdrop: {
+                position: "static !important";
+            };
+            modal: {
+                position: "relative";
+            };
+        };
+    };
+}>;

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

@@ -1,3 +1,26 @@
-import { IressModalContextValue, IressModalProviderProps } from './Modal.types';
-export declare const IressModalContext: import('react').Context<IressModalContextValue | undefined>;
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface ModalContextValue {
+    /**
+     * An array of modal IDs that are currently open.
+     */
+    opened: string[];
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Show or hide a modal by ID.
+     */
+    showModal: (id: string, flag?: boolean) => void;
+}
+export interface IressModalProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export declare const ModalContext: import('react').Context<ModalContextValue | undefined>;
 export declare const IressModalProvider: ({ children, container, }: IressModalProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Modal/hooks/useProviderModal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This hook is used to control the modal state through the provider, used for uncontrolled modals.
+ * @param id ID of the modal to control.
+ */
+export declare function useProviderModal(id?: string): {
+    opened: boolean | "" | undefined;
+    container: import('../../../types').FloatingUIContainer | undefined;
+    show: (open?: boolean) => void | "" | undefined;
+};

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

@@ -1,4 +1,5 @@
-export * from './Modal.types';
+export * from './Modal.styles';
 export * from './Modal';
-export * from './ModalProvider';
+export { IressModalProvider } from './ModalProvider';
+export type { IressModalProviderProps } from './ModalProvider';
 export * from './hooks/useModal';

package/dist/src/components/Modal/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Panel/Panel.d.ts

@@ -1,2 +1,15 @@
-import { PanelWithEnums } from './Panel.types';
-export declare const IressPanel: PanelWithEnums;
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressPanelProps extends IressStyledProps {
+    /**
+     * Content to be grouped using a panel.
+     */
+    children?: ReactNode;
+    /**
+     * Setting to true will ignore the border radius set in the theme and set it to zero.
+     *
+     * @deprecated Use `borderRadius="none"` instead.
+     */
+    noBorderRadius?: boolean;
+}
+export declare const IressPanel: ({ className, ...restProps }: IressPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Panel/Panel.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const panel: import('../../styled-system/types').RecipeRuntimeFn<{
+    noBorderRadius: {
+        true: {
+            borderRadius: "radius.000";
+        };
+    };
+}>;

package/dist/src/components/Panel/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Panel.types';
 export * from './Panel';
+export * from './Panel.styles';

package/dist/src/components/Panel/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Panel/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Placeholder/Placeholder.d.ts

@@ -1,2 +1,21 @@
-import { IressPlaceholderProps } from './Placeholder.types';
-export declare const IressPlaceholder: ({ children, className, height, stretch, style, transparent, width, ...restProps }: IressPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressPlaceholderProps extends Omit<IressStyledProps, 'width'> {
+    /**
+     * Description of the placeholder's envisioned contents.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the height of the placeholder.
+     */
+    height?: string | number;
+    /**
+     * Sets the placeholder to be full width if true.
+     */
+    stretch?: boolean;
+    /**
+     * Sets the width of the placeholder.
+     */
+    width?: string | number;
+}
+export declare const IressPlaceholder: ({ children, className, height, stretch, style, width, ...restProps }: IressPlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Placeholder/Placeholder.styles.d.ts

@@ -0,0 +1 @@
+export declare const placeholder: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "line" | "root", import('../../styled-system/types').SlotRecipeVariantRecord<"svg" | "line" | "root">>;

package/dist/src/components/Placeholder/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Placeholder.types';
 export * from './Placeholder';
+export * from './Placeholder.styles';

package/dist/src/components/Placeholder/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Placeholder/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -1,3 +1,21 @@
-import { IressInputPopoverProps } from './InputPopover.types';
-import { PopoverRef } from '../Popover.types';
+import { InputPopoverActivatorProps } from './InputPopoverActivator';
+import { IressPopoverProps } from '../Popover';
+import { PopoverRef } from '../hooks/usePopoverImperativeHandle';
+export interface IressInputPopoverProps extends Omit<IressPopoverProps, 'fluid' | 'matchActivatorWidth' | 'virtualFocus'>, Omit<InputPopoverActivatorProps, 'children'> {
+    /**
+     * Content for an activator element, usually an `IressInput`.
+     */
+    activator: InputPopoverActivatorProps['children'];
+    /**
+     * If true, the first supported is automatically highlighted.
+     * @default true
+     */
+    autoHighlight?: boolean;
+    /**
+     * Describes the type of content contained in the popover.
+     * If `listbox`, it will add the combobox role to the popover activator.
+     * @default listbox
+     */
+    type?: IressPopoverProps['type'];
+}
 export declare const IressInputPopover: import('react').ForwardRefExoticComponent<IressInputPopoverProps & import('react').RefAttributes<PopoverRef>>;

package/dist/src/components/Popover/InputPopover/InputPopoverActivator.d.ts

@@ -1,2 +1,9 @@
-import { InputPopoverActivatorProps } from './InputPopover.types';
-export declare const InputPopoverActivator: ({ children, disabledAutoToggle, minLength, ...restProps }: InputPopoverActivatorProps) => import("react/jsx-runtime").JSX.Element;
+import { PopoverActivatorProps } from '../components/PopoverActivator';
+export interface InputPopoverActivatorProps extends PopoverActivatorProps {
+    /**
+     * Min length of input activator before popover is shown, if input activator has minLength
+     * prop it will use that as a fallback. Defaults to 1 if not provided and not found in activator.
+     */
+    minLength?: number;
+}
+export declare const InputPopoverActivator: ({ children, minLength, ...restProps }: InputPopoverActivatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,91 @@
-import { PopoverWithEnums } from './Popover.types';
-export declare const IressPopover: PopoverWithEnums;
+import { ReactNode } from 'react';
+import { PopoverActivatorProps } from './components/PopoverActivator';
+import { DisplayModes, FloatingUIAligns, FloatingUIContainer, IressStyledProps } from '../../types';
+import { OpenChangeReason } from '@floating-ui/react';
+import { PopoverRef } from './hooks/usePopoverImperativeHandle';
+import { IressCustomiseSlot } from '../../interfaces';
+import { PopoverHookReturn } from './hooks/usePopover';
+export interface IressPopoverProps extends IressStyledProps {
+    /**
+     * Content for an activator element, usually an `IressButton`.
+     */
+    activator: PopoverActivatorProps['children'];
+    /**
+     * Sets the alignment of the popover relative to the activator element.
+     * @default auto
+     */
+    align?: FloatingUIAligns;
+    /**
+     * The content to render within the popover.
+     */
+    children?: ReactNode;
+    /**
+     * The container element to render the popover into.
+     * By default, the popover will render where its parent is rendered.
+     *
+     * **Note:** If the `container` doesn’t exist when the popover is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available. For example, if you reference the parent element of a popover.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Class name of the popover content.
+     * @deprecated Use `contentStyle` instead.
+     */
+    contentClassName?: string;
+    /**
+     * This allows you to customise the content styling specifically, which is the floating element.
+     * It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+     */
+    contentStyle?: IressCustomiseSlot;
+    /**
+     * When set to `true` the popover will be visible by default. Use for uncontrolled popovers.
+     */
+    defaultShow?: boolean;
+    /**
+     * Sets the display mode of popover.
+     * @default overlay
+     */
+    displayMode?: DisplayModes;
+    /**
+     * Popovers can be fluid, meaning they will take up the full width of their container.
+     */
+    fluid?: boolean;
+    /**
+     * Which index to start the focus on when the popover is opened. Only works with `type` listbox and menu.
+     * Note: The index must exist in the list of items, otherwise it will not work.
+     * @default 0
+     */
+    focusStartIndex?: number;
+    /**
+     * Sets the popover to match the width of the activator.
+     * Note: This only works when `displayMode="overlay"`.
+     */
+    matchActivatorWidth?: boolean;
+    /**
+     * Is called when popover is activated.
+     */
+    onActivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    /**
+     * Is called when popover is deactivated.
+     */
+    onDeactivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    /**
+     * Is called when registered popover items are navigated using arrow keys. Only works with `type` listbox and menu.
+     */
+    onNavigate?: (activeIndex: number | null) => void;
+    /**
+     * When set to `true` the modal will be visible. Use for controlled popovers.
+     */
+    show?: boolean;
+    /**
+     * Describes the type of content contained in the popover.
+     */
+    type?: PopoverHookReturn['type'];
+    /**
+     * Whether the focus is virtual (using `aria-activedescendant`).
+     * Use this if you need focus to remain on the reference element (such as an input), but allow arrow keys to navigate items.
+     * Note: This is only applicable when type is set to: `listbox` or `menu`, and only works out of the box with `IressMenu` and its subcomponents.
+     * @default false
+     */
+    virtualFocus?: boolean;
+}
+export declare const IressPopover: import('react').ForwardRefExoticComponent<IressPopoverProps & import('react').RefAttributes<PopoverRef>>;

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

@@ -0,0 +1,27 @@
+export declare const popover: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "activator", {
+    fluid: {
+        true: {
+            root: {
+                display: "block";
+            };
+        };
+    };
+    hasInputActivator: {
+        true: {
+            root: {
+                display: "block";
+            };
+            content: {
+                minWidth: "input.12";
+                maxWidth: "auto";
+            };
+        };
+    };
+    matchActivatorWidth: {
+        true: {
+            content: {
+                maxWidth: "[none]";
+            };
+        };
+    };
+}>;

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { PopoverContextValue } from '../Popover.types';
+import { PopoverHookReturn } from '../hooks/usePopover';
 export declare const NestedPopoverActivator: ({ children, parentPopover, }: PropsWithChildren & {
-    parentPopover?: PopoverContextValue;
+    parentPopover?: PopoverHookReturn;
 }) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -1,2 +1,6 @@
-import { PopoverActivatorProps } from '../Popover.types';
+import { ReactElement } from 'react';
+import { IressUnstyledProps } from '../../../types';
+export interface PopoverActivatorProps extends IressUnstyledProps {
+    children?: ReactElement;
+}
 export declare const PopoverActivator: ({ children, ...restProps }: PopoverActivatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,7 @@
-import { PopoverContentProps } from '../Popover.types';
+import { DisplayModes, FloatingUIContainer, IressStyledProps } from '../../../types';
+export interface PopoverContentProps extends IressStyledProps {
+    container?: FloatingUIContainer;
+    displayMode?: DisplayModes;
+    virtualFocus?: boolean;
+}
 export declare const PopoverContent: (props: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Popover/helpers/composeFloatingProps.d.ts

@@ -1,15 +1,16 @@
-import { default as React } from 'react';
-import { PopoverContextValue } from '../Popover.types';
-import { DisplayModes, IressHTMLAttributes } from '../../../main';
+import { CSSProperties } from 'react';
+import { DisplayModes, IressUnstyledProps } from '../../../types';
+import { PopoverHookReturn } from '../hooks/usePopover';
 /**
  * This adds additional props to the Floating UI floatingProps to better suit the requirements of IressPopover.
  * Some are slight tweaks to the UX to ensure it behaves according to IDS standards, as well as fix some issues found when using Floating UI.
  *
  * See: https://floating-ui.com/docs/useFloating#floatingstyles
  *
- * @param {PopoverContextValue} popover the popover context
+ * @param {PopoverHookReturn} popover the popover context
  * @param {DisplayModes} displayMode how the content is to be displayed, whether inline (static, underneath activator) or overlay (floating, anchored to the activator)
- * @param {React.CSSProperties} style any custom styles for the popover, it will be appended to the Floating UI styles
- * @returns {IressHTMLAttributes} the props to be passed to the floating content
+ * @param {CSSProperties} style any custom styles for the popover, it will be appended to the Floating UI styles
+ * @param {string} customId optional custom ID to override the floating ID - used to prevent ID conflicts
+ * @returns {IressUnstyledProps} the props to be passed to the floating content
  */
-export declare const composePopoverFloatingProps: (popover: PopoverContextValue, displayMode?: DisplayModes, style?: React.CSSProperties) => IressHTMLAttributes;
+export declare const composePopoverFloatingProps: (popover: PopoverHookReturn, displayMode?: DisplayModes, style?: CSSProperties, customId?: string) => IressUnstyledProps;

package/dist/src/components/Popover/helpers/handlePopoverTabKey.d.ts

@@ -1,8 +1,8 @@
-import { PopoverContextValue } from '../Popover.types';
 import { KeyboardEvent } from 'react';
+import { PopoverHookReturn } from '../hooks/usePopover';
 /**
  * This helper function is used to handle the tab key press event when the popover is open, as Floating UI sometimes does not focus on the next element when the user tabs from the popover contents.
- * @param popover {PopoverContextValue} The popover context value, usually retrieved from the usePopover hook.
+ * @param popover {PopoverHookReturn} The popover context value, usually retrieved from the usePopover hook.
  * @param e {KeyboardEvent} The keyboard event object that triggered the tab key press.
  */
-export declare const handlePopoverTabKey: (popover: PopoverContextValue, e: KeyboardEvent) => Promise<void>;
+export declare const handlePopoverTabKey: (popover: PopoverHookReturn, e: KeyboardEvent) => Promise<void>;

package/dist/src/components/Popover/hooks/usePopover.d.ts

@@ -1 +1,120 @@
-export declare const usePopover: () => import('..').PopoverContextValue | undefined;
+import { MutableRefObject } from 'react';
+import { ControlledStateProps } from '../../../hooks/useControlledState';
+import { OpenChangeReason, UseFloatingReturn, useInteractions } from '@floating-ui/react';
+import { FloatingUIAligns } from '../../../types';
+import { PopoverVirtualNode } from './usePopoverItem';
+import { PopoverAriaHookReturn } from './usePopoverAria';
+export interface PopoverHookProps {
+    align?: FloatingUIAligns;
+    autoHighlight?: boolean;
+    component?: ControlledStateProps['component'];
+    defaultShow?: boolean;
+    focusStartIndex?: number;
+    hasInputActivator?: boolean;
+    matchActivatorWidth?: boolean;
+    onActivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    onDeactivated?: (e?: Event, reason?: OpenChangeReason, activeIndex?: number | null) => void;
+    onNavigate?: (activeIndex: number | null) => void;
+    show?: boolean;
+    type?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    virtualFocus?: boolean;
+}
+export interface PopoverHookReturn extends PopoverAriaHookReturn {
+    /**
+     * The index of the currently active item in the popover (ie. which item is currently focused or virtually focused).
+     */
+    activeIndex: number | null;
+    /**
+     * The API returned by the useFloating hook.
+     */
+    api: UseFloatingReturn;
+    /**
+     * A function that returns the truly focusable activator element.
+     * It is normally used to set the focus on the activator when the popover is closed and ensure a relationship between the activator and the popover.
+     */
+    getFocusableActivator: () => HTMLElement | undefined;
+    /**
+     * A function that returns the virtually focused item in the popover.
+     * It is normally used to trigger onClick and onKeyDown events on the item as if it was focused.
+     */
+    getVirtualFocus?: () => PopoverVirtualNode | null;
+    /**
+     * A function that checks whether there is a nested element assuming the role of the popover.
+     * It is used by `IressMenu` to force the popover to a certain role so that the screen reader can navigate it correctly.
+     */
+    hasInnerRole: () => boolean;
+    /**
+     * The interactions returned by the useInteractions hook.
+     * It is used to manage the interactions of the popover activator and content, such as click and dismiss.
+     */
+    interactions: ReturnType<typeof useInteractions>;
+    /**
+     * This function checks whether an element is the same as the activator element.
+     * It is used by components such as `IressButton` to style the activator when the popover is open.
+     */
+    isActiveActivator: (element: HTMLElement | null) => boolean;
+    /**
+     * If controlled, this will return true, meaning the popover is controlled by the parent component and will not change its state on its own.
+     * It is used by components such as `IressRichSelect` to manage the state of the popover using other methods.
+     */
+    isControlled: boolean;
+    /**
+     * If virtually focused, this will return true, meaning the popover is using virtual focus to manage the focus state of the items in the popover.
+     * It is used by components such as `useMenuItem` to check whether it should set the tab index of an item or not.
+     */
+    isVirtualFocus: boolean;
+    /**
+     * The list of items in the popover.
+     * It is used by other components to manage the aria attributes and keyboard navigation of the items.
+     */
+    list: MutableRefObject<(HTMLElement | null)[]>;
+    /**
+     * Set the current active index of the popover items.
+     */
+    setActiveIndex: (newActiveIndex: number | null) => void;
+    /**
+     * This function is used to set the state of the popover without triggering the Floating UI handlers such as focus handling as well as onActivated and onDeactivated.
+     * It is used by `useMenuItem` to close the popover when an item is selected.
+     *
+     * For most cases, you should use the `setShowWithReason` function instead.
+     */
+    setShow: (flag?: boolean) => void;
+    /**
+     * This function is used to set the state of the popover and trigger the Floating UI handlers such as focus handling.
+     * Depending on the reason, it will change the way focus is handled.
+     */
+    setShowWithReason: (flag: boolean, e?: Event, reason?: OpenChangeReason) => void;
+    /**
+     * This function is used to set the state of the popover to have an inner role.
+     * It is used by components such as `IressMenu` to force the popover to a certain role so that the screen reader can navigate it correctly.
+     */
+    setHasInnerRole: (flag: boolean) => void;
+    /**
+     * This function is used to set the virtual focus of the popover.
+     * It is used by components such as `IressRichSelect` with searchable options to manage the focus state of the items in the popover.
+     */
+    setVirtualFocus?: (node: PopoverVirtualNode | null) => void;
+    /**
+     * The state of the popover, whether it is open or closed.
+     */
+    show: boolean;
+    /**
+     * The type of the popover, which is used to determine the role of the popover.
+     * It is used by components such as `IressMenu` to manage the aria attributes and keyboard navigation of the items.
+     */
+    type?: PopoverHookProps['type'];
+}
+/**
+ * This is a wrapper around the useFloating hook from Floating UI specifically for popover components.
+ * - It manages the state of the popover, including whether it is open or closed, and provides a controlled state for the popover.
+ * - It also manages the middleware for the popover, including the size middleware to match the activator width.
+ * - It uses the usePopoverNavigation hook to manage the keyboard navigation of popover items.
+ * - It provides a way to set the active index of the popover items, and to manage the focus state of the popover items.
+ * - It provides a way to set the virtual focus of the popover items, and to manage the focus state of the popover items.
+ * - It provides a way to set the hasInnerRole state, which is used to determine whether the popover has an inner role or not.
+ */
+export declare const usePopover: ({ align, autoHighlight, component, defaultShow, focusStartIndex, hasInputActivator, matchActivatorWidth, onActivated, onDeactivated, onNavigate, show: showProp, type, virtualFocus, }: PopoverHookProps) => PopoverHookReturn;
+/**
+ * This context is used to provide the popover state and API to allow items to be navigatable by keyboard and screen readers.
+ */
+export declare const PopoverContext: import('react').Context<PopoverHookReturn | undefined>;

package/dist/src/components/Popover/hooks/usePopoverActivatorInteractions.d.ts

@@ -1,15 +1,15 @@
-import { HTMLAttributes, KeyboardEvent, FocusEvent } from 'react';
-import { PopoverContextValue } from '../Popover.types';
-import { IressHTMLAttributes } from '../../../main';
+import { KeyboardEvent, FocusEvent } from 'react';
+import { IressUnstyledProps } from '../../../types';
+import { PopoverHookReturn } from './usePopover';
 /**
  * This adds additional props to the activator to handle keyboard interactions with a virtually focused item.
  *
- * @param {PopoverContextValue} popover the popover context
+ * @param {PopoverHookReturn} popover the popover context
  * @param {HTMLAttributes<HTMLElement>} referenceProps the props of the activator, allowing them to be drilled down to the virtual reference
  *
  * @returns {IressHTMLAttributes} the props to be passed to the floating content
  */
-export declare const usePopoverActivatorInteractions: <TElement extends HTMLElement = HTMLElement, TProps extends HTMLAttributes<TElement> = IressHTMLAttributes<TElement>>(popover?: PopoverContextValue, referenceProps?: TProps) => {
-    onBlur: (e: FocusEvent<TElement>) => void;
-    onKeyDown: (e: KeyboardEvent<TElement>) => void;
+export declare const usePopoverActivatorInteractions: <E extends keyof HTMLElementTagNameMap = "div">(popover?: PopoverHookReturn, referenceProps?: Omit<IressUnstyledProps<E>, "value">) => {
+    onBlur: (e: FocusEvent<never>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLElementTagNameMap[E]>) => void;
 };

package/dist/src/components/Popover/hooks/usePopoverAria.d.ts

@@ -1,4 +1,7 @@
-import { PopoverAriaHookReturn } from '../Popover.types';
+export interface PopoverAriaHookReturn {
+    getAriaControls: () => string[];
+    toggleAriaControls: (id: string, addOrRemove?: boolean) => void;
+}
 /**
  * This is a hook that manages the aria controls for the popover, allowing the popover activator to control multiple items.
  * @returns getAriaControls and toggleAriaControls functions

package/dist/src/components/Popover/hooks/usePopoverImperativeHandle.d.ts

@@ -1,4 +1,8 @@
 import { ForwardedRef } from 'react';
-import { PopoverAriaHookReturn, PopoverContextValue, PopoverRef, PopoverStateHookReturn } from '../Popover.types';
-import { UseFloatingReturn } from '@floating-ui/react';
-export declare const usePopoverImperativeHandle: (ref: ForwardedRef<PopoverRef>, api: UseFloatingReturn, aria: PopoverAriaHookReturn, state: PopoverStateHookReturn, context?: PopoverContextValue) => void;
+import { PopoverHookReturn } from './usePopover';
+export interface PopoverRef extends Pick<PopoverHookReturn, 'setShow' | 'show' | 'toggleAriaControls'> {
+    getActivator: () => HTMLElement | null;
+    getFocusableActivator?: () => HTMLElement | undefined;
+    getContent: () => HTMLElement | null;
+}
+export declare const usePopoverImperativeHandle: (ref: ForwardedRef<PopoverRef>, context: PopoverHookReturn) => void;