@muraldevkit/ui-toolkit 4.36.0-dev-X9Pu.1 → 4.36.0

package/dist/components/notification/MrlToast/index.d.ts

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

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

@@ -0,0 +1,26 @@
+export declare const allowedValues: {
+    kinds: readonly ["info", "success", "warning", "error", "private", "general"];
+    levels: readonly ["2", "3", "4", "5", "6"];
+    scopes: readonly ["page", "inline"];
+    states: readonly ["open", "close"];
+};
+export type NotificationKind = (typeof allowedValues.kinds)[number];
+export type NotificationScope = (typeof allowedValues.scopes)[number];
+export type NotificationState = (typeof allowedValues.states)[number];
+export type NotificationLevel = (typeof allowedValues.levels)[number];
+export interface NotificationDefaults {
+    dismissible: boolean;
+    kind: NotificationKind;
+    level: NotificationLevel;
+    scope: NotificationScope;
+    state: NotificationState;
+}
+/**
+ * Default values for props on the Notification component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: NotificationDefaults;
+/**
+ * Default transition duration for the notification transitions
+ */
+export declare const TransitionDuration = 333;

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

@@ -0,0 +1,3 @@
+export * from './MrlBlockNotification';
+export * from './MrlToast';
+export * from './MrlInlineMessage';

