@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

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

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

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

@@ -0,0 +1,142 @@
+import * as React from 'react';
+type RefType = HTMLElement | HTMLDivElement | null;
+/**
+ * Gets tabbable elements in a given bit of the DOM, excluding disabled elements
+ * @param {RefType} ref - the ref of the container
+ * @param {string} selector - the selector to query (should already exclude disabled elements)
+ * @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;
+    /**
+     * If true, disabled elements (with disabled attribute or aria-disabled="true")
+     * will be included in the roving tabindex. Defaults to true (disabled elements are included).
+     */
+    allowDisabled?: boolean;
+    children: React.ReactNode;
+    /**
+     * 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 props - the MrlRovingTabindex props
+     * @returns new instance
+     */
+    constructor(props: RovingPropTypes);
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component unmounts
+     */
+    componentWillUnmount(): void;
+    /**
+     * Runs when the MrlRovingTabindex component updates
+     * @param {RovingPropTypes} prevProps - the props before the component updated
+     */
+    componentDidUpdate(prevProps: RovingPropTypes): void;
+    handleRef: (ref: HTMLDivElement) => HTMLDivElement;
+    /**
+     * Handles focus out events to detect when focus leaves the roving tabindex container
+     * @param {FocusEvent} event - the focus out event
+     * @returns {void}
+     */
+    handleFocusOut: (event: FocusEvent) => void;
+    /**
+     * Sets component array of elements
+     * @returns {void}
+     */
+    setElements: () => void;
+    /**
+     * Queries for a single element matching the selector within the container.
+     * @param selector - CSS selector to query
+     * @returns The matching element or null
+     */
+    queryElement: (selector: string) => HTMLElement | null;
+    /**
+     * Gets the active element based on priority order:
+     * 1. Element matching the custom `activeSelector` prop (e.g., custom radio elements)
+     * 2. Element with `data-roving-active` attribute (programmatically set active)
+     * 3. First element with `data-roving` attribute (default fallback)
+     *
+     * Disabled elements are excluded unless `allowDisabled` is true.
+     * @returns The active HTML element, or undefined if none found
+     */
+    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`)
+     * Disabled elements are already excluded from this.elements via CSS selector
+     * @param {NavigationDirection} direction 'forward' | 'back'
+     * @returns {void}
+     */
+    setFocusByDirection: (direction: NavigationDirection) => void;
+    /**
+     * Sets all tabindex for elements of this component to -1
+     * Also ensures disabled elements (excluded from roving tabindex) have tabindex=-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/types/components/rovingTabindex/MrlRovingTabindex/index.d.ts

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

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

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

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

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

package/dist/types/components/skeleton/MrlSkeletonText/MrlSkeletonText.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TextSizes } from '../../text/constants';
+export interface MrlSkeletonTextProps extends React.ComponentProps<'div'> {
+    /** An object of CSS properties */
+    style?: React.CSSProperties;
+    /** MrlSkeletonText wrapper class */
+    className?: string;
+    /** The width of the MrlSkeletonText component */
+    width?: React.CSSProperties['width'];
+    /** Number of lines to render */
+    lines?: number;
+    /** Size of the text which is the same as MrlText component */
+    size?: TextSizes;
+}
+/**
+ * MrlSkeletonText React component. Used to create skeleton elements as placeholders
+ * for the MrlText component. It supports the same text sizes as the MrlText component.
+ *
+ * @param props {MrlSkeletonTextProps} - component props
+ * @returns a MrlSkeleton React component.
+ */
+export declare function MrlSkeletonText({ className, style, width, lines, size, ...rest }: MrlSkeletonTextProps): JSX.Element;

package/dist/types/components/skeleton/MrlSkeletonText/index.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { MrlComponentProps } from '../../../utils';
+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'>, Omit<React.ComponentProps<'svg'>, 'ref'> {
+    /** Any additional classes to style the SVG's container */
+    className?: string;
+    /**
+     * URL path to a static SVG file. Must provide either path or svg prop.
+     */
+    path?: string;
+    /** Enable lazy loading when a path is provided. */
+    lazyLoad?: boolean;
+    isClone?: boolean;
+    /** The size of an SVG Component */
+    size?: SVGSize;
+    /**
+     * A object of CSS properties. Please use style sparingly, and only in cases where your
+     * needs can not be met by passing a class to the component.
+     */
+    style?: Record<string, unknown>;
+    /** The SVG object to parse into an HTML SVG element. Must provide either path or svg prop. */
+    svg?: DSIconType;
+}
+/**
+ * Creating and exporting component class for Mural SVG
+ *
+ * Supports both static SVG objects and dynamic URL loading.
+ *
+ * @param {SvgPropTypes} props the props for your MrlSvg
+ * @returns {React.ReactElement} a rendered SVG
+ */
+export declare const MrlSvg: React.MemoExoticComponent<(props: SvgPropTypes) => React.ReactElement>;

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

@@ -0,0 +1 @@
+export { MrlSvg, type SvgPropTypes } from './MrlSvg';

package/dist/types/components/svg/MrlSvgAnimate/MrlSvgAnimate.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { AnimatedState } from '../constants';
+/**
+ * Props for MrlSvgAnimate component
+ */
+export interface MrlSvgAnimateProps {
+    /** Any additional classes to style the SVG's container */
+    className?: string;
+    /**
+     * JSON file contents used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with fullPath and cdnFile.
+     * Note: When dynamically changing the svgData, if a configuration change
+     * is required be sure to set any new values before changing the svgData.
+     */
+    svgData?: string;
+    /**
+     * Path to a JSON file used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with svgData and cdnFile.
+     * Note: When dynamically changing the fullPath, if a configuration change
+     * is required be sure to set any new values before changing the fullPath.
+     */
+    fullPath?: string;
+    /**
+     * File name of an animation hosted on Mural's CDN used by Lottie to generate
+     * an animated SVG to render. This is the preferred usage of this component
+     * in terms of performance. It supports any file located at `static/animations`.
+     * This attribute is mutually exclusive with fullPath and svgData.
+     * Note: When dynamically changing the cdnFile, if a configuration change
+     * is required be sure to set any new values before changing the cdnFile.
+     */
+    cdnFile?: string;
+    /** Icon animation state. */
+    state?: AnimatedState;
+    /** Delay (in ms) before animation begins. */
+    delay?: number;
+    /**
+     * Optional [Lottie configuration object](http://airbnb.io/lottie/#/web) for the
+     * loadAnimation method
+     */
+    config?: string;
+}
+/**
+ * MrlSvgAnimate
+ *
+ * This is a React functional component used for SVGs with robust After Effects animations.
+ * @param {MrlSvgAnimateProps} props - The properties for the MrlSvgAnimate component.
+ * @returns {React.ReactElement} - The rendered MrlSvgAnimate component.
+ */
+export declare const MrlSvgAnimate: React.FC<MrlSvgAnimateProps>;
+export default MrlSvgAnimate;

package/dist/types/components/svg/MrlSvgAnimate/index.d.ts

@@ -0,0 +1 @@
+export { MrlSvgAnimate, type MrlSvgAnimateProps } from './MrlSvgAnimate';

package/dist/types/components/svg/config.d.ts

@@ -0,0 +1,112 @@
+/** Storybook configurations allowed for the SVG component. */
+export interface SvgArgs {
+    color: string;
+}
+export declare const storyData: {
+    args: {
+        color: string;
+        size: import("./constants").SVGSize;
+    };
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        scans: {
+            size: string[];
+        };
+    };
+    title: string;
+};
+export declare const iconStoryData: {
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+    };
+    title: string;
+};
+export declare const pictogramStoryData: {
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+    };
+    title: string;
+};
+export declare const visualThinkingContainerStyles: {
+    display: string;
+    flexDirection: string;
+};
+export declare const brandContainerStyles: {
+    background: string;
+    width: string;
+};
+export declare const headingStyles: {
+    marginTop: string;
+};
+export declare const colorPictoStoryData: {
+    args: {
+        state: string;
+    };
+    argTypes: {
+        state: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+        scans: {
+            state: string[];
+        };
+    };
+    name: string;
+    title: string;
+};
+export declare const animateStoryData: {
+    args: {
+        delay: number;
+        state: "stop" | "play";
+    };
+    argTypes: {
+        delay: {
+            max: number;
+            min: number;
+            name: string;
+            step: number;
+            type: string;
+        };
+        state: {
+            control: {
+                options: readonly ["stop", "play"];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+    };
+    name: string;
+    title: string;
+};
+export declare const animateContainerStyles: {
+    backgroundColor: string;
+    height: string;
+    width: string;
+};

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

@@ -0,0 +1,36 @@
+import { AttrsObject } from '../../utils';
+import { AnimationConfigWithData } from 'lottie-web';
+export type SVGSize = 'small' | 'medium' | 'large' | 'auto';
+export interface SVGDefaults {
+    attrs: AttrsObject;
+    size: SVGSize;
+}
+interface AllowedValues {
+    sizes: Array<string>;
+}
+/**
+ * Defines all of values allowed for attributes with limited values;
+ * used for Storybook and testing
+ */
+export declare const allowedSvgValues: AllowedValues;
+/**
+ * Default values for props on the SVG component;
+ * Shared between the component and Storybook
+ */
+export declare const svgDefaults: SVGDefaults;
+export type SVGObject = Record<string, any>;
+export type LottieConfig = Omit<AnimationConfigWithPath, 'container'>;
+export declare const baseLottieConfig: LottieConfig;
+interface AnimationConfigWithPath extends AnimationConfigWithData<'svg'> {
+    path?: string;
+}
+export declare const allowedAnimatedValues: {
+    states: readonly ["stop", "play"];
+};
+export type AnimatedState = (typeof allowedAnimatedValues.states)[number];
+export interface AnimatedDefaults {
+    delay: number;
+    state: AnimatedState;
+}
+export declare const animatedDefaults: AnimatedDefaults;
+export {};

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

@@ -0,0 +1,3 @@
+export * from "./MrlSvg/MrlSvg";
+export * from "./MrlSvgAnimate/MrlSvgAnimate";
+export * from './constants';