@muraldevkit/ui-toolkit 2.52.1 → 2.52.2-dev.1

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

@@ -0,0 +1,32 @@
+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;
+    autoFocus?: boolean;
+    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,31 @@
 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 open when clicking the trigger */
+    disableClickToOpen?: 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 +38,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 +47,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,12 +69,31 @@ export interface MrlPopoverProps {
      * @default false
      */
     point?: boolean;
+    /**
+     * Props for the portal component
+     */
+    portalProps?: Omit<PortalProps, 'children'>;
+    /**
+     * Offset in pixels for the popover
+     *
+     * The popover automatically calculates the proper offset based on the position and alignment
+     * this prop will override those values.
+     */
+    offset?: number;
+    /**
+     * Callback to be called when the menu is opened
+     */
+    onOpen?: () => void;
     /**
      * Callback to be called when the menu is closed
      *
      * @param type - type of close event
      */
     onClose?: (type?: string) => void;
+    /**
+     * data-qa attribute for the popover
+     */
+    ['data-qa']?: string;
 }
 /**
  * MrlPopover
@@ -75,7 +103,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, disableClickToOpen, disableClickOutside, disableFocusTrap, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, portalProps, kind, offset, onClose, onOpen, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
 export declare namespace MrlPopover {
     var componentType: string;
 }

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 {};