package/dist/components/pagination/MrlPagination/MrlPagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface MrlPaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /** Elements to be rendered by MrlPagination */
+    children: React.ReactNode;
+    /** Additional class to add to the nav element */
+    className?: string;
+    /** Pagination heading */
+    heading?: string;
+    /** Styles to add to the wrapper for the unordered list */
+    style?: React.CSSProperties;
+}
+/**
+ * Pagination component
+ *
+ * @param {MrlPaginationProps} props - the component props
+ * @returns pagination
+ */
+export declare function MrlPagination({ children, className, heading, style, ...rest }: MrlPaginationProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPagination/index.d.ts

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

package/dist/components/pagination/MrlPaginationButton/MrlPaginationButton.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../..';
+import { PaginationButtonType } from '../constants';
+interface MrlPaginationButtonProps {
+    /** Additional class to add to the button element */
+    buttonClass?: string;
+    /** Additional class to add to the container element */
+    className?: string;
+    disabled?: boolean;
+    /** The type of pagination item  */
+    kind: PaginationButtonType;
+    /**
+     * Click event for the button.
+     */
+    handleClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /** Pagination heading */
+    text?: string;
+    /** The anchor of the tooltips on the buttons */
+    tooltipAnchor?: MrlTooltipAnchor;
+    /** The placement of the tooltips on the buttons */
+    tooltipPosition?: MrlTooltipPosition;
+}
+/**
+ * Pagination button component
+ *
+ * @param {MrlPaginationButtonProps} props - the component props
+ * @returns a pagintaion button
+ */
+export declare function MrlPaginationButton({ buttonClass, className, disabled, kind, handleClick, text, tooltipAnchor, tooltipPosition }: MrlPaginationButtonProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPaginationButton/index.d.ts

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

package/dist/components/pagination/MrlPaginationText/MrlPaginationText.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+interface MrlPaginationTextProps {
+    /** Additional class to add to the container element */
+    className?: string;
+    /** Show total as estimate */
+    isEstimate?: boolean;
+    /** The last visible item */
+    rangeEnd: number;
+    /** The first visible item */
+    rangeStart: number;
+    /** Additional class to add to the text */
+    textClass?: string;
+    /** The total number of items */
+    total: number;
+}
+/**
+ * Pagination text component
+ *
+ * @param {MrlPaginationTextProps} props - the component props
+ * @returns pagination text
+ */
+export declare function MrlPaginationText({ className, isEstimate, rangeStart, rangeEnd, textClass, total }: MrlPaginationTextProps): JSX.Element;
+export {};

package/dist/components/pagination/MrlPaginationText/index.d.ts

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

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

@@ -0,0 +1 @@
+export type PaginationButtonType = 'first' | 'previous' | 'next' | 'last';

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

@@ -0,0 +1,3 @@
+export * from './MrlPagination';
+export * from './MrlPaginationButton';
+export * from './MrlPaginationText';

package/dist/components/panel/MrlPanel/MrlPanel.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanel component.
+ */
+interface MrlPanelProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * A string value used for data-qa attribute.
+     */
+    ['data-qa']?: string;
+    /**
+     * Callback function that is called when the panel is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The custom header element to be rendered in the panel.
+     * When a custom header is used developers need to provide th aria-label and aria-describedby.
+     */
+    header?: React.ReactNode;
+    /**
+     * The custom top actions to be rendered in the panel header.
+     * By default top actions are rendered on the right side of the title and include a MrlDivider at the end.
+     * The close button should not be included as part of the top actions.
+     */
+    topActions?: React.ReactNode;
+    /**
+     * The title of the panel.
+     */
+    title?: string;
+    /**
+     * The description of the panel.
+     */
+    description?: string;
+    /**
+     * Specifies whether to disable autofocus on the panel.
+     */
+    disableAutofocus?: boolean;
+    /**
+     * Specifies whether the panel has a sticky header to adjust styles.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * hasDataScrollAnchor is required to enable infinite scroll
+     */
+    hasDataScrollAnchor?: boolean;
+}
+/**
+ * MrlPanel component.
+ *
+ * @param props The MrlPanel component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanel: React.ForwardRefExoticComponent<Omit<MrlPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/panel/MrlPanel/index.d.ts

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

package/dist/components/panel/MrlPanelContext/MrlPanelContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type MrlPanelContextState = {
+    hasScrollbar: boolean;
+    scrollbarWidth: number;
+};
+export declare const initialState: {
+    hasScrollbar: boolean;
+    scrollbarWidth: number;
+};
+export declare const MrlPanelContext: React.Context<MrlPanelContextState>;
+/**
+ * Returns the MrlPanelContext state.
+ *
+ * @returns The MrlPanelContext state.
+ */
+export declare const useMrlPanelContext: () => MrlPanelContextState;

package/dist/components/panel/MrlPanelContext/index.d.ts

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

package/dist/components/panel/MrlPanelFooter/MrlPanelFooter.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanelFooter component.
+ */
+interface MrlPanelFooterProps extends React.ComponentPropsWithRef<'footer'> {
+    /**
+     * The children of the MrlPanelFooter component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether to show the divider.
+     */
+    hasDivider?: boolean;
+}
+/**
+ * MrlPanelFooter component.
+ *
+ * @param props The MrlPanelFooter component properties.
+ * @returns The MrlPanelFooter component.
+ */
+export declare const MrlPanelFooter: React.ForwardRefExoticComponent<Omit<MrlPanelFooterProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/panel/MrlPanelFooter/index.d.ts

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

package/dist/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Props for the MrlPanelStickyHeader component.
+ */
+interface MrlPanelStickyHeaderProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * The children of the MrlPanelStickyHeader component.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * MrlPanelStickyHeader component.
+ *
+ * @param props The MrlPanelStickyHeader component properties.
+ * @returns The MrlPanel component.
+ */
+export declare const MrlPanelStickyHeader: ({ children, className, ...rest }: MrlPanelStickyHeaderProps) => JSX.Element;
+export {};

package/dist/components/panel/MrlPanelStickyHeader/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './MrlPanel';
+export * from './MrlPanelFooter';
+export * from './MrlPanelStickyHeader';

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

@@ -0,0 +1,128 @@
+import * as React from 'react';
+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 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;
+    /**
+     * 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
+     */
+    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 */
+    isSubMenu?: boolean;
+    /**
+     * Horizontal and vertical alignment of the menu relative to the trigger element
+     *
+     * This does not impact submenus
+     *
+     * @default 'bottom'
+     */
+    position?: MenuPosition;
+    /**
+     * Vertical and horizontal alignment of the popover relative to the position with the trigger
+     * - 'left' and 'right' work with position 'top' and 'bottom'
+     * - 'top' and 'bottom' work with position 'left' and 'right'
+     * - 'center' works with all positions
+     *
+     * 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?: React.RefObject<HTMLElement>;
+    /**
+     * If the menu should be rendered with the inverse theme
+     *
+     * @default 'primary'
+     */
+    kind?: 'primary' | 'inverse';
+    /**
+     * If the menu should have a pointer element
+     *
+     * @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
+ *
+ * Renders a popover component with position and alignment relative to a trigger element
+ *
+ * @param {MrlPopoverProps} props - The props for the MrlPopover component
+ * @returns {Element} - rendered MrlPopover component
+ */
+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/MrlPopover/index.d.ts

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

package/dist/components/popover/demo/PopoverWithIconButton.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithIconButtonProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const PopoverWithIconButton: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithIconButtonProps) => JSX.Element;
+export {};

package/dist/components/popover/demo/PopoverWithSelect.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithSelectProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+    disableFocusTrap?: boolean;
+    scrolling?: boolean;
+    position?: MenuPosition;
+}
+/**
+ * Demo of a popover with a select inside
+ *
+ * @param {PopoverWithSelectProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export declare const PopoverWithSelect: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton, disableFocusTrap }: PopoverWithSelectProps) => JSX.Element;
+export {};

package/dist/components/popover/demo/PopoverWithTrigger.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
+interface PopoverWithTriggerProps {
+    hasCloseButton?: boolean;
+    menuAlign?: MenuPosition;
+    spacing?: 'default' | 'compact';
+    alignment?: MenuAlignment;
+    actionState?: ActionState;
+    onClose?: () => void;
+    triggerAlignment?: 'left' | 'right' | 'center';
+    kind?: 'inverse' | 'primary';
+    point?: boolean;
+    disableFocusTrap?: boolean;
+    scrolling?: boolean;
+    position?: MenuPosition;
+}
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @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, disableFocusTrap, scrolling }: PopoverWithTriggerProps) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PORTAL_LAYERS } from '../../utils/layers';
+type PortalLayer = (typeof PORTAL_LAYERS)[keyof typeof PORTAL_LAYERS];
+export interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    ['data-qa']?: string;
+    id?: string;
+    layer?: PortalLayer;
+}
+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.
+ * @returns MrlPortal component
+ */
+export declare const MrlPortal: ({ children, className, id, layer, ...remainingProps }: PortalProps) => React.ReactElement | null;
+export {};

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

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

