@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

package/dist/types/components/form/text-input/MrlTextInput/MrlTextInput.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { DSIconType } from '../../../';
+import { AttrsObject, MrlComponentProps } from '../../../../utils';
+import { RightActionConfig, InputStates } from '../../constants';
+/**
+ * @todo - we need to add static icon support for right
+ */
+interface MrlTextInputProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'input'> {
+    /** Applies additional HTML attributes to the text input element */
+    attrs?: AttrsObject;
+    /** Additional function to be run when the input's value is cleared */
+    hookClear?: () => void;
+    /** Id of the text input */
+    inputId: string;
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     *
+     * If undefined or set to "0", removes the character counter from the input
+     */
+    maxLength?: number;
+    /** Text placeholder for the text input */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Configures a static icon to persistently display on the left side of the input */
+    persistIcon?: DSIconType;
+    /** Configures an icon to the right side of the input */
+    dynamicIcon?: RightActionConfig;
+    /** Preset for setting up a clearable input via a right icon */
+    isClearable?: boolean;
+}
+/**
+ * Allows the user to input plain text
+ * @param {MrlTextInputProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a text input element
+ */
+export declare const MrlTextInput: React.ForwardRefExoticComponent<Omit<MrlTextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/types/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DSIconType } from '../../../';
+export interface MrlTextInputRightIconProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlTextInputRightIconProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare function MrlTextInputRightIcon({ action, dataQa, hasActiveColor, icon, label, setHasActiveColor, value }: MrlTextInputRightIconProps): JSX.Element;

package/dist/types/components/form/text-input/MrlTextInput/index.d.ts

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

package/dist/types/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import './MrlEditableTextarea.global.scss';
+import { InputStates, MrlFormInputError } from '../../..';
+interface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** The value of the textarea used to make it a controlled input */
+    value: string;
+    /**
+     * 	Value of the label text assigned to the input.
+     *  This is used to describe to the user what field they will be editing when interacting with the edit buton.
+     */
+    inputLabelText: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /**
+     * Id of the text input.
+     */
+    inputId: string;
+    /**
+     * Text placeholder for the text input.
+     */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Additional class to add to the textarea */
+    className?: string;
+    'data-qa': string;
+    error?: MrlFormInputError;
+    isEditable?: boolean;
+    setIsEditable?: (isEditableUpdate: boolean) => void;
+    /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
+    autoExpand?: boolean;
+}
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlEditableTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export declare const MrlEditableTextarea: React.ForwardRefExoticComponent<MrlEditableTextareaProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { DSIconType } from '../../..';
+export interface MrlEditableTextareaRightButtonProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: DSIconType;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+    ref?: HTMLButtonElement;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlEditableTextareaRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare const MrlEditableTextareaRightButton: React.ForwardRefExoticComponent<Omit<MrlEditableTextareaRightButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/form/textarea/MrlEditableTextarea/index.d.ts

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

package/dist/types/components/form/textarea/MrlTextarea/MrlTextarea.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import './MrlTextarea.global.scss';
+type MrlTextareaState = 'default' | 'disabled' | 'error' | 'read-only';
+interface MrlTextareaProps {
+    /** Applies additional HTML attributes to the textarea element */
+    attrs?: AttrsObject;
+    /** The value of the textarea used to make it a controlled input */
+    value?: string;
+    /**
+     * The maximum number of characters that the user can enter.
+     * If undefined or set to "0", removes the character counter from the textarea
+     */
+    maxLength?: number;
+    /**
+     * Id of the text input.
+     */
+    inputId: string;
+    /**
+     * Text placeholder for the text input.
+     */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: MrlTextareaState;
+    /** Additional class to add to the textarea */
+    className?: string;
+    /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
+    autoExpand?: boolean;
+}
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+export declare function MrlTextarea({ attrs, className, inputId, state, maxLength, placeholder, value, autoExpand, ...rest }: MrlTextareaProps): JSX.Element;
+export {};

package/dist/types/components/form/textarea/MrlTextarea/index.d.ts

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

package/dist/types/components/form/utils.d.ts

@@ -0,0 +1,94 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Defines all of the possible actions a user can take with their keyboard in a select.
+ * This is used to create a more human-friendly connection between the actions and
+ * keyboard short cuts since multiple keys may perform the same action.
+ * See getActionFromKey for more details.
+ *
+ * @todo - need to verify what the pageDown/Up keys do differently. They have a
+ * 		different action in the getUpdatedIndex function but need to understand
+ * 		a bit more.  This is not merge blocking for MVP
+ */
+export declare const actions: {
+    Close: number;
+    CloseSelect: number;
+    First: number;
+    Last: number;
+    Next: number;
+    Open: number;
+    PageDown: number;
+    PageUp: number;
+    Previous: number;
+    Type: number;
+};
+/**
+ * Map a key press to an action (see the )
+ *
+ * @param {KeyboardEvent} event - keyboard event
+ * @param {boolean} isMenuOpen - dropdown menu state
+ * @param {string | undefined} search - current searchstring to determine how to handle space presses
+ * @returns {number | undefined} - returns action number or quits from function execution
+ */
+export declare const getActionFromKey: (event: KeyboardEvent, isMenuOpen: boolean, search?: string | undefined) => number | undefined;
+/**
+ * Get an updated item index based on the action
+ *
+ * @param {number} currentIndex - index of the active menu item
+ * @param {number} maxIndex - last menu item's index
+ * @param {action} action - keyboard key action
+ * @returns {number} - returns updated index
+ */
+export declare const getUpdatedIndex: (currentIndex: number, maxIndex: number | undefined, action: number) => number;
+/**
+ * Checks if the select menu items has scrollable overflow
+ *
+ * @param {HTMLElement} menu - select menu component
+ * @returns {boolean} - true if the menu has overflow content
+ */
+export declare const isScrollable: (menu: HTMLElement) => boolean;
+/**
+ * Ensures a given child element is within the parents's visible scroll area.
+ * If the child is not visible, it scrolls the parent element.
+ *
+ * @param {HTMLElement} childEl - clicked/focused select item
+ * @param {HTMLElement} scrollParent - select menu component
+ * @todo - POST MVP - this could be a more reusable util function for other components
+ * @todo - POST MVP - the marginY should be more dynamic
+ */
+export declare const maintainScrollVisibility: (childEl: HTMLElement, scrollParent: HTMLElement) => void;
+/**
+ * Returns the index of an option from an array of options, based on a search string
+ * if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+ *
+ * @param {Element[]} options - menu items list
+ * @param {string} filter - pressed letters combination
+ * @param {number} startIndex - start index
+ * @returns {number} - menu item's index
+ */
+export declare const getIndexByLetter: (options: Element[], filter: string, startIndex?: number) => number;
+type DebounceType = number | null | undefined;
+type CallbackType = (_debounce: number) => void;
+/**
+ * Waits a predetermined time before calling a function
+ *
+ * @param {Function} func - function to call after timeout
+ * @param {number} timeout - time to wait before calling function
+ * @param {number} debounce - existing debounce to clear
+ * @param {Function} callback - callback function to update debounce
+ * @returns {Function} - function to reset debounce and call callback
+ * @todo - 4969 investigate combining this debounce function with the modal debounce function
+ */
+export declare const debounce: (func: () => void, timeout: number | undefined, debounce: DebounceType, callback: CallbackType) => (() => void);
+type GetAriaDescribedByReturn = {
+    ['aria-describedby']?: string;
+} | {
+    ['aria-describedby']: string;
+};
+/**
+ * Generates the 'aria-describedby' attribute from multiple ids
+ *
+ * @param {Array<string | undefined>} args ids
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
+ */
+export declare function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn;
+export {};

package/dist/types/components/grid/MrlCol/MrlCol.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import { GridColumns } from '../constants';
+type MrlCol = LayoutComponent & GridColumns;
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlCol(props: MrlCol): JSX.Element;
+export {};

package/dist/types/components/grid/MrlCol/index.d.ts

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

package/dist/types/components/grid/MrlGrid/MrlGrid.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import '../grid.variables.scss';
+import '../grid.global.scss';
+/**
+ * MrlCol React component.
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlGrid({ children, className, ...rest }: LayoutComponent): JSX.Element;

package/dist/types/components/grid/MrlGrid/index.d.ts

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

package/dist/types/components/grid/MrlRow/MrlRow.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../../layout/constants';
+import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
+interface MrlRow extends LayoutComponent {
+    /**
+     * Flex alignment of the children within the component.
+     */
+    align?: AlignOptions;
+    /**
+     * Gutter size for columns within the row
+     */
+    gutter?: GutterSizes;
+    /**
+     * Justify content of the children within the component.
+     */
+    justify?: JustifyOptions;
+}
+/**
+ * MrlRow React component.
+ * @param props - component props
+ * @returns a MrlRow React component.
+ */
+export declare function MrlRow({ align, children, className, justify, ...rest }: MrlRow): JSX.Element;
+export {};

