@wavelengthusaf/components 2.7.3 → 2.8.1

package/README.md

@@ -14,6 +14,10 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.8.1
+- 4/18/2024
+- Created test for the Wavelength Comment Display
+
 ### 2.7.3
 
 - 4/8/2025

package/dist/cjs/index.cjs

@@ -4743,9 +4743,9 @@ function WavelengthCommentDisplay(props) {
           !selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _material.IconButton,
             {
-              onClick: () => {
+              onClick: (e) => {
                 setSelected(!selected);
-                props.onClick;
+                _optionalChain([props, 'access', _7 => _7.onClick, 'optionalCall', _8 => _8(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
@@ -4754,9 +4754,9 @@ function WavelengthCommentDisplay(props) {
           selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _material.IconButton,
             {
-              onClick: () => {
+              onClick: (e) => {
                 setSelected(!selected);
-                props.onClick;
+                _optionalChain([props, 'access', _9 => _9.onClick, 'optionalCall', _10 => _10(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
@@ -4943,18 +4943,18 @@ var WavelengthTitleBar = class extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
       if (name === "title-text") {
-        const titleElement = _optionalChain([this, 'access', _7 => _7.shadowRoot, 'optionalAccess', _8 => _8.querySelector, 'call', _9 => _9(".title")]);
+        const titleElement = _optionalChain([this, 'access', _11 => _11.shadowRoot, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(".title")]);
         if (titleElement) {
           titleElement.textContent = newValue;
         }
       } else if (name === "subtitle-text") {
-        const subtitleElement = _optionalChain([this, 'access', _10 => _10.shadowRoot, 'optionalAccess', _11 => _11.querySelector, 'call', _12 => _12(".subtitle")]);
+        const subtitleElement = _optionalChain([this, 'access', _14 => _14.shadowRoot, 'optionalAccess', _15 => _15.querySelector, 'call', _16 => _16(".subtitle")]);
         if (subtitleElement) {
           subtitleElement.textContent = newValue;
         }
       } else if (name === "text-color") {
-        const titleElement = _optionalChain([this, 'access', _13 => _13.shadowRoot, 'optionalAccess', _14 => _14.querySelector, 'call', _15 => _15(".title")]);
-        const subtitleElement = _optionalChain([this, 'access', _16 => _16.shadowRoot, 'optionalAccess', _17 => _17.querySelector, 'call', _18 => _18(".subtitle")]);
+        const titleElement = _optionalChain([this, 'access', _17 => _17.shadowRoot, 'optionalAccess', _18 => _18.querySelector, 'call', _19 => _19(".title")]);
+        const subtitleElement = _optionalChain([this, 'access', _20 => _20.shadowRoot, 'optionalAccess', _21 => _21.querySelector, 'call', _22 => _22(".subtitle")]);
         if (titleElement) {
           titleElement.style.color = newValue;
         }
@@ -4962,7 +4962,7 @@ var WavelengthTitleBar = class extends HTMLElement {
           subtitleElement.style.color = newValue;
         }
       } else if (name === "has-shadow") {
-        const titleElement = _optionalChain([this, 'access', _19 => _19.shadowRoot, 'optionalAccess', _20 => _20.querySelector, 'call', _21 => _21(".title")]);
+        const titleElement = _optionalChain([this, 'access', _23 => _23.shadowRoot, 'optionalAccess', _24 => _24.querySelector, 'call', _25 => _25(".title")]);
         if (titleElement) {
           titleElement.style.textShadow = newValue !== "false" ? "none" : "0.313rem 0.313rem 0.375rem #FFFFFF";
         }
@@ -5193,8 +5193,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', _22 => _22.textObj, 'optionalAccess', _23 => _23.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', _24 => _24.textObj, 'optionalAccess', _25 => _25.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', _26 => _26.textObj, 'optionalAccess', _27 => _27.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', _28 => _28.textObj, 'optionalAccess', _29 => _29.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
@@ -5215,11 +5215,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', _26 => _26.textObj, 'optionalAccess', _27 => _27.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.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', _28 => _28.textObj, 'optionalAccess', _29 => _29.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _30 => _30.textObj, 'optionalAccess', _31 => _31.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _32 => _32.textObj, 'optionalAccess', _33 => _33.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', _34 => _34.textObj, 'optionalAccess', _35 => _35.purpose]) }) })
   ] });
 }
 
@@ -5433,7 +5433,7 @@ function WavelengthDropdown({
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _32 => _32.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _36 => _36.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -6114,6 +6114,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
+var WavelengthPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 
@@ -6187,7 +6188,7 @@ function WavelengthTextField(props) {
         label: props.label,
         onChange: (e) => {
           handleChange(e);
-          _optionalChain([props, 'access', _33 => _33.onChange, 'optionalCall', _34 => _34(e)]);
+          _optionalChain([props, 'access', _37 => _37.onChange, 'optionalCall', _38 => _38(e)]);
         },
         error: hasError,
         helperText: hasError ? props.errorMessage : "",
@@ -6236,7 +6237,7 @@ function WavelengthTextField(props) {
           error: hasError,
           onChange: (e) => {
             handleChange(e);
-            _optionalChain([props, 'access', _35 => _35.onChange, 'optionalCall', _36 => _36(e)]);
+            _optionalChain([props, 'access', _39 => _39.onChange, 'optionalCall', _40 => _40(e)]);
           }
         }
       ),
@@ -6247,6 +6248,368 @@ function WavelengthTextField(props) {
   return null;
 }
 
+// src/components/DataTable/WavelengthDataTable.tsx
+
+
+
+var ModalInputDiv = _styledcomponents2.default.div`
+  display: flex;
+  flex-direction: column; /* Corrected this line */
+  gap: 3px;
+  margin: 3px;
+
+  label {
+    align-self: flex-start;
+    color: #c6c7cc;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #c6c7cc;
+
+    &:hover {
+      border-bottom: 2px solid black;
+    }
+
+    &:focus {
+      border-bottom: 2px solid #8fd8ff;
+    }
+  }
+`;
+var ModalOverlay = _styledcomponents2.default.div`
+  position: fixed;
+  bottom: 19%;
+  right: 15%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+`;
+var ModalWrapper = _styledcomponents2.default.div`
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  min-width: 300px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+`;
+var ModalClose = _styledcomponents2.default.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  border: none;
+  background: none;
+  z-index: 2;
+`;
+var TableHeadStyle = _styledcomponents2.default.th`
+  position: relative;
+`;
+var KebabMenu = _styledcomponents2.default.div`
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 2px;
+`;
+var KebabIcon = _styledcomponents2.default.div`
+  cursor: pointer;
+  font-size: 20px;
+  padding: 5px;
+
+  &:hover,
+  &:focus {
+    color: #45beff;
+  }
+  &:active {
+    color: #8fd8ff;
+  }
+`;
+var MenuOptions = _styledcomponents2.default.ul`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    padding: 10px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+`;
+var StyledBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  height: 480px;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+`;
+var StyledNavBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  display: flex; /* Make parent a flex-container */
+  justify-content: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  box-shadow: 0.5px 3px 5px black;
+`;
+var StyledTd = _styledcomponents2.default.td`
+  border-top: 1px solid #c6c7cc;
+  border-bottom: 1px solid #c6c7cc;
+  padding: 10px 15px;
+  vertical-align: middle;
+`;
+var StyledTableTwo = _styledcomponents2.default.table`
+  width: 95%;
+  height: 95%;
+  border-collapse: collapse;
+  background-color: white;
+  color: black;
+
+  margin-left: auto;
+  margin-right: auto;
+
+  th {
+    position: relative; /* Enable absolute positioning of pseudo-elements */
+    padding: 10px 15px;
+
+    /* Create the partial right border */
+    &:not(:last-child):after {
+      content: ""; /* Ensure the pseudo-element is visible */
+      position: absolute;
+      right: 0; /* Position it on the right side of the th */
+      top: 50%; /* Position it in the vertical center */
+      height: 50%; /* Set the height of the border to be half the height of th */
+      border-right: 1px solid #c6c7cc;
+      transform: translateY(-50%); /* Center it vertically */
+    }
+  }
+`;
+var StyledInput = _styledcomponents2.default.input`
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #8fd8ff;
+`;
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
+  const [localData, setLocalData] = _react.useState.call(void 0, data || []);
+  const copiedArray = [...data || []];
+  const [editingId, setEditingId] = _react.useState.call(void 0, null);
+  const [editedColumnKey, setEditedColumnKey] = _react.useState.call(void 0, null);
+  const [editedValue, setEditedValue] = _react.useState.call(void 0, "");
+  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', _41 => _41[0], 'optionalAccess', _42 => _42.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);
+  const menuRef = _react.useRef.call(void 0, null);
+  const modalRef = _react.useRef.call(void 0, null);
+  function isNumeric(value) {
+    return /^\d+$/.test(value);
+  }
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+    setLocalData(copiedArray);
+  };
+  _react.useEffect.call(void 0, () => {
+    if (!selectedValue || searchItem === "") {
+      setLocalData(copiedArray);
+      setNoRowsOpen(false);
+      return;
+    }
+    if (isNumeric(searchItem)) {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().includes(searchItem));
+      setLocalData(filteredItems);
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setNoRowsOpen(false);
+      }
+    } else {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().toLowerCase().includes(searchItem.toLowerCase()));
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setLocalData(filteredItems);
+        setNoRowsOpen(false);
+      }
+    }
+  }, [selectedValue, searchItem]);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
+        closeModal();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isModalOpen]);
+  const toggleMenu = (key) => {
+    setIsOpen(!isOpen);
+    setEditingMenuKey(key);
+  };
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentPageData = localData.filter((_, index) => index >= indexOfFirstItem && index < indexOfLastItem);
+  const [sortOrder, setSortOrder] = _react.useState.call(void 0, "asc");
+  const handleSort = (column, sortType) => {
+    const sortedItems = [...localData].sort((a, b) => {
+      const valueA = a[column];
+      const valueB = b[column];
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        if (sortType === "asc") {
+          return valueA.localeCompare(valueB);
+        } else {
+          return valueB.localeCompare(valueA);
+        }
+      } else if (typeof valueA === "number" && typeof valueB === "number") {
+        if (sortType === "asc") {
+          return valueA - valueB;
+        } else {
+          return valueB - valueA;
+        }
+      } else {
+        return 0;
+      }
+    });
+    setLocalData(sortedItems);
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+  };
+  const handleEdit = (id, value, columnKey) => {
+    setEditingId(id);
+    setEditedValue(value);
+    setEditedColumnKey(columnKey);
+  };
+  const saveEdit = (id, editedValue2, columnKey) => {
+    setLocalData(localData.map((item) => id === item.id ? { ...item, [columnKey]: editedValue2 } : item));
+    setEditingId(null);
+  };
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+  const headers = columns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableHeadStyle, { children: [
+      column.title,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          KebabIcon,
+          {
+            title: `KebabIcon-${index}`,
+            onClick: () => {
+              toggleMenu(column.key);
+            },
+            children: "\u22EE"
+          }
+        ),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B06" }),
+            " Sort ASC"
+          ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B07" }),
+            " Sort DESC"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u23F7" }),
+            " Filter"
+          ] }),
+          isModalOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalOverlay, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { children: item.key }, item.key)) })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "input",
+                {
+                  title: `Inputfiltertest-${index}`,
+                  id: "filterInputId",
+                  type: isNumeric(searchItem) ? "number" : "text",
+                  value: searchItem,
+                  onKeyDown: (e) => {
+                    if (e.key === "Backspace") {
+                      setLocalData(copiedArray);
+                    }
+                  },
+                  onChange: (e) => setSearchItem(e.target.value)
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }, index)
+    ] }, `headCell-${index}`);
+  });
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _43 => _43.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', _44 => _44.map, 'call', _45 => _45((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,
+      {
+        title: `styledRow-${item.id}-${column.key}-${index2}`,
+        type: "text",
+        value: editedValue,
+        onChange: (e) => setEditedValue(e.target.value),
+        onBlur: () => saveEdit(item.id, editedValue, column.key),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            saveEdit(item.id, editedValue, column.key);
+          } else if (e.key === "Escape") {
+            handleCancel();
+          }
+        },
+        autoFocus: true
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+  }) }, item.id))]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: headers }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNavBoxDiv, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+  ] });
+};
+
+
 
 
 
@@ -6293,7 +6656,7 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; 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.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; 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: