@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/esm/components/table/MrlSmartTable/MrlSmartTable.js

@@ -0,0 +1,254 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { MrlCheckboxStandalone, MrlLiveRegion, MrlSvg, MrlTable, MrlTableBody, MrlTableCell, MrlTableColumn, MrlTableHeader, MrlTableRow, MrlTooltip } from '../../';
+import { MrlTableEmptyState } from '../MrlTableEmptyState';
+import { getUniqueId } from '../../../utils';
+import { keyFor, nextSortDirection, sortAlphabeticallyAsCoercedStrings, sortIcon, sortText } from '../utils';
+import { info } from '@muraldevkit/ds-icons';
+import styles from './MrlSmartTable.module.scss.js';
+import { getScrollableContainer } from '../../../utils/getScrollableContainer/getScrollableContainer';
+import { hasHorizontalScroll } from '../../../utils/hasHorizontalScroll/hasHorizontalScroll';
+import { MemoizedDefaultCellContent } from './components/DefaultCellContent';
+const ROW_HEIGHT_PX = 48;
+const sortItems = (columns, items, sortDescriptor) => {
+    const sortColumn = columns.find((col) => col.id === sortDescriptor.column);
+    if (!sortColumn) {
+        console.error(`No column found for sort descriptor key: ${sortDescriptor.column}`);
+        return items;
+    }
+    const { sortByRowContext, sortBy } = sortColumn;
+    if (sortByRowContext) {
+        return [...items].sort((a, b) => sortByRowContext(a, b) * sortDescriptor.direction);
+    }
+    const sortComparator = sortBy || sortAlphabeticallyAsCoercedStrings;
+    return [...items].sort((a, b) => {
+        const aSortValue = a[sortColumn.id];
+        const bSortValue = b[sortColumn.id];
+        return sortComparator(aSortValue, bSortValue) * sortDescriptor.direction;
+    });
+};
+function EmptyStateWrapper({ children, visibleColumnCount }) {
+    return (React.createElement("tr", { role: "row" },
+        React.createElement("td", { role: "gridcell", colSpan: visibleColumnCount }, children)));
+}
+const VisuallyHiddenAccessibleButton = (props) => {
+    const { horizontalAlign } = props, rest = __rest(props, ["horizontalAlign"]);
+    return (React.createElement("button", Object.assign({}, rest, { type: "button", className: classNames(styles['MrlSmartTable--accessible-visually-hidden-button'], {
+            [styles['align-right']]: horizontalAlign === 'right'
+        }) })));
+};
+const DefaultColumnContent = ({ column, dataQaPrefix, tableElementId, handleSortClick, sortDescriptor, hasScrollShadowLeft, hasScrollShadowRight }) => {
+    const { allowsSorting, horizontalAlign, id, name, sticky, tooltip } = column;
+    const elementId = keyFor(tableElementId, 'column', id);
+    const dataQa = keyFor(dataQaPrefix, 'column', id);
+    const columnProps = {
+        'data-qa': dataQa,
+        hasScrollShadowLeft,
+        hasScrollShadowRight,
+        horizontalAlign,
+        id: elementId,
+        scope: 'col',
+        sticky
+    };
+    const memoizedTooltip = React.useMemo(() => (React.createElement(MrlTooltip, { anchor: "center", dataQa: `${dataQa}-tooltip`, kind: "default", position: "bottom", text: tooltip || '' },
+        React.createElement("span", { "data-qa": `${dataQa}-tooltip-trigger`, tabIndex: 0 },
+            React.createElement(MrlSvg, { className: "MrlTableColumn--tooltip", svg: info, size: "small" })))), [dataQa, tooltip]);
+    const tooltipContent = tooltip ? memoizedTooltip : undefined;
+    if (!allowsSorting) {
+        return (React.createElement(MrlTableColumn, Object.assign({}, columnProps),
+            name,
+            tooltipContent));
+    }
+    const currentDirection = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === id ? sortDescriptor.direction : undefined;
+    const nextDirection = nextSortDirection(currentDirection);
+    const onSortClick = () => {
+        handleSortClick({ column: id, direction: nextDirection, name: name });
+    };
+    return (React.createElement(MrlTableColumn, Object.assign({ onClick: onSortClick }, columnProps),
+        React.createElement(VisuallyHiddenAccessibleButton, { "aria-label": `Sort ${sortText(nextDirection)} by ${name}`, horizontalAlign: horizontalAlign, onClick: onSortClick },
+            React.createElement("div", { className: classNames(styles['allowsSorting'], {
+                    [styles['align-right']]: horizontalAlign === 'right',
+                    [styles['noSortSelected']]: horizontalAlign === 'right' && !currentDirection
+                }) },
+                name,
+                tooltipContent,
+                currentDirection ? (React.createElement(MrlSvg, { className: "MrlTableColumn--sort-indicator", size: "small", svg: sortIcon(currentDirection) })) : (horizontalAlign !== 'right' && React.createElement("span", { className: styles['empty-icon-space'] }))))));
+};
+/**
+ * MrlSmartTable Component
+ *
+ * @param {MrlSmartTableProps} props - MrlSmartTable component props
+ * @returns a table
+ */
+export function MrlSmartTable(props) {
+    const { columns, dataQaPrefix = 'mrl-smart-table', emptyStateText, emptyState = React.createElement(MrlTableEmptyState, { text: emptyStateText }), id, items, selectionOptions, defaultSortDescriptor, customSortItems, enableVirtualization = false } = props, ariaProps = __rest(props, ["columns", "dataQaPrefix", "emptyStateText", "emptyState", "id", "items", "selectionOptions", "defaultSortDescriptor", "customSortItems", "enableVirtualization"]);
+    const idRef = React.useRef(id || getUniqueId('mrl-smart-table'));
+    const tableRef = React.useRef(null);
+    const [scrollContainer, setScrollContainer] = React.useState(null);
+    const tableElementId = idRef.current;
+    const [srContent, setSrContent] = React.useState('');
+    const [scrollShadowLeft, setScrollShadowLeft] = React.useState(false);
+    const [scrollShadowRight, setScrollShadowRight] = React.useState(false);
+    const hasStickyLeftColumn = React.useMemo(() => columns.some((col) => col.sticky === 'left'), [columns]);
+    const hasStickyRightColumn = React.useMemo(() => columns.some((col) => col.sticky === 'right'), [columns]);
+    React.useLayoutEffect(() => {
+        if (!tableRef.current)
+            return;
+        const container = getScrollableContainer(tableRef.current);
+        setScrollContainer(container);
+    }, []);
+    React.useLayoutEffect(() => {
+        if (!tableRef.current || !scrollContainer)
+            return;
+        if (!hasStickyLeftColumn && !hasStickyRightColumn)
+            return;
+        function scrollHandler() {
+            if (!tableRef.current || !scrollContainer)
+                return;
+            const { hasScrollLeft, hasScrollRight } = hasHorizontalScroll(scrollContainer);
+            setScrollShadowLeft(hasScrollLeft);
+            setScrollShadowRight(hasScrollRight);
+        }
+        const debouncedScrollHandler = debounce(scrollHandler, 25);
+        const observer = new ResizeObserver(scrollHandler);
+        observer.observe(tableRef.current);
+        document.addEventListener('scroll', debouncedScrollHandler, true);
+        return () => {
+            document.removeEventListener('scroll', debouncedScrollHandler, true);
+            observer.disconnect();
+        };
+    }, [hasStickyLeftColumn, hasStickyRightColumn, scrollContainer]);
+    const visibleColumnCount = columns.length + (selectionOptions ? 1 : 0);
+    const [sortDescriptor, setSortDescriptor] = React.useState(defaultSortDescriptor);
+    const handleSortClick = (sortDescriptor) => {
+        const { direction, name, column } = sortDescriptor;
+        if (customSortItems) {
+            const sortColumn = columns.find((col) => col.id === column);
+            if (!sortColumn) {
+                console.error(`No column found for sort descriptor key: ${column}`);
+                return;
+            }
+            customSortItems({ sortColumn, sortDescriptor });
+        }
+        setSortDescriptor(sortDescriptor);
+        const announcement = `Now sorting ${sortText(direction)} by ${name}`;
+        setSrContent(announcement);
+    };
+    const memoizedItems = React.useMemo(() => {
+        // sort items if sort descriptor is set and custom sort items functions is not provided
+        return !customSortItems && sortDescriptor ? sortItems(columns, items, sortDescriptor) : items;
+    }, [columns, customSortItems, items, sortDescriptor]);
+    const rowVirtualizer = useVirtualizer({
+        count: memoizedItems.length,
+        enabled: enableVirtualization,
+        estimateSize: () => ROW_HEIGHT_PX,
+        getItemKey: React.useCallback((index) => {
+            return keyFor(tableElementId, 'row', memoizedItems[index].id);
+        }, [tableElementId, memoizedItems]),
+        getScrollElement: () => scrollContainer,
+        overscan: 6,
+        useAnimationFrameWithResizeObserver: true
+    });
+    let tableHeaderSelectionColumn;
+    let rowItemSelectionCell;
+    if (selectionOptions) {
+        const { mode, onSelectionChange, selectedKeys } = selectionOptions;
+        const isAnySelected = memoizedItems.length > 0 && selectedKeys.size > 0;
+        const isAllSelected = isAnySelected && selectedKeys.size === memoizedItems.length;
+        const selectionColumnStickyValue = hasStickyLeftColumn ? 'left' : undefined;
+        const selectNone = () => onSelectionChange(new Set());
+        const selectAll = () => onSelectionChange(new Set(memoizedItems.filter((item) => item.isSelectable !== false).map((item) => item.id)));
+        const selectOne = (itemId) => onSelectionChange(new Set([itemId]));
+        const selectAdd = (itemId) => onSelectionChange(new Set([...selectedKeys, itemId]));
+        const selectRemove = (itemId) => {
+            const keys = new Set(selectedKeys);
+            keys.delete(itemId);
+            onSelectionChange(keys);
+        };
+        const onSelectAllClick = () => (isAnySelected ? selectNone() : selectAll());
+        const onSelectClick = (itemId) => {
+            if (mode === 'multiple') {
+                selectedKeys.has(itemId) ? selectRemove(itemId) : selectAdd(itemId);
+            }
+            else if (mode === 'single') {
+                selectedKeys.has(itemId) ? selectNone() : selectOne(itemId);
+            }
+        };
+        tableHeaderSelectionColumn = (React.createElement(MrlTableColumn, { id: keyFor(tableElementId, 'column', 'selection'), "data-qa": keyFor(dataQaPrefix, 'column', 'selection'), key: keyFor(tableElementId, 'column', 'selection'), className: "selection", scope: "col", sticky: selectionColumnStickyValue, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }, selectionOptions.mode === 'multiple' && (React.createElement(MrlCheckboxStandalone, { attrs: {
+                'aria-label': 'Select all rows',
+                id: keyFor(tableElementId, 'column', 'selection-select-all-checkbox'),
+                onChange: onSelectAllClick
+            }, "data-qa": keyFor(dataQaPrefix, 'column', 'selection-select-all-checkbox'), key: keyFor(tableElementId, 'column', 'selection-select-all-checkbox'), selected: isAllSelected ? 'checked' : isAnySelected ? 'indeterminate' : 'default' }))));
+        rowItemSelectionCell = ({ id, isSelectable = true }) => (React.createElement(MrlTableCell, { id: keyFor(tableElementId, 'row-cell', 'selection', id), "data-qa": keyFor(dataQaPrefix, 'row-cell', 'selection', id), key: keyFor(tableElementId, 'row-cell', 'selection', id), className: "selection", sticky: selectionColumnStickyValue }, isSelectable ? (React.createElement(MrlCheckboxStandalone, { attrs: {
+                'aria-label': `Select row with id: ${id}`,
+                'data-qa': keyFor(dataQaPrefix, 'row-cell', 'selection', id, 'checkbox'),
+                id: keyFor(tableElementId, 'row-cell', 'selection', id, 'checkbox'),
+                onChange: () => onSelectClick(id)
+            }, key: keyFor(tableElementId, 'row-cell', 'selection', id, 'checkbox'), selected: selectionOptions.selectedKeys.has(id) ? 'checked' : 'default' })) : undefined));
+    }
+    const tableHeaderContent = (React.createElement(React.Fragment, null,
+        tableHeaderSelectionColumn,
+        columns.map((column) => {
+            const { id, renderColumn } = column;
+            const ColumnContent = renderColumn ? renderColumn : DefaultColumnContent;
+            return (React.createElement(ColumnContent, { column: column, dataQaPrefix: dataQaPrefix, key: keyFor(tableElementId, 'column', id), tableElementId: tableElementId, handleSortClick: handleSortClick, sortDescriptor: sortDescriptor, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }));
+        })));
+    let tableBodyContent;
+    if (enableVirtualization) {
+        const virtualRows = rowVirtualizer.getVirtualItems();
+        const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+        const paddingBottom = virtualRows.length > 0
+            ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+            : 0;
+        tableBodyContent = (React.createElement(React.Fragment, null,
+            paddingTop > 0 && (React.createElement("tr", { "aria-hidden": true },
+                React.createElement("td", { colSpan: visibleColumnCount, style: { height: paddingTop } }))),
+            virtualRows.map((virtualRow) => {
+                const item = memoizedItems[virtualRow.index];
+                return (React.createElement(MrlTableRow, { className: classNames({
+                        [styles['MrlTableRow--selected']]: selectionOptions === null || selectionOptions === void 0 ? void 0 : selectionOptions.selectedKeys.has(item.id),
+                        'MrlTableRow--selected': selectionOptions === null || selectionOptions === void 0 ? void 0 : selectionOptions.selectedKeys.has(item.id),
+                        [styles['MrlTableRow--disabled']]: item.isDisabled
+                    }), id: keyFor(tableElementId, 'row', item.id), itemId: item.id, "data-qa": keyFor(dataQaPrefix, 'row', item.id), key: virtualRow.key, style: { height: virtualRow.size }, ref: item.rowRef }, rowItemSelectionCell === null || rowItemSelectionCell === void 0 ? void 0 :
+                    rowItemSelectionCell(item),
+                    columns.map((column) => {
+                        const CellContent = column.renderCell
+                            ? column.renderCell
+                            : MemoizedDefaultCellContent;
+                        return (React.createElement(CellContent, { column: column, dataQaPrefix: dataQaPrefix, item: item, key: keyFor(tableElementId, 'row-cell', item.id, column.id), tableElementId: tableElementId, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }));
+                    })));
+            }),
+            paddingBottom > 0 && (React.createElement("tr", { "aria-hidden": true },
+                React.createElement("td", { colSpan: visibleColumnCount, style: { height: paddingBottom } })))));
+    }
+    else {
+        tableBodyContent = memoizedItems.map((item) => (React.createElement(MrlTableRow, { className: classNames({
+                [styles['MrlTableRow--selected']]: selectionOptions === null || selectionOptions === void 0 ? void 0 : selectionOptions.selectedKeys.has(item.id),
+                'MrlTableRow--selected': selectionOptions === null || selectionOptions === void 0 ? void 0 : selectionOptions.selectedKeys.has(item.id),
+                [styles['MrlTableRow--disabled']]: item.isDisabled
+            }), id: keyFor(tableElementId, 'row', item.id), itemId: item.id, "data-qa": keyFor(dataQaPrefix, 'row', item.id), key: keyFor(tableElementId, 'row', item.id), ref: item.rowRef }, rowItemSelectionCell === null || rowItemSelectionCell === void 0 ? void 0 :
+            rowItemSelectionCell(item),
+            columns.map((column) => {
+                const CellContent = column.renderCell ? column.renderCell : MemoizedDefaultCellContent;
+                return (React.createElement(CellContent, { column: column, dataQaPrefix: dataQaPrefix, item: item, key: keyFor(tableElementId, 'row-cell', item.id, column.id), tableElementId: tableElementId, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }));
+            }))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MrlTable, Object.assign({ "data-qa": dataQaPrefix, id: tableElementId, ref: tableRef }, ariaProps),
+            React.createElement(MrlTableHeader, { "data-qa": keyFor(dataQaPrefix, 'header'), id: keyFor(tableElementId, 'header') }, tableHeaderContent),
+            React.createElement(MrlTableBody, { "data-qa": keyFor(dataQaPrefix, 'body'), id: keyFor(tableElementId, 'body') }, memoizedItems.length === 0 ? (React.createElement(EmptyStateWrapper, { visibleColumnCount: visibleColumnCount }, emptyState)) : (tableBodyContent))),
+        React.createElement(MrlLiveRegion, { ariaLive: "assertive", visible: false, srContent: srContent, shouldClearContent: true })));
+}

