@wavelengthusaf/components 4.16.0 → 4.18.0

package/dist/cjs/index.cjs

@@ -4297,75 +4297,21 @@ WavelengthNotAvailablePage.displayName = "WavelengthNotAvailablePage";
 
 // src/components/PageComponents/WavelengthSideBar.tsx
 
-var _reactrouterdom = require('react-router-dom');
-var _iconsmaterial = require('@mui/icons-material');
-var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequireDefault(_ListItem);
-var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
-var _Collapse = require('@mui/material/Collapse'); var _Collapse2 = _interopRequireDefault(_Collapse);
-var _List = require('@mui/material/List'); var _List2 = _interopRequireDefault(_List);
 
-function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = 240, height: height2 = 300, id }) {
-  const [openSections, setOpenSections] = _react.useState.call(void 0, {});
-  const navigate = _reactrouterdom.useNavigate.call(void 0, );
-  const palette2 = getPalette();
-  function handleToggle(sectionTitle) {
-    setOpenSections((prevState) => ({
-      ...prevState,
-      [sectionTitle]: !prevState[sectionTitle]
-    }));
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      id,
-      style: {
-        width: width2,
-        minHeight: 300,
-        height: height2,
-        maxHeight: 737,
-        overflow: "hidden",
-        overflowY: "scroll",
-        backgroundColor: bgColor ? bgColor : palette2.primary,
-        marginBottom: 5,
-        marginTop,
-        marginLeft,
-        borderRadius: "12px",
-        position: "relative"
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "nav", children: sections.map((section, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _ListItem2.default, { button: true, onClick: () => handleToggle(section.title), sx: { flexDirection: "row", alignItems: "center", paddingX: 0.75, paddingY: 0.5 }, children: [
-          openSections[section.title] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowDownRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowRightRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", sx: { fontSize: 16, color: txtColor ? txtColor : palette2.secondary }, children: section.title })
-        ] }),
-        _optionalChain([section, 'access', _2 => _2.subsections, 'optionalAccess', _3 => _3.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _Typography2.default,
-            {
-              variant: "subtitle2",
-              sx: {
-                fontSize: 12,
-                marginTop: 1,
-                paddingLeft: 0.75,
-                color: labelColor ? labelColor : palette2.secondary
-              },
-              children: _optionalChain([subsection, 'access', _4 => _4.title, 'optionalAccess', _5 => _5.toUpperCase, 'call', _6 => _6()])
-            }
-          ),
-          subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _ListItem2.default,
-            {
-              button: true,
-              onClick: item.path ? () => navigate(item.path) : item.onClick,
-              sx: { color: txtColor ? txtColor : palette2.secondary, paddingLeft: 4, paddingX: 0.75, paddingY: 0.25 },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", sx: { fontSize: 16 }, children: item.title })
-            },
-            itemIndex
-          ))
-        ] }, subIndex)) }) })
-      ] }, index)) })
-    }
-  );
-}
+var WavelengthSideBar = ({ children, customStyle, sections = "[]", onItemClick, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle) el.customStyles = customStyle;
+    el.setAttribute("sections", sections);
+    if (onItemClick) {
+      el.addEventListener("wavelength-sidebar-item-click", onItemClick);
+      return () => el.removeEventListener("wavelength-sidebar-item-click", onItemClick);
+    }
+  }, [customStyle, sections, onItemClick]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-sidebar", { ref, ...rest, children });
+};
 WavelengthSideBar.displayName = "WavelengthSideBar";
 
 // src/components/PageComponents/WavelengthNavBar.tsx
