@wavelengthusaf/components 3.0.3 → 3.2.0

package/dist/cjs/index.cjs

@@ -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 Fragment18 = 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 = Fragment18;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -7342,6 +7342,649 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/DataTable/SubRowTable/ChildSubTable.tsx
+
+
+
+var downWardAnimation = _styledcomponents.keyframes`
+ 0% { top: -122px;  }
+ 100% { top: 0px;  }
+`;
+var disSubTableAnim = _styledcomponents.keyframes`
+0% { opacity: 0;  }
+ 25% { opacity: 0;  }
+ 50% { opacity: 0;  }
+ 60% { opacity: 0.2;  }
+ 75% { opacity: 0.8;  }
+ 100% { opacity: 1;  }
+`;
+var TableContainer = _styledcomponents2.default.div`
+  background-color: white;
+  width: 1200px;
+  border-radius: 16px;
+`;
+var TableRow = _styledcomponents2.default.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+`;
+var TablePrimaryRow = _styledcomponents2.default.div`
+  display: grid;
+  grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
+  margin-bottom: 25px;
+`;
+var BodyRowContainer = _styledcomponents2.default.div`
+  border: 1px solid black;
+  background-color: white;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 10px;
+`;
+var TableHeaderCell = _styledcomponents2.default.div`
+  padding-left: 12px;
+  padding-right: 25px;
+`;
+var TableBodyCell = _styledcomponents2.default.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 = _styledcomponents2.default.div`
+  display: flex;
+  flex-direction: row;
+`;
+var BottomArrowBar = _styledcomponents2.default.div`
+  background-color: #e9e9e9;
+  text-align: center;
+`;
+var BottomUpArrowBar = _styledcomponents2.default.div`
+  background-color: #e9e9e9;
+  text-align: center;
+  position: relative;
+  animation: ${downWardAnimation} 1.5s;
+`;
+var SubDataTable = _styledcomponents2.default.table`
+  background-color: white;
+  color: black;
+  width: 100%;
+  border-collapse: collapse;
+  animation: ${disSubTableAnim} 1.5s;
+
+  line-height: 1.2;
+`;
+var SubDataTableHeaderRow = _styledcomponents2.default.tr`
+  height: 50px;
+  background-color: #304359;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+
+  th {
+    white-space: nowrap;
+  }
+`;
+var SubDataTableBodyRow = _styledcomponents2.default.tbody`
+  font-size: 14px;
+`;
+var SubDataTableBodyRowContainer = _styledcomponents2.default.tr`
+  td {
+    padding: 10px 25px 10px 20px;
+  }
+
+  &:nth-child(even) {
+    background-color: #96e0e5;
+  }
+`;
+var SubDataTableCell = _styledcomponents2.default.td`
+  text-align: center;
+`;
+var SubDataHeaderColumn = _styledcomponents2.default.thead`
+  background-color: #304359;
+`;
+var SortButton = _styledcomponents2.default.button`
+  font-size: 16px;
+  font-weight: bold;
+  color: ${(props) => props.$sortColor};
+  background-color: #11ffee00;
+  border: none;
+  white-space: nowrap;
+`;
+var DownloadMissionButton = _styledcomponents2.default.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 = _styledcomponents2.default.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 = _styledcomponents2.default.button`
+  background-color: transparent;
+  border: none;
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnClick, addFilesOnClick }) => {
+  const HeadColumns = columns.filter((col) => col.subDataTableColumn === false);
+  const SubDataColumns = columns.filter((col) => col.subDataTableColumn === true);
+  const [openRow, setOpenRow] = _react.useState.call(void 0, null);
+  const [sortOrder, setSortOrder] = _react.useState.call(void 0, "asc");
+  const [sortKey, setSortKey] = _react.useState.call(void 0, "");
+  const [sortSubOrder, setSortSubOrder] = _react.useState.call(void 0, "asc");
+  const [sortSubKey, setSortSubKey] = _react.useState.call(void 0, "");
+  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 = _react.useMemo.call(void 0, () => {
+    const result = [..._nullishCoalesce(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) => _optionalChain([item, 'access', _51 => _51.Details, 'optionalAccess', _52 => _52.fileObjects, 'access', _53 => _53.sort, 'call', _54 => _54((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__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      column.title,
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    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', _55 => _55.Details, 'optionalAccess', _56 => _56.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.map, 'call', _60 => _60((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', _61 => _61.Details, 'optionalAccess', _62 => _62.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', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}-${fileItem.id}-${index}-${column.title}`);
+        }
+      })
+    ] }, `${item}-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}`));
+  };
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _71 => _71.map, 'call', _72 => _72((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" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddButton, { onClick: addFilesOnClick, children: "Add files" })
+    ] }),
+    openRow !== item.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTable, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataHeaderColumn, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", {}),
+          SubDataHeaders
+        ] }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableBodyRow, { children: subDataRows(item.id) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+    ] })
+  ] }, `Bodycontainer-${item.id}-${index}`))]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableContainer, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { title: "tablebodies", children: dataRows })
+  ] });
+};
+
+// src/components/DataTable/NestedDataTable/NestedDataTable.tsx
+
+
+
+var TableStyle = _styledcomponents2.default.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 = _styledcomponents2.default.th`
+  &:not(:last-child) {
+    border-right: 1px solid #c6c7cc;
+  }
+`;
+var SubDataTr = _styledcomponents2.default.tr`
+  background-color: white;
+
+  &:nth-child(even) {
+    background-color: #e0ffff;
+  }
+`;
+var PrimaryTrRows = _styledcomponents2.default.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+`;
+var SubTrRows = _styledcomponents2.default.tr`
+  background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
+  height: 120px;
+`;
+var SubTableStyle = _styledcomponents2.default.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 = _styledcomponents2.default.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 = _styledcomponents2.default.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] = _react.useState.call(void 0, false);
+  const [isAscending, setIsAscending] = _react.useState.call(void 0, false);
+  const [primaryRowIndex, setPrimaryRowIndex] = _react.useState.call(void 0, null);
+  const toggleDropdown = (rowIndex) => {
+    setIsOpen(!isOpen);
+    setIsAscending(!isAscending);
+    setPrimaryRowIndex(rowIndex);
+  };
+  const headers = HeadColumns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MainThHeaders, { children: column.title }, `headCell-${index}`);
+  });
+  const SubDataHeaders = SubDataColumns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
+  });
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _73 => _73.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', _74 => _74.Details, 'optionalAccess', _75 => _75[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}`);
+    }
+  }) }, `Sub-${item.id}-${index}`) }));
+  const childRows = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubTableStyle, { children: [
+    /* @__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', _76 => _76.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', _77 => _77.map, 'call', _78 => _78((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) => {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PrimaryTdSpan, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+      })
+    ] }, index),
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubTrRows, { $index: index, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+  ] }))]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableStyle, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { title: "dropdownth" }),
+      headers
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows })
+  ] }) });
+};
+
+// src/components/AutoComplete/WlAutoComplete.tsx
+
+
+
+var AutoContainer = _styledcomponents2.default.div`
+  border-top: 10px solid ${(props) => props.$primary !== void 0 ? props.$primary : "#FFFFFF"};
+  border-radius: 6px;
+`;
+var InputWrapper2 = _styledcomponents2.default.div`
+  position: relative;
+  width: ${(props) => props.$inputwidth || "320px"};
+  height: ${(props) => props.$inputheight || "51px"};
+  background: linear-gradient(
+    to bottom,
+    ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"},
+    ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"} 50%,
+    transparent 50%,
+    transparent 100%
+  );
+`;
+var Label = _styledcomponents2.default.label`
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  color: ${(props) => props.$primary || "#ccc"};
+  font-size: 16px;
+  pointer-events: none;
+  transition: 0.3s ease all;
+  z-index: 2;
+  padding: 0 5px;
+`;
+var Input = _styledcomponents2.default.input`
+  width: inherit;
+  height: inherit;
+  padding: 0.5rem 0.75rem;
+  border: ${(props) => props.$inputBorderStyling || "2px solid #ccc"};
+  border-radius: 4px;
+  box-sizing: border-box;
+  z-index: 1;
+  background-color: ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"};
+
+  &:focus {
+    border-color: ${(props) => props.$focusBorderColor || "#4a90e2"};
+    outline: none;
+    background-color: ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"};
+  }
+
+  &:focus + ${Label} {
+    top: 0;
+    left: 10px;
+    padding: 0 2px;
+    color: #4a90e2;
+    background-color: ${(props) => props.$primary || "#FFFFFF"};
+  }
+`;
+var DropDownList = _styledcomponents2.default.ul`
+  background-color: white;
+  border: 1px solid #ccc;
+  margin-top: 0px;
+  color: black;
+  list-style: none;
+  padding: 0;
+  border-radius: 8px;
+`;
+var ActiveListItem = _styledcomponents2.default.li`
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &:active {
+    background-color: #d8d8d8;
+  }
+`;
+var NoHoverListItem = _styledcomponents2.default.li`
+  padding: 10px;
+  cursor: pointer;
+  background-color: white;
+  color: #d8d8d8;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: white;
+  }
+
+  &:active {
+    background-color: white;
+  }
+`;
+var WLAutoComplete = ({ variant, data, height: height2, width: width2, inputBorderStyle, inputFocusBorderColor, onDataChange, autoBackGroundColor, labelColor }) => {
+  const inputRef = _react.useRef.call(void 0, null);
+  const listRef = _react.useRef.call(void 0, null);
+  const noItemListRef = _react.useRef.call(void 0, null);
+  const [inputValue, setInputValue] = _react.useState.call(void 0, "");
+  const [suggestions, setSuggestions] = _react.useState.call(void 0, []);
+  const [isDropdownVisible, setIsDropdownVisible] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      const node = event.target;
+      if (inputRef.current && !_optionalChain([inputRef, 'access', _79 => _79.current, 'optionalAccess', _80 => _80.contains, 'call', _81 => _81(node)]) && !_optionalChain([listRef, 'access', _82 => _82.current, 'optionalAccess', _83 => _83.contains, 'call', _84 => _84(node)]) && !_optionalChain([noItemListRef, 'access', _85 => _85.current, 'optionalAccess', _86 => _86.contains, 'call', _87 => _87(node)])) {
+        inputRef.current.blur();
+        setInputValue("");
+      }
+      if (noItemListRef.current && _optionalChain([noItemListRef, 'access', _88 => _88.current, 'optionalAccess', _89 => _89.contains, 'call', _90 => _90(node)])) {
+        _optionalChain([inputRef, 'access', _91 => _91.current, 'optionalAccess', _92 => _92.focus, 'call', _93 => _93()]);
+      }
+    };
+    const handleClickOutsideList = (event) => {
+      if (listRef.current && !listRef.current.contains(event.target)) {
+        setIsDropdownVisible(false);
+      }
+    };
+    const handleClickonListElement = (event) => {
+      const node = event.target;
+      if (_optionalChain([listRef, 'access', _94 => _94.current, 'optionalAccess', _95 => _95.contains, 'call', _96 => _96(node)])) {
+        _optionalChain([inputRef, 'access', _97 => _97.current, 'optionalAccess', _98 => _98.focus, 'call', _99 => _99()]);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutsideList);
+    document.addEventListener("mousedown", handleClickonListElement);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutsideList);
+      document.removeEventListener("mousedown", handleClickonListElement);
+    };
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (inputRef.current && inputValue) {
+      inputRef.current.focus();
+    }
+  }, [inputValue]);
+  const handleChange = (event) => {
+    const value = event.target.value;
+    setInputValue(value);
+    if (value.length > 0) {
+      const filtered = data.filter((option) => option.toLowerCase().includes(value.toLowerCase()));
+      if (filtered.length > 0) {
+        setSuggestions(filtered);
+        setIsDropdownVisible(true);
+      } else {
+        setSuggestions([]);
+        setIsDropdownVisible(true);
+      }
+    } else {
+      setIsDropdownVisible(false);
+    }
+  };
+  const handleInputClick = () => {
+    setSuggestions(data);
+    setIsDropdownVisible(true);
+  };
+  const handleListClick = (suggestValue) => {
+    setInputValue(suggestValue);
+    setIsDropdownVisible(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      onDataChange(inputValue);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { $primary: autoBackGroundColor, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper2, { $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Input,
+        {
+          type: "text",
+          $primary: autoBackGroundColor,
+          $inputBorderStyling: inputBorderStyle,
+          $focusBorderColor: inputFocusBorderColor,
+          value: inputValue,
+          ref: inputRef,
+          onClick: handleInputClick,
+          onInput: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder: ""
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { $primary: labelColor, children: variant })
+    ] }),
+    isDropdownVisible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropDownList, { ref: listRef, children: suggestions.length > 0 ? suggestions.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActiveListItem, { onMouseDown: (e) => e.preventDefault(), onClick: () => handleListClick(item), children: item }, index)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NoHoverListItem, { ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+  ] }) });
+};
+
 // src/components/samples/SampleComponent.tsx
 
 
@@ -7413,7 +8056,10 @@ var SampleComponent2 = ({
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WLAutoComplete = WLAutoComplete; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: