@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/types/components/modal/MrlModalHeader/MrlModalHeader.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { MrlComponentProps } from '../../../utils';
+export interface MrlModalHeaderProps extends MrlComponentProps {
+    /**
+     * Content of the modal header
+     */
+    children?: React.ReactNode;
+    /**
+     * Wrapper Class
+     */
+    className?: string;
+    /**
+     * Text the h1 element of modal header
+     */
+    text: string;
+}
+/**
+ * Modal Header component for the MrlModal.
+ * @param {MrlModalHeaderProps} props - The props for the MrlModalFooter component
+ * @param {AttrsObject} props.attrs - Additional HTML attributes for the `mrl-modal` element
+ * @returns {React.ReactElement} The rendered MrlModalFooter component
+ */
+export declare const MrlModalHeader: ({ attrs, children, className, text, ...rest }: MrlModalHeaderProps) => JSX.Element;

package/dist/types/components/modal/MrlModalHeader/index.d.ts

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

package/dist/types/components/modal/constants.d.ts

@@ -0,0 +1,18 @@
+import { AttrsObject } from '../../utils';
+export declare const allowedValues: {
+    sizes: readonly ["small", "medium", "large"];
+    states: readonly ["open", "close"];
+};
+export type ModalSize = (typeof allowedValues.sizes)[number];
+export type ModalState = (typeof allowedValues.states)[number];
+export interface ModalDefaults {
+    attrs: AttrsObject;
+    size: ModalSize;
+    state: ModalState;
+}
+/**
+ * Default values for props on the Modal component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: ModalDefaults;
+export declare const TransitionDuration = 300;

package/dist/types/components/modal/demo/ModalWithTriggerDemo.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import '../MrlModal/stories.scss';
+interface ModalDemoProps {
+    /** Additional function to be run when the modal closes */
+    hookClose?: (() => void) | undefined;
+    closable?: boolean;
+}
+/**
+ * Demo for a modal with a trigger button
+ *
+ * @param {object} props - The props object
+ * @param {Function} props.hookClose - hookClose for modal
+ * @returns {Element} Rendered demo
+ */
+export declare const ModalWithTriggerDemo: ({ closable, hookClose }: ModalDemoProps) => JSX.Element;
+export {};

package/dist/types/components/modal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MrlModal';
+export * from './MrlModalContent';
+export * from './MrlModalFooter';
+export * from './MrlModalHeader';
+export * from './constants';

package/dist/types/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { LevelType } from '../../text/constants';
+interface MrlSidebarNavGroupProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /** Additional class to add to the nav element */
+    className?: string;
+    /** A list of navigation items */
+    children: React.ReactNode;
+    /** Set the semantic level of the heading, only applies when headingText is defined */
+    level?: Exclude<LevelType, '1'>;
+    /**
+     *  Sets the heading's text.
+     *  If no visual heading is required add the hiddenHeading prop
+     */
+    headingText: string;
+    /** Prevents rendering the heading and uses aria-label to label the nav element */
+    hiddenHeading?: boolean;
+}
+/**
+ * Sidebar group component
+ *
+ * @param {MrlSidebarNavGroupProps} props - the component props
+ * @returns a sidebar nav group
+ */
+export declare function MrlSidebarNavGroup({ className, children, level, headingText, style, hiddenHeading, ...rest }: MrlSidebarNavGroupProps): JSX.Element;
+export {};

package/dist/types/components/navigation-sidebar/MrlSidebarNavGroup/index.d.ts

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

package/dist/types/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { DSIconType } from '../../';
+interface MrlSidebarNavItemProps {
+    /** Additional class to add to the li element */
+    className?: string;
+    /** A string value used for data-qa attribute. */
+    ['data-qa']?: string;
+    /** Leading icon of the sidebar nav item */
+    icon?: DSIconType;
+    /** Sets the selected state for the sidebar nav item */
+    isSelected?: boolean;
+    /**
+     * Render function used to wrap the sidebar nav item with a link component.
+     * It allows users to wrap the sidebar nav item with different link implementations, react-router's link for example.
+     * @example
+     * <MrlSidebarNavItem renderLink={({linkContent}) => <Link to="/">{linkContent}</Link>}/>
+     * <MrlSidebarNavItem renderLink={({linkContent}) => <a href="/">{linkContent}</a>}/>
+     */
+    renderLink: ({ linkContent }: {
+        linkContent: React.ReactNode;
+    }) => JSX.Element;
+    /** The text of the sidebar item */
+    text?: React.ReactNode;
+}
+/**
+ * Sidebar nav item component
+ * @param {MrlSidebarNavItemProps} props - the component props
+ * @returns a sidebar nav item
+ */
+export declare function MrlSidebarNavItem({ className, ['data-qa']: qa, icon, isSelected, text, renderLink, ...rest }: MrlSidebarNavItemProps): JSX.Element;
+export {};

package/dist/types/components/navigation-sidebar/MrlSidebarNavItem/index.d.ts

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

package/dist/types/components/navigation-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlSidebarNavGroup';
+export * from './MrlSidebarNavItem';

