@wavelengthusaf/components 3.0.3 → 3.2.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 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,32 +7342,678 @@ 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, downloadMissionOnClick, addFilesOnClick }) => {
+  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, { onClick: downloadMissionOnClick, children: "Download Mission" }),
+      /* @__PURE__ */ jsx42(AddButton, { onClick: addFilesOnClick, 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/AutoComplete/WlAutoComplete.tsx
+import { useEffect as useEffect9, useRef as useRef9, useState as useState13 } from "react";
+import styled14 from "styled-components";
+import { Fragment as Fragment17, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var AutoContainer = styled14.div`
+  border-top: 10px solid ${(props) => props.$primary !== void 0 ? props.$primary : "#FFFFFF"};
+  border-radius: 6px;
+`;
+var InputWrapper2 = styled14.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 = styled14.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 = styled14.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 = styled14.ul`
+  background-color: white;
+  border: 1px solid #ccc;
+  margin-top: 0px;
+  color: black;
+  list-style: none;
+  padding: 0;
+  border-radius: 8px;
+`;
+var ActiveListItem = styled14.li`
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &:active {
+    background-color: #d8d8d8;
+  }
+`;
+var NoHoverListItem = styled14.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 = useRef9(null);
+  const listRef = useRef9(null);
+  const noItemListRef = useRef9(null);
+  const [inputValue, setInputValue] = useState13("");
+  const [suggestions, setSuggestions] = useState13([]);
+  const [isDropdownVisible, setIsDropdownVisible] = useState13(false);
+  useEffect9(() => {
+    const handleClickOutside = (event) => {
+      const node = event.target;
+      if (inputRef.current && !inputRef.current?.contains(node) && !listRef.current?.contains(node) && !noItemListRef.current?.contains(node)) {
+        inputRef.current.blur();
+        setInputValue("");
+      }
+      if (noItemListRef.current && noItemListRef.current?.contains(node)) {
+        inputRef.current?.focus();
+      }
+    };
+    const handleClickOutsideList = (event) => {
+      if (listRef.current && !listRef.current.contains(event.target)) {
+        setIsDropdownVisible(false);
+      }
+    };
+    const handleClickonListElement = (event) => {
+      const node = event.target;
+      if (listRef.current?.contains(node)) {
+        inputRef.current?.focus();
+      }
+    };
+    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);
+    };
+  }, []);
+  useEffect9(() => {
+    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__ */ jsx44(Fragment17, { children: /* @__PURE__ */ jsxs34(AutoContainer, { $primary: autoBackGroundColor, children: [
+    /* @__PURE__ */ jsxs34(InputWrapper2, { $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: [
+      /* @__PURE__ */ jsx44(
+        Input,
+        {
+          type: "text",
+          $primary: autoBackGroundColor,
+          $inputBorderStyling: inputBorderStyle,
+          $focusBorderColor: inputFocusBorderColor,
+          value: inputValue,
+          ref: inputRef,
+          onClick: handleInputClick,
+          onInput: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder: ""
+        }
+      ),
+      /* @__PURE__ */ jsx44(Label, { $primary: labelColor, children: variant })
+    ] }),
+    isDropdownVisible && /* @__PURE__ */ jsx44(DropDownList, { ref: listRef, children: suggestions.length > 0 ? suggestions.map((item, index) => /* @__PURE__ */ jsx44(ActiveListItem, { onMouseDown: (e) => e.preventDefault(), onClick: () => handleListClick(item), children: item }, index)) : /* @__PURE__ */ jsx44(NoHoverListItem, { ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+  ] }) });
+};
+
 // 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 useRef10, useEffect as useEffect10 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var SampleComponent2 = ({
   testProp,
   children,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef8(null);
-  useEffect9(() => {
+  const ref = useRef10(null);
+  useEffect10(() => {
     const el = ref.current;
     if (!el) return;
     if (testProp !== void 0) {
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx42("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx45("sample-component", { ref, ...rest, children });
 };
 export {
   ButtonIcon,
   ButtonMenu,
+  ChildDataTable,
   DefaultCarousel,
   DefaultPagination,
+  NestedDataTable,
   SampleComponent2 as SampleComponent,
   SliderCardCarousel,
+  WLAutoComplete,
   WavelengthAccessAlert,
   WavelengthAlert,
   WavelengthAppLogo,