@@ -4453,7 +4399,7 @@ var WavelengthFileDropZone = ({
     else el.removeAttribute("multiple");
     const handleFilesSelected = (event) => {
       const customEvent = event;
-      _optionalChain([onFilesSelected, 'optionalCall', _7 => _7(customEvent.detail.files)]);
+      _optionalChain([onFilesSelected, 'optionalCall', _2 => _2(customEvent.detail.files)]);
     };
     el.addEventListener("files-selected", handleFilesSelected);
     return () => {
@@ -4741,65 +4687,6 @@ WavelengthProgressBar.displayName = "WavelengthProgressBar";
 // src/index.ts
 
 
-// src/components/PageComponents/WavelengthCommentDisplay.tsx
-
-var _CheckCircleOutline = require('@mui/icons-material/CheckCircleOutline'); var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
-var _CheckCircle = require('@mui/icons-material/CheckCircle'); var _CheckCircle2 = _interopRequireDefault(_CheckCircle);
-
-
-function WavelengthCommentDisplay(props) {
-  const [selected, setSelected] = _react.useState.call(void 0, false);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      id: props.id,
-      "data-testid": props.dataTestId,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        width: props.width || "332px",
-        minHeight: "fit",
-        height: props.height || "fit-content",
-        backgroundColor: props.backgroundColor || "rgba(250, 242, 236, 1)",
-        border: props.border || "1px solid rgba(0, 0, 0, 0.05)",
-        borderRadius: "6px",
-        padding: "12px",
-        color: props.textColor || "black"
-      },
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 600, display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 0 }, children: [
-          props.author,
-          !selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.IconButton,
-            {
-              onClick: (e) => {
-                setSelected(!selected);
-                _optionalChain([props, 'access', _8 => _8.onClick, 'optionalCall', _9 => _9(e)]);
-              },
-              style: { padding: "0px" },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
-            }
-          ),
-          selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.IconButton,
-            {
-              onClick: (e) => {
-                setSelected(!selected);
-                _optionalChain([props, 'access', _10 => _10.onClick, 'optionalCall', _11 => _11(e)]);
-              },
-              style: { padding: "0px" },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "12px", fontWeight: 400, opacity: 0.6 }, children: props.date }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400, marginTop: "8px" }, children: props.comments })
-      ]
-    }
-  );
-}
-WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
-
 // src/components/PageComponents/WavelengthPermissionAlert.tsx
 
 function WavelengthPermissionAlert({
@@ -5192,7 +5079,7 @@ var WavelengthBadge = ({
     updateAttribute("text-box-border-radius", textBoxBorderRadius);
     updateAttribute("text-box-hover-border-color", textBoxHoverBorderColor);
     updateAttribute("badge-font", badgeFont);
-    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _12 => _12.toString, 'call', _13 => _13()]));
+    updateAttribute("badge-content", _optionalChain([badgeContent, 'optionalAccess', _3 => _3.toString, 'call', _4 => _4()]));
     updateAttribute("badge-size", badgeSize);
   }, [
     variant,
@@ -5222,6 +5109,62 @@ var WavelengthBadge = ({
 };
 WavelengthBadge.displayName = "WavelengthBadge";
 
+// src/components/PageComponents/WavelengthCommentDisplay.tsx
+
+
+var WavelengthCommentDisplay = ({
+  children,
+  customStyle,
+  author,
+  comment,
+  date,
+  width: width2,
+  height: height2,
+  txtColor,
+  bgColor,
+  border: border2,
+  iconSelectedColor,
+  selected,
+  ...rest
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    if (value) {
+      el.setAttribute(attribute, value);
+    } else {
+      el.removeAttribute(attribute);
+    }
+  };
+  const syncBooleanAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    if (value) {
+      el.setAttribute(attribute, "");
+    } else {
+      el.removeAttribute(attribute);
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    syncAttribute("author", author);
+    syncAttribute("comment", comment);
+    syncAttribute("date", date);
+    syncAttribute("width", width2);
+    syncAttribute("height", height2);
+    syncAttribute("txt-color", txtColor);
+    syncAttribute("bg-color", bgColor);
+    syncAttribute("border", border2);
+    syncAttribute("icon-selected-color", iconSelectedColor);
+    syncBooleanAttribute("selected", selected);
+  }, [customStyle, author, comment, date, width2, height2, txtColor, bgColor, border2, iconSelectedColor, selected]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-comment-display", { ref, ...rest, children });
+};
+WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -5283,7 +5226,7 @@ function useStableCallback(fn) {
   _react.useEffect.call(void 0, () => {
     fnRef.current = fn;
   }, [fn]);
-  return (...args) => _optionalChain([fnRef, 'access', _14 => _14.current, 'optionalCall', _15 => _15(...args)]);
+  return (...args) => _optionalChain([fnRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(...args)]);
 }
 function WavelengthFormInner(props, ref) {
   const {
@@ -5323,7 +5266,7 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     let finalSchema = schema;
     if (placeholders) {
-      const shape2 = _optionalChain([schema, 'optionalAccess', _16 => _16.shape]);
+      const shape2 = _optionalChain([schema, 'optionalAccess', _7 => _7.shape]);
       if (shape2) {
         const overrides = {};
         for (const [key, ph] of Object.entries(placeholders)) {
@@ -5356,15 +5299,15 @@ function WavelengthFormInner(props, ref) {
     if (!el) return;
     const handleChange = (e) => {
       const detail = e.detail;
-      _optionalChain([onChangeStable, 'optionalCall', _17 => _17(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _18 => _18.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _19 => _19.issues]), () => ( [])))]);
+      _optionalChain([onChangeStable, 'optionalCall', _8 => _8(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _9 => _9.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _10 => _10.issues]), () => ( [])))]);
     };
     const handleValid = (e) => {
       const detail = e.detail;
-      _optionalChain([onValidStable, 'optionalCall', _20 => _20(_optionalChain([detail, 'optionalAccess', _21 => _21.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _22 => _22.issues]), () => ( [])))]);
+      _optionalChain([onValidStable, 'optionalCall', _11 => _11(_optionalChain([detail, 'optionalAccess', _12 => _12.value]), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _13 => _13.issues]), () => ( [])))]);
     };
     const handleInvalid = (e) => {
       const detail = e.detail;
-      _optionalChain([onInvalidStable, 'optionalCall', _23 => _23(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _24 => _24.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _25 => _25.issues]), () => ( [])))]);
+      _optionalChain([onInvalidStable, 'optionalCall', _14 => _14(_nullishCoalesce(_optionalChain([detail, 'optionalAccess', _15 => _15.value]), () => ( {})), _nullishCoalesce(_optionalChain([detail, 'optionalAccess', _16 => _16.issues]), () => ( [])))]);
     };
     el.addEventListener("form-change", handleChange);
     el.addEventListener("form-valid", handleValid);
