@muraldevkit/ui-toolkit 4.45.1 → 4.45.2-dev-jOrv.1

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

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { NotificationKind } from '../constants';
-export type MrlToastKind = NotificationKind | 'collaborator' | 'general';
-export type MrlToastPosition = 'bottom' | 'top';
-export interface MrlToastCTA {
-    onClick: () => void;
-    text: string;
-    dataQa: string;
-}
-export interface MrlToastProps {
-    ['data-qa']?: string;
-    /**
-     * Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).
-     *
-     * Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification
-     */
-    autoClose?: boolean;
-    /**
-     * Sets the background color of the toast notification.
-     *
-     * Note: this is only applicable when the `kind` is set to 'collaborator'.
-     */
-    backgroundColor?: string;
-    className?: string;
-    /**
-     * The time in milliseconds after which the toast notification should automatically close.
-     */
-    closeAfterMs?: number;
-    kind?: MrlToastKind;
-    onClose?: () => void;
-    primaryCTA?: MrlToastCTA;
-    primaryMessage: string | JSX.Element;
-    secondaryCTA?: MrlToastCTA;
-    secondaryMessage?: string | JSX.Element;
-    /** Determines whether the close icon button should be shown. */
-    showCloseButton?: boolean;
-    showIcon?: boolean;
-}
-/**
- * MrlToast component.
- *
- * @param {MrlToastProps} props - The props for the MrlToast component.
- * @returns {React.ReactElement} The MrlToast component.
- */
-export declare const MrlToast: ({ ["data-qa"]: qa, autoClose, backgroundColor, className, closeAfterMs, kind, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton, showIcon }: MrlToastProps) => React.ReactElement;

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

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

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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-/// <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

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

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

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

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

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

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

@@ -1,53 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

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

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

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

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

@@ -1,131 +0,0 @@
-import * as React from 'react';
-import { PortalProps } from '../../';
-import { MenuPosition, MenuAlignment, ActionState, CustomMenuPosition } from '../../menu/constants';
-type RenderPropFn = ({ closeMenu }: {
-    closeMenu: () => void;
-}) => JSX.Element;
-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 | RenderPropFn;
-    /** 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;
-    /**
-     * Disable flipping of the popover when it goes off the screen
-     * @default false
-     */
-    disableFlipping?: 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, disableFlipping, 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;
-}
-export {};

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-type MrlPopoverContext = {
-    /**
-     * Close menu is shared in context to allow for closing the popover from a child component
-     *
-     * @returns {void}
-     */
-    closeMenu: () => void;
-};
-/**
- * Adds context for the MrlPopover component
- */
-export declare const MrlPopoverContext: React.Context<MrlPopoverContext | undefined>;
-/**
- * Returns the MrlPopoverContext state.
- *
- * @returns The MrlPopoverContext state.
- */
-export declare const useMrlPopoverContext: () => MrlPopoverContext;
-export {};

package/dist/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { ActionState } from '../../../menu';
-import { MrlPopoverProps } from '../MrlPopover';
-type UseMrlPopoverEventHandlersOptions = {
-    closeMenu: () => void;
-    isSubMenu: MrlPopoverProps['isSubMenu'];
-    disableFocusTrap: MrlPopoverProps['disableFocusTrap'];
-    disableClickToOpen: MrlPopoverProps['disableClickToOpen'];
-    hasCloseButton: MrlPopoverProps['hasCloseButton'];
-    interactiveElements: HTMLElement[];
-    menuRef: React.RefObject<HTMLDivElement>;
-    state: ActionState;
-    setState: React.Dispatch<React.SetStateAction<ActionState>>;
-    triggerRef: MrlPopoverProps['triggerRef'];
-};
-type UseMrlPopoverEventHandlersReturn = {
-    handleClose: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-    handleMenuKey: (e: React.KeyboardEvent) => void;
-    handleTriggerSiblingKey: (e: KeyboardEvent) => void;
-    hideMenuHover: (e: MouseEvent) => void;
-    showMenuHover: () => void;
-    toggleMenuKey: (e: KeyboardEvent) => void;
-    toggleMenuMouse: () => void;
-};
-/**
- * Creates all of the required event handlers for the MrlPopover component
- *
- * @param options configuration options
- * @returns all of the required event handlers
- */
-export declare const useMrlPopoverEventHandlers: ({ closeMenu, isSubMenu, disableFocusTrap, disableClickToOpen, hasCloseButton, interactiveElements, menuRef, state, setState, triggerRef }: UseMrlPopoverEventHandlersOptions) => UseMrlPopoverEventHandlersReturn;
-export {};

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

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

package/dist/components/popover/MrlPopover/utilities/get-data-point.d.ts

@@ -1,9 +0,0 @@
-import { MenuAlignment } from '../../../menu';
-/**
- * Returns the data-point attribute for the popover pointer
- *
- * @param position - position of the menu
- * @param alignment - alignment of the menu
- * @returns - data-point attribute value
- */
-export declare const getDataPoint: (position: string, alignment: MenuAlignment) => string;

package/dist/components/popover/MrlPopover/utilities/get-offset.d.ts

@@ -1,9 +0,0 @@
-import { MenuPosition } from '../../../menu';
-/**
- * Returns a value in PX for the offset of the popover from the menu at different positions
- *
- * @param position - position of the menu
- * @param point - if the menu has a pointer
- * @returns - offset in PX
- */
-export declare const getOffset: (position: MenuPosition, point: boolean) => number;

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

@@ -1,2 +0,0 @@
-export * from './get-data-point';
-export * from './get-offset';

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

@@ -1,21 +0,0 @@
-/// <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

@@ -1,24 +0,0 @@
-/// <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

@@ -1,24 +0,0 @@
-/// <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

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

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

@@ -1,20 +0,0 @@
-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

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