@muraldevkit/ui-toolkit 2.49.0 → 2.51.0-dev.1

package/dist/components/callout/MrlCallout/MrlCallout.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { MrlPopoverProps } from '../../popover';
+export type MrlCalloutPopoverProps = Omit<MrlPopoverProps, 'children' | 'actionState' | 'isSubMenu' | 'triggerRef'>;
+interface MrlCalloutCTA {
+    onClick: () => void;
+    dataQa?: string;
+    text: string;
+}
+export interface MrlCalloutProps extends MrlCalloutPopoverProps {
+    /** a unique id that binds the callout content and the trigger for assistive technologies */
+    ariaControls?: string;
+    children: React.ReactElement;
+    disableClickOutside?: boolean;
+    description?: string | JSX.Element;
+    eyebrow?: string;
+    id: string;
+    image?: JSX.Element;
+    renderWithPortal?: boolean;
+    show: boolean;
+    title: string;
+    primaryCta?: MrlCalloutCTA;
+    secondaryCta?: MrlCalloutCTA;
+}
+/**
+ * MrlCallout component.
+ *
+ * @param props - The props.
+ * @returns {React.ReactElement} The MrlCallout component.
+ */
+export declare const MrlCallout: ({ ariaControls, alignment, children, description, disableClickOutside, disableFocusTrap, eyebrow, hasCloseButton, id, image, kind, onOpen, onClose, point, position, primaryCta, secondaryCta, show, spacing, title }: MrlCalloutProps) => React.ReactElement;
+export {};

package/dist/components/callout/MrlCallout/index.d.ts

@@ -0,0 +1 @@
+export { MrlCallout } from './MrlCallout';

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

@@ -0,0 +1 @@
+export declare const HELLO_WORLD = "hello world";

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

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

package/dist/components/index.d.ts

@@ -23,3 +23,4 @@ export * from './navigation-sidebar';
 export * from './skeleton';
 export * from './empty';
 export * from './live-region';
+export * from './callout';

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

@@ -1,22 +1,29 @@
 import React, { RefObject } from 'react';
-import { MenuPosition, MenuAlignment, ActionState } from '../../menu/constants';
+import { PortalProps } from '../../';
+import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../../menu/constants';
 export interface MrlPopoverProps {
+    /**
+     * Set initial state of menu
+     *
+     * @default { actionType: null, isOpen: false }
+     */
+    actionState?: ActionState;
     /** Label for the popover */
     ariaLabel?: string;
     /** ID of element to associate a label */
     ariaLabelledBy?: string;
     /** Children to be rendered within the menu component*/
     children: React.ReactNode;
+    /** Custom class names for the popover */
+    className?: string;
+    /** Custom position for the menu */
+    customPosition?: CustomMenuPosition;
     /** If the popover should have a close button */
     hasCloseButton?: boolean;
     /** If the popover should close when clicking outside of the menu */
     disableClickOutside?: boolean;
-    /**
-     * spacing of menu
-     * - 'default' has 16px padding
-     * - 'compact' has 12px padding
-     */
-    spacing?: 'default' | 'compact';
+    /** If the popover should disable focus trap */
+    disableFocusTrap?: boolean;
     /** Unique identifier for the menu */
     id?: string;
     /** If the menu is a submenu */
@@ -29,16 +36,6 @@ export interface MrlPopoverProps {
      * @default 'bottom'
      */
     position?: MenuPosition;
-    /**
-     * Set initial state of menu
-     *
-     * @default { actionType: null, isOpen: false }
-     */
-    actionState?: ActionState;
-    /**
-     * Reference to the DOM element that triggers this menu.
-     */
-    triggerRef?: RefObject<HTMLButtonElement>;
     /**
      * Vertical and horizontal alignment of the popover relative to the position with the trigger
      * - 'left' and 'right' work with position 'top' and 'bottom'
@@ -48,6 +45,16 @@ export interface MrlPopoverProps {
      * This does not impact submenus
      */
     alignment?: MenuAlignment;
+    /**
+     * spacing of menu
+     * - 'default' has 16px padding
+     * - 'compact' has 12px padding
+     */
+    spacing?: 'default' | 'compact';
+    /**
+     * Reference to the DOM element that triggers this menu.
+     */
+    triggerRef?: RefObject<HTMLElement>;
     /**
      * If the menu should be rendered with the inverse theme
      *
@@ -60,6 +67,14 @@ export interface MrlPopoverProps {
      * @default false
      */
     point?: boolean;
+    /**
+     * Props for the portal component
+     */
+    portalProps?: Omit<PortalProps, 'children'>;
+    /**
+     * Callback to be called when the menu is opened
+     */
+    onOpen?: () => void;
     /**
      * Callback to be called when the menu is closed
      *
@@ -75,7 +90,7 @@ export interface MrlPopoverProps {
  * @param {MrlPopoverProps} props - The props for the MrlPopover component
  * @returns {Element} - rendered MrlPopover component
  */
-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 function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, children, className, customPosition, disableClickOutside, disableFocusTrap, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, portalProps, kind, onClose, onOpen, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
 export declare namespace MrlPopover {
     var componentType: string;
 }

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

@@ -2,7 +2,17 @@ import React from 'react';
 export interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
+    dataQa?: string;
+    /**
+     * Provide a portalElementRef to create a portal as a sibling of the ref element
+     * within its parent container.
+     *
+     * This can be used to help manage z-indexing and stacking context of the portal
+     */
+    portalElementRef?: React.RefObject<HTMLElement>;
     id?: string;
+    uniquePortalId?: boolean;
+    ['data-qa']?: string;
 }
 export declare const MRL_PORTAL_ID = "mrl-root-portal";
 /**
@@ -12,4 +22,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, className, id, ...remainingProps }: PortalProps) => React.ReactElement | null;
+export declare const MrlPortal: ({ children, className, id, portalElementRef, ...props }: PortalProps) => React.ReactElement | null;

package/dist/components/text/MrlTextHeading/MrlTextHeading.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { AttrsObject } from '../../../utils';
 import { LevelType, HeadingHierarchies, HeadingSizes, TextSizes, HeadingKinds } from '../constants';
-interface MrlTextHeadingProps {
-    /** Applies additional HTML attributes to the text element */
+interface MrlTextHeadingProps extends React.ComponentPropsWithRef<'h1'> {
+    /**
+     * Applies additional HTML attributes to the text element
+     *
+     * @deprecated - use `attrs` instead
+     */
     attrs?: AttrsObject;
     /** Children to be rendered within the text heading component */
     children?: React.ReactNode;
@@ -30,5 +34,5 @@ interface MrlTextHeadingProps {
  * @param {MrlTextHeadingProps} props - MrlTextHeading component props
  * @returns a heading element
  */
-export declare function MrlTextHeading({ attrs, children, hierarchy, kind, level, size, text }: MrlTextHeadingProps): JSX.Element;
+export declare function MrlTextHeading({ attrs, children, className, hierarchy, kind, level, size, text }: MrlTextHeadingProps): JSX.Element;
 export {};

package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -32,6 +32,8 @@ interface MrlTooltipProps {
     disableScreenReaderText?: boolean;
     /** Whether to disable the tooltip hover action that keeps it open */
     disableTooltipHover?: boolean;
+    /** Whether to force hide the tooltip */
+    forceHideTooltip?: boolean;
     /** The kind of tooltip to be rendered */
     kind?: MrlTooltipVariant;
     /** The placement of the tooltip in relation to its trigger */