package/dist/components/rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+type RefType = HTMLElement | HTMLDivElement | null;
+/**
+ * Gets tabbable elements in a given bit of the DOM
+ *
+ * @param {RefType} ref - the ref of the container
+ * @param {string} selector - the selector to query
+ * @returns {HTMLElement[]} - an array of tabbable HTML elements
+ */
+export declare const getTabbableElements: (ref: RefType, selector: string) => HTMLElement[];
+export type FocusOnInitPosition = 'first' | 'last';
+export interface RovingPropTypes {
+    activeSelector?: string;
+    children: unknown;
+    /**
+     * delayMount is used to apply a delay to the mounting
+     * of the RovingTabindex component. This can be helpful in
+     * the event that a component's children have not been fully
+     * rendered by the time the componentDidMount function is triggered
+     */
+    delayMount?: number;
+    focusOnInit?: FocusOnInitPosition;
+    focusWithShortcut?: boolean;
+    forceUpdate?: boolean;
+    hasChildRoving?: boolean;
+    ignoreElements?: string;
+    isFocused?: boolean;
+    onBlur?: () => void;
+    onRefocus?: (shouldRefocus: boolean) => void;
+    orientation?: RovingOrientation;
+    qa?: string;
+}
+type RovingOrientation = 'horizontal' | 'vertical';
+type NavigationDirection = 'forward' | 'back';
+/**
+ * Component to create a Roving Tabindex in the DOM
+ *
+ * @returns {HTMLDivElement}
+ */
+declare class MrlRovingTabindex extends React.Component<RovingPropTypes> {
+    elements: Array<Element | null>;
+    orientation: RovingOrientation;
+    ref: HTMLDivElement | null;
+    selector: string;
+    /**
+     * MrlRovingTabindex class constructor
+     *
+     * @param {RovingPropTypes} props - the MrlRovingTabindex props
+     * @returns {void}
+     */
+    constructor(props: RovingPropTypes);
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component updates
+     *
+     * @param {RovingPropTypes} prevProps - the props before the component updated
+     */
+    componentDidUpdate(prevProps: RovingPropTypes): void;
+    handleRef: (ref: HTMLDivElement) => HTMLDivElement;
+    /**
+     * Sets component array of elements
+     *
+     * @returns {void}
+     */
+    setElements: () => void;
+    /**
+     * Gets the components active element based on priority order.
+     *
+     * @returns {HTMLElement | undefined} - the active HTML element
+     */
+    getActiveElement: () => HTMLElement | undefined;
+    /**
+     * Sets an element to `tabindex=0` and sets all other elements to `tabindex=-1`
+     *
+     * @param {HTMLElement | undefined} el - the element to set as active
+     * @returns {void}
+     */
+    setActiveElement: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to a specific element
+     *
+     * @param {HTMLElement | undefined} el - the element to set in focus
+     * @returns {void}
+     */
+    setElementFocus: (el: HTMLElement | undefined) => void;
+    /**
+     * Sets focus to an element based on a direction (`forward` or `back`)
+     *
+     * @param {NavigationDirection} direction 'forward' | 'back'
+     * @returns {void}
+     */
+    setFocusByDirection: (direction: NavigationDirection) => void;
+    /**
+     * Sets all tabindex for elements of this component to -1
+     *
+     * @returns {void}
+     */
+    unsetTabbableElements: () => void;
+    /**
+     * Will return `false` if the orientation param matches the
+     * orientation of the component and the actively focused element has a menu or select
+     *
+     * @param orientation : 'horizontal' | 'vertical'
+     * @returns boolean
+     */
+    canUseArrows: (orientation: RovingOrientation) => boolean;
+    handleKeyUp: (e: React.KeyboardEvent) => void;
+    handleFocusedFirst: () => void;
+    handleFocusedLast: () => void;
+    handleRefocus: () => void;
+    /**
+     * Mounts the MrlRovingTabindex component
+     *
+     * @returns {void}
+     */
+    mount(): void;
+    /**
+     * Renders the MrlRovingTabindex component
+     *
+     * @returns {HTMLDivElement} - the rendered MrlRovingTabindex component
+     */
+    render(): JSX.Element;
+}
+export { MrlRovingTabindex };

package/dist/components/rovingTabindex/MrlRovingTabindex/index.d.ts

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

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

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

package/dist/components/skeleton/MrlSkeleton/MrlSkeleton.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface MrlSkeletonProps extends React.ComponentProps<'div'> {
+    /** An object with CSS properties */
+    style?: React.CSSProperties;
+    /** MrlSkeleton wrapper class */
+    className?: string;
+    /** The height of the MrlSkeleton component */
+    height?: React.CSSProperties['height'];
+    /** The width of the MrlSkeleton component */
+    width?: React.CSSProperties['width'];
+    /** The shape of the Skeleton component */
+    shape?: 'circle' | 'default';
+}
+/**
+ * MrlSkeleton React component.
+ *
+ * @param props {MrlSkeletonProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export declare function MrlSkeleton({ height, shape, style, width, className, ...rest }: MrlSkeletonProps): JSX.Element;

package/dist/components/skeleton/MrlSkeleton/index.d.ts

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