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

package/dist/components/table/MrlTableBody/MrlTableBody.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface MrlTableBodyProps extends React.ComponentPropsWithoutRef<'tbody'> {
+    /**
+     * An element id (and if not provided, a unique value decorated
+     * to prevent conflict with aria controls will be generated).
+     *
+     * @default `${id}-mrl-table-body`
+     */
+    id?: string;
+}
+/**
+ * MrlTableBody Component
+ *
+ * @param {MrlTableBodyProps} props - MrlTableBody component props
+ * @returns a table body element
+ */
+export declare function MrlTableBody({ className, ...rest }: MrlTableBodyProps): JSX.Element;

package/dist/components/table/MrlTableBody/index.d.ts

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

package/dist/components/table/MrlTableCell/MrlTableCell.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { MrlTableColumnSticky } from '../MrlSmartTable';
+import { MrlTableCellHorizontalAlign } from '../constants';
+export interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'> {
+    /**
+     * An element id (and if not provided, a unique value decorated
+     * to prevent conflict with aria controls will be generated).
+     *
+     * @default `${id}-mrl-table-cell`
+     */
+    id?: string;
+    /**
+     * Whether this cell is sticky 'left' or sticky 'right' or not sticky at all
+     */
+    sticky?: MrlTableColumnSticky;
+    hasScrollShadowLeft?: boolean;
+    hasScrollShadowRight?: boolean;
+    horizontalAlign?: MrlTableCellHorizontalAlign;
+}
+/**
+ * MrlTableCell Component
+ *
+ * @param {MrlTableCellProps} props - MrlTableCell component props
+ * @returns a table cell element
+ */
+export declare function MrlTableCell(props: MrlTableCellProps): JSX.Element;

package/dist/components/table/MrlTableCell/index.d.ts

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

package/dist/components/table/MrlTableColumn/MrlTableColumn.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { MrlTableColumnSticky } from '../MrlSmartTable';
+import { MrlTableCellHorizontalAlign } from '../constants';
+export interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'> {
+    /**
+     * An element id (and if not provided, a unique value decorated
+     * to prevent conflict with aria controls will be generated).
+     *
+     * @default `${id}-mrl-table-column`
+     */
+    id?: string;
+    /**
+     * Whether this column is sticky 'left' or sticky 'right' or not sticky at all
+     */
+    sticky?: MrlTableColumnSticky;
+    hasScrollShadowLeft?: boolean;
+    hasScrollShadowRight?: boolean;
+    horizontalAlign?: MrlTableCellHorizontalAlign;
+}
+/**
+ * MrlTableColumn Component
+ *
+ * @param {MrlTableColumnProps} props - MrlTableColumn component props
+ * @returns a table column element
+ */
+export declare function MrlTableColumn(props: MrlTableColumnProps): JSX.Element;

package/dist/components/table/MrlTableColumn/index.d.ts

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

package/dist/components/table/MrlTableEmptyState/MrlTableEmptyState.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface MrlTableEmptyStateProps {
+    /**
+     * Text to be displayed in the empty state.
+     */
+    text?: string;
+}
+/**
+ * MrlTableEmptyState Component
+ *
+ * @param {MrlTableEmptyStateProps} props - MrlTableEmptyState component props
+ * @returns an empty state element
+ */
+export declare function MrlTableEmptyState({ text }: MrlTableEmptyStateProps): JSX.Element;
+export {};

package/dist/components/table/MrlTableEmptyState/index.d.ts

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

package/dist/components/table/MrlTableHeader/MrlTableHeader.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface MrlTableHeaderProps extends React.ComponentPropsWithoutRef<'thead'> {
+    /**
+     * An element id (and if not provided, a unique value decorated
+     * to prevent conflict with aria controls will be generated).
+     *
+     * @default `${id}-mrl-table-header`
+     */
+    id?: string;
+}
+/**
+ * MrlTableHeader Component
+ *
+ * @param {MrlTableHeaderProps} props - MrlTableHeader component props
+ * @returns a table header element with a nested table row element
+ */
+export declare function MrlTableHeader({ children, className, ...rest }: MrlTableHeaderProps): JSX.Element;

