@macive/ui 0.0.1 → 0.0.3

package/dist/src/components/DataTable/DataTable.js

@@ -0,0 +1,520 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
+const css_1 = require("../../utilities/css");
+const debounce_1 = require("../../utilities/debounce");
+const i18n_1 = require("../../utilities/i18n");
+const shared_1 = require("../shared");
+// eslint-disable-next-line import/no-deprecated
+const AfterInitialMount_1 = require("../AfterInitialMount");
+const EventListener_1 = require("../EventListener");
+const Sticky_1 = require("../Sticky");
+const components_1 = require("./components");
+const DataTable_classnames_1 = __importDefault(require("./DataTable.classnames"));
+const utilities_1 = require("./utilities");
+const getRowClientHeights = (rows) => {
+    const heights = [];
+    if (!rows) {
+        return heights;
+    }
+    rows.forEach((row) => {
+        heights.push(row.clientHeight);
+    });
+    return heights;
+};
+class DataTableInner extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            condensed: false,
+            columnVisibilityData: [],
+            isScrolledFarthestLeft: true,
+            isScrolledFarthestRight: false,
+            rowHovered: undefined,
+        };
+        this.dataTable = (0, react_1.createRef)();
+        this.scrollContainer = (0, react_1.createRef)();
+        this.table = (0, react_1.createRef)();
+        this.stickyTable = (0, react_1.createRef)();
+        this.stickyNav = null;
+        this.headerNav = null;
+        this.tableHeadings = [];
+        this.stickyHeadings = [];
+        this.tableHeadingWidths = [];
+        this.stickyHeaderActive = false;
+        this.scrollStopTimer = null;
+        this.handleResize = (0, debounce_1.debounce)(() => {
+            const { table: { current: table }, scrollContainer: { current: scrollContainer }, } = this;
+            let condensed = false;
+            if (table && scrollContainer) {
+                // safari sometimes incorrectly sets the scrollwidth too large by 1px
+                condensed = table.scrollWidth > scrollContainer.clientWidth + 1;
+            }
+            this.setState({
+                condensed,
+                ...this.calculateColumnVisibilityData(condensed),
+            });
+        });
+        this.setCellRef = ({ ref, index, inStickyHeader, }) => {
+            if (ref == null) {
+                return;
+            }
+            if (inStickyHeader) {
+                this.stickyHeadings[index] = ref;
+                const button = ref.querySelector('button');
+                if (button == null) {
+                    return;
+                }
+                button.addEventListener('focus', this.handleHeaderButtonFocus);
+            }
+            else {
+                this.tableHeadings[index] = ref;
+                this.tableHeadingWidths[index] = ref.clientWidth;
+            }
+        };
+        this.changeHeadingFocus = () => {
+            const { tableHeadings, stickyHeadings, stickyNav, headerNav } = this;
+            const stickyFocusedItemIndex = stickyHeadings.findIndex((item) => { var _a; return item === ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.parentElement); });
+            const tableFocusedItemIndex = tableHeadings.findIndex((item) => { var _a; return item === ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.parentElement); });
+            const arrowsInStickyNav = stickyNav === null || stickyNav === void 0 ? void 0 : stickyNav.querySelectorAll('button');
+            const arrowsInHeaderNav = headerNav === null || headerNav === void 0 ? void 0 : headerNav.querySelectorAll('button');
+            let stickyFocusedNavIndex = -1;
+            arrowsInStickyNav === null || arrowsInStickyNav === void 0 ? void 0 : arrowsInStickyNav.forEach((item, index) => {
+                if (item === document.activeElement) {
+                    stickyFocusedNavIndex = index;
+                }
+            });
+            let headerFocusedNavIndex = -1;
+            arrowsInHeaderNav === null || arrowsInHeaderNav === void 0 ? void 0 : arrowsInHeaderNav.forEach((item, index) => {
+                if (item === document.activeElement) {
+                    headerFocusedNavIndex = index;
+                }
+            });
+            if (stickyFocusedItemIndex < 0 &&
+                tableFocusedItemIndex < 0 &&
+                stickyFocusedNavIndex < 0 &&
+                headerFocusedNavIndex < 0) {
+                return null;
+            }
+            let button;
+            if (stickyFocusedItemIndex >= 0) {
+                button = tableHeadings[stickyFocusedItemIndex].querySelector('button');
+            }
+            else if (tableFocusedItemIndex >= 0) {
+                button = stickyHeadings[tableFocusedItemIndex].querySelector('button');
+            }
+            if (stickyFocusedNavIndex >= 0) {
+                button = arrowsInHeaderNav === null || arrowsInHeaderNav === void 0 ? void 0 : arrowsInHeaderNav[stickyFocusedNavIndex];
+            }
+            else if (headerFocusedNavIndex >= 0) {
+                button = arrowsInStickyNav === null || arrowsInStickyNav === void 0 ? void 0 : arrowsInStickyNav[headerFocusedNavIndex];
+            }
+            if (button == null) {
+                return null;
+            }
+            button.style.visibility = 'visible';
+            button.focus();
+            button.style.removeProperty('visibility');
+        };
+        this.calculateColumnVisibilityData = (condensed) => {
+            const fixedFirstColumns = this.fixedFirstColumns();
+            const { table: { current: table }, scrollContainer: { current: scrollContainer }, dataTable: { current: dataTable }, } = this;
+            const { stickyHeader } = this.props;
+            if ((stickyHeader || condensed) && table && scrollContainer && dataTable) {
+                const headerCells = table.querySelectorAll(shared_1.headerCell.selector);
+                const rightMostHeader = headerCells[fixedFirstColumns - 1];
+                const nthColumnWidth = fixedFirstColumns
+                    ? rightMostHeader.offsetLeft + rightMostHeader.offsetWidth
+                    : 0;
+                if (headerCells.length > 0) {
+                    const firstVisibleColumnIndex = headerCells.length - 1;
+                    const tableLeftVisibleEdge = scrollContainer.scrollLeft + nthColumnWidth;
+                    const tableRightVisibleEdge = scrollContainer.scrollLeft + dataTable.offsetWidth;
+                    const tableData = {
+                        firstVisibleColumnIndex,
+                        tableLeftVisibleEdge,
+                        tableRightVisibleEdge,
+                    };
+                    //@ts-expect-error
+                    const columnVisibilityData = [...headerCells].map((0, utilities_1.measureColumn)(tableData));
+                    const lastColumn = columnVisibilityData[columnVisibilityData.length - 1];
+                    const isScrolledFarthestLeft = fixedFirstColumns
+                        ? tableLeftVisibleEdge === nthColumnWidth
+                        : tableLeftVisibleEdge === 0;
+                    return {
+                        columnVisibilityData,
+                        ...(0, utilities_1.getPrevAndCurrentColumns)(tableData, columnVisibilityData),
+                        isScrolledFarthestLeft,
+                        isScrolledFarthestRight: lastColumn.rightEdge <= tableRightVisibleEdge,
+                    };
+                }
+            }
+            return {
+                columnVisibilityData: [],
+                previousColumn: undefined,
+                currentColumn: undefined,
+            };
+        };
+        this.handleHeaderButtonFocus = (event) => {
+            var _a;
+            const fixedFirstColumns = this.fixedFirstColumns();
+            if (this.scrollContainer.current == null ||
+                event.target == null ||
+                this.state.columnVisibilityData.length === 0) {
+                return;
+            }
+            const target = event.target;
+            const currentCell = target.parentNode;
+            const tableScrollLeft = this.scrollContainer.current.scrollLeft;
+            const tableViewableWidth = this.scrollContainer.current.offsetWidth;
+            const tableRightEdge = tableScrollLeft + tableViewableWidth;
+            const nthColumnWidth = this.state.columnVisibilityData.length > 0
+                ? (_a = this.state.columnVisibilityData[fixedFirstColumns]) === null || _a === void 0 ? void 0 : _a.rightEdge
+                : 0;
+            const currentColumnLeftEdge = currentCell.offsetLeft;
+            const currentColumnRightEdge = currentCell.offsetLeft + currentCell.offsetWidth;
+            if (tableScrollLeft > currentColumnLeftEdge - nthColumnWidth) {
+                this.scrollContainer.current.scrollLeft = currentColumnLeftEdge - nthColumnWidth;
+            }
+            if (currentColumnRightEdge > tableRightEdge) {
+                this.scrollContainer.current.scrollLeft = currentColumnRightEdge - tableViewableWidth;
+            }
+        };
+        this.stickyHeaderScrolling = () => {
+            const { current: stickyTable } = this.stickyTable;
+            const { current: scrollContainer } = this.scrollContainer;
+            if (stickyTable == null || scrollContainer == null) {
+                return;
+            }
+            stickyTable.scrollLeft = scrollContainer.scrollLeft;
+        };
+        this.scrollListener = () => {
+            var _a;
+            if (this.scrollStopTimer) {
+                clearTimeout(this.scrollStopTimer);
+            }
+            this.scrollStopTimer = setTimeout(() => {
+                this.setState((prevState) => ({
+                    ...this.calculateColumnVisibilityData(prevState.condensed),
+                }));
+            }, 100);
+            this.setState({
+                isScrolledFarthestLeft: ((_a = this.scrollContainer.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0,
+            });
+            if (this.props.stickyHeader && this.stickyHeaderActive) {
+                this.stickyHeaderScrolling();
+            }
+        };
+        this.handleHover = (row) => () => {
+            this.setState({ rowHovered: row });
+        };
+        this.handleFocus = (event) => {
+            var _a;
+            const fixedFirstColumns = this.fixedFirstColumns();
+            if (this.scrollContainer.current == null || event.target == null) {
+                return;
+            }
+            const currentCell = event.target.parentNode;
+            const fixedNthColumn = this.props;
+            const nthColumnWidth = fixedNthColumn
+                ? (_a = this.state.columnVisibilityData[fixedFirstColumns]) === null || _a === void 0 ? void 0 : _a.rightEdge
+                : 0;
+            const currentColumnLeftEdge = currentCell.offsetLeft;
+            const desiredScrollLeft = currentColumnLeftEdge - nthColumnWidth;
+            if (this.scrollContainer.current.scrollLeft > desiredScrollLeft) {
+                this.scrollContainer.current.scrollLeft = desiredScrollLeft;
+            }
+            // focus fixed first column if present
+        };
+        this.navigateTable = (direction) => {
+            var _a;
+            const fixedFirstColumns = this.fixedFirstColumns();
+            const { currentColumn, previousColumn } = this.state;
+            const nthColumnWidth = (_a = this.state.columnVisibilityData[fixedFirstColumns - 1]) === null || _a === void 0 ? void 0 : _a.rightEdge;
+            if (!currentColumn || !previousColumn) {
+                return;
+            }
+            let prevWidths = 0;
+            for (let index = 0; index < currentColumn.index; index++) {
+                prevWidths += this.state.columnVisibilityData[index].width;
+            }
+            const { current: scrollContainer } = this.scrollContainer;
+            const handleScroll = () => {
+                let newScrollLeft = 0;
+                if (fixedFirstColumns) {
+                    newScrollLeft =
+                        direction === 'right'
+                            ? prevWidths - nthColumnWidth + currentColumn.width
+                            : prevWidths - previousColumn.width - nthColumnWidth;
+                }
+                else {
+                    newScrollLeft = direction === 'right' ? currentColumn.rightEdge : previousColumn.leftEdge;
+                }
+                if (scrollContainer) {
+                    scrollContainer.scrollLeft = newScrollLeft;
+                    requestAnimationFrame(() => {
+                        this.setState((prevState) => ({
+                            ...this.calculateColumnVisibilityData(prevState.condensed),
+                        }));
+                    });
+                }
+            };
+            return handleScroll;
+        };
+        this.renderHeading = ({ heading, headingIndex, inFixedNthColumn, inStickyHeader, }) => {
+            var _a;
+            const { sortable, truncate = false, columnContentTypes, defaultSortDirection, initialSortColumnIndex = 0, verticalAlign, firstColumnMinWidth, } = this.props;
+            const fixedFirstColumns = this.fixedFirstColumns();
+            const { sortDirection = defaultSortDirection, sortedColumnIndex = initialSortColumnIndex, isScrolledFarthestLeft, } = this.state;
+            let sortableHeadingProps;
+            const headingCellId = `heading-cell-${headingIndex}`;
+            const stickyHeaderId = `stickyheader-${headingIndex}`;
+            const id = inStickyHeader ? stickyHeaderId : headingCellId;
+            if (sortable) {
+                const isSortable = sortable[headingIndex];
+                const isSorted = isSortable && sortedColumnIndex === headingIndex;
+                const direction = isSorted ? sortDirection : 'none';
+                sortableHeadingProps = {
+                    defaultSortDirection,
+                    sorted: isSorted,
+                    sortable: isSortable,
+                    sortDirection: direction,
+                    onSort: this.defaultOnSort(headingIndex),
+                    fixedNthColumn: fixedFirstColumns,
+                    inFixedNthColumn: fixedFirstColumns,
+                };
+            }
+            const stickyCellWidth = inStickyHeader ? this.tableHeadingWidths[headingIndex] : undefined;
+            const fixedCellVisible = !isScrolledFarthestLeft;
+            const cellProps = {
+                header: true,
+                stickyHeadingCell: inStickyHeader,
+                content: heading,
+                contentType: columnContentTypes[headingIndex],
+                nthColumn: headingIndex < fixedFirstColumns,
+                fixedFirstColumns,
+                truncate,
+                headingIndex,
+                ...sortableHeadingProps,
+                verticalAlign,
+                handleFocus: this.handleFocus,
+                stickyCellWidth,
+                fixedCellVisible,
+                firstColumnMinWidth,
+            };
+            if (inFixedNthColumn && inStickyHeader) {
+                // need two cells for fixed first column (actual cell and the overlapping one)
+                // the sticky cell is second so that the index is associated with the sticky
+                // cell and not the underlying one. This helps `changeHeadingFocus` to put
+                // focus on the right cell when switching from sticky to non-sticky headers
+                return [
+                    (0, jsx_runtime_1.jsx)(components_1.Cell, { ...cellProps, setRef: (ref) => {
+                            this.setCellRef({
+                                ref,
+                                index: headingIndex,
+                                inStickyHeader,
+                            });
+                        }, inFixedNthColumn: false }, id),
+                    (0, jsx_runtime_1.jsx)(components_1.Cell, { ...cellProps, setRef: (ref) => {
+                            this.setCellRef({
+                                ref,
+                                index: headingIndex,
+                                inStickyHeader,
+                            });
+                        }, inFixedNthColumn: Boolean(fixedFirstColumns), lastFixedFirstColumn: headingIndex === fixedFirstColumns - 1, style: {
+                            left: (_a = this.state.columnVisibilityData[headingIndex]) === null || _a === void 0 ? void 0 : _a.leftEdge,
+                        } }, `${id}-sticky`),
+                ];
+            }
+            return ((0, jsx_runtime_1.jsx)(components_1.Cell, { ...cellProps, setRef: (ref) => {
+                    this.setCellRef({
+                        ref,
+                        index: headingIndex,
+                        inStickyHeader,
+                    });
+                }, lastFixedFirstColumn: headingIndex === fixedFirstColumns - 1, inFixedNthColumn: inFixedNthColumn }, id));
+        };
+        this.totalsRowHeading = () => {
+            const { i18n, totals, totalsName } = this.props;
+            const totalsLabel = totalsName
+                ? totalsName
+                : {
+                    singular: i18n.translate('Polaris.DataTable.totalRowHeading'),
+                    plural: i18n.translate('Polaris.DataTable.totalsRowHeading'),
+                };
+            return totals && totals.filter((total) => total !== '').length > 1
+                ? totalsLabel.plural
+                : totalsLabel.singular;
+        };
+        this.renderTotals = ({ total, index }) => {
+            const fixedFirstColumns = this.fixedFirstColumns();
+            const id = `totals-cell-${index}`;
+            const { truncate = false, verticalAlign, columnContentTypes } = this.props;
+            let content;
+            let contentType;
+            if (index === 0) {
+                content = this.totalsRowHeading();
+            }
+            if (total !== '' && index > 0) {
+                contentType = columnContentTypes[index];
+                content = total;
+            }
+            const totalInFooter = this.props.showTotalsInFooter;
+            return ((0, jsx_runtime_1.jsx)(components_1.Cell, { total: true, totalInFooter: totalInFooter, nthColumn: index <= fixedFirstColumns - 1, firstColumn: index === 0, content: content, contentType: contentType, truncate: truncate, verticalAlign: verticalAlign }, id));
+        };
+        this.getColSpan = (rowLength, headingsLength, contentTypesLength, cellIndex) => {
+            // We decided that it shouldn't be possible to have fixed "n" columns and content that spans multiple columns
+            const fixedFirstColumns = this.fixedFirstColumns();
+            if (fixedFirstColumns) {
+                return 1;
+            }
+            const rowLen = rowLength ? rowLength : 1;
+            const colLen = headingsLength ? headingsLength : contentTypesLength;
+            const colSpan = Math.floor(colLen / rowLen);
+            const remainder = colLen % rowLen;
+            return cellIndex === 0 ? colSpan + remainder : colSpan;
+        };
+        this.defaultRenderRow = ({ row, index, inFixedNthColumn, rowHeights, }) => {
+            const { columnContentTypes, truncate = false, verticalAlign, hoverable = true, headings, } = this.props;
+            const { condensed } = this.state;
+            const fixedFirstColumns = this.fixedFirstColumns();
+            const className = (0, css_1.classNames)(DataTable_classnames_1.default.TableRow, hoverable && DataTable_classnames_1.default.hoverable);
+            return ((0, jsx_runtime_1.jsx)("tr", { className: className, onMouseEnter: this.handleHover(index), onMouseLeave: this.handleHover(), children: row.map((content, cellIndex) => {
+                    const hovered = index === this.state.rowHovered;
+                    const id = `cell-${cellIndex}-row-${index}`;
+                    const colSpan = this.getColSpan(row.length, headings.length, columnContentTypes.length, cellIndex);
+                    return ((0, jsx_runtime_1.jsx)(components_1.Cell, { content: content, contentType: columnContentTypes[cellIndex], nthColumn: cellIndex <= fixedFirstColumns - 1, firstColumn: cellIndex === 0, truncate: truncate, verticalAlign: verticalAlign, colSpan: colSpan, hovered: hovered, style: rowHeights ? { height: `${rowHeights[index]}px` } : {}, inFixedNthColumn: condensed && inFixedNthColumn }, id));
+                }) }, `row-${index}`));
+        };
+        this.defaultOnSort = (headingIndex) => {
+            const { onSort, defaultSortDirection = 'ascending', initialSortColumnIndex } = this.props;
+            const { sortDirection = defaultSortDirection, sortedColumnIndex = initialSortColumnIndex } = this.state;
+            let newSortDirection = defaultSortDirection;
+            if (sortedColumnIndex === headingIndex) {
+                newSortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+            }
+            const handleSort = () => {
+                this.setState({
+                    sortDirection: newSortDirection,
+                    sortedColumnIndex: headingIndex,
+                }, () => {
+                    if (onSort) {
+                        onSort(headingIndex, newSortDirection);
+                    }
+                });
+            };
+            return handleSort;
+        };
+    }
+    componentDidMount() {
+        // We need to defer the calculation in development so the styles have time to be injected.
+        if (process.env.NODE_ENV === 'development') {
+            setTimeout(() => {
+                this.handleResize();
+            }, 10);
+        }
+        else {
+            this.handleResize();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if ((0, react_fast_compare_1.default)(prevProps, this.props)) {
+            return;
+        }
+        this.handleResize();
+    }
+    componentWillUnmount() {
+        this.handleResize.cancel();
+    }
+    render() {
+        var _a, _b, _c;
+        const { headings, totals, showTotalsInFooter, rows, footerContent, hideScrollIndicator = false, increasedTableDensity = false, hasZebraStripingOnData = false, stickyHeader = false, hasFixedFirstColumn: fixedFirstColumn = false, } = this.props;
+        const { condensed, columnVisibilityData, isScrolledFarthestLeft, isScrolledFarthestRight } = this.state;
+        if (fixedFirstColumn && process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
+            console.warn('Deprecation: The `hasFixedFirstColumn` prop on the `DataTable` has been deprecated. Use fixedFirstColumns={n} instead.');
+        }
+        const fixedFirstColumns = this.fixedFirstColumns();
+        const rowCountIsEven = rows.length % 2 === 0;
+        const className = (0, css_1.classNames)(DataTable_classnames_1.default.DataTable, condensed && DataTable_classnames_1.default.condensed, totals && DataTable_classnames_1.default.ShowTotals, showTotalsInFooter && DataTable_classnames_1.default.ShowTotalsInFooter, hasZebraStripingOnData && DataTable_classnames_1.default.ZebraStripingOnData, hasZebraStripingOnData && rowCountIsEven && DataTable_classnames_1.default.RowCountIsEven);
+        const wrapperClassName = (0, css_1.classNames)(DataTable_classnames_1.default.TableWrapper, condensed && DataTable_classnames_1.default.condensed, increasedTableDensity && DataTable_classnames_1.default.IncreasedTableDensity, stickyHeader && DataTable_classnames_1.default.StickyHeaderEnabled);
+        const headingMarkup = ((0, jsx_runtime_1.jsx)("tr", { children: headings.map((heading, index) => this.renderHeading({
+                heading,
+                headingIndex: index,
+                inFixedNthColumn: false,
+                inStickyHeader: false,
+            })) }));
+        const totalsMarkup = totals ? ((0, jsx_runtime_1.jsx)("tr", { children: totals.map((total, index) => this.renderTotals({ total, index })) })) : null;
+        const nthColumns = rows.map((row) => row.slice(0, fixedFirstColumns));
+        const nthHeadings = headings.slice(0, fixedFirstColumns);
+        const nthTotals = totals === null || totals === void 0 ? void 0 : totals.slice(0, fixedFirstColumns);
+        const tableHeaderRows = (_a = this.table.current) === null || _a === void 0 ? void 0 : _a.children[0].childNodes;
+        const tableBodyRows = (_b = this.table.current) === null || _b === void 0 ? void 0 : _b.children[1].childNodes;
+        const headerRowHeights = getRowClientHeights(tableHeaderRows);
+        const bodyRowHeights = getRowClientHeights(tableBodyRows);
+        const fixedNthColumnMarkup = condensed && fixedFirstColumns !== 0 && ((0, jsx_runtime_1.jsxs)("table", { className: (0, css_1.classNames)(DataTable_classnames_1.default.FixedFirstColumn, !isScrolledFarthestLeft && DataTable_classnames_1.default.separate), style: {
+                width: `${(_c = columnVisibilityData[fixedFirstColumns - 1]) === null || _c === void 0 ? void 0 : _c.rightEdge}px`,
+            }, children: [(0, jsx_runtime_1.jsxs)("thead", { children: [(0, jsx_runtime_1.jsx)("tr", { style: { height: `${headerRowHeights[0]}px` }, children: nthHeadings.map((heading, index) => this.renderHeading({
+                                heading,
+                                headingIndex: index,
+                                inFixedNthColumn: true,
+                                inStickyHeader: false,
+                            })) }), totals && !showTotalsInFooter && ((0, jsx_runtime_1.jsx)("tr", { style: { height: `${headerRowHeights[1]}px` }, children: nthTotals === null || nthTotals === void 0 ? void 0 : nthTotals.map((total, index) => this.renderTotals({ total, index })) }))] }), (0, jsx_runtime_1.jsx)("tbody", { children: nthColumns.map((row, index) => this.defaultRenderRow({
+                        row,
+                        index,
+                        inFixedNthColumn: true,
+                        rowHeights: bodyRowHeights,
+                    })) }), totals && showTotalsInFooter && ((0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: nthTotals === null || nthTotals === void 0 ? void 0 : nthTotals.map((total, index) => this.renderTotals({ total, index })) }) }))] }));
+        const bodyMarkup = rows.map((row, index) => this.defaultRenderRow({
+            row,
+            index,
+            inFixedNthColumn: false,
+        }));
+        const footerMarkup = footerContent ? (0, jsx_runtime_1.jsx)("div", { className: DataTable_classnames_1.default.Footer, children: footerContent }) : null;
+        const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
+        const footerTotalsMarkup = showTotalsInFooter ? (0, jsx_runtime_1.jsx)("tfoot", { children: totalsMarkup }) : null;
+        const navigationMarkup = (location) => hideScrollIndicator ? null : ((0, jsx_runtime_1.jsx)(components_1.Navigation, { columnVisibilityData: columnVisibilityData, isScrolledFarthestLeft: isScrolledFarthestLeft, isScrolledFarthestRight: isScrolledFarthestRight, navigateTableLeft: this.navigateTable('left'), navigateTableRight: this.navigateTable('right'), fixedFirstColumns: fixedFirstColumns, setRef: (ref) => {
+                if (location === 'header') {
+                    this.headerNav = ref;
+                }
+                else if (location === 'sticky') {
+                    this.stickyNav = ref;
+                }
+            } }));
+        const stickyHeaderMarkup = stickyHeader ? ((0, jsx_runtime_1.jsx)(AfterInitialMount_1.AfterInitialMount, { children: (0, jsx_runtime_1.jsx)("div", { className: DataTable_classnames_1.default.StickyHeaderWrapper, role: 'presentation', children: (0, jsx_runtime_1.jsx)(Sticky_1.Sticky, { boundingElement: this.dataTable.current, onStickyChange: (isSticky) => {
+                        this.changeHeadingFocus();
+                        this.stickyHeaderActive = isSticky;
+                    }, children: (isSticky) => {
+                        const stickyHeaderInnerClassNames = (0, css_1.classNames)(DataTable_classnames_1.default.StickyHeaderInner, isSticky && DataTable_classnames_1.default['StickyHeaderInner-isSticky']);
+                        const stickyHeaderTableClassNames = (0, css_1.classNames)(DataTable_classnames_1.default.StickyHeaderTable, !isScrolledFarthestLeft && DataTable_classnames_1.default.separate);
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: stickyHeaderInnerClassNames, children: [(0, jsx_runtime_1.jsx)("div", { children: navigationMarkup('sticky') }), (0, jsx_runtime_1.jsx)("table", { className: stickyHeaderTableClassNames, ref: this.stickyTable, children: (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: DataTable_classnames_1.default.StickyTableHeadingsRow, children: headings.map((heading, index) => {
+                                                return this.renderHeading({
+                                                    heading,
+                                                    headingIndex: index,
+                                                    inFixedNthColumn: Boolean(index <= fixedFirstColumns - 1 && fixedFirstColumns),
+                                                    inStickyHeader: true,
+                                                });
+                                            }) }) }) })] }));
+                    } }) }) })) : null;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName, ref: this.dataTable, children: [stickyHeaderMarkup, navigationMarkup('header'), (0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { className: DataTable_classnames_1.default.ScrollContainer, ref: this.scrollContainer, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: this.handleResize }), (0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { capture: true, passive: true, event: 'scroll', handler: this.scrollListener }), fixedNthColumnMarkup, (0, jsx_runtime_1.jsxs)("table", { className: DataTable_classnames_1.default.Table, ref: this.table, children: [(0, jsx_runtime_1.jsxs)("thead", { children: [headingMarkup, headerTotalsMarkup] }), (0, jsx_runtime_1.jsx)("tbody", { children: bodyMarkup }), footerTotalsMarkup] })] }), footerMarkup] })] }));
+    }
+    fixedFirstColumns() {
+        const { hasFixedFirstColumn, fixedFirstColumns = 0, headings } = this.props;
+        const numberOfFixedFirstColumns = hasFixedFirstColumn && !fixedFirstColumns ? 1 : fixedFirstColumns;
+        if (numberOfFixedFirstColumns >= headings.length) {
+            return 0;
+        }
+        return numberOfFixedFirstColumns;
+    }
+}
+function DataTable(props) {
+    const i18n = (0, i18n_1.useI18n)();
+    return (0, jsx_runtime_1.jsx)(DataTableInner, { ...props, i18n: i18n });
+}
+exports.DataTable = DataTable;

package/dist/src/components/DataTable/DataTable.styles.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    StickyHeaderCell: 'StickyHeaderCell',
+    separate: 'separate',
+    StickyTableHeadingsRow: 'StickyTableHeadingsRow',
+    TableWrapper: 'TableWrapper',
+    ShowTotals: 'ShowTotals',
+    // verified
+    StickyTable: 'StickyTable',
+    // DataTable: 'DataTable relative max-w-screen overflow-hidden bg-p-color-bg rounded-md',
+    DataTable: 'DataTable',
+    condensed: 'condensed',
+    Navigation: 'Navigation',
+    IncreasedTableDensity: 'IncreasedTableDensity',
+    Pip: 'Pip',
+    'Pip-visible': 'Pip-visible',
+    ScrollContainer: 'ScrollContainer',
+    Table: 'Table',
+    TableRow: 'TableRow',
+    Cell: 'Cell',
+    ZebraStripingOnData: 'ZebraStripingOnData',
+    RowCountIsEven: 'RowCountIsEven',
+    ShowTotalsInFooter: 'ShowTotalsInFooter',
+    'Cell-separate': 'Cell-separate',
+    'Cell-firstColumn': 'Cell-firstColumn',
+    'Cell-numeric': 'Cell-numeric',
+    'Cell-truncated': 'Cell-truncated',
+    'Cell-header': 'Cell-header',
+    'Cell-sortable': 'Cell-sortable',
+    'Heading-left': 'Heading-left',
+    'Cell-verticalAlignTop': 'Cell-verticalAlignTop',
+    'Cell-verticalAlignBottom': 'Cell-verticalAlignBottom',
+    'Cell-verticalAlignMiddle': 'Cell-verticalAlignMiddle',
+    'Cell-verticalAlignBaseline': 'Cell-verticalAlignBaseline',
+    hoverable: 'hoverable',
+    'Cell-hovered': 'Cell-hovered',
+    Icon: 'Icon',
+    Heading: 'Heading',
+    StickyHeaderEnabled: 'StickyHeaderEnabled',
+    'Cell-sorted': 'Cell-sorted',
+    'Cell-total': 'Cell-total',
+    'ZebraStripingOnData.ShowTotals.RowCountIsEven': 'ZebraStripingOnData.ShowTotals.RowCountIsEven',
+    'ZebraStripingOnData.ShowTotalsInFooter': 'ZebraStripingOnData.ShowTotalsInFooter',
+    'Cell-total-footer': 'Cell-total-footer',
+    Footer: 'Footer',
+    StickyHeaderWrapper: 'StickyHeaderWrapper',
+    StickyHeaderInner: 'StickyHeaderInner',
+    'StickyHeaderInner-isSticky': 'StickyHeaderInner-isSticky',
+    StickyHeaderTable: 'StickyHeaderTable',
+    'StickyHeaderEnabled .StickyHeaderTable::-webkit-scrollbar': 'StickyHeaderEnabled .StickyHeaderTable::-webkit-scrollbar',
+    'StickyHeaderEnabled .StickyHeaderTable .FixedFirstColumn': 'StickyHeaderEnabled .StickyHeaderTable .FixedFirstColumn',
+    'StickyHeaderEnabled .StickyTableHeadingsRow': 'StickyHeaderEnabled .StickyTableHeadingsRow',
+    'StickyHeaderEnabled .StickyHeaderInner-isSticky': 'StickyHeaderEnabled .StickyHeaderInner-isSticky',
+    FixedFirstColumn: 'FixedFirstColumn',
+    TooltipContent: 'TooltipContent',
+};
+exports.default = styles;

