@muraldevkit/ui-toolkit 2.19.4 → 2.21.0

package/dist/components/index.d.ts

@@ -15,3 +15,4 @@ export * from './text';
 export * from './tooltip';
 export * from './portal';
 export * from './navigation-sidebar';
+export * from './skeleton';

package/dist/components/modal/MrlModal/MrlModal.d.ts

@@ -13,6 +13,15 @@ interface ModalProps extends MrlComponentProps {
      */
     className?: string;
     client?: MrlDeviceClient;
+    /**
+     * !!!!! WARNING: do not use this prop without an explicit requirement from the design team !!!!!
+     *
+     * Enables/disables the ability to close the modal. This prop does the following:
+     * - removes close button
+     * - disables clicking on the overlay to close the modal
+     * - disables the escape key to close the modal
+     */
+    closable?: boolean;
     /**
      * Tells the modal whether we are in a loading state.
      * This is used to disabled FocusTrap until the contents of the modal are loaded
@@ -38,5 +47,5 @@ interface ModalProps extends MrlComponentProps {
  * @param {React.ReactElement} props.children - Children to be rendered within the modal. The first child is used as the trigger.
  * @returns {React.ReactElement} an instance of the MrlModal
  */
-export declare const MrlModal: ({ children, className, client, loading, size, state, hookClose, attrs }: ModalProps) => ReactElement;
+export declare const MrlModal: ({ children, className, client, closable, loading, size, state, hookClose, attrs }: ModalProps) => ReactElement;
 export {};

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

@@ -2,6 +2,7 @@
 interface ModalDemoProps {
     /** Additional function to be run when the modal closes */
     hookClose?: (() => void) | undefined;
+    closable?: boolean;
 }
 /**
  * Demo for a modal with a trigger button
@@ -10,5 +11,5 @@ interface ModalDemoProps {
  * @param {Function} props.hookClose - hookClose for modal
  * @returns {Element} Rendered demo
  */
-export declare const ModalWithTriggerDemo: ({ hookClose }: ModalDemoProps) => JSX.Element;
+export declare const ModalWithTriggerDemo: ({ closable, hookClose }: ModalDemoProps) => JSX.Element;
 export {};

package/dist/components/skeleton/MrlSkeleton/MrlSkeleton.d.ts

@@ -0,0 +1,20 @@
+import 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/components/skeleton/MrlSkeleton/index.d.ts

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

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

@@ -0,0 +1,22 @@
+import 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/components/skeleton/MrlSkeletonText/index.d.ts

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

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

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

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

@@ -50,6 +50,7 @@ export interface MrlTableItem extends Record<string, unknown> {
      */
     id: MrlTableItemId;
 }
+export type MrlTableColumnSticky = 'left' | 'right';
 export interface MrlSmartTableColumn {
     /**
      * The key used to retrieve the cell value from the item object,
@@ -80,6 +81,16 @@ export interface MrlSmartTableColumn {
      * @default sortAlphabeticallyAsCoercedStrings
      */
     sortBy?: (aValue: unknown, bValue: unknown) => number;
+    /**
+     * Whether the column is sticky
+     * the sticky effect will only work on the first or last column.
+     * Set to 'left' for the first column and 'right' for the last column
+     *
+     * @example The container of the table will need overflow:scroll/auto
+     * and the width will need to be constrained in order for
+     * the columns to be 'sticky'
+     */
+    sticky?: MrlTableColumnSticky;
 }
 /**
  * A set of item ids.

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { MrlTableColumnSticky } from '../MrlSmartTable';
 export interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'> {
     /**
      * An element id (and if not provided, a unique value decorated
@@ -7,6 +8,10 @@ export interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'>
      * @default `${id}-mrl-table-cell`
      */
     id?: string;
+    /**
+     * Whether this cell is sticky 'left' or sticky 'right' or not sticky at all
+     */
+    sticky?: MrlTableColumnSticky;
 }
 /**
  * MrlTableCell Component
@@ -14,4 +19,4 @@ export interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'>
  * @param {MrlTableCellProps} props - MrlTableCell component props
  * @returns a table cell element
  */
-export declare function MrlTableCell({ className, ...rest }: MrlTableCellProps): JSX.Element;
+export declare function MrlTableCell({ className, sticky, ...rest }: MrlTableCellProps): JSX.Element;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { MrlTableColumnSticky } from '../MrlSmartTable';
 export interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'> {
     /**
      * An element id (and if not provided, a unique value decorated
@@ -7,6 +8,10 @@ export interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'
      * @default `${id}-mrl-table-column`
      */
     id?: string;
+    /**
+     * Whether this column is sticky 'left' or sticky 'right' or not sticky at all
+     */
+    sticky?: MrlTableColumnSticky;
 }
 /**
  * MrlTableColumn Component
@@ -14,4 +19,4 @@ export interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'
  * @param {MrlTableColumnProps} props - MrlTableColumn component props
  * @returns a table column element
  */
-export declare function MrlTableColumn({ className, ...rest }: MrlTableColumnProps): JSX.Element;
+export declare function MrlTableColumn({ className, sticky, ...rest }: MrlTableColumnProps): JSX.Element;

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

@@ -1,3 +1,7 @@
+declare enum STICKY_VALUES {
+    LEFT = "left",
+    RIGHT = "right"
+}
 export declare const SAMPLE_COLUMNS: ({
     allowsSorting: boolean;
     id: string;
@@ -13,6 +17,30 @@ export declare const SAMPLE_ITEMS: {
     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;
@@ -25,3 +53,4 @@ export declare const SAMPLE_ITEMS_500: {
     name: string;
     type: string;
 }[];
+export {};