package/dist/components/table/MrlTableHeader/index.d.ts

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

package/dist/components/table/MrlTableRow/MrlTableRow.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface MrlTableRowProps extends React.ComponentPropsWithoutRef<'tr'> {
+    /**
+     * An element id (and if not provided, a unique value decorated
+     * to prevent conflict with aria controls will be generated).
+     *
+     * @default `${id}-mrl-table-row`
+     */
+    id?: string;
+    /**
+     * Id of the MrlTableItem associated with the table row
+     */
+    itemId?: string;
+    /**
+     *
+     * Custom click handler to be used for mouse and keyboard selection of table row
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent) => void;
+}
+/**
+ * MrlTableRow Component
+ *
+ * @param {MrlTableRowProps} props - MrlTableRow component props
+ * @returns a table row element
+ */
+export declare const MrlTableRow: React.ForwardRefExoticComponent<MrlTableRowProps & React.RefAttributes<Record<string, HTMLTableRowElement>>>;

package/dist/components/table/MrlTableRow/index.d.ts

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

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

@@ -0,0 +1,22 @@
+export type MrlTableItemId = string;
+export type MrlTableColumnId = string;
+export declare enum MrlSortDirection {
+    ASC = 1,
+    DESC = -1
+}
+export interface MrlTableColumnSortDescriptor {
+    /**
+     * The key of the column to sort by.
+     */
+    column: MrlTableColumnId;
+    /**
+     * The direction to sort by.
+     */
+    direction: MrlSortDirection;
+    /**
+     * The name of the column to sort by.
+     */
+    name: string;
+}
+export type MrlTableSelectionMode = 'single' | 'multiple';
+export type MrlTableCellHorizontalAlign = 'left' | 'right';

package/dist/components/table/fixtures.d.ts

@@ -0,0 +1,94 @@
+declare enum STICKY_VALUES {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const SAMPLE_COLUMNS: ({
+    allowsSorting: boolean;
+    id: string;
+    name: string;
+    tooltip?: undefined;
+} | {
+    allowsSorting: boolean;
+    id: string;
+    name: string;
+    tooltip: string;
+} | {
+    id: string;
+    name: string;
+    allowsSorting?: undefined;
+    tooltip?: undefined;
+})[];
+export declare const SAMPLE_ITEMS: {
+    dateModified: string;
+    id: string;
+    name: string;
+    type: string;
+}[];
+export declare const SAMPLE_ITEMS_FOR_ROW_CONTEXT_SORTING: {
+    dateModified: string;
+    id: string;
+    name: string;
+}[];
+export declare const SAMPLE_ITEMS_WITH_NON_SELECTABLE_ITEM: ({
+    dateModified: string;
+    id: string;
+    name: string;
+    type: string;
+    isSelectable?: undefined;
+} | {
+    dateModified: string;
+    id: string;
+    isSelectable: boolean;
+    name: string;
+    type: string;
+})[];
+export declare const SAMPLE_ITEMS_WITH_DISABLED_ITEM: ({
+    dateModified: string;
+    id: string;
+    name: string;
+    type: string;
+    isDisabled?: undefined;
+} | {
+    dateModified: string;
+    id: string;
+    isDisabled: boolean;
+    name: string;
+    type: string;
+})[];
+export declare const SAMPLE_STICKY_COLUMNS: ({
+    allowsSorting: boolean;
+    id: string;
+    name: string;
+    sticky: STICKY_VALUES;
+} | {
+    allowsSorting: boolean;
+    id: string;
+    name: string;
+    sticky?: undefined;
+} | {
+    id: string;
+    name: string;
+    sticky: STICKY_VALUES;
+    allowsSorting?: undefined;
+})[];
+export declare const SAMPLE_STICKY_ITEMS: {
+    dateModified: string;
+    foobars: string;
+    id: string;
+    name: string;
+    type: string;
+    widgets: string;
+}[];
+export declare const SAMPLE_ITEMS_WITH_LONG_CONTENT: {
+    dateModified: string;
+    id: string;
+    name: string;
+    type: string;
+}[];
+export declare const SAMPLE_ITEMS_500: {
+    id: string;
+    dateModified: string;
+    name: string;
+    type: string;
+}[];
+export {};

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

@@ -0,0 +1,9 @@
+export * from './MrlTable';
+export * from './MrlTableBody';
+export * from './MrlTableCell';
+export * from './MrlTableColumn';
+export * from './MrlTableHeader';
+export * from './MrlTableRow';
+export * from './MrlSmartTable';
+export * from './MrlTableEmptyState';
+export * from './constants';

package/dist/components/table/utils.d.ts

@@ -0,0 +1,43 @@
+import { sortAsc, sortDes } from '@muraldevkit/ds-icons';
+import { MrlSortDirection } from './constants';
+/**
+ * Used as a generic sort comparator for unknown types by coercing each value
+ * to a string and sorting alphabetically. It will likely produce unexpected and/or
+ * undesirable results for anything other than the most basic text or numeric data.
+ *
+ * @param {unknown} a first of two values
+ * @param {unknown} b second of two values
+ * @returns {number} A negative number if a occurs before b; positive if the
+ * a occurs after b; 0 if they are equivalent.
+ */
+export declare const sortAlphabeticallyAsCoercedStrings: (a: unknown, b: unknown) => number;
+/**
+ * Used to generate consistent keys for the entire structure of MrlSmartTable
+ *
+ * @param {string} prefix the unique structure prefix
+ * @param {string} elementType the element type to generate a key for
+ * @param {string[]} keys a set of properties to uniquely identify the element
+ * @returns {string} the generated key
+ */
+export declare const keyFor: (prefix: string, elementType: 'header' | 'column' | 'body' | 'row' | 'row-cell', ...keys: string[]) => string;
+/**
+ * Provides sort icon based on direction.
+ *
+ * @param {MrlSortDirection} direction the sort direction
+ * @returns {typeof sortAsc | typeof sortDes} the icon
+ */
+export declare const sortIcon: (direction: MrlSortDirection) => typeof sortAsc | typeof sortDes;
+/**
+ * Provides text label based on sort direction.
+ *
+ * @param {MrlSortDirection} direction the sort direction
+ * @returns {string} the text label
+ */
+export declare const sortText: (direction: MrlSortDirection) => string;
+/**
+ * Provides next sort direction based on current direction.
+ *
+ * @param {MrlSortDirection} current sort direction
+ * @returns {MrlSortDirection} next sort direction
+ */
+export declare const nextSortDirection: (current?: MrlSortDirection) => MrlSortDirection;

package/dist/components/tabs/MrlTab/MrlTab.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface MrlTabProps extends React.ComponentProps<'button'> {
+    /** Class to be applied to the button element of the MrlTab */
+    className?: string;
+    icon?: React.ReactElement;
+    /**
+     * The id that will be passed to the MrlTabContext to set the active state.
+     * NOTE: This must match the `tabId` set on `MrlTabContent`!
+     */
+    id: string;
+    /** An addition function to call when clicking on a tab */
+    hookClick?: () => void;
+    text: string;
+}
+/**
+ * Renders a tab component
+ *
+ * @param {MrlTabProps} props the props for your MrlTab
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlTab: ({ className, icon, id, hookClick, text }: MrlTabProps) => React.ReactElement;

package/dist/components/tabs/MrlTab/index.d.ts

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

package/dist/components/tabs/MrlTabContent/MrlTabContent.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface MrlTabContentPropTypes {
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabContent */
+    className?: string;
+    /** The id of the tab button associated to this content */
+    tabId: string;
+}
+export declare const MrlTabContent: React.FC<MrlTabContentPropTypes>;

package/dist/components/tabs/MrlTabContent/index.d.ts

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

package/dist/components/tabs/MrlTabGroup/MrlTabGroup.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface MrlTabGroupPropTypes {
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabGroup */
+    className?: string;
+    disablePageControls?: boolean;
+    /** A hidden label for the tab group for accessiblity purposes */
+    label?: string;
+}
+export declare const MrlTabGroup: React.FC<MrlTabGroupPropTypes>;

package/dist/components/tabs/MrlTabGroup/index.d.ts

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

package/dist/components/tabs/MrlTabLink/MrlTabLink.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+export interface MrlTabLinkProps extends NavLinkProps {
+    /** Class to be applied to the NavLink element of the MrlTabLink */
+    className?: string;
+    /** Children to be rendered within the text component */
+    children?: React.ReactNode;
+    icon?: React.ReactElement;
+    /**
+     * The id that will be passed to the MrlTabContext to set the active state.
+     * NOTE: This must match the `tabId` set on `MrlTabContent`!
+     */
+    id: string;
+    /** An addition function to call when clicking on a tab */
+    hookClick?: () => void;
+    /**
+     * Textual content when it's a static string; if you have nested elements,
+     * use children to provide content
+     */
+    text?: string;
+}
+/**
+ * Renders a tab component
+ *
+ * @param {MrlTabLinkProps} props the props for your MrlTabLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlTabLink: ({ className, children, icon, id, hookClick, text, to, ...remainingProps }: MrlTabLinkProps) => React.ReactElement;

package/dist/components/tabs/MrlTabLink/index.d.ts

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

package/dist/components/tabs/MrlTabs/MrlTabs.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { MrlTabContextProps } from '../../../';
+export type MrlTabSize = 'small' | 'large';
+export interface MrlTabsPropTypes {
+    /** Sets the tabs to be styled with capital case */
+    capitalizeTabTitles?: boolean;
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabs */
+    className?: string;
+    /** Sets the default active tab by id */
+    selectedTab?: string;
+    size?: MrlTabSize;
+    spaceTabsEvenly?: boolean;
+}
+export declare const MrlTabs: React.FC<MrlTabsPropTypes>;
+/**
+ * Tab context to prevent us from having to do any prop drilling.
+ *
+ * @returns {MrlTabContextProps} the context of the tabs
+ */
+export declare function useMrlTabContext(): MrlTabContextProps;