package/dist/types/components/notification/MrlBlockNotification/MrlBlockNotification.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { NotificationKind, NotificationScope, NotificationState, NotificationLevel } from '../constants';
+import { DSIconType } from '../../svg/MrlSvg/MrlSvg';
+import './MrlBlockNotification.global.scss';
+import { useAutoClose } from '../../../hooks/useAutoClose';
+export interface MrlBlockNotificationProps {
+    /**
+     * Block Notification Wrapper Class
+     */
+    className?: string;
+    /**
+     * QA attribute for close button to allow tests to find the element easier
+     */
+    closeQa?: string;
+    /**
+     * Children
+     *
+     * IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component
+     * contain interactive elements. Autoclosing interactive elements is an accessibility
+     * anti-pattern and should be avoided.
+     */
+    children?: React.ReactNode;
+    /**
+     * Adds CTA button to the notification
+     */
+    cta?: React.ReactElement;
+    /**
+     * The kind of notification to display.
+     *
+     * Examples: warning, error, info, success
+     */
+    kind?: NotificationKind;
+    /**
+     * A custom DS icon.
+     */
+    customIcon?: DSIconType;
+    /**
+     * Sets header text for notification
+     */
+    heading?: string;
+    /**
+     * Adds a close button to notificaiton if true
+     */
+    dismissible?: boolean;
+    /**
+     * Sets the primary content for the notification
+     */
+    message?: React.ReactNode;
+    /**
+     * Sets the scope of the notification
+     */
+    scope?: NotificationScope;
+    /**
+     * Open/Close state of the notification
+     */
+    state?: NotificationState;
+    /**
+     * Open notification callback
+     * @returns {void}
+     */
+    hookOpen?: () => void;
+    /**
+     * Close notification callback
+     * @returns {void}
+     */
+    hookClose?: () => void;
+    /**
+     * Sets the header level
+     * Example output: h1, h2, h3, h4
+     */
+    level?: NotificationLevel;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject;
+    /**
+     * When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)
+     */
+    shouldAutoClose?: Parameters<useAutoClose>[0];
+    /**
+     * Delay in milliseconds before the component closes (see useAutoClose)
+     */
+    autoCloseAfterMs?: Parameters<useAutoClose>[1];
+    /**
+     * Callback to be called when component closes (see useAutoClose)
+     */
+    onAutoClose?: Parameters<useAutoClose>[2];
+}
+/**
+ * Block Notification Component
+ * @param props - Component props
+ * @returns {Element} Block Notification
+ */
+export declare const MrlBlockNotification: (props: MrlBlockNotificationProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export { MrlBlockNotification, type MrlBlockNotificationProps } from './MrlBlockNotification';

package/dist/types/components/notification/MrlInlineMessage/MrlInlineMessage.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DSIconType } from '../../svg';
+export type InlineMessageKind = 'error' | 'info' | 'warning' | 'success' | 'helper';
+export interface MrlInlineMessageProps {
+    /**
+     * A custom DS icon which is only applied if the alert is not an error, info, or warning type
+     */
+    customIcon?: DSIconType;
+    /**
+     * The id of the notification.
+     *
+     * Used to link the notification to a form field using aria-describedby.
+     */
+    id: string;
+    /**
+     * Choose the kind of notification to display.
+     *
+     * Accepted values: error, info, warning, success, helper
+     */
+    kind: InlineMessageKind;
+    /**
+     * The text to be displayed in the notification. If not provided, children will be used.
+     */
+    message?: string;
+    /**
+     * Children to be rendered within the component, it will be used as the message if message is not provided.
+     */
+    children?: React.ReactNode;
+    /**
+     * The data-qa attribute for testing purposes.
+     */
+    ['data-qa']?: string;
+}
+/**
+ * MrlInlineMessage is a notification component that can be used to display messages to the user.
+ * @param props - The properties of the component.
+ * @returns A React component.
+ */
+export declare const MrlInlineMessage: ({ children, customIcon, id, kind, message, ["data-qa"]: qa, ...rest }: MrlInlineMessageProps) => React.ReactElement;

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

@@ -0,0 +1 @@
+export { MrlInlineMessage, type MrlInlineMessageProps } from './MrlInlineMessage';

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { MrlAvatarPropTypes } from '../../avatar/MrlAvatar';
+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 MrlToastLink {
+    text: string;
+    url: 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;
+    /**
+     * A MrlAvatar component instance to display in the toast notification.
+     *
+     * Note: This is only applicable when `kind` is set to 'collaborator'. When provided, the avatar will be shown instead of the default icon.
+     * The `showIcon` prop will be ignored when `avatar` is present.
+     *
+     * @example
+     * ```tsx
+     * <MrlToast
+     *   kind="collaborator"
+     *   avatar={<MrlAvatar name="John Doe" size="small" avatarColor="#FF5733" />}
+     *   primaryMessage="John Doe joined the mural"
+     * />
+     * ```
+     */
+    avatar?: React.ReactElement<MrlAvatarPropTypes>;
+    /**
+     * 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;
+    link?: MrlToastLink;
+    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, avatar, backgroundColor, className, closeAfterMs, kind, link, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton, showIcon, ...rest }: MrlToastProps) => React.ReactElement;

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

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

package/dist/types/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/types/components/notification/index.d.ts

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

package/dist/types/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/types/components/pagination/MrlPagination/index.d.ts

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

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../../tooltip/constants';
+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, ...rest }: MrlPaginationButtonProps): JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,22 @@
+/// <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, ...rest }: MrlPaginationTextProps): JSX.Element;
+export {};

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

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

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

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

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

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

package/dist/types/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/types/components/panel/MrlPanel/index.d.ts

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

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

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

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

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

package/dist/types/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/types/components/panel/MrlPanelFooter/index.d.ts

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

package/dist/types/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/types/components/panel/MrlPanelStickyHeader/index.d.ts

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

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

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