@wavelengthusaf/components 3.3.9 → 3.3.11

package/README.md

@@ -14,6 +14,15 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.3.11
+- 8/26/2025
+- Updated `WavelengthTitleBar` to control shadow color with prop `shadowColor`.
+
+### 3.3.10
+
+- 8/20/2025
+- Fix a margin issue with `WavelengthBanner`.
+
 ### 3.3.9
 
 - 8/18/2025

package/dist/cjs/index.cjs

@@ -1246,6 +1246,10 @@ var WavelengthBanner = class extends HTMLElement {
         font-family: sans-serif;
         font-size: 1rem;
       }
+
+      p {
+        margin: 0;
+      }
     `;
     this.container = document.createElement("div");
     this.container.classList.add("banner");
@@ -2300,6 +2304,7 @@ var WavelengthTitleBar = class extends HTMLElement {
     subtitle.classList.add("subtitle");
     subtitle.textContent = this.getAttribute("subtitle-text") || "Default Subtitle";
     const textColor = this.getAttribute("text-color") || "#34649b";
+    const shadowColor = this.getAttribute("shadow-color");
     const style3 = document.createElement("style");
     style3.textContent = `
   :host {
@@ -2312,7 +2317,7 @@ var WavelengthTitleBar = class extends HTMLElement {
   .title {
     font-family: "Goldman", sans-serif;
     font-size: 3.75rem;
-    text-shadow: 0.313rem 0.313rem 0.375rem #FFFFFF;
+    ${shadowColor ? `text-shadow: 0.313rem 0.313rem 0.375rem ${shadowColor};` : ""}
     -webkit-text-stroke: 1px black;
     letter-spacing: 0.07em;
     user-select: none;
@@ -2342,35 +2347,32 @@ var WavelengthTitleBar = class extends HTMLElement {
     }
   }
   static get observedAttributes() {
-    return ["title-text", "subtitle-text", "text-color", "has-shadow"];
+    return ["title-text", "subtitle-text", "text-color", "shadow-color"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      if (name === "title-text") {
-        const titleElement = _optionalChain([this, 'access', _10 => _10.shadowRoot, 'optionalAccess', _11 => _11.querySelector, 'call', _12 => _12(".title")]);
-        if (titleElement) {
-          titleElement.textContent = newValue;
-        }
-      } else if (name === "subtitle-text") {
-        const subtitleElement = _optionalChain([this, 'access', _13 => _13.shadowRoot, 'optionalAccess', _14 => _14.querySelector, 'call', _15 => _15(".subtitle")]);
-        if (subtitleElement) {
-          subtitleElement.textContent = newValue;
-        }
-      } else if (name === "text-color") {
-        const titleElement = _optionalChain([this, 'access', _16 => _16.shadowRoot, 'optionalAccess', _17 => _17.querySelector, 'call', _18 => _18(".title")]);
-        const subtitleElement = _optionalChain([this, 'access', _19 => _19.shadowRoot, 'optionalAccess', _20 => _20.querySelector, 'call', _21 => _21(".subtitle")]);
-        if (titleElement) {
-          titleElement.style.color = newValue;
-        }
-        if (subtitleElement) {
-          subtitleElement.style.color = newValue;
-        }
-      } else if (name === "has-shadow") {
-        const titleElement = _optionalChain([this, 'access', _22 => _22.shadowRoot, 'optionalAccess', _23 => _23.querySelector, 'call', _24 => _24(".title")]);
+    if (oldValue === newValue) return;
+    const titleElement = _optionalChain([this, 'access', _10 => _10.shadowRoot, 'optionalAccess', _11 => _11.querySelector, 'call', _12 => _12(".title")]);
+    const subtitleElement = _optionalChain([this, 'access', _13 => _13.shadowRoot, 'optionalAccess', _14 => _14.querySelector, 'call', _15 => _15(".subtitle")]);
+    switch (name) {
+      case "title-text":
+        if (titleElement) titleElement.textContent = newValue;
+        break;
+      case "subtitle-text":
+        if (subtitleElement) subtitleElement.textContent = newValue;
+        break;
+      case "text-color":
+        if (titleElement) titleElement.style.color = newValue;
+        if (subtitleElement) subtitleElement.style.color = newValue;
+        break;
+      case "shadow-color":
         if (titleElement) {
-          titleElement.style.textShadow = newValue !== "false" ? "none" : "0.313rem 0.313rem 0.375rem #FFFFFF";
+          if (newValue) {
+            titleElement.style.textShadow = `0.313rem 0.313rem 0.375rem ${newValue}`;
+          } else {
+            titleElement.style.textShadow = "";
+          }
         }
-      }
+        break;
     }
   }
 };
@@ -5705,7 +5707,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
           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', _25 => _25.subsections, 'optionalAccess', _26 => _26.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: [
+        _optionalChain([section, 'access', _16 => _16.subsections, 'optionalAccess', _17 => _17.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,
             {
@@ -5716,7 +5718,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
                 paddingLeft: 0.75,
                 color: labelColor ? labelColor : palette2.secondary
               },
-              children: _optionalChain([subsection, 'access', _27 => _27.title, 'optionalAccess', _28 => _28.toUpperCase, 'call', _29 => _29()])
+              children: _optionalChain([subsection, 'access', _18 => _18.title, 'optionalAccess', _19 => _19.toUpperCase, 'call', _20 => _20()])
             }
           ),
           subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5946,7 +5948,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _30 => _30.onClick, 'optionalCall', _31 => _31(e)]);