@@ -5386,8 +5329,8 @@ function WavelengthFormInner(props, ref) {
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.validate, 'optionalCall', _28 => _28()]), () => ( false)),
-      getValue: () => _optionalChain([hostRef, 'access', _29 => _29.current, 'optionalAccess', _30 => _30.value]),
+      validate: () => _nullishCoalesce(_optionalChain([hostRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.validate, 'optionalCall', _19 => _19()]), () => ( false)),
+      getValue: () => _optionalChain([hostRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.value]),
       setValue: (v) => {
         if (hostRef.current) hostRef.current.value = v;
       }
@@ -5583,8 +5526,8 @@ function WavelengthConfirmationModal(props) {
       "font-family": props.fontFamily,
       "text-color": props.textColor,
       "background-color": props.backgroundColor,
-      "title-text": _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]),
-      "dialog-text": _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]),
+      "title-text": _optionalChain([props, 'access', _22 => _22.textObj, 'optionalAccess', _23 => _23.title]),
+      "dialog-text": _optionalChain([props, 'access', _24 => _24.textObj, 'optionalAccess', _25 => _25.dialog]),
       children: [
         props.cancelButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
         props.submitButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
@@ -5605,11 +5548,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _26 => _26.textObj, 'optionalAccess', _27 => _27.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _28 => _28.textObj, 'optionalAccess', _29 => _29.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.purpose]) }) })
   ] });
 }
 WavelengthContentModal.displayName = "WavelengthContentModal";