package/dist/src/components/DataTable/components/Cell/Cell.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const i18n_1 = require("../../../../utilities/i18n");
+const Icon_1 = require("../../../Icon");
+const Icons_1 = require("../../../Icons");
+const shared_1 = require("../../../shared");
+const Tooltip_1 = require("../../../Tooltip");
+const DataTable_classnames_1 = __importDefault(require("../../DataTable.classnames"));
+function Cell({ content, contentType, nthColumn, firstColumn, truncate, header, total, totalInFooter, sorted, sortable, sortDirection, inFixedNthColumn, verticalAlign = 'top', defaultSortDirection = 'ascending', onSort, colSpan, setRef = () => { }, stickyHeadingCell = false, stickyCellWidth, hovered = false, handleFocus = () => { }, hasFixedNthColumn = false, fixedCellVisible = false, firstColumnMinWidth, style, lastFixedFirstColumn, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const numeric = contentType === 'numeric';
+    const className = (0, css_1.classNames)(DataTable_classnames_1.default.Cell, 
+    //@ts-expect-error check implementation
+    DataTable_classnames_1.default[`Cell-${(0, css_1.variationName)('verticalAlign', verticalAlign)}`], firstColumn && DataTable_classnames_1.default['Cell-firstColumn'], truncate && DataTable_classnames_1.default['Cell-truncated'], header && DataTable_classnames_1.default['Cell-header'], total && DataTable_classnames_1.default['Cell-total'], totalInFooter && DataTable_classnames_1.default['Cell-total-footer'], numeric && DataTable_classnames_1.default['Cell-numeric'], sortable && DataTable_classnames_1.default['Cell-sortable'], sorted && DataTable_classnames_1.default['Cell-sorted'], stickyHeadingCell && DataTable_classnames_1.default.StickyHeaderCell, hovered && DataTable_classnames_1.default['Cell-hovered'], lastFixedFirstColumn && inFixedNthColumn && fixedCellVisible && DataTable_classnames_1.default['Cell-separate'], nthColumn && inFixedNthColumn && stickyHeadingCell && DataTable_classnames_1.default.FixedFirstColumn);
+    const headerClassName = (0, css_1.classNames)(header && DataTable_classnames_1.default.Heading, header && contentType === 'text' && DataTable_classnames_1.default['Heading-left']);
+    const iconClassName = (0, css_1.classNames)(sortable && DataTable_classnames_1.default.Icon);
+    const direction = sorted && sortDirection ? sortDirection : defaultSortDirection;
+    const source = direction === 'descending' ? Icons_1.MaSortDescending : Icons_1.MaSortAscending;
+    const oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+    const sortAccessibilityLabel = i18n.translate('Polaris.DataTable.sortAccessibilityLabel', {
+        direction: sorted ? oppositeDirection : direction,
+    });
+    const iconMarkup = ((0, jsx_runtime_1.jsx)("span", { className: iconClassName, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: source, accessibilityLabel: sortAccessibilityLabel }) }));
+    const focusable = !(stickyHeadingCell && hasFixedNthColumn && nthColumn && !inFixedNthColumn);
+    const sortableHeadingContent = ((0, jsx_runtime_1.jsxs)("button", { className: headerClassName, onClick: onSort, onFocus: handleFocus, tabIndex: focusable ? 0 : -1, children: [iconMarkup, content] }));
+    const columnHeadingContent = sortable ? sortableHeadingContent : content;
+    const colSpanProp = colSpan && colSpan > 1 ? { colSpan } : {};
+    const minWidthStyles = nthColumn && firstColumnMinWidth
+        ? { minWidth: firstColumnMinWidth }
+        : { minWidth: stickyCellWidth };
+    const stickyHeading = ((0, jsx_runtime_1.jsx)("th", { ref: setRef, ...shared_1.headerCell.props, ...colSpanProp, className: className, "aria-sort": sortDirection, style: {
+            ...style,
+            ...minWidthStyles,
+        }, "data-index-table-sticky-heading": true, children: columnHeadingContent }));
+    const headingMarkup = header ? ((0, jsx_runtime_1.jsx)("th", { ...shared_1.headerCell.props, "aria-sort": sortDirection, ...colSpanProp, ref: setRef, className: className, scope: 'col', style: { ...minWidthStyles }, children: columnHeadingContent })) : ((0, jsx_runtime_1.jsx)("th", { ...colSpanProp, ref: setRef, className: className, scope: 'row', style: { ...minWidthStyles }, children: truncate ? ((0, jsx_runtime_1.jsx)(TruncatedText, { className: DataTable_classnames_1.default.TooltipContent, children: content })) : (content) }));
+    const cellMarkup = header || firstColumn || nthColumn ? (headingMarkup) : ((0, jsx_runtime_1.jsx)("td", { className: className, ...colSpanProp, children: content }));
+    return stickyHeadingCell ? stickyHeading : cellMarkup;
+}
+exports.Cell = Cell;
+const TruncatedText = ({ children, className = '', }) => {
+    const textRef = (0, react_1.useRef)(null);
+    const { current } = textRef;
+    const text = ((0, jsx_runtime_1.jsx)("span", { ref: textRef, className: className, children: children }));
+    return (current === null || current === void 0 ? void 0 : current.scrollWidth) > (current === null || current === void 0 ? void 0 : current.offsetWidth) ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: textRef.current.innerText, children: text })) : (text);
+};

package/dist/src/components/DataTable/components/Cell/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("./Cell"), exports);