@wavelengthusaf/components 4.15.0 → 4.17.0

package/dist/cjs/index.cjs

@@ -6463,32 +6463,36 @@ WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
 
-var _Slider = require('@mui/material/Slider'); var _Slider2 = _interopRequireDefault(_Slider);
 
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { width: width2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Slider2.default,
-    {
-      id,
-      "aria-label": "Custom marks",
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": _nullishCoalesce(valueDisplayed, () => ( (labelFunc && value !== void 0 ? labelFunc(value) : void 0)))
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
@@ -7479,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";
@@ -7633,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}`);
@@ -7645,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

@@ -5,7 +5,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { CSSProperties } from 'styled-components';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -173,7 +172,7 @@ type StyleProp = {
 } & CSSProperties;
 /** Extending from this instead of HTMLElement in component refs allows for integration with the styling mixin in web components*/
 interface StylableElement extends HTMLElement {
-    customStyles: StyleProp;
+    customStyles?: StyleProp;
 }
 
 interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
@@ -856,24 +855,23 @@ declare namespace WavelengthTestSnackbar {
     var displayName: string;
 }
 
-interface sliderProps {
-    width?: string;
-    labelColor?: string;
+interface WavelengthSliderProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle?: StyleProp;
+    value?: number;
+    maxVal?: number;
+    minVal?: number;
+    step?: number;
+    handleChange?: (event: Event, newValue: number | number[]) => void;
+    labelFunc?: (val: number) => string;
+    valueDisplayed?: string;
+    marks?: (number | {
+        value: number;
+        label: string;
+    })[];
     color?: string;
-    value: number;
-    id?: string;
-    valueDisplayed?: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
-    handleChange: (event: Event, newValue: number | number[]) => void;
-    labelFunc?(val: number): string;
-    marks?: Mark[];
-}
-declare function WavelengthSlider({ width, color, valueDisplayed, marks, labelColor, value, id, maxVal, minVal, step, labelFunc, handleChange }: sliderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSlider {
-    var displayName: string;
+    width?: string;
 }
+declare const WavelengthSlider: React__default.FC<WavelengthSliderProps>;
 
 interface carouselItem$1 {
     title?: string;
@@ -977,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

@@ -5,7 +5,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants } from '@mui/material';
 import { CSSProperties } from 'styled-components';
 import { z } from 'zod';
-import { Mark } from '@mui/material/Slider/useSlider.types';
 
 /**
  * Helper Functions
@@ -173,7 +172,7 @@ type StyleProp = {
 } & CSSProperties;
 /** Extending from this instead of HTMLElement in component refs allows for integration with the styling mixin in web components*/
 interface StylableElement extends HTMLElement {
-    customStyles: StyleProp;
+    customStyles?: StyleProp;
 }
 
 interface WavelengthSearchProps extends React__default.HTMLAttributes<HTMLElement> {
@@ -856,24 +855,23 @@ declare namespace WavelengthTestSnackbar {
     var displayName: string;
 }
 
-interface sliderProps {
-    width?: string;
-    labelColor?: string;
+interface WavelengthSliderProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle?: StyleProp;
+    value?: number;
+    maxVal?: number;
+    minVal?: number;
+    step?: number;
+    handleChange?: (event: Event, newValue: number | number[]) => void;
+    labelFunc?: (val: number) => string;
+    valueDisplayed?: string;
+    marks?: (number | {
+        value: number;
+        label: string;
+    })[];
     color?: string;
-    value: number;
-    id?: string;
-    valueDisplayed?: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
-    handleChange: (event: Event, newValue: number | number[]) => void;
-    labelFunc?(val: number): string;
-    marks?: Mark[];
-}
-declare function WavelengthSlider({ width, color, valueDisplayed, marks, labelColor, value, id, maxVal, minVal, step, labelFunc, handleChange }: sliderProps): react_jsx_runtime.JSX.Element;
-declare namespace WavelengthSlider {
-    var displayName: string;
+    width?: string;
 }
+declare const WavelengthSlider: React__default.FC<WavelengthSliderProps>;
 
 interface carouselItem$1 {
     title?: string;
@@ -977,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

@@ -6462,33 +6462,37 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
 WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
-import Box4 from "@mui/material/Box";
-import Slider from "@mui/material/Slider";
+import { useRef as useRef22, useEffect as useEffect22 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
-function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
-  const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ jsx47(Box4, { sx: { width: width2 }, children: /* @__PURE__ */ jsx47(
-    Slider,
-    {
-      id,
-      "aria-label": "Custom marks",
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = useRef22(null);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": valueDisplayed ?? (labelFunc && value !== void 0 ? labelFunc(value) : void 0)
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx47("wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
@@ -6553,7 +6557,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState8, useEffect as useEffect23 } from "react";
+import { useState as useState8, useEffect as useEffect24 } from "react";
 import Grid4 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
@@ -6564,7 +6568,7 @@ var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState8(0);
   const [isHovered, setIsHovered] = useState8(false);
-  useEffect23(() => {
+  useEffect24(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6637,7 +6641,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
 SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef22, useEffect as useEffect24, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef23, useEffect as useEffect25, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
@@ -6677,12 +6681,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef22(null);
+    const internalRef = useRef23(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6755,7 +6759,7 @@ var WavelengthInput = forwardRef2(
       disabled,
       multiLine
     ]);
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6767,7 +6771,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect24(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6797,7 +6801,7 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect25, useRef as useRef23, useState as useState9 } from "react";
+import { useEffect as useEffect26, useRef as useRef24, useState as useState9 } from "react";
 import styled7 from "styled-components";
 import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var ModalInputDiv = styled7.div`
@@ -6978,8 +6982,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [currentPage, setCurrentPage] = useState9(1);
   const [isOpen, setIsOpen] = useState9(false);
   const [editingMenuKey, setEditingMenuKey] = useState9(null);
-  const menuRef = useRef23(null);
-  const modalRef = useRef23(null);
+  const menuRef = useRef24(null);
+  const modalRef = useRef24(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -6987,7 +6991,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7017,7 +7021,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7478,59 +7482,101 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef24, useEffect as useEffect26 } 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 }) => {
-  const tableRef = useRef24(null);
-  const reactDropdownRoots = useRef24(/* @__PURE__ */ new Map());
-  useEffect26(() => {
-    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]);
-  useEffect26(() => {
+var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder, onAction, ...rest }) => {
+  const tableRef = useRef25(null);
+  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 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";
@@ -7665,7 +7711,7 @@ var NestedDataTable = ({ data, columns, id }) => {
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect27, useRef as useRef26, useState as useState12 } from "react";
+import { useEffect as useEffect28, useRef as useRef27, useState as useState12 } from "react";
 import styled10 from "styled-components";
 import { Fragment as Fragment14, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var AutoContainer = styled10.div`
@@ -7796,9 +7842,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef26(null);
-  const listRef = useRef26(null);
-  const noItemListRef = useRef26(null);
+  const inputRef = useRef27(null);
+  const listRef = useRef27(null);
+  const noItemListRef = useRef27(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7806,7 +7852,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect27(() => {
+  useEffect28(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7818,7 +7864,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect27(() => {
+    useEffect28(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -7938,7 +7984,7 @@ var WavelengthAutoComplete = ({
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect28, useState as useState13 } from "react";
+import { useEffect as useEffect29, useState as useState13 } from "react";
 import styled11 from "styled-components";
 import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 var Label2 = styled11.label`
@@ -8012,7 +8058,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect28(() => {
+  useEffect29(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8095,7 +8141,7 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef27, useEffect as useEffect29 } from "react";
+import { useRef as useRef28, useEffect as useEffect30 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
@@ -8107,8 +8153,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef27(null);
-  useEffect29(() => {
+  const ref = useRef28(null);
+  useEffect30(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8137,7 +8183,7 @@ var WavelengthCheckbox = ({
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef28, useEffect as useEffect30 } from "react";
+import { useRef as useRef29, useEffect as useEffect31 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
@@ -8147,8 +8193,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef28(null);
-  useEffect30(() => {
+  const ref = useRef29(null);
+  useEffect31(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle;
@@ -8161,7 +8207,7 @@ var SampleComponent = ({
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef29, useEffect as useEffect31 } from "react";
+import { useRef as useRef30, useEffect as useEffect32 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
@@ -8172,8 +8218,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef29(null);
-  useEffect31(() => {
+  const ref = useRef30(null);
+  useEffect32(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8199,11 +8245,11 @@ var WavelengthNotificationPanel = ({
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect32, useRef as useRef30 } from "react";
+import { useEffect as useEffect33, useRef as useRef31 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef30(null);
-  useEffect32(() => {
+  const componentRef = useRef31(null);
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8216,7 +8262,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect32(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8226,7 +8272,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect32(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.15.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.17.0",
+    "@wavelengthusaf/web-components": "^1.19.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",