package/dist/components/tabs/MrlTabs/index.d.ts

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

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

@@ -0,0 +1 @@
+export type TabActionType = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | null;

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

@@ -0,0 +1,5 @@
+export * from './MrlTab';
+export * from './MrlTabContent';
+export * from './MrlTabGroup';
+export * from './MrlTabLink';
+export * from './MrlTabs';

package/dist/components/text/MrlText/MrlText.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { TextSizes } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+interface MrlTextProps extends React.ComponentPropsWithoutRef<'p'>, DataQa {
+    /**
+     * Applies additional HTML attributes to the text element
+     *
+     * @deprecated - use the regular HTML attributes instead.
+     */
+    attrs?: AttrsObject;
+    /** Children to be rendered within the text component */
+    children?: React.ReactNode;
+    /** Visual size of the text element */
+    size?: TextSizes;
+    /** Textual content when it's a static string; if you have nested elements, use children to provide content */
+    text?: string;
+}
+/**
+ * MrlText Component
+ *
+ * @param {MrlTextProps} props - MrlText component props
+ * @returns a paragraph element
+ */
+export declare function MrlText(props: MrlTextProps): JSX.Element;
+export {};

package/dist/components/text/MrlText/index.d.ts

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

package/dist/components/text/MrlTextHeading/MrlTextHeading.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { LevelType, HeadingHierarchies, HeadingSizes, TextSizes, HeadingKinds } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+interface MrlTextHeadingProps extends React.ComponentPropsWithRef<'h1'>, DataQa {
+    /**
+     * Applies additional HTML attributes to the text element
+     *
+     * @deprecated - use the regular HTML attributes instead.
+     */
+    attrs?: AttrsObject;
+    /** Children to be rendered within the text heading component */
+    children?: React.ReactNode;
+    /** Set the semantic level of the heading based on its usage in the page hierarchy */
+    level?: LevelType;
+    /** Visual styling use case for the heading */
+    kind?: HeadingKinds;
+    /**
+     * Visual size of the heading
+     * xsmall and xxsmall are only supported when kind="title"
+     */
+    size?: HeadingSizes | TextSizes;
+    /**
+     * Clear and concise description of the content that the heading describes
+     *
+     * Note: hierarchy only impacts MrlTextHeading components with `kind="title"`
+     */
+    hierarchy?: HeadingHierarchies;
+    text?: string;
+}
+/**
+ * MuralTextHeading component
+ * Used for creating semantic headings within a page
+ *
+ * @param {MrlTextHeadingProps} props - MrlTextHeading component props
+ * @returns a heading element
+ */
+export declare function MrlTextHeading(props: MrlTextHeadingProps): JSX.Element;
+export {};