@@ -5864,8 +5807,8 @@ var WavelengthDialog = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _41 => _41(e)]);
-    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _42 => _42(e)]);
+    const handleLeft = (e) => _optionalChain([onWlLeftBtnClick, 'optionalCall', _32 => _32(e)]);
+    const handleRight = (e) => _optionalChain([onWlRightBtnClick, 'optionalCall', _33 => _33(e)]);
     el.addEventListener("wl-left-btn-click", handleLeft);
     el.addEventListener("wl-right-btn-click", handleRight);
     return () => {
@@ -5963,8 +5906,8 @@ var WavelengthPagination = ({
     syncAttribute("active-text-color", activeTextColor || "");
     syncAttribute("background-color", backgroundColor2 || "");
     syncAttribute("disabled-color", disabledColor || "");
-    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _43 => _43.toString, 'call', _44 => _44()]) || "");
-    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _45 => _45.toString, 'call', _46 => _46()]) || "");
+    syncAttribute("total-pages", _optionalChain([totalPages, 'optionalAccess', _34 => _34.toString, 'call', _35 => _35()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _36 => _36.toString, 'call', _37 => _37()]) || "");
     const handlePageChange = (e) => {
       if (onPageChange) {
         onPageChange(e.detail.page);
@@ -6500,7 +6443,7 @@ WavelengthSlider.displayName = "WavelengthSlider";
 var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
 var _NavigateBefore = require('@mui/icons-material/NavigateBefore'); var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
 var _NavigateNext = require('@mui/icons-material/NavigateNext'); var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
-
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
 
 var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
 var _CardContent = require('@mui/material/CardContent'); var _CardContent2 = _interopRequireDefault(_CardContent);
@@ -6684,7 +6627,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     const internalRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => ({
       ...internalRef.current,
-      validate: () => _optionalChain([internalRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.validate, 'optionalCall', _49 => _49(true)])
+      validate: () => _optionalChain([internalRef, 'access', _38 => _38.current, 'optionalAccess', _39 => _39.validate, 'optionalCall', _40 => _40(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -6763,7 +6706,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _50 => _50.shadowRoot, 'optionalAccess', _51 => _51.querySelector, 'call', _52 => _52("input, textarea")]);
+        const input = _optionalChain([el, 'access', _41 => _41.shadowRoot, 'optionalAccess', _42 => _42.querySelector, 'call', _43 => _43("input, textarea")]);
         if (input) {
           onBlurCallback();
         }
@@ -6775,7 +6718,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _53 => _53.shadowRoot, 'optionalAccess', _54 => _54.querySelector, 'call', _55 => _55("input, textarea")]);
+        const input = _optionalChain([el, 'access', _44 => _44.shadowRoot, 'optionalAccess', _45 => _45.querySelector, 'call', _46 => _46("input, textarea")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -6978,7 +6921,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _56 => _56[0], 'optionalAccess', _57 => _57.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _47 => _47[0], 'optionalAccess', _48 => _48.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7132,7 +7075,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _58 => _58.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _59 => _59.map, 'call', _60 => _60((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _49 => _49.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _50 => _50.map, 'call', _51 => _51((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -7378,7 +7321,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.fileObjects, 'access', _63 => _63.sort, 'call', _64 => _64((c, d) => {
+        (item) => _optionalChain([item, 'access', _52 => _52.Details, 'optionalAccess', _53 => _53.fileObjects, 'access', _54 => _54.sort, 'call', _55 => _55((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7439,24 +7382,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => _optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.fileObjects, 'access', _69 => _69.map, 'call', _70 => _70((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _56 => _56.Details, 'optionalAccess', _57 => _57.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _58 => _58.Details, 'optionalAccess', _59 => _59.fileObjects, 'access', _60 => _60.map, 'call', _61 => _61((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "path",
         {
           d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
           fill: "#1C1B1F"
         }
-      ) }) }) }, `td-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.relationId])}-${fileItem.id}`),
       SubDataColumns.map((column) => {
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _64 => _64.Details, 'optionalAccess', _65 => _65.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _77 => _77.Details, 'optionalAccess', _78 => _78.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _79 => _79.Details, 'optionalAccess', _80 => _80.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _81 => _81.map, 'call', _82 => _82((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _72 => _72.map, 'call', _73 => _73((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7483,58 +7426,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', _74 => _74.find, 'call', _75 => _75((i) => String(i.id) === String(itemId))]);
+      if (_optionalChain([item, 'optionalAccess', _76 => _76.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 +7622,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', _77 => _77.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', _78 => _78.Details, 'optionalAccess', _79 => _79[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 +7634,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', _80 => _80.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', _81 => _81.map, 'call', _82 => _82((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) => {