@muraldevkit/ui-toolkit 2.56.0 → 2.57.1

package/dist/components/button/MrlIconButton/MrlIconButton.d.ts

@@ -45,6 +45,14 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
      * onClick event for the button.
      */
     onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * onKeyDown event for the button.
+     */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * onMouseUp event for the button.
+     */
+    onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The placement of the tooltip in relation to the button.
      */

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MrlPopoverProps } from '../../popover';
+import '../../../styles/layers/layers.scss';
+export type MrlCalloutPopoverProps = Omit<MrlPopoverProps, 'children' | 'actionState' | 'isSubMenu' | 'triggerRef' | 'kind'>;
+interface MrlCalloutCTA {
+    onClick: () => void;
+    dataQa?: string;
+    text: string;
+}
+export type CalloutKind = 'primary' | 'secondary';
+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;
+    kind?: CalloutKind;
+    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, image, kind, onOpen, onClose, point, position, primaryCta, secondaryCta, show, spacing, title, ...rest }: MrlCalloutProps) => React.ReactElement;
+export {};

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

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

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

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

package/dist/components/index.d.ts

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

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

@@ -8,13 +8,31 @@ export interface CustomMenuPosition {
     left: number;
     top: number;
 }
+/**
+ * The type of action that is being performed.
+ *
+ * Used in conjunction with the `ActionState` interface.
+ */
 export type ActionType = 'ArrowUp' | 'ArrowDown' | 'ArrowRight' | 'Enter' | 'Escape' | ' ' | 'click' | null;
+/**
+ * The state of the menu you are interacting with.
+ *
+ * @property {ActionType} actionType - The type of action that is being performed.
+ * @property {boolean} isOpen - Whether the menu is open or not.
+ */
 export interface ActionState {
     actionType: ActionType;
     isOpen: boolean;
-    disableTriggerFocus?: boolean;
 }
+/**
+ * Accepted component types for use as a submenu
+ */
 export type SubMenuTypes = 'Menu' | 'Popover';
+/**
+ * Extension of the React.FunctionComponent type to include a componentType property.
+ *
+ * Allows custom component types to be used to render a submenu.
+ */
 export interface ComponentWithComponentType extends React.FunctionComponent {
     componentType?: SubMenuTypes;
 }

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

@@ -1,22 +1,51 @@
 import React, { RefObject } from 'react';
-import { MenuPosition, MenuAlignment, ActionState } from '../../menu/constants';
+import { PortalProps } from '../../';
+import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../../menu/constants';
+import '../../../styles/layers/layers.scss';
 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;
-    /** If the popover should have a close button */
-    hasCloseButton?: boolean;
-    /** If the popover should close when clicking outside of the menu */
+    /** Custom class names for the popover */
+    className?: string;
+    /** Custom position for the menu */
+    customPosition?: CustomMenuPosition;
+    /**
+     * If the popover should disable click to open
+     *
+     * Example usage: if you do not want your component opened via click, set to true
+     */
+    disableClickToOpen?: boolean;
+    /**
+     * If the popover should close when clicking outside of the menu
+     *
+     * Example usage: MrlCallout component should not close when clicking outside, so it's set to true
+     */
     disableClickOutside?: boolean;
     /**
-     * spacing of menu
-     * - 'default' has 16px padding
-     * - 'compact' has 12px padding
+     * If the popover should disable focus trap
+     *
+     * The impact of enabling or disabling focus trap:
+     * - enabled : focus will remain trapped in the popover until a user closes the popover
+     * - disabled : focus will move to the next interactive element in the DOM when the user
+     * tabs out of the popover. Focus will move to the trigger when the user shift+tabs out of the popover
+     *
+     * Additional scenarios to consider with focus trap is disabled. When hasCloseButton is set to true/false:
+     * - true : if a user shows the close button, the popover will stay open until explicitly dismissed
+     * - false : if a user hides the close button, the popover will close when a user tabs out of it from the beginning or end
      */
-    spacing?: 'default' | 'compact';
+    disableFocusTrap?: boolean;
+    /** If the popover should have a close button */
+    hasCloseButton?: boolean;
     /** Unique identifier for the menu */
     id?: string;
     /** If the menu is a submenu */
@@ -29,16 +58,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 +67,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 +89,31 @@ export interface MrlPopoverProps {
      * @default false
      */
     point?: boolean;
+    /**
+     * Configuration 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 +123,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/popover/demo/PopoverWithTrigger.d.ts

@@ -10,6 +10,7 @@ interface PopoverWithTriggerProps {
     triggerAlignment?: 'left' | 'right' | 'center';
     kind?: 'inverse' | 'primary';
     point?: boolean;
+    disableFocusTrap?: boolean;
 }
 /**
  * Demo of a menu with a trigger for stories and testing
@@ -17,5 +18,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, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithTriggerProps) => JSX.Element;
+export declare const PopoverWithTrigger: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton, disableFocusTrap }: PopoverWithTriggerProps) => JSX.Element;
 export {};

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import '../../styles/layers/layers.scss';
 export interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
+    ['data-qa']?: string;
     id?: string;
 }
-export declare const MRL_PORTAL_ID = "mrl-root-portal";
+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

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

@@ -4,7 +4,7 @@ import { SVGSize } from '../constants';
 export type DSIcons = typeof import('@muraldevkit/ds-icons');
 export type DSPictograms = typeof import('@muraldevkit/ds-pictograms');
 export type DSIconType = DSIcons[keyof DSIcons] | DSPictograms[keyof DSPictograms];
-export interface SvgPropTypes extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'svg'> {
+export interface SvgPropTypes extends Omit<MrlComponentProps, 'style'>, Omit<React.ComponentProps<'svg'>, 'ref'> {
     /** Any additional classes to style the SVG's container */
     className?: string;
     /**
@@ -30,4 +30,4 @@ export interface SvgPropTypes extends Omit<MrlComponentProps, 'style'>, React.Co
  * @param {SvgPropTypes} props the props for your MrlSvg
  * @returns {React.ReactElement} a rendered SVG
  */
-export declare const MrlSvg: (props: SvgPropTypes) => React.ReactElement;
+export declare const MrlSvg: React.MemoExoticComponent<(props: SvgPropTypes) => React.ReactElement>;

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

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 import { AttrsObject } from '../../../utils';
 import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../constants';
 import '../../../styles/shared/a11y-helpers/a11y.global.scss';
+import '../../../styles/layers/layers.scss';
 interface MrlTooltipProps {
     /** The arrow position of the tooltip in relation to its trigger's content */
     anchor?: MrlTooltipAnchor;