@muraldevkit/ui-toolkit 2.19.3 → 2.20.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/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/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "play" | "stop";
+        state: "stop" | "play";
     };
     argTypes: {
         delay: {

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 {};