package/dist/esm/components/table/MrlSmartTable/MrlSmartTable.module.css

@@ -0,0 +1,184 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--zhGIg {
+  position: relative;
+}
+
+.MrlTable--3cO7q {
+  --mrl-table-default-width: calc(100% - 10px);
+  --mrl-table-max-width: 1280px;
+  --mrl-table-header-background: var(--mrl-color-background);
+  --mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);
+  --mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-table-column-height: 48px;
+  --mrl-table-column-inline-spacing: var(--mrl-spacing-01);
+  --mrl-table-column-svg-color: var(--mrl-color-text-secondary);
+  --mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);
+  --mrl-table-row-height: 48px;
+  --mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);
+  --mrl-table-row-background: var(--mrl-color-background);
+  --mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);
+  --mrl-table-cell-height: 48px;
+  --mrl-table-cell-padding-block: 6px;
+  --mrl-table-cell-padding-inline: 6px;
+  --mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);
+  --mrl-table-selection-width: 2.75rem;
+  --mrl-table-default-min-width: 198px;
+  --mrl-table-status-width: 192px;
+  --mrl-table-call-to-action-width: 92px;
+  --mrl-table-action-width: 48px;
+}
+
+.MrlTableEmptyState--BctXF {
+  --mrl-table-empty-state-padding-block: 64px;
+  --mrl-table-empty-state-padding-inline: 48px;
+  --mrl-table-empty-state-min-height: 104px;
+}
+
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ {
+  all: unset;
+  cursor: pointer;
+}
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ:focus {
+  outline: revert;
+}
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ:focus-visible {
+  position: relative;
+}
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ:focus-visible:focus-visible {
+  outline: none;
+}
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ:focus-visible:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--HJ6m1;
+}
+@keyframes border-animation--HJ6m1 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--W3h6a {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes outline-animation--uuWJk {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlSmartTable--accessible-visually-hidden-button--W3sBJ.align-right--n-C73 {
+  width: 100%;
+}
+
+.allowsSorting--OK2US {
+  align-items: center;
+  display: flex;
+  gap: var(--mrl-spacing-01);
+  justify-content: flex-start;
+  width: 100%;
+}
+.allowsSorting--OK2US.align-right--n-C73 {
+  justify-content: flex-end;
+}
+.allowsSorting--OK2US.align-right--n-C73.noSortSelected--voUAH {
+  padding-left: calc(var(--mrl-spacing-06) + var(--mrl-spacing-01));
+}
+
+.empty-icon-space--RvUtd {
+  height: var(--mrl-spacing-06);
+  width: var(--mrl-spacing-06);
+}
+
+.MrlTableRow--selected--jcQtL,
+.MrlTableRow--selected--jcQtL > .MrlTableCell {
+  background-color: var(--mrl-table-row-background-selected);
+  border-bottom-color: rgba(var(--mrl-blue-20), 1);
+}
+
+.MrlTableRow--disabled--gV-Ys,
+.MrlTableRow--disabled--gV-Ys > .MrlTableCell {
+  color: var(--mrl-table-disabled-color);
+}

package/dist/esm/components/table/MrlSmartTable/MrlSmartTable.module.scss.js

@@ -0,0 +1,16 @@
+import "./MrlSmartTable.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--zhGIg",
+	"MrlTable": "MrlTable--3cO7q",
+	"MrlTableEmptyState": "MrlTableEmptyState--BctXF",
+	"MrlSmartTable--accessible-visually-hidden-button": "MrlSmartTable--accessible-visually-hidden-button--W3sBJ",
+	"border-animation": "border-animation--HJ6m1",
+	"align-right": "align-right--n-C73",
+	"allowsSorting": "allowsSorting--OK2US",
+	"noSortSelected": "noSortSelected--voUAH",
+	"empty-icon-space": "empty-icon-space--RvUtd",
+	"MrlTableRow--selected": "MrlTableRow--selected--jcQtL",
+	"MrlTableRow--disabled": "MrlTableRow--disabled--gV-Ys",
+	"border-animation-inverse": "border-animation-inverse--W3h6a",
+	"outline-animation": "outline-animation--uuWJk"
+};

package/dist/esm/components/table/MrlSmartTable/components/DefaultCellContent.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { MrlTableCell } from '../../MrlTableCell';
+import { keyFor } from '../../utils';
+// eslint-disable-next-line jsdoc/require-jsdoc -- TODO: add jsdoc comment
+export const DefaultCellContent = ({ item, column, dataQaPrefix, tableElementId, hasScrollShadowLeft, hasScrollShadowRight }) => {
+    return (React.createElement(MrlTableCell, { id: keyFor(tableElementId, 'row-cell', item.id, column.id), "data-qa": keyFor(dataQaPrefix, 'row-cell', item.id, column.id), key: keyFor(tableElementId, 'row-cell', item.id, column.id), sticky: column.sticky, hasScrollShadowLeft: hasScrollShadowLeft, hasScrollShadowRight: hasScrollShadowRight, horizontalAlign: column.horizontalAlign }, item[column.id]));
+};
+export const MemoizedDefaultCellContent = React.memo(DefaultCellContent, (prev, next) => {
+    return (prev.item === next.item &&
+        prev.column === next.column &&
+        prev.dataQaPrefix === next.dataQaPrefix &&
+        prev.tableElementId === next.tableElementId &&
+        prev.hasScrollShadowLeft === next.hasScrollShadowLeft &&
+        prev.hasScrollShadowRight === next.hasScrollShadowRight);
+});

package/dist/esm/components/table/MrlSmartTable/index.js

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

package/dist/esm/components/table/MrlSmartTable/storybook-utils.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { MrlTableCell } from '../MrlTableCell';
+import { MrlSvg } from '../../svg';
+import { check, edit } from '@muraldevkit/ds-icons';
+import { MrlIconButton } from '../../button';
+export const LicenseCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    return React.createElement(MrlTableCell, null, workspaceUser.guest ? 'Guest' : 'Member');
+});
+export const MemberSinceCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    const { format } = new Intl.DateTimeFormat();
+    return React.createElement(MrlTableCell, null, format(workspaceUser.memberSince));
+});
+export const LastSeenCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    const { format } = new Intl.DateTimeFormat();
+    return (React.createElement(MrlTableCell, null, workspaceUser.lastSeen ? format(workspaceUser.lastSeen) : React.createElement("em", null, "Unknown")));
+});
+export const CreateRoomCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    return React.createElement(MrlTableCell, null, workspaceUser.createRooms && React.createElement(MrlSvg, { svg: check }));
+});
+export const SeeOpenRoomsCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    return React.createElement(MrlTableCell, null, workspaceUser.seeOpenRooms && React.createElement(MrlSvg, { svg: check }));
+});
+export const PublishTemplatesCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    return React.createElement(MrlTableCell, null, workspaceUser.publishTemplates && React.createElement(MrlSvg, { svg: check }));
+});
+export const WorkspaceAdminCell = React.memo(function TableCell({ item }) {
+    const workspaceUser = item;
+    return React.createElement(MrlTableCell, null, workspaceUser.admin && React.createElement(MrlSvg, { svg: check }));
+});
+export const ActionsCell = React.memo(function TableCell(props) {
+    return (React.createElement(MrlTableCell, { hasScrollShadowLeft: props.hasScrollShadowLeft, hasScrollShadowRight: props.hasScrollShadowRight, sticky: props.column.sticky },
+        React.createElement("div", { style: { display: 'flex', gap: 'var(--mrl-spacing-02)' } },
+            React.createElement(MrlIconButton, { text: "Edit row", icon: React.createElement(MrlSvg, { svg: edit }), title: "Edit row", position: "bottom" }),
+            React.createElement(MrlIconButton, { text: "Edit row", icon: React.createElement(MrlSvg, { svg: edit }), title: "Edit row", position: "bottom" }))));
+});
+export const SAMPLE_COLUMNS_WITH_EDIT_ICON_BUTTON = [
+    {
+        allowsSorting: true,
+        id: 'fullName',
+        name: 'Name',
+        sticky: 'left'
+    },
+    {
+        allowsSorting: true,
+        id: 'email',
+        name: 'Email'
+    },
+    {
+        allowsSorting: true,
+        id: 'guest',
+        name: 'License',
+        renderCell: LicenseCell
+    },
+    {
+        allowsSorting: true,
+        id: 'memberSince',
+        name: 'Member since',
+        renderCell: MemberSinceCell
+    },
+    {
+        allowsSorting: true,
+        id: 'lastSeen',
+        name: 'Last seen',
+        renderCell: LastSeenCell
+    },
+    {
+        allowsSorting: true,
+        id: 'createRooms',
+        name: 'Create rooms',
+        renderCell: CreateRoomCell
+    },
+    {
+        allowsSorting: true,
+        id: 'seeOpenRooms',
+        name: 'See open rooms',
+        renderCell: SeeOpenRoomsCell
+    },
+    {
+        allowsSorting: true,
+        id: 'publishTemplates',
+        name: 'Publish templates',
+        renderCell: PublishTemplatesCell
+    },
+    {
+        allowsSorting: true,
+        id: 'admin',
+        name: 'Workspace admin',
+        renderCell: WorkspaceAdminCell
+    },
+    {
+        id: 'actions',
+        name: 'Actions',
+        renderCell: ActionsCell,
+        sticky: 'right'
+    }
+];

