@muraldevkit/ui-toolkit 2.23.0 → 2.24.0

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

@@ -1,16 +1,22 @@
 import React, { RefObject } from 'react';
 import { MenuPosition, VerticalAlign, HorizontalAlign } from '../constants';
-export type ActionType = 'ArrowUp' | 'ArrowDown' | 'Enter' | 'Escape' | ' ' | 'click' | null;
+export type ActionType = 'ArrowUp' | 'ArrowDown' | 'ArrowRight' | 'Enter' | 'Escape' | ' ' | 'click' | null;
 export interface MrlMenuState {
     actionType: ActionType;
     isOpen: boolean;
 }
-interface MrlMenuProps {
+export interface MrlMenuProps {
     /** Children to be rendered within the menu component*/
     children: React.ReactNode;
     /** Unique identifier for the menu */
     id?: string;
-    /** If the menu is a submenu */
+    /**
+     * Private isSubMenu prop for use with MrlMenuItem
+     *
+     * !!! Please do not use this prop directly, it is only used internally by MrlMenuItem !!!
+     *
+     * @private
+     */
     isSubMenu?: boolean;
     /**
      * Kind of menu
@@ -19,6 +25,12 @@ interface MrlMenuProps {
      * @default 'default'
      */
     kind?: 'default' | 'compact';
+    /**
+     * Offset of the menu from the trigger element in pixels
+     *
+     * @default 10px
+     */
+    menuOffset?: number;
     /**
      * Horizontal and vertical alignment of the menu relative to the trigger element
      *
@@ -53,12 +65,6 @@ interface MrlMenuProps {
      * @param type - type of close event
      */
     onClose?: (type?: string) => void;
-    /**
-     * Callback to be called when the menu is opened
-     *
-     * @param type - type of close event
-     */
-    onOpen?: (type?: string) => void;
 }
 /**
  * MrlMenu component
@@ -68,5 +74,4 @@ interface MrlMenuProps {
  * @param {MrlMenuProps} props - The props for the MrlMenu component
  * @returns {Element} - rendered MrlMenu component
  */
-export declare function MrlMenu({ children, id, isSubMenu, kind, menuPosition, menuState, verticalAlign, horizontalAlign, onClose, onOpen, triggerRef }: MrlMenuProps): JSX.Element;
-export {};
+export declare function MrlMenu({ children, id, isSubMenu, kind, menuOffset, menuPosition, menuState, verticalAlign, horizontalAlign, onClose, triggerRef }: MrlMenuProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+/**
+ * Find the closest menu parent of an element
+ *
+ * @param el - The element to start searching from
+ * @returns The closest menu parent or null if none is found
+ */
+export declare const findClosestMenuParent: (el: HTMLElement | null) => HTMLElement | null | undefined;
+/**
+ * Find the interactive element immediately before or after a reference element
+ *
+ * @param ref - The reference element
+ * @param direction - The direction to search in
+ * @returns The interactive element or null if none is found
+ */
+export declare const findInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;
+/**
+ * Calculate the horizontal positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param menuRect - The bounding rectangle of the menu
+ * @param triggerRef - The ref of the trigger element
+ * @returns The left position of the menu
+ */
+export declare const calculateLeftPosition: (overlapsRight: boolean, overlapsLeft: boolean, menuRect: DOMRect, triggerRef: React.RefObject<HTMLElement>) => string;
+/**
+ * Calculate vertical positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param triggerRef - The ref of the trigger element
+ * @param menuRect - The bounding rectangle of the menu
+ * @param parentMenu - The parent menu element
+ * @param triggerRect - The bounding rectangle of the trigger element
+ * @returns The top position of the menu
+ */
+export declare const calculateTopPosition: (overlapsRight: boolean, overlapsLeft: boolean, triggerRef: React.RefObject<HTMLElement>, menuRect: DOMRect, parentMenu: HTMLElement, triggerRect: DOMRect) => string;

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

@@ -1,4 +1,4 @@
-export type MenuPosition = 'bottom' | 'left' | 'right' | 'top';
+export type MenuPosition = 'bottom' | 'left' | 'right' | 'top' | 'below';
 export type HorizontalAlign = 'left' | 'right' | 'center';
 export type VerticalAlign = 'top' | 'bottom' | 'center';
 export type MenuIgnore = 'ignore';

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MrlMenuState } from '../';
+import { MenuPosition, VerticalAlign, HorizontalAlign } from '../constants';
+interface MenuWithSubmenuProps {
+    menuAlign?: MenuPosition;
+    kind?: 'default' | 'compact';
+    verticalAlign?: VerticalAlign;
+    horizontalAlign?: HorizontalAlign;
+    menuState?: MrlMenuState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {MenuWithSubmenuProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const MenuWithSubmenu: ({ menuAlign, verticalAlign, horizontalAlign, kind, menuState, onClose, triggerAlignment }: MenuWithSubmenuProps) => JSX.Element;
+export {};

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

@@ -2,12 +2,13 @@
 import { MrlMenuState } from '../';
 import { MenuPosition, VerticalAlign, HorizontalAlign } from '../constants';
 interface MenuWithTriggerProps {
-    menuAlign?: MenuPosition | undefined;
-    kind?: 'default' | 'compact' | undefined;
-    verticalAlign: VerticalAlign | undefined;
-    horizontalAlign: HorizontalAlign | undefined;
-    menuState?: MrlMenuState | undefined;
-    onClose?: () => void | undefined;
+    menuAlign?: MenuPosition;
+    kind?: 'default' | 'compact';
+    verticalAlign?: VerticalAlign;
+    horizontalAlign?: HorizontalAlign;
+    menuState?: MrlMenuState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
 }
 /**
  * Demo of a menu with a trigger for stories and testing
@@ -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: ({ menuAlign, verticalAlign, horizontalAlign, kind, menuState, onClose }: MenuWithTriggerProps) => JSX.Element;
+export declare const MenuWithTrigger: ({ menuAlign, verticalAlign, horizontalAlign, kind, menuState, onClose, triggerAlignment }: MenuWithTriggerProps) => JSX.Element;
 export {};

package/dist/components/menu/hooks/useSubMenuElementPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+interface SubMenuPosition {
+    left: string;
+    top: string;
+}
+/**
+ * Calculates the position of the sub menu element
+ *
+ * @param triggerRef - The trigger element ref
+ * @param menuRef - The menu element ref
+ * @param isSubMenu - Is the menu a sub menu
+ * @param isOpen - Is the element visible
+ * @param originalMenuRect - The menu element rect
+ * @returns The sub menu position
+ */
+export declare const useSubMenuElementPosition: (triggerRef: RefObject<HTMLElement> | undefined, menuRef: RefObject<HTMLDivElement>, isSubMenu: boolean, isOpen: boolean, originalMenuRect: DOMRect | null) => SubMenuPosition;
+export {};

package/dist/components/portal/MrlPortal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface PortalProps {
     children: React.ReactNode;
+    id?: string;
 }
 export declare const MRL_PORTAL_ID = "mrl-root-portal";
 /**
@@ -10,4 +11,4 @@ export declare const MRL_PORTAL_ID = "mrl-root-portal";
  * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.
  * @returns MrlPortal component
  */
-export declare const MrlPortal: ({ children }: PortalProps) => React.ReactElement | null;
+export declare const MrlPortal: ({ children, id }: PortalProps) => React.ReactElement | null;

package/dist/components/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "play" | "stop";
+        state: "stop" | "play";
     };
     argTypes: {
         delay: {

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

@@ -2,7 +2,7 @@ import { RefObject } from 'react';
 /**
  * Hook to detect clicks outside of a given DOM element.
  *
- * @param elementRef - Reference to the DOM element that caused this menu to be shown.
- * @param onOutsideClick - Function to call when a click is detected outside the elementRef element
+ * @param menuRef - Reference to the DOM element that caused this menu to be shown.
+ * @param onOutsideClick - Function to call when a click is detected outside the menuRef element
  */
-export declare const useClickOutside: (elementRef: RefObject<HTMLElement>, onOutsideClick: () => void) => void;
+export declare const useClickOutside: (menuRef: RefObject<HTMLElement>, onOutsideClick: () => void) => void;

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

@@ -7,8 +7,10 @@ import { Alignment, Position } from './constants';
  *
  * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
  * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
- * @param {boolean} isElementVisible - Whether the trigger element is visible.
  * @param {Alignment} menuAlign - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} menuOffset - The offset of the menu from the trigger element.
+ * @param disable - Whether to disable the hook.
  * @returns {Position} The calculated position of the menu element.
  */
-export declare const useTriggerPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, isElementVisible: boolean, menuAlign: Alignment) => Position;
+export declare const useTriggerPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, menuAlign: Alignment, isElementVisible?: boolean, menuOffset?: number, disable?: boolean) => Position;