@muraldevkit/ui-toolkit 2.21.1 → 2.22.0

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

@@ -0,0 +1,72 @@
+import React, { RefObject } from 'react';
+import { MenuPosition, VerticalAlign, HorizontalAlign } from '../constants';
+export type ActionType = 'ArrowUp' | 'ArrowDown' | 'Enter' | 'Escape' | ' ' | 'click' | null;
+export interface MrlMenuState {
+    actionType: ActionType;
+    isOpen: boolean;
+}
+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 */
+    isSubMenu?: boolean;
+    /**
+     * Kind of menu
+     * - compact has less padding
+     *
+     * @default 'default'
+     */
+    kind?: 'default' | 'compact';
+    /**
+     * Horizontal and vertical alignment of the menu relative to the trigger element
+     *
+     * @default 'bottom'
+     */
+    menuPosition?: MenuPosition;
+    /**
+     * Set initial state of menu
+     *
+     * @default { actionType: null, isOpen: false }
+     */
+    menuState?: MrlMenuState;
+    /**
+     * Reference to the DOM element that triggers this menu.
+     */
+    triggerRef?: RefObject<HTMLButtonElement>;
+    /**
+     * Vertical alignment of the menu relative to the trigger element
+     *
+     * @default 'center'
+     */
+    verticalAlign?: VerticalAlign;
+    /**
+     * Horizontal alignment of the menu relative to the trigger element
+     *
+     * @default 'left'
+     */
+    horizontalAlign?: HorizontalAlign;
+    /**
+     * Callback to be called when the menu is closed
+     *
+     * @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
+ *
+ * Renders a menu component with alignment relative to a trigger element
+ *
+ * @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 {};

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface MrlMenuGroupPropTypes {
+    children: React.ReactNode;
+    divider?: boolean;
+    groupLabel: string;
+}
+/**
+ * MrlMenuGroup
+ *
+ * @param props - component properties
+ * @returns JSX.Element
+ */
+export declare const MrlMenuGroup: ({ children, divider, groupLabel }: MrlMenuGroupPropTypes) => JSX.Element;

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+interface MrlMenuItemProps {
+    /** ID for associated description */
+    ariaDescribedBy?: string;
+    /**
+      Children to be rendered within the menu component
+     */
+    children: React.ReactNode | string;
+    /** If the menu item is disabled */
+    disabled?: boolean;
+    /** Unique ID for the menu item */
+    id?: string;
+    /** Callback to be called when the menu item is clicked */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Data-qa attribute for the menu item */
+    dataQa?: string;
+    /** If the menu item is selected */
+    selected?: boolean;
+}
+/**
+ * MrlMenuItem component
+ *
+ * Renders a menu item to be used within the MrlMenu component
+ *
+ * @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 {};

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

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

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Demo of a menu group with a trigger for stories and testing
+ *
+ * @returns {Element} The menu group with trigger demo
+ */
+export declare const MenuGroupWithTrigger: () => JSX.Element;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+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;
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @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 {};

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

@@ -0,0 +1,17 @@
+import { MenuPosition } from '../constants';
+interface MenuScrollStyles {
+    className: string | null;
+    styles: AdjustedMenuStyle;
+}
+interface AdjustedMenuStyle {
+    maxHeight: string;
+}
+/**
+ * useMenuScroll hook
+ *
+ * @param menuRef - reference to the DOM element that is the menu
+ * @param menuAlign - the alignment of the menu
+ * @returns AdjustedMenuStyle - returns the new updated style for scrolling the menu
+ */
+export declare const useMenuScroll: (menuRef: React.RefObject<HTMLElement>, menuAlign?: MenuPosition) => MenuScrollStyles;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './MrlMenu';
+export * from './MrlMenuItem';
+export * from './MrlMenuGroup';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface portalProps {
+export interface PortalProps {
     children: React.ReactNode;
 }
 export declare const MRL_PORTAL_ID = "mrl-root-portal";
@@ -7,7 +7,7 @@ export declare const MRL_PORTAL_ID = "mrl-root-portal";
  * Dynamically creates a single portal and send your children to the portal.
  * Where they will live outside of the normal document flow
  *
- * @param portalProps Portal only takes children. Contact the platform team if you need to extend this.
+ * @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 }: PortalProps) => React.ReactElement | null;

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

@@ -0,0 +1,8 @@
+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
+ */
+export declare const useClickOutside: (elementRef: RefObject<HTMLElement>, onOutsideClick: () => void) => void;

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

@@ -0,0 +1,10 @@
+import { VerticalAlign, HorizontalAlign, MenuPosition } from '../../components/menu/constants';
+export interface Alignment {
+    vertical: VerticalAlign;
+    horizontal: HorizontalAlign;
+    align: MenuPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+}

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

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { Alignment, Position } from './constants';
+/**
+ * useTriggerPosition hook.
+ *
+ * Calculates the position of a menu element based on the alignment settings relative to a trigger element.
+ *
+ * @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.
+ * @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;

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

@@ -0,0 +1,11 @@
+import { Alignment, Position } from './constants';
+/**
+ * Position object
+ *
+ * @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
+ */
+export declare const calculatePosition: (triggerRect: DOMRect, elementRect: DOMRect, menuAlign: Alignment, offset: number) => Position;