@wavelengthusaf/components 3.0.2 → 3.1.0

package/dist/esm/index.js

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment14 = REACT_FRAGMENT_TYPE;
+        var Fragment17 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment14;
+        exports.Fragment = Fragment17;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -1227,26 +1227,26 @@ if (!customElements.get("sample-component")) {
 // src/web-components/wavelength-banner.ts
 var WavelengthBanner = class extends HTMLElement {
   static get observedAttributes() {
-    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
+    return ["banner-text", "banner-color", "text-color", "opacity", "z-index", "id", "classification", "control"];
   }
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     const style3 = document.createElement("style");
     style3.textContent = `
-        :host {
-          display: block;
-          width: 100%;
-        }
-  
-        .banner {
-          width: 100%;
-          text-align: center;
-          font-weight: normal;
-          font-family: sans-serif;
-          font-size: 1rem;
-        }
-      `;
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .banner {
+        width: 100%;
+        text-align: center;
+        font-weight: normal;
+        font-family: sans-serif;
+        font-size: 1rem;
+      }
+    `;
     this.container = document.createElement("div");
     this.container.classList.add("banner");
     this.textElement = document.createElement("p");
@@ -1261,18 +1261,76 @@ var WavelengthBanner = class extends HTMLElement {
     this.updateAttributes();
   }
   updateAttributes() {
-    const headerText = this.getAttribute("header-text") || "CLASSIFICATION//CONTROL";
-    const headerColor = this.getAttribute("header-color") || "#4373aa";
-    const textColor = this.getAttribute("text-color") || "#ffffff";
-    const opacity = this.getAttribute("opacity") || "1";
-    const zIndex = this.getAttribute("z-index") || "10";
-    const id = this.getAttribute("id");
-    this.container.style.backgroundColor = headerColor;
-    this.container.style.opacity = opacity;
-    this.container.style.zIndex = zIndex;
-    if (id) this.container.id = id;
-    this.textElement.textContent = headerText.toUpperCase();
-    this.textElement.style.color = textColor;
+    const classificationRaw = this.getAttribute("classification")?.toLowerCase() || "";
+    const controlRaw = this.getAttribute("control") || "";
+    const controlList = controlRaw.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    let bannerText = this.getAttribute("banner-text");
+    const bannerColor = this.getAttribute("banner-color");
+    const textColor = this.getAttribute("text-color");
+    const palette2 = {
+      primary: "#4373aa",
+      secondary: "#ffffff"
+    };
+    let effectiveClassification = classificationRaw;
+    let effectiveColor = palette2.primary;
+    let effectiveTextColor = palette2.secondary;
+    switch (classificationRaw) {
+      case "unclassified":
+      case "u":
+        if (controlRaw) {
+          effectiveColor = "#502b85";
+          effectiveTextColor = "white";
+        } else {
+          effectiveColor = "#007a33";
+          effectiveTextColor = "white";
+        }
+        break;
+      case "controlled":
+      case "controlled unclassified information":
+      case "cui":
+        effectiveColor = "#502b85";
+        effectiveTextColor = "white";
+        break;
+      case "confidential":
+      case "c":
+        effectiveColor = "#0033a0";
+        effectiveTextColor = "white";
+        break;
+      case "secret":
+      case "s":
+        effectiveColor = "#c8102e";
+        effectiveTextColor = "white";
+        break;
+      case "top secret":
+      case "ts":
+        if (controlList.includes("sci")) {
+          effectiveColor = "#fce83a";
+          effectiveTextColor = "black";
+        } else {
+          effectiveColor = "#ff8c00";
+          effectiveTextColor = "black";
+        }
+        break;
+      case "":
+        effectiveClassification = "CLASSIFICATION//CONTROL";
+        break;
+      default:
+        effectiveColor = palette2.primary;
+        effectiveTextColor = palette2.secondary;
+    }
+    if (!bannerText) {
+      if (controlList.length === 0) {
+        bannerText = effectiveClassification;
+      } else {
+        bannerText = `${effectiveClassification}//${controlList.join("/")}`;
+      }
+    }
+    this.container.style.backgroundColor = bannerColor || effectiveColor;
+    this.textElement.style.color = textColor || effectiveTextColor;
+    this.container.style.opacity = this.getAttribute("opacity") || "1";
+    this.container.style.zIndex = this.getAttribute("z-index") || "10";
+    if (this.getAttribute("id")) this.container.id = this.getAttribute("id");
+    this.textElement.textContent = bannerText.toUpperCase();
   }
 };
 if (!customElements.get("wavelength-banner")) {
@@ -5688,18 +5746,20 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 import { useEffect as useEffect4, useRef as useRef5 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+function WavelengthBanner2({ bannerText, bannerColor, textColor, opacity = 1, zIndex = 10, id, classification, control }) {
   const ref = useRef5(null);
   useEffect4(() => {
-    if (ref.current) {
-      ref.current.setAttribute("header-text", headerText);
-      ref.current.setAttribute("header-color", headerColor);
-      ref.current.setAttribute("text-color", textColor);
-      ref.current.setAttribute("opacity", String(opacity));
-      ref.current.setAttribute("z-index", String(zIndex));
-      if (id) ref.current.setAttribute("id", id);
-    }
-  }, [headerText, headerColor, textColor, opacity, zIndex, id]);
+    if (!ref.current) return;
+    const el = ref.current;
+    if (bannerText !== void 0) el.setAttribute("banner-text", bannerText);
+    if (bannerColor !== void 0) el.setAttribute("banner-color", bannerColor);
+    if (textColor !== void 0) el.setAttribute("text-color", textColor);
+    if (classification !== void 0) el.setAttribute("classification", classification);
+    if (control !== void 0) el.setAttribute("control", String(control));
+    if (opacity !== void 0) el.setAttribute("opacity", String(opacity));
+    if (zIndex !== void 0) el.setAttribute("z-index", String(zIndex));
+    if (id) el.setAttribute("id", id);
+  }, [bannerText, bannerColor, textColor, classification, control, opacity, zIndex, id]);
   return /* @__PURE__ */ jsx23("wavelength-banner", { ref });
 }
 