package/dist/esm/components/table/MrlTable/MrlTable.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { getUniqueId } from '../../../utils';
+import styles from './MrlTable.module.scss.js';
+const COMPONENT_NAME = 'MrlTable';
+/**
+ * MrlTable Component
+ *
+ * @param {MrlTable} props - MrlTable component props
+ * @returns a table element
+ */
+export const MrlTable = React.forwardRef(function MrlTable(_a, ref) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const idRef = React.useRef(rest.id || getUniqueId('mrl-table'));
+    const classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME]);
+    return React.createElement("table", Object.assign({ className: classes, id: idRef.current, ref: ref }, rest));
+});

package/dist/esm/components/table/MrlTable/MrlTable.module.css

@@ -0,0 +1,35 @@
+.MrlTable--Hln-u {
+  --mrl-table-default-width: calc(100% - 10px);
+  --mrl-table-max-width: 1280px;
+  --mrl-table-header-background: var(--mrl-color-background);
+  --mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);
+  --mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-table-column-height: 48px;
+  --mrl-table-column-inline-spacing: var(--mrl-spacing-01);
+  --mrl-table-column-svg-color: var(--mrl-color-text-secondary);
+  --mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);
+  --mrl-table-row-height: 48px;
+  --mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);
+  --mrl-table-row-background: var(--mrl-color-background);
+  --mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);
+  --mrl-table-cell-height: 48px;
+  --mrl-table-cell-padding-block: 6px;
+  --mrl-table-cell-padding-inline: 6px;
+  --mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);
+  --mrl-table-selection-width: 2.75rem;
+  --mrl-table-default-min-width: 198px;
+  --mrl-table-status-width: 192px;
+  --mrl-table-call-to-action-width: 92px;
+  --mrl-table-action-width: 48px;
+}
+
+.MrlTableEmptyState--wzfjK {
+  --mrl-table-empty-state-padding-block: 64px;
+  --mrl-table-empty-state-padding-inline: 48px;
+  --mrl-table-empty-state-min-height: 104px;
+}
+
+.MrlTable--Hln-u {
+  width: 100%;
+}

package/dist/esm/components/table/MrlTable/MrlTable.module.scss.js

@@ -0,0 +1,5 @@
+import "./MrlTable.module.css";
+export default {
+	"MrlTable": "MrlTable--Hln-u",
+	"MrlTableEmptyState": "MrlTableEmptyState--wzfjK"
+};

package/dist/esm/components/table/MrlTable/index.js

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