@muraldevkit/ui-toolkit 2.29.0 → 2.29.2

package/dist/components/menu/MrlMenu/MrlMenu.d.ts

@@ -1,10 +1,23 @@
 import React, { RefObject } from 'react';
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../constants';
+import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../constants';
 export interface MrlMenuProps {
+    /** Custom position for the menu */
+    customPosition?: CustomMenuPosition;
     /** Children to be rendered within the menu component*/
     children: React.ReactNode;
+    /** Event to close the menu */
+    clickOutsideEvent?: 'mouseup' | 'mousedown' | 'click';
     /** Unique identifier for the menu */
     id?: string;
+    /**
+     * Use when the menu is embedded within another component
+     * Removes the following styles:
+     * - padding on the menu
+     * - drop shadow and border
+     *
+     * @default false
+     */
+    isInternal?: boolean;
     /**
      * Private isSubMenu prop for use with MrlMenuItem
      *
@@ -28,6 +41,9 @@ export interface MrlMenuProps {
     menuOffset?: number;
     /**
      * Horizontal and vertical alignment of the menu relative to the trigger element
+     * - position 'left', 'right', 'top', 'bottom' position relative to the trigger
+     * - position 'static' renders the menu in place, not using the portal
+     * - position 'ignore' will not position the menu, allowing you to use the customPosition prop to position the element
      *
      * @default 'bottom'
      */
@@ -43,17 +59,23 @@ export interface MrlMenuProps {
      */
     triggerRef?: RefObject<HTMLButtonElement>;
     /**
-     * Vertical alignment of the menu relative to the trigger element
+     * Trigger stop propagation on click
      *
-     * @default 'center'
+     * In some instances we may want the trigger element to stop propogation to the
+     * rest of the DOM. Use this flag to enable and disable it.
+     *
+     * @default false
      */
-    verticalAlign?: VerticalAlign;
+    triggerStopPropagation?: boolean;
     /**
-     * Horizontal alignment of the menu relative to the trigger element
+     * Vertical and horizontal alignment of the menu relative to the position of the menu with the trigger
+     * - 'left' and 'right' work with position 'top' and 'bottom'
+     * - 'top' and 'bottom' work with position 'left' and 'right'
+     * - 'center' works with all positions
      *
-     * @default 'left'
+     * This does not impact submenus
      */
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     /**
      * Callback to be called when the menu is closed
      *
@@ -69,4 +91,7 @@ export interface MrlMenuProps {
  * @param {MrlMenuProps} props - The props for the MrlMenu component
  * @returns {Element} - rendered MrlMenu component
  */
-export declare function MrlMenu({ children, id, isSubMenu, spacing, menuOffset, position, actionState, verticalAlign, horizontalAlign, onClose, triggerRef }: MrlMenuProps): JSX.Element;
+export declare function MrlMenu({ actionState, alignment, children, customPosition, clickOutsideEvent, id, isInternal, isSubMenu, spacing, menuOffset, position, triggerStopPropagation, onClose, triggerRef }: MrlMenuProps): JSX.Element;
+export declare namespace MrlMenu {
+    var componentType: string;
+}

package/dist/components/menu/MrlMenuGroup/MrlMenuGroup.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface MrlMenuGroupPropTypes {
     children: React.ReactNode;
     divider?: boolean;
-    groupLabel: string;
+    groupLabel?: string;
 }
 /**
  * MrlMenuGroup

package/dist/components/menu/MrlMenuItem/MrlMenuItem.d.ts

@@ -8,6 +8,8 @@ interface MrlMenuItemProps {
     children: React.ReactNode | string;
     /** If the menu item is disabled */
     disabled?: boolean;
+    /** Icon for menu item */
+    icon?: Record<string, unknown>;
     /** Unique ID for the menu item */
     id?: string;
     /** Callback to be called when the menu item is clicked */
@@ -25,5 +27,5 @@ interface MrlMenuItemProps {
  * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component
  * @returns {Element} - rendered MrlMenuItem component
  */
-export declare function MrlMenuItem({ ariaDescribedBy, children, dataQa, disabled, id, onClick, selected }: MrlMenuItemProps): JSX.Element;
+export declare function MrlMenuItem({ ariaDescribedBy, children, dataQa, disabled, icon, id, onClick, selected }: MrlMenuItemProps): JSX.Element;
 export {};

package/dist/components/menu/MrlMenuItemLink/MrlMenuItemLink.d.ts

@@ -6,6 +6,8 @@ interface MrlMenuItemLinkProps {
       Children to be rendered within the menu component
      */
     children: React.ReactNode | string;
+    /** Class names for the menu item */
+    className?: string;
     /** If the menu item is disabled */
     disabled?: boolean;
     /** Href for the menu item */
@@ -29,5 +31,5 @@ interface MrlMenuItemLinkProps {
  * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component
  * @returns {Element} - rendered MrlMenuItem component
  */
-export declare function MrlMenuItemLink({ ariaDescribedBy, children, dataQa, disabled, href, id, onClick, selected, target }: MrlMenuItemLinkProps): JSX.Element;
+export declare function MrlMenuItemLink({ ariaDescribedBy, children, className, dataQa, disabled, href, id, onClick, selected, target }: MrlMenuItemLinkProps): JSX.Element;
 export {};

package/dist/components/menu/constants.d.ts

@@ -1,9 +1,20 @@
-export type MenuPosition = 'bottom' | 'left' | 'right' | 'top' | 'below';
+/// <reference types="react" />
+export type MenuPosition = 'bottom' | 'left' | 'right' | 'top' | 'static' | MenuIgnore;
+export type MenuAlignment = HorizontalAlign | VerticalAlign | MenuIgnore;
 export type HorizontalAlign = 'left' | 'right' | 'center';
 export type VerticalAlign = 'top' | 'bottom' | 'center';
 export type MenuIgnore = 'ignore';
+export interface CustomMenuPosition {
+    left: number;
+    top: number;
+}
 export type ActionType = 'ArrowUp' | 'ArrowDown' | 'ArrowRight' | 'Enter' | 'Escape' | ' ' | 'click' | null;
 export interface ActionState {
     actionType: ActionType;
     isOpen: boolean;
+    disableTriggerFocus?: boolean;
+}
+export type SubMenuTypes = 'Menu' | 'Popover';
+export interface ComponentWithComponentType extends React.FunctionComponent {
+    componentType?: SubMenuTypes;
 }

package/dist/components/menu/demo/MenuWithLink.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../constants';
+import { MenuPosition, MenuAlignment, ActionState } from '../constants';
 interface MenuWithLinkProps {
     menuAlign?: MenuPosition;
     kind?: 'default' | 'compact';
-    verticalAlign?: VerticalAlign;
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     menuState?: ActionState;
     onClose?: () => void;
     triggerAlignment?: 'left' | 'right' | 'center';
@@ -15,5 +14,5 @@ interface MenuWithLinkProps {
  * @param {MenuWithLinkProps} props - The props for the menu with trigger
  * @returns {Element} The menu with trigger demo
  */
-export declare const MenuWithLink: ({ menuAlign, verticalAlign, horizontalAlign, menuState, onClose, triggerAlignment }: MenuWithLinkProps) => JSX.Element;
+export declare const MenuWithLink: ({ menuAlign, alignment, menuState, onClose, triggerAlignment }: MenuWithLinkProps) => JSX.Element;
 export {};

package/dist/components/menu/demo/MenuWithPopover.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../constants';
+import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 interface MenuWithPopoverProps {
     position?: MenuPosition;
     spacing?: 'default' | 'compact';
-    verticalAlign?: VerticalAlign;
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     actionState?: ActionState;
     onClose?: () => void;
     triggerAlignment?: 'left' | 'right' | 'center';
@@ -15,5 +14,5 @@ interface MenuWithPopoverProps {
  * @param {MenuWithPopoverProps} props - The props for the menu with trigger
  * @returns {Element} The menu with trigger demo
  */
-export declare const MenuWithPopover: ({ position, verticalAlign, horizontalAlign, spacing, actionState, onClose, triggerAlignment }: MenuWithPopoverProps) => JSX.Element;
+export declare const MenuWithPopover: ({ alignment, position, spacing, actionState, onClose, triggerAlignment }: MenuWithPopoverProps) => JSX.Element;
 export {};

package/dist/components/menu/demo/MenuWithSubmenu.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../constants';
+import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 interface MenuWithSubmenuProps {
     position?: MenuPosition;
     spacing?: 'default' | 'compact';
-    verticalAlign?: VerticalAlign;
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     actionState?: ActionState;
     onClose?: () => void;
     triggerAlignment?: 'left' | 'right' | 'center';
@@ -15,5 +14,5 @@ interface MenuWithSubmenuProps {
  * @param {MenuWithSubmenuProps} props - The props for the menu with trigger
  * @returns {Element} The menu with trigger demo
  */
-export declare const MenuWithSubmenu: ({ position, verticalAlign, horizontalAlign, spacing, actionState, onClose, triggerAlignment }: MenuWithSubmenuProps) => JSX.Element;
+export declare const MenuWithSubmenu: ({ alignment, position, spacing, actionState, onClose, triggerAlignment }: MenuWithSubmenuProps) => JSX.Element;
 export {};

package/dist/components/menu/demo/MenuWithTrigger.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../constants';
+import { CustomMenuPosition } from '../';
+import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 interface MenuWithTriggerProps {
     position?: MenuPosition;
     spacing?: 'default' | 'compact';
-    verticalAlign?: VerticalAlign;
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     actionState?: ActionState;
     onClose?: () => void;
+    customPosition?: CustomMenuPosition;
     triggerAlignment?: 'left' | 'right' | 'center';
 }
 /**
@@ -15,5 +16,5 @@ interface MenuWithTriggerProps {
  * @param {MenuWithTriggerProps} props - The props for the menu with trigger
  * @returns {Element} The menu with trigger demo
  */
-export declare const MenuWithTrigger: ({ position, verticalAlign, horizontalAlign, spacing, actionState, onClose, triggerAlignment }: MenuWithTriggerProps) => JSX.Element;
+export declare const MenuWithTrigger: ({ alignment, position, spacing, actionState, customPosition, onClose, triggerAlignment }: MenuWithTriggerProps) => JSX.Element;
 export {};

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

@@ -2,3 +2,4 @@ export * from './MrlMenu';
 export * from './MrlMenuItem';
 export * from './MrlMenuItemLink';
 export * from './MrlMenuGroup';
+export * from './constants';

package/dist/components/popover/MrlPopover/MrlPopover.d.ts

@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react';
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../../menu/constants';
+import { MenuPosition, MenuAlignment, ActionState } from '../../menu/constants';
 export interface MrlPopoverProps {
     /** Label for the popover */
     ariaLabel?: string;
@@ -24,6 +24,8 @@ export interface MrlPopoverProps {
     /**
      * Horizontal and vertical alignment of the menu relative to the trigger element
      *
+     * This does not impact submenus
+     *
      * @default 'bottom'
      */
     position?: MenuPosition;
@@ -38,17 +40,14 @@ export interface MrlPopoverProps {
      */
     triggerRef?: RefObject<HTMLButtonElement>;
     /**
-     * Vertical alignment of the menu relative to the trigger element
+     * Vertical and horizontal alignment of the popover relative to the position with the trigger
+     * - 'left' and 'right' work with position 'top' and 'bottom'
+     * - 'top' and 'bottom' work with position 'left' and 'right'
+     * - 'center' works with all positions
      *
-     * @default 'center'
+     * This does not impact submenus
      */
-    verticalAlign?: VerticalAlign;
-    /**
-     * Horizontal alignment of the menu relative to the trigger element
-     *
-     * @default 'left'
-     */
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     /**
      * If the menu should be rendered with the inverse theme
      *
@@ -76,4 +75,7 @@ export interface MrlPopoverProps {
  * @param {MrlPopoverProps} props - The props for the MrlPopover component
  * @returns {Element} - rendered MrlPopover component
  */
-export declare function MrlPopover({ ariaLabel, ariaLabelledBy, children, disableClickOutside, hasCloseButton, spacing, id, isSubMenu, actionState, position, verticalAlign, horizontalAlign, point, kind, onClose, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
+export declare function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, children, disableClickOutside, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, kind, onClose, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
+export declare namespace MrlPopover {
+    var componentType: string;
+}

package/dist/components/popover/demo/PopoverWithTrigger.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { MenuPosition, VerticalAlign, HorizontalAlign, ActionState } from '../../menu/constants';
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
 interface PopoverWithTriggerProps {
     hasCloseButton?: boolean;
     menuAlign?: MenuPosition;
     spacing?: 'default' | 'compact';
-    verticalAlign?: VerticalAlign;
-    horizontalAlign?: HorizontalAlign;
+    alignment?: MenuAlignment;
     actionState?: ActionState;
     onClose?: () => void;
     triggerAlignment?: 'left' | 'right' | 'center';
@@ -18,5 +17,5 @@ interface PopoverWithTriggerProps {
  * @param {PopoverWithTriggerProps} props - The props for the menu with trigger
  * @returns {Element} The menu with trigger demo
  */
-export declare const PopoverWithTrigger: ({ menuAlign, verticalAlign, horizontalAlign, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithTriggerProps) => JSX.Element;
+export declare const PopoverWithTrigger: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithTriggerProps) => JSX.Element;
 export {};

package/dist/hooks/useClickOutside/index.d.ts

@@ -1,9 +1,10 @@
-import { RefObject } from 'react';
 /**
  * Hook to detect clicks outside of a given DOM element.
  *
  * @param menuRef - Reference to the DOM element that caused this menu to be shown.
+ * @param triggerRef - Reference to the DOM element that caused this menu to be shown.
+ * @param eventType - Event type to listen for
  * @param onOutsideClick - Function to call when a click is detected outside the menuRef element
  * @param disabled - If the hook should be disabled
  */
-export declare const useClickOutside: (menuRef: RefObject<HTMLElement>, onOutsideClick: () => void, disabled?: boolean) => void;
+export declare const useClickOutside: (menuRef: React.RefObject<HTMLElement>, triggerRef: React.RefObject<HTMLElement> | undefined, eventType: "click" | "mousedown" | "mouseup" | undefined, onOutsideClick: () => void, disabled?: boolean) => void;

package/dist/hooks/useTriggerPosition/constants.d.ts

@@ -1,8 +1,8 @@
-import { VerticalAlign, HorizontalAlign, MenuPosition } from '../../components/menu/constants';
+import { MenuPosition, MenuAlignment, CustomMenuPosition } from '../../components/menu/constants';
 export interface Alignment {
-    vertical: VerticalAlign;
-    horizontal: HorizontalAlign;
-    align: MenuPosition;
+    align: MenuAlignment;
+    position: MenuPosition;
+    customPosition?: CustomMenuPosition;
 }
 export interface Position {
     top: number;

package/dist/hooks/useTriggerPosition/utilities.d.ts

@@ -1,11 +1,11 @@
 import { Alignment, Position } from './constants';
 /**
- * Position object
+ *  Calculates the position of the menu based on the alignment and offset
  *
- * @param triggerRect - Rect of the trigger element
- * @param elementRect - Rect of the element to be positioned
- * @param menuAlign - Alignment object
- * @param offset - Offset value
- * @returns Position object
+ * @param menuAlign - the alignment of the menu
+ * @param offset - the offset from the trigger
+ * @param elementRect - the bounding client rect of the menu
+ * @param triggerRect - the bounding client rect of the trigger
+ * @returns - the position of the menu
  */
-export declare const calculatePosition: (triggerRect: DOMRect, elementRect: DOMRect, menuAlign: Alignment, offset: number) => Position;
+export declare const calculatePosition: (menuAlign: Alignment, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;