@@ -7282,16 +7342,471 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/DataTable/SubRowTable/ChildSubTable.tsx
+import { useMemo as useMemo3, useState as useState11, Fragment as Fragment14 } from "react";
+import styled12, { keyframes as keyframes2 } from "styled-components";
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+var downWardAnimation = keyframes2`
+ 0% { top: -122px;  }
+ 100% { top: 0px;  }
+`;
+var disSubTableAnim = keyframes2`
+0% { opacity: 0;  }
+ 25% { opacity: 0;  }
+ 50% { opacity: 0;  }
+ 60% { opacity: 0.2;  }
+ 75% { opacity: 0.8;  }
+ 100% { opacity: 1;  }
+`;
+var TableContainer = styled12.div`
+  background-color: white;
+  width: 1200px;
+  border-radius: 16px;
+`;
+var TableRow = styled12.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+`;
+var TablePrimaryRow = styled12.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+  margin-bottom: 25px;
+`;
+var BodyRowContainer = styled12.div`
+  border: 1px solid black;
+  background-color: white;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 10px;
+`;
+var TableHeaderCell = styled12.div`
+  padding-left: 12px;
+  padding-right: 25px;
+`;
+var TableBodyCell = styled12.div`
+  background-color: #fff;
+  color: black;
+  position: relative;
+  padding: 10px 5px 0px 20px;
+  text-wrap: balance;
+  font-size: ${(props) => props.$primaryBoldState ? "24px" : "16px"};
+  font-weight: ${(props) => props.$primaryBoldState ? "bold" : "normal"};
+`;
+var ButtonStylingRow = styled12.div`
+  display: flex;
+  flex-direction: row;
+`;
+var BottomArrowBar = styled12.div`
+  background-color: #e9e9e9;
+  text-align: center;
+`;
+var BottomUpArrowBar = styled12.div`
+  background-color: #e9e9e9;
+  text-align: center;
+  position: relative;
+  animation: ${downWardAnimation} 1.5s;
+`;
+var SubDataTable = styled12.table`
+  background-color: white;
+  color: black;
+  width: 100%;
+  border-collapse: collapse;
+  animation: ${disSubTableAnim} 1.5s;
+
+  line-height: 1.2;
+`;
+var SubDataTableHeaderRow = styled12.tr`
+  height: 50px;
+  background-color: #304359;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+
+  th {
+    white-space: nowrap;
+  }
+`;
+var SubDataTableBodyRow = styled12.tbody`
+  font-size: 14px;
+`;
+var SubDataTableBodyRowContainer = styled12.tr`
+  td {
+    padding: 10px 25px 10px 20px;
+  }
+
+  &:nth-child(even) {
+    background-color: #96e0e5;
+  }
+`;
+var SubDataTableCell = styled12.td`
+  text-align: center;
+`;
+var SubDataHeaderColumn = styled12.thead`
+  background-color: #304359;
+`;
+var SortButton = styled12.button`
+  font-size: 16px;
+  font-weight: bold;
+  color: ${(props) => props.$sortColor};
+  background-color: #11ffee00;
+  border: none;
+  white-space: nowrap;
+`;
+var DownloadMissionButton = styled12.button`
+  width: 217px;
+  height: 45px;
+  padding: 12px 32px 12px 32px;
+  background-color: #1a8083cc;
+  color: white;
+
+  margin-left: 22px;
+  margin-bottom: 15px;
+  margin-top: 10px;
+  white-space: nowrap;
+  border: none;
+  border-radius: 8px;
+  gap: 4px;
+
+  font-weight: 600;
+  font-size: 16px;
+
+  &:hover {
+    background-color: rgba(38, 186, 190, 1);
+    color: rgba(247, 247, 249, 1);
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: #67a8aa;
+    transition: background-color 0.2s ease;
+  }
+`;
+var AddButton = styled12.button`
+  width: 130px;
+  height: 45px;
+  border: 1px solid #1a8083;
+
+  padding: 12px 32px 12px 32px;
+  gap: 4px;
+  background-color: white;
+  color: #1a8083cc;
+
+  margin-left: 22px;
+  margin-bottom: 15px;
+  margin-top: 10px;
+  white-space: nowrap;
+  border-radius: 8px;
+
+  font-weight: 600;
+  font-size: 16px;
+
+  &:hover {
+    background-color: rgba(26, 128, 131, 0.1);
+    color: rgba(26, 128, 131, 1);
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: #bad7da;
+    transition: background-color 0.2s ease;
+  }
+`;
+var DownloadArrow = styled12.button`
+  background-color: transparent;
+  border: none;
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var ChildDataTable = ({ data, columns, downloadArrowOnClick }) => {
+  const HeadColumns = columns.filter((col) => col.subDataTableColumn === false);
+  const SubDataColumns = columns.filter((col) => col.subDataTableColumn === true);
+  const [openRow, setOpenRow] = useState11(null);
+  const [sortOrder, setSortOrder] = useState11("asc");
+  const [sortKey, setSortKey] = useState11("");
+  const [sortSubOrder, setSortSubOrder] = useState11("asc");
+  const [sortSubKey, setSortSubKey] = useState11("");
+  const toggleSortOrder = (key) => {
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    setSortKey(key);
+  };
+  const toggleSubSortOrder = (key) => {
+    setSortSubOrder(sortSubOrder === "asc" ? "desc" : "asc");
+    setSortSubKey(key);
+  };
+  const toggleDropdown = (id) => {
+    setOpenRow(openRow === id ? null : id);
+  };
+  const toggleUpward = () => {
+    setOpenRow(null);
+  };
+  function trimBeforePeriod2(text) {
+    const index = text.indexOf(".");
+    return index === -1 ? text : text.substring(index + 1);
+  }
+  const processedRowData = useMemo3(() => {
+    const result = [...data ?? []];
+    if (sortOrder) {
+      result.sort((a, b) => {
+        const valueA = a[sortKey];
+        const valueB = b[sortKey];
+        if (typeof valueA === "string" && typeof valueB === "string") {
+          if (sortOrder === "asc") {
+            return valueA.localeCompare(valueB);
+          } else {
+            return valueB.localeCompare(valueA);
+          }
+        } else if (typeof valueA === "number" && typeof valueB === "number") {
+          if (sortOrder === "asc") {
+            return valueA - valueB;
+          } else {
+            return valueB - valueA;
+          }
+        } else {
+          return 0;
+        }
+      });
+    }
+    if (sortSubOrder) {
+      result.map(
+        (item) => item.Details?.fileObjects.sort((c, d) => {
+          const valueC = c[sortSubKey];
+          const valueD = d[sortSubKey];
+          if (typeof valueC === "string" && typeof valueD === "string") {
+            if (sortSubOrder === "asc") {
+              return valueC.localeCompare(valueD);
+            } else {
+              return valueD.localeCompare(valueC);
+            }
+          } else if (typeof valueC === "number" && typeof valueD === "number") {
+            if (sortSubOrder === "asc") {
+              return valueC - valueD;
+            } else {
+              return valueD - valueC;
+            }
+          } else {
+            return 0;
+          }
+        })
+      );
+    }
+    return result;
+  }, [data, sortKey, sortOrder, sortSubKey, sortSubOrder]);
+  const renderSortButton = (column, sortOrder2, sortKey2) => {
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "black" }) })
+    ] }) }) : /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "black" }) })
+    ] }) }) : /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "black" }) })
+    ] }) });
+  };
+  const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
+    const columnKey = trimBeforePeriod2(column.key);
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+    ] }) : /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
+    ] }) : /* @__PURE__ */ jsxs32(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ jsx42("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+    ] });
+  };
+  const headers = HeadColumns.map((column) => {
+    return /* @__PURE__ */ jsx42(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx42("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = (itemId) => {
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx42(Fragment14, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs32(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx42("td", { children: /* @__PURE__ */ jsx42(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx42("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42(
+        "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-${item.Details?.relationId}-${fileItem.id}`),
+      SubDataColumns.map((column) => {
+        const columnKey = trimBeforePeriod2(column.key);
+        const value = fileItem[columnKey];
+        if (value !== void 0) {
+          return /* @__PURE__ */ jsx42(SubDataTableCell, { children: /* @__PURE__ */ jsx42("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+        }
+      })
+    ] }, `${item}-${item.Details?.relationId}-${fileItem.id}-${index}`)) }, `SDR-${item.id}-${item.Details?.relationId}`));
+  };
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs32(BodyRowContainer, { children: [
+    /* @__PURE__ */ jsx42(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx42(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsxs32(ButtonStylingRow, { children: [
+      /* @__PURE__ */ jsx42(DownloadMissionButton, { children: "Download Mission" }),
+      /* @__PURE__ */ jsx42(AddButton, { children: "Add files" })
+    ] }),
+    openRow !== item.id && /* @__PURE__ */ jsx42(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx42("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ jsxs32("div", { children: [
+      /* @__PURE__ */ jsxs32(SubDataTable, { children: [
+        /* @__PURE__ */ jsx42(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs32(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx42("th", {}),
+          SubDataHeaders
+        ] }) }),
+        /* @__PURE__ */ jsx42(SubDataTableBodyRow, { children: subDataRows(item.id) })
+      ] }),
+      /* @__PURE__ */ jsx42(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx42("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+    ] })
+  ] }, `Bodycontainer-${item.id}-${index}`));
+  return /* @__PURE__ */ jsxs32(TableContainer, { children: [
+    /* @__PURE__ */ jsx42(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx42("div", { title: "tablebodies", children: dataRows })
+  ] });
+};
+
+// src/components/DataTable/NestedDataTable/NestedDataTable.tsx
+import { useState as useState12 } from "react";
+import styled13 from "styled-components";
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+var TableStyle = styled13.table`
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  color: black;
+  text-align: center;
+
+  thead {
+    background-color: black;
+    color: white;
+  }
+
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+`;
+var MainThHeaders = styled13.th`
+  &:not(:last-child) {
+    border-right: 1px solid #c6c7cc;
+  }
+`;
+var SubDataTr = styled13.tr`
+  background-color: white;
+
+  &:nth-child(even) {
+    background-color: #e0ffff;
+  }
+`;
+var PrimaryTrRows = styled13.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+`;
+var SubTrRows = styled13.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+  height: 120px;
+`;
+var SubTableStyle = styled13.table`
+  width: 95%;
+  border-collapse: collapse;
+  margin-top: -15px;
+  margin-left: auto;
+  margin-right: auto;
+
+  td {
+    &:not(:last-child) {
+      border-right: 1px solid black;
+    }
+  }
+
+  th {
+    background-color: #065465;
+    &:not(:last-child) {
+      border-right: 1px solid #c6c7cc;
+    }
+  }
+`;
+var DropdownButton = styled13.button`
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  outline: none;
+  font-weight: bold; /* This makes the UTF symbols bold */
+  font-size: 20px;
+`;
+var PrimaryTdSpan = styled13.td`
+  &:not(:last-child) {
+    border-right: 1px solid black;
+  }
+`;
+function trimBeforePeriod(text) {
+  const index = text.indexOf(".");
+  return index === -1 ? text : text.substring(index + 1);
+}
+var NestedDataTable = ({ data, columns }) => {
+  const HeadColumns = columns.filter((col) => col.subDataTableColumn === false);
+  const SubDataColumns = columns.filter((col) => col.subDataTableColumn === true);
+  const [isOpen, setIsOpen] = useState12(false);
+  const [isAscending, setIsAscending] = useState12(false);
+  const [primaryRowIndex, setPrimaryRowIndex] = useState12(null);
+  const toggleDropdown = (rowIndex) => {
+    setIsOpen(!isOpen);
+    setIsAscending(!isAscending);
+    setPrimaryRowIndex(rowIndex);
+  };
+  const headers = HeadColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx43(MainThHeaders, { children: column.title }, `headCell-${index}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ jsx43("th", { children: column.title }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx43(Fragment16, { children: /* @__PURE__ */ jsx43(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+    const columnKey = trimBeforePeriod(column.key);
+    const value = item.Details?.[columnKey];
+    console.log("value: ", value);
+    if (value !== void 0) {
+      return /* @__PURE__ */ jsx43("td", { children: /* @__PURE__ */ jsx43("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+    }
+  }) }, `Sub-${item.id}-${index}`) }));
+  const childRows = /* @__PURE__ */ jsxs33(SubTableStyle, { children: [
+    /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx43("tbody", { children: subDataRows })
+  ] });
+  const rows = !data?.length ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs33(Fragment16, { children: [
+    /* @__PURE__ */ jsxs33(PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ jsx43(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx43(Fragment16, { children: "\u2227" }) : /* @__PURE__ */ jsx43(Fragment16, { children: "\u2228" }) }),
+      HeadColumns.map((column, index2) => {
+        return /* @__PURE__ */ jsx43(PrimaryTdSpan, { children: /* @__PURE__ */ jsx43("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+      })
+    ] }, index),
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx43(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx43("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+  ] }));
+  return /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsxs33(TableStyle, { children: [
+    /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsxs33("tr", { children: [
+      /* @__PURE__ */ jsx43("th", { title: "dropdownth" }),
+      headers
+    ] }) }),
+    /* @__PURE__ */ jsx43("tbody", { children: rows })
+  ] }) });
+};
+
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef8, useEffect as useEffect9 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { useRef as useRef9, useEffect as useEffect9 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var SampleComponent2 = ({
   testProp,
   children,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   useEffect9(() => {
     const el = ref.current;
     if (!el) return;
@@ -7299,13 +7814,15 @@ var SampleComponent2 = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx42("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx44("sample-component", { ref, ...rest, children });
 };
 export {
   ButtonIcon,
   ButtonMenu,
+  ChildDataTable,
   DefaultCarousel,
   DefaultPagination,
+  NestedDataTable,
   SampleComponent2 as SampleComponent,
   SliderCardCarousel,
   WavelengthAccessAlert,