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

package/dist/cjs/components/svg/constants.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animatedDefaults = exports.allowedAnimatedValues = exports.baseLottieConfig = exports.svgDefaults = exports.allowedSvgValues = void 0;
+/**
+ * Defines all of values allowed for attributes with limited values;
+ * used for Storybook and testing
+ */
+exports.allowedSvgValues = {
+    sizes: [
+        'medium',
+        'small',
+        'large',
+        'auto'
+    ]
+};
+/**
+ * Default values for props on the SVG component;
+ * Shared between the component and Storybook
+ */
+exports.svgDefaults = {
+    attrs: {
+        role: 'presentation'
+    },
+    size: 'medium'
+};
+exports.baseLottieConfig = {
+    autoplay: false,
+    loop: true,
+    renderer: 'svg'
+};
+exports.allowedAnimatedValues = {
+    states: ['stop', 'play']
+};
+exports.animatedDefaults = {
+    delay: 0,
+    state: 'stop'
+};

package/dist/cjs/components/svg/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSvg/MrlSvg"), exports);
+__exportStar(require("./MrlSvgAnimate/MrlSvgAnimate"), exports);
+__exportStar(require("./constants"), exports);

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

@@ -0,0 +1,284 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSmartTable = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const __1 = require("../../");
+const MrlTableEmptyState_1 = require("../MrlTableEmptyState");
+const utils_1 = require("../../../utils");
+const utils_2 = require("../utils");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const MrlSmartTable_module_scss_1 = __importDefault(require("./MrlSmartTable.module.scss.js"));
+const getScrollableContainer_1 = require("../../../utils/getScrollableContainer/getScrollableContainer");
+const hasHorizontalScroll_1 = require("../../../utils/hasHorizontalScroll/hasHorizontalScroll");
+const DefaultCellContent_1 = require("./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 || utils_2.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: (0, classnames_1.default)(MrlSmartTable_module_scss_1.default['MrlSmartTable--accessible-visually-hidden-button'], {
+            [MrlSmartTable_module_scss_1.default['align-right']]: horizontalAlign === 'right'
+        }) })));
+};
+const DefaultColumnContent = ({ column, dataQaPrefix, tableElementId, handleSortClick, sortDescriptor, hasScrollShadowLeft, hasScrollShadowRight }) => {
+    const { allowsSorting, horizontalAlign, id, name, sticky, tooltip } = column;
+    const elementId = (0, utils_2.keyFor)(tableElementId, 'column', id);
+    const dataQa = (0, utils_2.keyFor)(dataQaPrefix, 'column', id);
+    const columnProps = {
+        'data-qa': dataQa,
+        hasScrollShadowLeft,
+        hasScrollShadowRight,
+        horizontalAlign,
+        id: elementId,
+        scope: 'col',
+        sticky
+    };
+    const memoizedTooltip = React.useMemo(() => (React.createElement(__1.MrlTooltip, { anchor: "center", dataQa: `${dataQa}-tooltip`, kind: "default", position: "bottom", text: tooltip || '' },
+        React.createElement("span", { "data-qa": `${dataQa}-tooltip-trigger`, tabIndex: 0 },
+            React.createElement(__1.MrlSvg, { className: "MrlTableColumn--tooltip", svg: ds_icons_1.info, size: "small" })))), [dataQa, tooltip]);
+    const tooltipContent = tooltip ? memoizedTooltip : undefined;
+    if (!allowsSorting) {
+        return (React.createElement(__1.MrlTableColumn, Object.assign({}, columnProps),
+            name,
+            tooltipContent));
+    }
+    const currentDirection = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === id ? sortDescriptor.direction : undefined;
+    const nextDirection = (0, utils_2.nextSortDirection)(currentDirection);
+    const onSortClick = () => {
+        handleSortClick({ column: id, direction: nextDirection, name: name });
+    };
+    return (React.createElement(__1.MrlTableColumn, Object.assign({ onClick: onSortClick }, columnProps),
+        React.createElement(VisuallyHiddenAccessibleButton, { "aria-label": `Sort ${(0, utils_2.sortText)(nextDirection)} by ${name}`, horizontalAlign: horizontalAlign, onClick: onSortClick },
+            React.createElement("div", { className: (0, classnames_1.default)(MrlSmartTable_module_scss_1.default['allowsSorting'], {
+                    [MrlSmartTable_module_scss_1.default['align-right']]: horizontalAlign === 'right',
+                    [MrlSmartTable_module_scss_1.default['noSortSelected']]: horizontalAlign === 'right' && !currentDirection
+                }) },
+                name,
+                tooltipContent,
+                currentDirection ? (React.createElement(__1.MrlSvg, { className: "MrlTableColumn--sort-indicator", size: "small", svg: (0, utils_2.sortIcon)(currentDirection) })) : (horizontalAlign !== 'right' && React.createElement("span", { className: MrlSmartTable_module_scss_1.default['empty-icon-space'] }))))));
+};
+/**
+ * MrlSmartTable Component
+ *
+ * @param {MrlSmartTableProps} props - MrlSmartTable component props
+ * @returns a table
+ */
+function MrlSmartTable(props) {
+    const { columns, dataQaPrefix = 'mrl-smart-table', emptyStateText, emptyState = React.createElement(MrlTableEmptyState_1.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 || (0, utils_1.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 = (0, getScrollableContainer_1.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 } = (0, hasHorizontalScroll_1.hasHorizontalScroll)(scrollContainer);
+            setScrollShadowLeft(hasScrollLeft);
+            setScrollShadowRight(hasScrollRight);
+        }
+        const debouncedScrollHandler = (0, lodash_debounce_1.default)(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 ${(0, utils_2.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 = (0, react_virtual_1.useVirtualizer)({
+        count: memoizedItems.length,
+        enabled: enableVirtualization,
+        estimateSize: () => ROW_HEIGHT_PX,
+        getItemKey: React.useCallback((index) => {
+            return (0, utils_2.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(__1.MrlTableColumn, { id: (0, utils_2.keyFor)(tableElementId, 'column', 'selection'), "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'column', 'selection'), key: (0, utils_2.keyFor)(tableElementId, 'column', 'selection'), className: "selection", scope: "col", sticky: selectionColumnStickyValue, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }, selectionOptions.mode === 'multiple' && (React.createElement(__1.MrlCheckboxStandalone, { attrs: {
+                'aria-label': 'Select all rows',
+                id: (0, utils_2.keyFor)(tableElementId, 'column', 'selection-select-all-checkbox'),
+                onChange: onSelectAllClick
+            }, "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'column', 'selection-select-all-checkbox'), key: (0, utils_2.keyFor)(tableElementId, 'column', 'selection-select-all-checkbox'), selected: isAllSelected ? 'checked' : isAnySelected ? 'indeterminate' : 'default' }))));
+        rowItemSelectionCell = ({ id, isSelectable = true }) => (React.createElement(__1.MrlTableCell, { id: (0, utils_2.keyFor)(tableElementId, 'row-cell', 'selection', id), "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'row-cell', 'selection', id), key: (0, utils_2.keyFor)(tableElementId, 'row-cell', 'selection', id), className: "selection", sticky: selectionColumnStickyValue }, isSelectable ? (React.createElement(__1.MrlCheckboxStandalone, { attrs: {
+                'aria-label': `Select row with id: ${id}`,
+                'data-qa': (0, utils_2.keyFor)(dataQaPrefix, 'row-cell', 'selection', id, 'checkbox'),
+                id: (0, utils_2.keyFor)(tableElementId, 'row-cell', 'selection', id, 'checkbox'),
+                onChange: () => onSelectClick(id)
+            }, key: (0, utils_2.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: (0, utils_2.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(__1.MrlTableRow, { className: (0, classnames_1.default)({
+                        [MrlSmartTable_module_scss_1.default['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),
+                        [MrlSmartTable_module_scss_1.default['MrlTableRow--disabled']]: item.isDisabled
+                    }), id: (0, utils_2.keyFor)(tableElementId, 'row', item.id), itemId: item.id, "data-qa": (0, utils_2.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
+                            : DefaultCellContent_1.MemoizedDefaultCellContent;
+                        return (React.createElement(CellContent, { column: column, dataQaPrefix: dataQaPrefix, item: item, key: (0, utils_2.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(__1.MrlTableRow, { className: (0, classnames_1.default)({
+                [MrlSmartTable_module_scss_1.default['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),
+                [MrlSmartTable_module_scss_1.default['MrlTableRow--disabled']]: item.isDisabled
+            }), id: (0, utils_2.keyFor)(tableElementId, 'row', item.id), itemId: item.id, "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'row', item.id), key: (0, utils_2.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 : DefaultCellContent_1.MemoizedDefaultCellContent;
+                return (React.createElement(CellContent, { column: column, dataQaPrefix: dataQaPrefix, item: item, key: (0, utils_2.keyFor)(tableElementId, 'row-cell', item.id, column.id), tableElementId: tableElementId, hasScrollShadowLeft: scrollShadowLeft, hasScrollShadowRight: scrollShadowRight }));
+            }))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(__1.MrlTable, Object.assign({ "data-qa": dataQaPrefix, id: tableElementId, ref: tableRef }, ariaProps),
+            React.createElement(__1.MrlTableHeader, { "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'header'), id: (0, utils_2.keyFor)(tableElementId, 'header') }, tableHeaderContent),
+            React.createElement(__1.MrlTableBody, { "data-qa": (0, utils_2.keyFor)(dataQaPrefix, 'body'), id: (0, utils_2.keyFor)(tableElementId, 'body') }, memoizedItems.length === 0 ? (React.createElement(EmptyStateWrapper, { visibleColumnCount: visibleColumnCount }, emptyState)) : (tableBodyContent))),
+        React.createElement(__1.MrlLiveRegion, { ariaLive: "assertive", visible: false, srContent: srContent, shouldClearContent: true })));
+}
+exports.MrlSmartTable = MrlSmartTable;

package/dist/cjs/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/cjs/components/table/MrlSmartTable/MrlSmartTable.module.scss.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlSmartTable.module.css");
+exports.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/cjs/components/table/MrlSmartTable/components/DefaultCellContent.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MemoizedDefaultCellContent = exports.DefaultCellContent = void 0;
+const React = __importStar(require("react"));
+const MrlTableCell_1 = require("../../MrlTableCell");
+const utils_1 = require("../../utils");
+// eslint-disable-next-line jsdoc/require-jsdoc -- TODO: add jsdoc comment
+const DefaultCellContent = ({ item, column, dataQaPrefix, tableElementId, hasScrollShadowLeft, hasScrollShadowRight }) => {
+    return (React.createElement(MrlTableCell_1.MrlTableCell, { id: (0, utils_1.keyFor)(tableElementId, 'row-cell', item.id, column.id), "data-qa": (0, utils_1.keyFor)(dataQaPrefix, 'row-cell', item.id, column.id), key: (0, utils_1.keyFor)(tableElementId, 'row-cell', item.id, column.id), sticky: column.sticky, hasScrollShadowLeft: hasScrollShadowLeft, hasScrollShadowRight: hasScrollShadowRight, horizontalAlign: column.horizontalAlign }, item[column.id]));
+};
+exports.DefaultCellContent = DefaultCellContent;
+exports.MemoizedDefaultCellContent = React.memo(exports.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/cjs/components/table/MrlSmartTable/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSmartTable"), exports);