package/dist/components/text/MrlTextHeading/index.d.ts

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

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

@@ -0,0 +1,40 @@
+import { AttrsObject } from '../../utils';
+export type TextSizes = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
+export interface TextDefaults {
+    attrs: AttrsObject;
+    size: TextSizes;
+}
+export declare const textAllowedValues: {
+    sizes: string[];
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export declare const textDefaults: TextDefaults;
+export type LevelType = '1' | '2' | '3' | '4' | '5' | '6';
+export type HeadingKinds = 'display' | 'headline' | 'title';
+export type HeadingSizes = 'small' | 'medium' | 'large';
+export type HeadingHierarchies = 'primary' | 'secondary';
+export interface HeadingDefaults {
+    attrs: AttrsObject;
+    hierarchy: HeadingHierarchies;
+    kind: HeadingKinds;
+    level: LevelType;
+    size: HeadingSizes | TextSizes;
+}
+/**
+ * Defines all of classes allowed for the type attribute;
+ * used for Storybook and testing
+ */
+export declare const headingAllowedValues: {
+    hierarchy: string[];
+    kinds: string[];
+    level: string[];
+    sizes: string[];
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export declare const headingDefaults: HeadingDefaults;

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

@@ -0,0 +1,2 @@
+export * from './MrlText';
+export * from './MrlTextHeading';

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

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

package/dist/components/toolbar/MrlToolbar/MrlToolbar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { MrlIconButtonProps, MrlMenuProps } from '../../../';
+/**
+ * Props for the MrlToolbar component.
+ */
+export interface MrlToolbarProps extends React.ComponentPropsWithRef<'div'> {
+    children?: React.ReactNode;
+    kind?: 'default' | 'inverse' | 'skeleton';
+    /**
+     * An optional prop to apply an aria-label to the MrlToobar
+     */
+    label?: string;
+    lastToolbarInRow?: boolean;
+    /**
+     * An optional prop to set the maximum number of visible items in a toolbar.
+     * Additional items will appear in a menu.
+     */
+    maxVisibleItems?: number;
+    menuButtonProps?: MrlIconButtonProps;
+    menuProps?: MrlMenuProps;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * A boolean prop that sets RovingTabindex in the MrlToolbar
+     */
+    shouldUseRti?: boolean;
+    /**
+     * Sets the size of the toolbar - defaults to 'small'
+     */
+    size?: 'xsmall' | 'small' | 'medium';
+    spaced?: boolean;
+}
+/**
+ * MrlToolbar component.
+ *
+ * @param props The MrlToolbar component properties.
+ * @returns The MrlToolbar component.
+ */
+export declare const MrlToolbar: (props: MrlToolbarProps) => React.ReactElement;

package/dist/components/toolbar/MrlToolbar/index.d.ts

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