@ukic/canary-web-components 3.0.0-canary.20 → 3.0.0-canary.22

package/dist/collection/components/ic-data-table/ic-data-table.js

@@ -186,7 +186,7 @@ export class DataTable {
         };
         this.handleResize = () => {
             this.updateCellHeightsWithDescriptions();
-            this.fixCellSelect();
+            this.fixCellOverflow();
         };
         this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
             parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
@@ -562,15 +562,22 @@ export class DataTable {
             }
             return {};
         };
+        this.getSlottedActionElement = (actionElement) => {
+            const slotName = actionElement.getAttribute("name");
+            return this.el.querySelector(`[slot="${slotName}"]`);
+        };
         this.adjustWidthForActionElement = () => {
             var _a;
             const elements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".action-element");
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
-                const width = element.firstChild.getBoundingClientRect()
-                    .width;
-                const gridWrapper = element.closest(".cell-grid-wrapper");
-                if (gridWrapper)
+            elements === null || elements === void 0 ? void 0 : elements.forEach((actionElementSpan) => {
+                var _a;
+                const actionElement = actionElementSpan.firstChild;
+                const slottedActionElement = this.getSlottedActionElement(actionElement);
+                const width = (_a = slottedActionElement === null || slottedActionElement === void 0 ? void 0 : slottedActionElement.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0;
+                const gridWrapper = actionElementSpan.closest(".cell-grid-wrapper");
+                if (gridWrapper) {
                     gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
+                }
             });
         };
         this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
@@ -635,7 +642,8 @@ export class DataTable {
                                 ["row-header-sticky"]: this.stickyRowHeaders,
                             } }, cellValue("title")));
                     }
-                    const CellContent = this.createCellContent(column, cell, `${column === null || column === void 0 ? void 0 : column.key}-${rowIndex}`, rowOptions, this.isObject(cell) && Object.keys(cell).includes("icon"), cellValue, rowEmphasis, currentRowHeight || undefined);
+                    const cellSlotName = `${column === null || column === void 0 ? void 0 : column.key}-${rowIndex}`;
+                    const CellContent = this.createCellContent(column, cell, cellSlotName, rowOptions, this.isObject(cell) && Object.keys(cell).includes("icon"), cellValue, rowEmphasis, currentRowHeight || undefined);
                     if (rowKeys[index] !== "rowOptions") {
                         return (h("td", { class: {
                                 ["table-cell"]: true,
@@ -648,12 +656,7 @@ export class DataTable {
                                     !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
                                     !!rowAlignment ||
                                     !!this.getCellAlignment(cell, "vertical"),
-                            }, style: Object.assign({}, this.getColumnWidth(column.columnWidth)) }, this.isObject(cell) &&
-                            Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
-                            // eslint-disable-next-line react/jsx-no-bind
-                            onClick: cell.actionOnClick
-                                ? (event) => this.handleClick(event, cell.actionOnClick)
-                                : undefined }))) : (CellContent)));
+                            }, style: Object.assign({}, this.getColumnWidth(column.columnWidth)) }, isSlotUsed(this.el, `${cellSlotName}-action-element`) ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element" }, h("slot", { name: `${cellSlotName}-action-element` })))) : (CellContent)));
                     }
                 }
             });
@@ -924,10 +927,13 @@ export class DataTable {
                 strategy: "fixed",
             });
         };
-        this.fixCellSelect = () => {
+        this.fixCellOverflow = () => {
             var _a, _b;
             (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".data-type-element")) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
-                const children = Array.from(element.children);
+                let children = Array.from(element.children);
+                if (children.length === 1 && children[0].tagName === "SLOT") {
+                    children = getSlotElements(element);
+                }
                 children === null || children === void 0 ? void 0 : children.forEach((el) => {
                     var _a;
                     if (el.tagName === "IC-SELECT") {
@@ -937,6 +943,12 @@ export class DataTable {
                         });
                         el.style.setProperty("--input-width", `${element.clientWidth}px`);
                     }
+                    else {
+                        const popover = el.querySelector("ic-popover-menu");
+                        popover === null || popover === void 0 ? void 0 : popover.setExternalPopperProps({
+                            strategy: "fixed",
+                        });
+                    }
                 });
             });
         };
@@ -948,9 +960,14 @@ export class DataTable {
                     this.fixCellTooltip(slottedEl);
                 });
             });
-            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => this.fixCellTooltip(actionElementSpan));
+            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
+                const actionElement = actionElementSpan.firstChild;
+                const slottedActionElement = this.getSlottedActionElement(actionElement);
+                if (slottedActionElement) {
+                    this.fixCellTooltip(slottedActionElement);
+                }
+            });
         };
-        this.handleClick = (event, callback) => callback(event);
         this.renderTableBody = (loading, data, overlay) => {
             if (!(data === null || data === void 0 ? void 0 : data.length))
                 return;
@@ -1112,7 +1129,7 @@ export class DataTable {
     }
     componentDidRender() {
         this.fixCellTooltips();
-        this.fixCellSelect();
+        this.fixCellOverflow();
         this.updateCellHeightsWithDescriptions();
         this.adjustWidthForActionElement();
     }
@@ -1332,22 +1349,22 @@ export class DataTable {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: '3052bc97a810739103b780229d462a9ba1d63ea5', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '4ffa82385024818947871897ce977fe95bce8a9d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '91985d43c24fd4bbc76ccf96a67a1fa19ce70461', name: "title-bar" }), h("div", { key: '34c7cd54e7e1d91c1fc7a2ce9b4802b9746a82bf', class: {
+        return (h(Host, { key: '84f4f415f8a80939c2b7dc2f6272a01fc43b5aab', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '9b81dce430b774d76b458157946d8bcdcd8163d1', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '41f557715b7dd1835f4760d711dd14a90fc9e6a5', name: "title-bar" }), h("div", { key: '2b668ed233252e678ec6e35cb94b3cfc1a99a277', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '93ef0fbb09a56f3890fa23d5a0dc276af9ad4dda', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '56bef9d91412d8b2240680a85a2b6eb23dd5dc46', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: '6add0ea2caa1c21a5625a34145d70fc6228e324c', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'de60c4fd48671d474244ff05316deedd44f98fb2', class: {
+            } }, h("caption", { key: '412993cdb9d8cdbb7fe44700a0a503b6c019274a', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'b8d4ffb763d44d06727608adfbd58c9d2a8a0e3d', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: 'c7083cfce06a32d81e351b68d2cb722a79f29d7d' }, rowSelection && data && (h("th", { key: '736708f68f9736806fa680c9abba7ff82bdb5798', class: {
+            } }, h("tr", { key: '63c8fc7587eb5e5912eec2f18efaae0c37a33630' }, rowSelection && data && (h("th", { key: 'cef5b67389222dd6be1ab940c66df75519017d1e', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '46f06aa00589a14972aee324293b8d3c6695f232', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'a39b7d79439620a8d895837043530a3436837d18', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '095be9ca1da7f4b977264b41b9f206061ae484c8', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b2ada1483434907c07daf7c1854c14f499cafba5', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: 'ca4c4e8ff912756de23061b17d2dc29511a39a81', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '43601b607b4a32605f3a946b33746c47152fefa7', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: '69a5c565f55d1d149bad3d2172008dee7d0e8643', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '0b4279d5c29aa8a74dfbfc60a5d6104990bfea66', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'ee2c9811630b1c64071e8071ba15c0265a78ee00', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'dbe84358bdf8715360f2fd5e810e24878e877a7a', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));