package/dist/types/components/grid/MrlRow/index.d.ts

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

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

@@ -0,0 +1,50 @@
+/**
+ * Alignment & justification options for grid containers
+ */
+export type AlignOptions = 'start' | 'center' | 'end';
+export type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Available grid sizes
+ */
+export declare const GridSizes: string[];
+/**
+ * Number of columns that will be span on the grid.
+ */
+export type NumCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * The type of classes that can be configured based on the bootstrap API.
+ * Current supported:
+ * - columns "col-<size>-<number>"
+ * - offsets "offset-<size>-<number>""
+ */
+type GridClass = 'col' | 'offset';
+/**
+ * Interface of available class selectors based on GridClass
+ *
+ * Example interface:
+ * {
+ *    col?: number,
+ *    offset?: number
+ * }
+ */
+type GridClassConfig = {
+    [key in GridClass]?: NumCols;
+};
+/**
+ * Options to configure the number of columns to span on different screen sizes.
+ */
+type ColumnConfig = NumCols | 'auto' | GridClassConfig | undefined;
+export interface GridColumns {
+    col?: ColumnConfig;
+    xs?: ColumnConfig;
+    sm?: ColumnConfig;
+    md?: ColumnConfig;
+    lg?: ColumnConfig;
+    xl?: ColumnConfig;
+    xxl?: ColumnConfig;
+}
+/**
+ * Available gutter sizes for customizing the grid
+ */
+export type GutterSizes = 0 | 1 | 2;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './MrlGrid';
+export * from './MrlRow';
+export * from './MrlCol';

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

@@ -0,0 +1,34 @@
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './container';
+export * from './divider';
+export * from './error-boundary';
+export * from './focus-trap';
+export * from './form';
+export * from './grid';
+export * from './keystroke';
+export * from './layout';
+export * from './link';
+export * from './loader';
+export * from './menu';
+export * from './modal';
+export * from './notification';
+export * from './pagination';
+export * from './popover';
+export * from './svg';
+export * from './table';
+export * from './tabs';
+export * from './text';
+export * from './tooltip';
+export * from './portal';
+export * from './navigation-sidebar';
+export * from './skeleton';
+export * from './empty';
+export * from './live-region';
+export * from './callout';
+export * from './panel';
+export * from './rovingTabindex';
+export * from './toolbar';
+export * from './filter';
+export * from './breadcrumb';

package/dist/types/components/keystroke/MrlKeystroke/MrlKeystroke.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface MrlKeystrokeProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+}
+/**
+ * MrlKeystroke Component
+ *
+ * Displays keyboard shortcuts and keystroke combinations in a visually consistent format.
+ * Useful for showing users available keyboard shortcuts in tooltips, menus, help text, or command palettes.
+ *
+ * @param props - component props
+ * @returns a MrlKeystroke React component
+ */
+export declare function MrlKeystroke({ children, className, ...remainingProps }: MrlKeystrokeProps): React.JSX.Element;

package/dist/types/components/keystroke/MrlKeystroke/index.d.ts

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

package/dist/types/components/keystroke/MrlKeystrokes/MrlKeystrokes.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface MrlKeystrokesProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+}
+/**
+ * MrlKeystrokes Component
+ *
+ * Wraps a group of MrlKeystroke components together with proper spacing.
+ * Useful for displaying keyboard shortcut combinations.
+ *
+ * @param props - component props
+ * @returns a MrlKeystrokes React component
+ */
+export declare function MrlKeystrokes({ children, className, ...remainingProps }: MrlKeystrokesProps): React.JSX.Element;

package/dist/types/components/keystroke/MrlKeystrokes/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './MrlKeystroke';
+export * from './MrlKeystrokes';

package/dist/types/components/layout/MrlMain/MrlMain.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../constants';
+/**
+ * MrlMain React component.
+ * @param props - component props
+ * @returns a MrlMain React component.
+ */
+export declare function MrlMain({ children, className, ...rest }: LayoutComponent): JSX.Element;

