@muraldevkit/ui-toolkit 4.36.2-dev-vXQi.1 → 4.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { PortalProps } from '../../';
3
3
  import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../../menu/constants';
4
+ type RenderPropFn = ({ closeMenu }: {
5
+ closeMenu: () => void;
6
+ }) => JSX.Element;
4
7
  export interface MrlPopoverProps {
5
8
  /**
6
9
  * Set initial state of menu
@@ -13,7 +16,7 @@ export interface MrlPopoverProps {
13
16
  /** ID of element to associate a label */
14
17
  ariaLabelledBy?: string;
15
18
  /** Children to be rendered within the menu component*/
16
- children: React.ReactNode;
19
+ children: React.ReactNode | RenderPropFn;
17
20
  /** Custom class names for the popover */
18
21
  className?: string;
19
22
  /** Custom position for the menu */
@@ -126,3 +129,4 @@ export declare function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, child
126
129
  export declare namespace MrlPopover {
127
130
  var componentType: string;
128
131
  }
132
+ export {};
@@ -0,0 +1,20 @@
1
+ import * as React from 'react';
2
+ type MrlPopoverContext = {
3
+ /**
4
+ * Close menu is shared in context to allow for closing the popover from a child component
5
+ *
6
+ * @returns {void}
7
+ */
8
+ closeMenu: () => void;
9
+ };
10
+ /**
11
+ * Adds context for the MrlPopover component
12
+ */
13
+ export declare const MrlPopoverContext: React.Context<MrlPopoverContext | undefined>;
14
+ /**
15
+ * Returns the MrlPopoverContext state.
16
+ *
17
+ * @returns The MrlPopoverContext state.
18
+ */
19
+ export declare const useMrlPopoverContext: () => MrlPopoverContext;
20
+ export {};
@@ -0,0 +1,32 @@
1
+ import * as React from 'react';
2
+ import { ActionState } from '../../../menu';
3
+ import { MrlPopoverProps } from '../MrlPopover';
4
+ type UseMrlPopoverEventHandlersOptions = {
5
+ closeMenu: () => void;
6
+ isSubMenu: MrlPopoverProps['isSubMenu'];
7
+ disableFocusTrap: MrlPopoverProps['disableFocusTrap'];
8
+ disableClickToOpen: MrlPopoverProps['disableClickToOpen'];
9
+ hasCloseButton: MrlPopoverProps['hasCloseButton'];
10
+ interactiveElements: HTMLElement[];
11
+ menuRef: React.RefObject<HTMLDivElement>;
12
+ state: ActionState;
13
+ setState: React.Dispatch<React.SetStateAction<ActionState>>;
14
+ triggerRef: MrlPopoverProps['triggerRef'];
15
+ };
16
+ type UseMrlPopoverEventHandlersReturn = {
17
+ handleClose: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
18
+ handleMenuKey: (e: React.KeyboardEvent) => void;
19
+ handleTriggerSiblingKey: (e: KeyboardEvent) => void;
20
+ hideMenuHover: (e: Event) => void;
21
+ showMenuHover: () => void;
22
+ toggleMenuKey: (e: KeyboardEvent) => void;
23
+ toggleMenuMouse: () => void;
24
+ };
25
+ /**
26
+ * Creates all of the required event handlers for the MrlPopover component
27
+ *
28
+ * @param options configuration options
29
+ * @returns all of the required event handlers
30
+ */
31
+ export declare const useMrlPopoverEventHandlers: ({ closeMenu, isSubMenu, disableFocusTrap, disableClickToOpen, hasCloseButton, interactiveElements, menuRef, state, setState, triggerRef }: UseMrlPopoverEventHandlersOptions) => UseMrlPopoverEventHandlersReturn;
32
+ export {};
@@ -1 +1,2 @@
1
1
  export * from './MrlPopover';
2
+ export * from './utilities';
@@ -0,0 +1,9 @@
1
+ import { MenuAlignment } from '../../../menu';
2
+ /**
3
+ * Returns the data-point attribute for the popover pointer
4
+ *
5
+ * @param position - position of the menu
6
+ * @param alignment - alignment of the menu
7
+ * @returns - data-point attribute value
8
+ */
9
+ export declare const getDataPoint: (position: string, alignment: MenuAlignment) => string;
@@ -0,0 +1,9 @@
1
+ import { MenuPosition } from '../../../menu';
2
+ /**
3
+ * Returns a value in PX for the offset of the popover from the menu at different positions
4
+ *
5
+ * @param position - position of the menu
6
+ * @param point - if the menu has a pointer
7
+ * @returns - offset in PX
8
+ */
9
+ export declare const getOffset: (position: MenuPosition, point: boolean) => number;
@@ -0,0 +1,2 @@
1
+ export * from './get-data-point';
2
+ export * from './get-offset';