@muraldevkit/ui-toolkit 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/table/MrlSmartTable/MrlSmartTable.d.ts +112 -0
- package/dist/components/table/MrlSmartTable/index.d.ts +1 -0
- package/dist/components/table/MrlTable/MrlTable.d.ts +17 -0
- package/dist/components/table/MrlTable/index.d.ts +1 -0
- package/dist/components/table/MrlTableBody/MrlTableBody.d.ts +17 -0
- package/dist/components/table/MrlTableBody/index.d.ts +1 -0
- package/dist/components/table/MrlTableCell/MrlTableCell.d.ts +17 -0
- package/dist/components/table/MrlTableCell/index.d.ts +1 -0
- package/dist/components/table/MrlTableColumn/MrlTableColumn.d.ts +17 -0
- package/dist/components/table/MrlTableColumn/index.d.ts +1 -0
- package/dist/components/table/MrlTableEmptyState/MrlTableEmptyState.d.ts +15 -0
- package/dist/components/table/MrlTableEmptyState/index.d.ts +1 -0
- package/dist/components/table/MrlTableHeader/MrlTableHeader.d.ts +17 -0
- package/dist/components/table/MrlTableHeader/index.d.ts +1 -0
- package/dist/components/table/MrlTableRow/MrlTableRow.d.ts +17 -0
- package/dist/components/table/MrlTableRow/index.d.ts +1 -0
- package/dist/components/table/constants.d.ts +17 -0
- package/dist/components/table/fixtures.d.ts +27 -0
- package/dist/components/table/index.d.ts +9 -0
- package/dist/components/table/utils.d.ts +43 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlSmartTable/module.scss +24 -0
- package/dist/styles/MrlTable/module.scss +10 -0
- package/dist/styles/MrlTableBody/module.scss +8 -0
- package/dist/styles/MrlTableCell/module.scss +11 -0
- package/dist/styles/MrlTableColumn/module.scss +27 -0
- package/dist/styles/MrlTableEmptyState/module.scss +18 -0
- package/dist/styles/MrlTableHeader/module.scss +12 -0
- package/dist/styles/MrlTableRow/module.scss +18 -0
- package/dist/styles/table/global.scss +22 -0
- package/dist/styles/table/variables.scss +33 -0
- package/package.json +2 -1
|
@@ -5,5 +5,5 @@ import './MrlAnimatedIconButton.scss';
|
|
|
5
5
|
interface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {
|
|
6
6
|
icon: MrlSvgAnimateProps;
|
|
7
7
|
}
|
|
8
|
-
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
8
|
+
export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Pick<MrlAnimatedIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
9
|
export {};
|
|
@@ -67,4 +67,4 @@ export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.
|
|
|
67
67
|
*/
|
|
68
68
|
toggleStyle?: ToggleStyle;
|
|
69
69
|
}
|
|
70
|
-
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
70
|
+
export declare const MrlButton: React.ForwardRefExoticComponent<Pick<MrlButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "icon" | "badge" | "disableEvents" | "toggleAria" | "toggleStyle" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "iconPos"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -79,4 +79,4 @@ export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, Re
|
|
|
79
79
|
*/
|
|
80
80
|
wrapperClassName?: string;
|
|
81
81
|
}
|
|
82
|
-
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "
|
|
82
|
+
export declare const MrlIconButton: React.ForwardRefExoticComponent<Pick<MrlIconButtonProps, "form" | "slot" | "style" | "title" | "text" | "dir" | "disabled" | "id" | "defaultValue" | "state" | "children" | "kind" | "size" | "attrs" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "key" | "value" | "client" | "icon" | "badge" | "disableEvents" | "position" | "tipAnchor" | "toggleAria" | "toggleStyle" | "wrapperClassName" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MrlSortDirection, MrlTableColumnId, MrlTableColumnSortDescriptor, MrlTableItemId, MrlTableSelectionMode } from '../constants';
|
|
3
|
+
export interface MrlSmartColumnRendererProps {
|
|
4
|
+
column: MrlSmartTableColumn;
|
|
5
|
+
setSortDescriptor: ({ column, direction }: {
|
|
6
|
+
column: MrlSmartTableColumn['id'];
|
|
7
|
+
direction: MrlSortDirection;
|
|
8
|
+
}) => void;
|
|
9
|
+
tableElementId: string;
|
|
10
|
+
dataQaPrefix: string;
|
|
11
|
+
sortDescriptor?: MrlTableColumnSortDescriptor;
|
|
12
|
+
}
|
|
13
|
+
export interface MrlSmartCellRendererProps {
|
|
14
|
+
item: MrlTableItem;
|
|
15
|
+
column: MrlSmartTableColumn;
|
|
16
|
+
tableElementId: string;
|
|
17
|
+
dataQaPrefix: string;
|
|
18
|
+
}
|
|
19
|
+
export interface MrlTableItem extends Record<string, unknown> {
|
|
20
|
+
/**
|
|
21
|
+
* A unique identifier for the row item.
|
|
22
|
+
*/
|
|
23
|
+
id: MrlTableItemId;
|
|
24
|
+
}
|
|
25
|
+
export interface MrlSmartTableColumn {
|
|
26
|
+
/**
|
|
27
|
+
* The key used to retrieve the cell value from the item object,
|
|
28
|
+
* e.g. `item[key]`.
|
|
29
|
+
*/
|
|
30
|
+
id: MrlTableColumnId;
|
|
31
|
+
/**
|
|
32
|
+
* The display name of the column.
|
|
33
|
+
*/
|
|
34
|
+
name: string;
|
|
35
|
+
/**
|
|
36
|
+
* A component used to override rendering for each column cell. The
|
|
37
|
+
* component is expected to render a MrlTableColumn.
|
|
38
|
+
*/
|
|
39
|
+
renderColumn?: (props: MrlSmartColumnRendererProps) => JSX.Element;
|
|
40
|
+
/**
|
|
41
|
+
* A component used to override rendering for each row cell. The
|
|
42
|
+
* component is expected to render a MrlTableCell.
|
|
43
|
+
*/
|
|
44
|
+
renderCell?: (props: MrlSmartCellRendererProps) => JSX.Element;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the column allows sorting.
|
|
47
|
+
*/
|
|
48
|
+
allowsSorting?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* A sort comparator function for the column.
|
|
51
|
+
*
|
|
52
|
+
* @default sortAlphabeticallyAsCoercedStrings
|
|
53
|
+
*/
|
|
54
|
+
sortBy?: (aValue: unknown, bValue: unknown) => number;
|
|
55
|
+
}
|
|
56
|
+
export type MrlTableSelection = Set<MrlTableItemId>;
|
|
57
|
+
export interface MrlSmartTableSelectionOptions {
|
|
58
|
+
/**
|
|
59
|
+
* The type of selection that is allowed in the collection.
|
|
60
|
+
*
|
|
61
|
+
* @default none
|
|
62
|
+
*/
|
|
63
|
+
mode: MrlTableSelectionMode;
|
|
64
|
+
/**
|
|
65
|
+
* The currently selected keys in the collection (controlled).
|
|
66
|
+
*/
|
|
67
|
+
selectedKeys: MrlTableSelection;
|
|
68
|
+
/**
|
|
69
|
+
* Handler that is called when the selection changes.
|
|
70
|
+
*/
|
|
71
|
+
onSelectionChange: (keys: MrlTableSelection) => void;
|
|
72
|
+
}
|
|
73
|
+
export interface MrlSmartTableProps {
|
|
74
|
+
/**
|
|
75
|
+
* A list of table columns.
|
|
76
|
+
*/
|
|
77
|
+
columns: MrlSmartTableColumn[];
|
|
78
|
+
/**
|
|
79
|
+
* A list of items to populate the table.
|
|
80
|
+
*/
|
|
81
|
+
items: MrlTableItem[];
|
|
82
|
+
/**
|
|
83
|
+
* When provided, enables and controls table selection.
|
|
84
|
+
*/
|
|
85
|
+
selectionOptions?: MrlSmartTableSelectionOptions;
|
|
86
|
+
/**
|
|
87
|
+
* A prefix applied to each data-qa element within the table.
|
|
88
|
+
*
|
|
89
|
+
* @default "mrl-smart-table"
|
|
90
|
+
*/
|
|
91
|
+
dataQaPrefix?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Provides content to display when there are no rows in the table.
|
|
94
|
+
*
|
|
95
|
+
* @default MrlTableEmptyState
|
|
96
|
+
*/
|
|
97
|
+
emptyState?: JSX.Element;
|
|
98
|
+
/**
|
|
99
|
+
* An element id (and if not provided, a unique value decorated
|
|
100
|
+
* to prevent conflict with aria controls will be generated).
|
|
101
|
+
*
|
|
102
|
+
* @default ${id}-mrl-smart-table
|
|
103
|
+
*/
|
|
104
|
+
id?: string;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* MrlSmartTable Component
|
|
108
|
+
*
|
|
109
|
+
* @param {MrlSmartTableProps} props - MrlSmartTable component props
|
|
110
|
+
* @returns a table
|
|
111
|
+
*/
|
|
112
|
+
export declare function MrlSmartTable(props: MrlSmartTableProps & React.HTMLProps<HTMLTableElement>): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlSmartTable';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableProps extends React.HTMLProps<HTMLTableElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTable Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTable} props - MrlTable component props
|
|
15
|
+
* @returns a table element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTable({ className, ...rest }: MrlTableProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTable';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableBodyProps extends React.HTMLProps<HTMLTableSectionElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table-body`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTableBody Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTableBodyProps} props - MrlTableBody component props
|
|
15
|
+
* @returns a table body element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTableBody({ className, ...rest }: MrlTableBodyProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableBody';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableCellProps extends React.HTMLProps<HTMLTableCellElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table-cell`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTableCell Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTableCellProps} props - MrlTableCell component props
|
|
15
|
+
* @returns a table cell element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTableCell({ className, ...rest }: MrlTableCellProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableCell';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableColumnProps extends React.HTMLProps<HTMLTableCellElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table-column`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTableColumn Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTableColumnProps} props - MrlTableColumn component props
|
|
15
|
+
* @returns a table column element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTableColumn({ className, ...rest }: MrlTableColumnProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableColumn';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface MrlTableEmptyStateProps {
|
|
3
|
+
/**
|
|
4
|
+
* Text to be displayed in the empty state.
|
|
5
|
+
*/
|
|
6
|
+
text?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* MrlTableEmptyState Component
|
|
10
|
+
*
|
|
11
|
+
* @param {MrlTableEmptyStateProps} props - MrlTableEmptyState component props
|
|
12
|
+
* @returns an empty state element
|
|
13
|
+
*/
|
|
14
|
+
export declare function MrlTableEmptyState({ text }: MrlTableEmptyStateProps): JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableEmptyState';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableHeaderProps extends React.HTMLProps<HTMLTableSectionElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table-header`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTableHeader Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTableHeaderProps} props - MrlTableHeader component props
|
|
15
|
+
* @returns a table header element with a nested table row element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTableHeader({ children, className, ...rest }: MrlTableHeaderProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableHeader';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface MrlTableRowProps extends React.HTMLProps<HTMLTableRowElement> {
|
|
3
|
+
/**
|
|
4
|
+
* An element id (and if not provided, a unique value decorated
|
|
5
|
+
* to prevent conflict with aria controls will be generated).
|
|
6
|
+
*
|
|
7
|
+
* @default `${id}-mrl-table-row`
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* MrlTableRow Component
|
|
13
|
+
*
|
|
14
|
+
* @param {MrlTableRowProps} props - MrlTableRow component props
|
|
15
|
+
* @returns a table row element
|
|
16
|
+
*/
|
|
17
|
+
export declare function MrlTableRow({ className, ...rest }: MrlTableRowProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlTableRow';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type MrlTableItemId = string;
|
|
2
|
+
export type MrlTableColumnId = string;
|
|
3
|
+
export declare enum MrlSortDirection {
|
|
4
|
+
ASC = 1,
|
|
5
|
+
DESC = -1
|
|
6
|
+
}
|
|
7
|
+
export interface MrlTableColumnSortDescriptor {
|
|
8
|
+
/**
|
|
9
|
+
* The key of the column to sort by.
|
|
10
|
+
*/
|
|
11
|
+
column: MrlTableColumnId;
|
|
12
|
+
/**
|
|
13
|
+
* The direction to sort by.
|
|
14
|
+
*/
|
|
15
|
+
direction: MrlSortDirection;
|
|
16
|
+
}
|
|
17
|
+
export type MrlTableSelectionMode = 'single' | 'multiple';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export declare const SAMPLE_COLUMNS: ({
|
|
2
|
+
allowsSorting: boolean;
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
} | {
|
|
6
|
+
id: string;
|
|
7
|
+
name: string;
|
|
8
|
+
allowsSorting?: undefined;
|
|
9
|
+
})[];
|
|
10
|
+
export declare const SAMPLE_ITEMS: {
|
|
11
|
+
dateModified: string;
|
|
12
|
+
id: string;
|
|
13
|
+
name: string;
|
|
14
|
+
type: string;
|
|
15
|
+
}[];
|
|
16
|
+
export declare const SAMPLE_ITEMS_WITH_LONG_CONTENT: {
|
|
17
|
+
dateModified: string;
|
|
18
|
+
id: string;
|
|
19
|
+
name: string;
|
|
20
|
+
type: string;
|
|
21
|
+
}[];
|
|
22
|
+
export declare const SAMPLE_ITEMS_500: {
|
|
23
|
+
id: string;
|
|
24
|
+
dateModified: string;
|
|
25
|
+
name: string;
|
|
26
|
+
type: string;
|
|
27
|
+
}[];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export * from './MrlTable';
|
|
2
|
+
export * from './MrlTableBody';
|
|
3
|
+
export * from './MrlTableCell';
|
|
4
|
+
export * from './MrlTableColumn';
|
|
5
|
+
export * from './MrlTableHeader';
|
|
6
|
+
export * from './MrlTableRow';
|
|
7
|
+
export * from './MrlSmartTable';
|
|
8
|
+
export * from './MrlTableEmptyState';
|
|
9
|
+
export * from './constants';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { sortAsc, sortDes } from '@muraldevkit/ds-icons';
|
|
2
|
+
import { MrlSortDirection } from './constants';
|
|
3
|
+
/**
|
|
4
|
+
* Used as a generic sort comparator for unknown types by coercing each value
|
|
5
|
+
* to a string and sorting alphabetically. It likely produces unexpected and/or
|
|
6
|
+
* undesirable results for anything other than the most basic text or numeric data.
|
|
7
|
+
*
|
|
8
|
+
* @param {unknown} a first of two values
|
|
9
|
+
* @param {unknown} b second of two values
|
|
10
|
+
* @returns {number} A negative number if a occurs before b; positive if the
|
|
11
|
+
* a occurs after b; 0 if they are equivalent.
|
|
12
|
+
*/
|
|
13
|
+
export declare const sortAlphabeticallyAsCoercedStrings: (a: unknown, b: unknown) => number;
|
|
14
|
+
/**
|
|
15
|
+
* Used to generate consistent keys for the entire structure of MrlSmartTable
|
|
16
|
+
*
|
|
17
|
+
* @param {string} prefix the unique structure prefix
|
|
18
|
+
* @param {string} elementType the element type to generate a key for
|
|
19
|
+
* @param {string[]} keys a set of properties to uniquely identify the element
|
|
20
|
+
* @returns {string} the generated key
|
|
21
|
+
*/
|
|
22
|
+
export declare const keyFor: (prefix: string, elementType: 'header' | 'column' | 'body' | 'row' | 'row-cell', ...keys: string[]) => string;
|
|
23
|
+
/**
|
|
24
|
+
* Provides correct sort icon for direction.
|
|
25
|
+
*
|
|
26
|
+
* @param {MrlSortDirection} direction the sort direction
|
|
27
|
+
* @returns {typeof sortAsc | typeof sortDes} the icon
|
|
28
|
+
*/
|
|
29
|
+
export declare const sortIcon: (direction: MrlSortDirection) => typeof sortAsc | typeof sortDes;
|
|
30
|
+
/**
|
|
31
|
+
* Provides text label for sort direction.
|
|
32
|
+
*
|
|
33
|
+
* @param {MrlSortDirection} direction the sort direction
|
|
34
|
+
* @returns {string} the text label
|
|
35
|
+
*/
|
|
36
|
+
export declare const sortText: (direction: MrlSortDirection) => string;
|
|
37
|
+
/**
|
|
38
|
+
* Provides next sort direction based on current direction.
|
|
39
|
+
*
|
|
40
|
+
* @param {MrlSortDirection} current sort direction
|
|
41
|
+
* @returns {MrlSortDirection} next sort direction
|
|
42
|
+
*/
|
|
43
|
+
export declare const nextSortDirection: (current?: MrlSortDirection) => MrlSortDirection;
|