package/dist/types/components/layout/MrlMain/index.d.ts

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

package/dist/types/components/layout/MrlPage/MrlPage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../constants';
+type MrlPage = LayoutComponent;
+/**
+ * MrlPage React component.
+ * @param props - component props
+ * @returns a MrlPage React component.
+ */
+export declare function MrlPage({ children, className, ...rest }: MrlPage): JSX.Element;
+export {};

package/dist/types/components/layout/MrlPage/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LayoutComponent } from '../constants';
+type MrlPage = LayoutComponent;
+/**
+ * MrlPage Provider
+ *
+ * @param props - component props
+ * @returns a MrlPage React component.
+ */
+export declare function MrlPage({ ...rest }: MrlPage): JSX.Element;
+export {};

package/dist/types/components/layout/MrlSidebar/MrlSidebar.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { LayoutComponent, LayoutSection } from '../constants';
+export type MrlSidebarHookInfo = {
+    source: 'userInteraction' | 'imperativeHandler';
+};
+interface MrlSidebarHook {
+    hookClose?: (info: MrlSidebarHookInfo) => void;
+    hookOpen?: (info: MrlSidebarHookInfo) => void;
+}
+export interface MrlSidebarHandle {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+}
+/**
+ * MrlSidebar React component.
+ * @param props - component props
+ * @returns a MrlSidebar React component.
+ */
+export declare const MrlSidebar: React.ForwardRefExoticComponent<LayoutComponent & LayoutSection & MrlSidebarHook & React.RefAttributes<MrlSidebarHandle>>;
+export {};

package/dist/types/components/layout/MrlSidebar/demo/MrlSidebarDemo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * MrlSidebar demo with the use of the forward ref to make open/close/toggle the sidebar
+ * through buttons as children and outside of the sidebar.
+ *
+ * @returns a MrlSidebarDemo React component.
+ */
+export declare const MrlSidebarDemo: () => JSX.Element;

package/dist/types/components/layout/MrlSidebar/index.d.ts

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

package/dist/types/components/layout/MrlTopbar/MrlTopbar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LayoutComponent, LayoutSection } from '../constants';
+type MrlTopbar = LayoutComponent & LayoutSection;
+/**
+ * MrlTopbar React component.
+ * @param props - component props
+ * @returns a MrlTopbar React component.
+ */
+export declare function MrlTopbar({ children, className, ...rest }: MrlTopbar): JSX.Element;
+export {};

package/dist/types/components/layout/MrlTopbar/index.d.ts

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface LayoutComponent {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+}
+export interface LayoutSection {
+    /**
+     * Label to apply to region of the page
+     */
+    ariaLabel: React.ReactNode;
+}
+export declare const TOPBAR_SELECTOR = "mrl-topbar";
+export declare const SIDEBAR_SELECTOR = "mrl-sidebar";

package/dist/types/components/layout/context/LayoutContext.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type LayoutContextType = {
+    isSidebarRendered: boolean;
+    isTopbarRendered: boolean;
+};
+type LayoutProviderProps = {
+    children: React.ReactNode;
+};
+/**
+ * Provides layout-related context values to child components.
+ *
+ * @param {LayoutProviderProps} props - The props for the component.
+ * @returns A React element that provides the layout context to children.
+ */
+export declare function LayoutProvider({ children }: LayoutProviderProps): React.ReactElement;
+/**
+ * Custom hook to access layout context values.
+ * This hook ensures that the component using it is wrapped within a LayoutProvider.
+ *
+ * @throws Will throw an error if not used within a `LayoutProvider`.
+ * @returns The layout context containing isSidebarRendered and isTopbarRendered.
+ */
+export declare const useLayoutContext: () => LayoutContextType;
+export {};

package/dist/types/components/layout/error-page/MrlBrandColors/MrlBrandColors.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface MrlBrandColorsProps {
+    /**
+     * Custom class name to be added to the component
+     */
+    className?: string;
+}
+/**
+ * MrlBrandColors component
+ * @param props - MrlBrandColors component props
+ * @returns MrlBrandColors component
+ */
+export declare const MrlBrandColors: ({ className, ...rest }: MrlBrandColorsProps) => JSX.Element;

package/dist/types/components/layout/error-page/MrlBrandColors/index.d.ts

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