@wavelengthusaf/components 4.16.0 → 4.17.0

package/dist/cjs/index.cjs

@@ -7483,58 +7483,100 @@ ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
 
-
 var _client = require('react-dom/client');
 
-var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
+
+var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder, onAction, ...rest }) => {
   const tableRef = _react.useRef.call(void 0, null);
-  const reactDropdownRoots = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const cellRoots = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const dropdownRoots = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const renderReactToDOM = (element) => {
+    const container = document.createElement("div");
+    container.style.display = "contents";
+    const root = _client.createRoot.call(void 0, container);
+    cellRoots.current.set(container, root);
+    root.render(element);
+    return container;
+  };
+  const processedColumns = _react.useMemo.call(void 0, () => {
+    if (!Array.isArray(columns)) return columns;
+    return columns.map((col) => {
+      if (typeof col.renderCell === "function") {
+        const originalRender = col.renderCell;
+        return {
+          ...col,
+          renderCell: (item) => {
+            const content = originalRender(item);
+            if (content !== null && typeof content === "object" && !(content instanceof HTMLElement)) {
+              return renderReactToDOM(content);
+            }
+            return content;
+          }
+        };
+      }
+      return col;
+    });
+  }, [columns]);
   _react.useEffect.call(void 0, () => {
-    const customChildDataTableElement = tableRef.current;
-    if (!customChildDataTableElement) return;
-    if (columns !== void 0) customChildDataTableElement.setColumns = columns;
-    if (data !== void 0) customChildDataTableElement.setData = data;
-    if (dropdownArrowLocation !== void 0) customChildDataTableElement.setDropdownArrowLocation = dropdownArrowLocation;
-    if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
-    if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
-  }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
+    const el = tableRef.current;
+    if (!el) return;
+    const resolveNodeToDOM = (node) => {
+      if (node !== null && typeof node === "object" && !(node instanceof HTMLElement)) {
+        return renderReactToDOM(node);
+      }
+      return node;
+    };
+    if (processedColumns !== void 0) el.setColumns = processedColumns;
+    if (data !== void 0) el.setData = data;
+    if (dropdownArrowLocation !== void 0) el.setDropdownArrowLocation = dropdownArrowLocation;
+    if (sortIcon !== void 0) el.setSortIcon = resolveNodeToDOM(sortIcon);
+    if (dropdownButtonIcon !== void 0) el.setDropdownButtonIcon = resolveNodeToDOM(dropdownButtonIcon);
+    if (externalSort !== void 0) el.setExternalSort = externalSort;
+    if (sortKey !== void 0) el.setSortKey = sortKey;
+    if (sortOrder !== void 0) el.setSortOrder = sortOrder;
+  }, [processedColumns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder]);
   _react.useEffect.call(void 0, () => {
     const el = tableRef.current;
     if (!el) return;
+    const handleAction = (event) => {
+      if (onAction) onAction(event);
+    };
     const handleReactDropdown = (event) => {
       const customEvent = event;
       event.stopPropagation();
       const { container, itemId } = customEvent.detail;
-      let root = reactDropdownRoots.current.get(container);
+      let root = dropdownRoots.current.get(container);
       if (!root) {
         root = _client.createRoot.call(void 0, container);
-        reactDropdownRoots.current.set(container, root);
+        dropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _83 => _83.find, 'call', _84 => _84((item2) => String(item2.id) === String(itemId))]);
-      if (item && item.dropdown && root) {
+      const item = _optionalChain([data, 'optionalAccess', _83 => _83.find, 'call', _84 => _84((i) => String(i.id) === String(itemId))]);
+      if (_optionalChain([item, 'optionalAccess', _85 => _85.dropdown]) && root) {
         root.render(item.dropdown);
       }
-      const dropdown = container.querySelector(".dropdown");
-      if (dropdown) {
-        dropdown.hidden = false;
-      }
     };
     const handleCleanupDropdown = (event) => {
       event.stopPropagation();
       const { container } = event.detail;
-      const root = reactDropdownRoots.current.get(container);
-      const dropdown = container.querySelector(".dropdown");
-      if (root && dropdown) {
-        dropdown.hidden = true;
+      const root = dropdownRoots.current.get(container);
+      if (root) {
+        root.unmount();
+        dropdownRoots.current.delete(container);
       }
     };
+    el.addEventListener("action", handleAction);
     el.addEventListener("getReactDropdown", handleReactDropdown);
     el.addEventListener("cleanupDropdown", handleCleanupDropdown);
     return () => {
+      el.removeEventListener("action", handleAction);
       el.removeEventListener("getReactDropdown", handleReactDropdown);
       el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
+      cellRoots.current.forEach((root) => root.unmount());
+      cellRoots.current.clear();
+      dropdownRoots.current.forEach((root) => root.unmount());
+      dropdownRoots.current.clear();
     };
-  }, [data]);
+  }, [data, onAction]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";
@@ -7637,9 +7679,9 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _85 => _85.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _86 => _86.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _86 => _86.Details, 'optionalAccess', _87 => _87[columnKey]]);
+    const value = _optionalChain([item, 'access', _87 => _87.Details, 'optionalAccess', _88 => _88[columnKey]]);
     console.log("value: ", value);
     if (value !== void 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7649,7 +7691,7 @@ var NestedDataTable = ({ data, columns, id }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _88 => _88.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _89 => _89.map, 'call', _90 => _90((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _89 => _89.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _90 => _90.map, 'call', _91 => _91((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {

package/dist/cjs/index.d.cts

@@ -975,11 +975,15 @@ declare const WavelengthDataTable: {
 };
 
 interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
-    columns?: object;
-    data?: object;
-    dropdownArrowLocation?: string;
-    sortIcon?: string | HTMLElement;
-    dropdownButtonIcon?: string | HTMLElement;
+    columns?: any[];
+    data?: any[];
+    dropdownArrowLocation?: "left" | "right" | "bottom";
+    sortIcon?: string | HTMLElement | React__default.ReactNode;
+    dropdownButtonIcon?: string | HTMLElement | React__default.ReactNode;
+    externalSort?: boolean | string;
+    sortKey?: string;
+    sortOrder?: "asc" | "desc";
+    onAction?: (event: CustomEvent) => void;
 }
 declare const ChildDataTable: React__default.FC<ChildDataTableProps>;
 

package/dist/esm/index.d.ts

@@ -975,11 +975,15 @@ declare const WavelengthDataTable: {
 };
 
 interface ChildDataTableProps extends React__default.HTMLAttributes<HTMLElement> {
-    columns?: object;
-    data?: object;
-    dropdownArrowLocation?: string;
-    sortIcon?: string | HTMLElement;
-    dropdownButtonIcon?: string | HTMLElement;
+    columns?: any[];
+    data?: any[];
+    dropdownArrowLocation?: "left" | "right" | "bottom";
+    sortIcon?: string | HTMLElement | React__default.ReactNode;
+    dropdownButtonIcon?: string | HTMLElement | React__default.ReactNode;
+    externalSort?: boolean | string;
+    sortKey?: string;
+    sortOrder?: "asc" | "desc";
+    onAction?: (event: CustomEvent) => void;
 }
 declare const ChildDataTable: React__default.FC<ChildDataTableProps>;
 

package/dist/esm/index.js

@@ -7482,59 +7482,101 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef25, useEffect as useEffect27 } from "react";
-import "@wavelengthusaf/web-components";
+import { useRef as useRef25, useEffect as useEffect27, useMemo as useMemo4 } from "react";
 import { createRoot } from "react-dom/client";
+import "@wavelengthusaf/web-components";
 import { jsx as jsx53 } from "react/jsx-runtime";
-var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
+var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder, onAction, ...rest }) => {
   const tableRef = useRef25(null);
-  const reactDropdownRoots = useRef25(/* @__PURE__ */ new Map());
+  const cellRoots = useRef25(/* @__PURE__ */ new Map());
+  const dropdownRoots = useRef25(/* @__PURE__ */ new Map());
+  const renderReactToDOM = (element) => {
+    const container = document.createElement("div");
+    container.style.display = "contents";
+    const root = createRoot(container);
+    cellRoots.current.set(container, root);
+    root.render(element);
+    return container;
+  };
+  const processedColumns = useMemo4(() => {
+    if (!Array.isArray(columns)) return columns;
+    return columns.map((col) => {
+      if (typeof col.renderCell === "function") {
+        const originalRender = col.renderCell;
+        return {
+          ...col,
+          renderCell: (item) => {
+            const content = originalRender(item);
+            if (content !== null && typeof content === "object" && !(content instanceof HTMLElement)) {
+              return renderReactToDOM(content);
+            }
+            return content;
+          }
+        };
+      }
+      return col;
+    });
+  }, [columns]);
   useEffect27(() => {
-    const customChildDataTableElement = tableRef.current;
-    if (!customChildDataTableElement) return;
-    if (columns !== void 0) customChildDataTableElement.setColumns = columns;
-    if (data !== void 0) customChildDataTableElement.setData = data;
-    if (dropdownArrowLocation !== void 0) customChildDataTableElement.setDropdownArrowLocation = dropdownArrowLocation;
-    if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
-    if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
-  }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
+    const el = tableRef.current;
+    if (!el) return;
+    const resolveNodeToDOM = (node) => {
+      if (node !== null && typeof node === "object" && !(node instanceof HTMLElement)) {
+        return renderReactToDOM(node);
+      }
+      return node;
+    };
+    if (processedColumns !== void 0) el.setColumns = processedColumns;
+    if (data !== void 0) el.setData = data;
+    if (dropdownArrowLocation !== void 0) el.setDropdownArrowLocation = dropdownArrowLocation;
+    if (sortIcon !== void 0) el.setSortIcon = resolveNodeToDOM(sortIcon);
+    if (dropdownButtonIcon !== void 0) el.setDropdownButtonIcon = resolveNodeToDOM(dropdownButtonIcon);
+    if (externalSort !== void 0) el.setExternalSort = externalSort;
+    if (sortKey !== void 0) el.setSortKey = sortKey;
+    if (sortOrder !== void 0) el.setSortOrder = sortOrder;
+  }, [processedColumns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder]);
   useEffect27(() => {
     const el = tableRef.current;
     if (!el) return;
+    const handleAction = (event) => {
+      if (onAction) onAction(event);
+    };
     const handleReactDropdown = (event) => {
       const customEvent = event;
       event.stopPropagation();
       const { container, itemId } = customEvent.detail;
-      let root = reactDropdownRoots.current.get(container);
+      let root = dropdownRoots.current.get(container);
       if (!root) {
         root = createRoot(container);
-        reactDropdownRoots.current.set(container, root);
+        dropdownRoots.current.set(container, root);
       }
-      const item = data?.find((item2) => String(item2.id) === String(itemId));
-      if (item && item.dropdown && root) {
+      const item = data?.find((i) => String(i.id) === String(itemId));
+      if (item?.dropdown && root) {
         root.render(item.dropdown);
       }
-      const dropdown = container.querySelector(".dropdown");
-      if (dropdown) {
-        dropdown.hidden = false;
-      }
     };
     const handleCleanupDropdown = (event) => {
       event.stopPropagation();
       const { container } = event.detail;
-      const root = reactDropdownRoots.current.get(container);
-      const dropdown = container.querySelector(".dropdown");
-      if (root && dropdown) {
-        dropdown.hidden = true;
+      const root = dropdownRoots.current.get(container);
+      if (root) {
+        root.unmount();
+        dropdownRoots.current.delete(container);
       }
     };
+    el.addEventListener("action", handleAction);
     el.addEventListener("getReactDropdown", handleReactDropdown);
     el.addEventListener("cleanupDropdown", handleCleanupDropdown);
     return () => {
+      el.removeEventListener("action", handleAction);
       el.removeEventListener("getReactDropdown", handleReactDropdown);
       el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
+      cellRoots.current.forEach((root) => root.unmount());
+      cellRoots.current.clear();
+      dropdownRoots.current.forEach((root) => root.unmount());
+      dropdownRoots.current.clear();
     };
-  }, [data]);
+  }, [data, onAction]);
   return /* @__PURE__ */ jsx53("wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -71,7 +71,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.18.0",
+    "@wavelengthusaf/web-components": "^1.19.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",