+                _optionalChain([props, 'access', _21 => _21.onClick, 'optionalCall', _22 => _22(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
@@ -5957,7 +5959,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _32 => _32.onClick, 'optionalCall', _33 => _33(e)]);
+                _optionalChain([props, 'access', _23 => _23.onClick, 'optionalCall', _24 => _24(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
@@ -6334,16 +6336,16 @@ function WavelengthFooter({ text, textColor }) {
 // src/components/headers/WavelengthTitleBar/WavelengthTitleBar.tsx
 
 
-function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow }) {
+function WavelengthTitleBar2({ titleText, subtitleText, textColor, shadowColor }) {
   const ref = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     if (ref.current) {
       ref.current.setAttribute("title-text", titleText || "Default Title");
       ref.current.setAttribute("subtitle-text", subtitleText || "Default Subtitle");
       ref.current.setAttribute("text-color", textColor || "#34649b");
-      ref.current.setAttribute("has-shadow", textShadow ? "false" : "true");
+      ref.current.setAttribute("shadow-color", shadowColor || "");
     }
-  }, [titleText, subtitleText, textColor, textShadow]);
+  }, [titleText, subtitleText, textColor, shadowColor]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-title-bar", { ref });
 }
 
@@ -6500,8 +6502,8 @@ function WavelengthConfirmationModal(props) {
         overflow: "scroll"
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _34 => _34.textObj, 'optionalAccess', _35 => _35.title]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _36 => _36.textObj, 'optionalAccess', _37 => _37.dialog]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _25 => _25.textObj, 'optionalAccess', _26 => _26.title]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _27 => _27.textObj, 'optionalAccess', _28 => _28.dialog]) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
@@ -6522,11 +6524,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", 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', _38 => _38.textObj, 'optionalAccess', _39 => _39.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _29 => _29.textObj, 'optionalAccess', _30 => _30.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', _40 => _40.textObj, 'optionalAccess', _41 => _41.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', _42 => _42.textObj, 'optionalAccess', _43 => _43.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.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', _33 => _33.textObj, 'optionalAccess', _34 => _34.purpose]) }) })
   ] });
 }
 
@@ -6740,7 +6742,7 @@ function WavelengthDropdown({
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _44 => _44.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _35 => _35.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -7490,7 +7492,7 @@ var WavelengthInput2 = _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', _45 => _45.current, 'optionalAccess', _46 => _46.validate, 'optionalCall', _47 => _47(true)])
+      validate: () => _optionalChain([internalRef, 'access', _36 => _36.current, 'optionalAccess', _37 => _37.validate, 'optionalCall', _38 => _38(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -7566,7 +7568,7 @@ var WavelengthInput2 = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _48 => _48.shadowRoot, 'optionalAccess', _49 => _49.querySelector, 'call', _50 => _50("input")]);
+        const input = _optionalChain([el, 'access', _39 => _39.shadowRoot, 'optionalAccess', _40 => _40.querySelector, 'call', _41 => _41("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7766,7 +7768,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   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', _51 => _51[0], 'optionalAccess', _52 => _52.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.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);
@@ -7920,7 +7922,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _53 => _53.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', _54 => _54.map, 'call', _55 => _55((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.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', _45 => _45.map, 'call', _46 => _46((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,
       {
@@ -8165,7 +8167,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _56 => _56.Details, 'optionalAccess', _57 => _57.fileObjects, 'access', _58 => _58.sort, 'call', _59 => _59((c, d) => {
+        (item) => _optionalChain([item, 'access', _47 => _47.Details, 'optionalAccess', _48 => _48.fileObjects, 'access', _49 => _49.sort, 'call', _50 => _50((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -8226,24 +8228,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', _60 => _60.Details, 'optionalAccess', _61 => _61.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _62 => _62.Details, 'optionalAccess', _63 => _63.fileObjects, 'access', _64 => _64.map, 'call', _65 => _65((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _51 => _51.Details, 'optionalAccess', _52 => _52.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.map, 'call', _56 => _56((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', _66 => _66.Details, 'optionalAccess', _67 => _67.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.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', _68 => _68.Details, 'optionalAccess', _69 => _69.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71.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', _59 => _59.Details, 'optionalAccess', _60 => _60.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _72 => _72.Details, 'optionalAccess', _73 => _73.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _74 => _74.Details, 'optionalAccess', _75 => _75.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _76 => _76.map, 'call', _77 => _77((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _67 => _67.map, 'call', _68 => _68((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" }),
@@ -8362,9 +8364,9 @@ var NestedDataTable = ({ data, columns }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _78 => _78.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', _69 => _69.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', _79 => _79.Details, 'optionalAccess', _80 => _80[columnKey]]);
+    const value = _optionalChain([item, 'access', _70 => _70.Details, 'optionalAccess', _71 => _71[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}`);
@@ -8374,7 +8376,7 @@ var NestedDataTable = ({ data, columns }) => {
     /* @__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', _81 => _81.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', _82 => _82.map, 'call', _83 => _83((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _72 => _72.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', _73 => _73.map, 'call', _74 => _74((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) => {