@wavelengthusaf/components 5.0.3 → 5.0.6

package/dist/cjs/index.cjs

@@ -92,6 +92,423 @@ WavelengthButton.displayName = "WavelengthButton";
 // src/index.ts
 
 
+// src/components/buttons/WavelengthButton/WavelengthStyledButton.tsx
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
+var ButtonPresets = {
+  default: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "",
+    fontWeight: 600,
+    color: "",
+    margin: "",
+    padding: "",
+    backgroundColor: "",
+    hover: {
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  ewdms_primary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "white",
+    margin: "",
+    padding: "12px 32px",
+    backgroundColor: "rgba(26, 128, 131, 1)",
+    hover: {
+      backgroundColor: "rgba(38, 186, 190, 1)",
+      color: "rgba(247, 247, 249, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#67a8aa",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_secondary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "1px solid rgba(26, 128, 131, 1)",
+    fontSize: "16px",
+    fontWeight: 600,
+    margin: "",
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#bad7da",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_tertiary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#445C71",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_launch: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#24A818",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#6FC36E",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_request: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#1D31E4",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "110px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#5D78ED",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_pending: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    margin: "",
+    backgroundColor: "#F88805",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#FAAD68",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_disabled: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#9E9E9E",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  channel_one_transparent: {
+    width: "70px",
+    height: "25px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "1px solid white",
+    fontSize: "10px",
+    fontWeight: 500,
+    color: "white",
+    padding: "0px !important",
+    backgroundColor: "transparent",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.22)",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  brewery: {
+    width: "138px",
+    height: "44px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "none",
+    fontSize: "16px",
+    margin: "",
+    fontWeight: 500,
+    color: "white",
+    padding: "12px 16px",
+    backgroundColor: "#D16A2F",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "#D16A2F",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "0 0 5px black",
+      transition: "",
+      border: ""
+    }
+  }
+};
+var Button = _styledcomponents2.default.button`
+  ${({ type }) => {
+  const preset = ButtonPresets[type];
+  return `
+      width: ${preset.width};
+      height: ${preset.height};
+      display: ${preset.display};
+      flex-direction: ${preset.flexDirection};
+      align-items: ${preset.alignItems};
+      justify-content: ${preset.justifyContent};
+      border-radius: ${preset.borderRadius};
+      border: ${preset.border};
+      font-size: ${preset.fontSize};
+      font-weight: ${preset.fontWeight};
+      color: ${preset.color};
+      padding: ${preset.padding};
+      background-color: ${preset.backgroundColor};
+      margin: ${preset.margin};
+
+      &:hover {
+        background-color: ${preset.hover.backgroundColor};
+        color: ${preset.hover.color};
+        cursor: ${preset.hover.cursor};
+        width:${preset.hover.width};
+        height:${preset.hover.height};
+        border:${preset.hover.border};
+        font-size:${preset.hover.fontSize};
+      }
+
+      &:disabled {
+        cursor: ${preset.disabled.cursor};
+        opacity: ${preset.disabled.opacity};
+      }
+      &:active {
+      background-color: ${preset.active.backgroundColor};
+      box-shadow: ${preset.active.boxShadow};
+      border: ${preset.active.border};
+      transition: ${preset.active.transition};
+      }
+    
+    `;
+}}
+
+  ${({ styles }) => styles && { ...styles }}
+  ${({ hoverstyles }) => hoverstyles && {
+  "&:hover": { ...hoverstyles }
+}}
+     ${({ activestyles }) => activestyles && {
+  "&:active": { ...activestyles }
+}}
+   ${({ disabledstyles }) => disabledstyles && {
+  "&:disabled": { ...disabledstyles }
+}}
+`;
+function WavelengthStyledButton({ type = "default", styles, children, disabled = false, hoverstyles, icon, onClick, disabledstyles, activestyles, id, name }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { type, styles, hoverstyles, disabledstyles, disabled, activestyles, onClick, children: [
+    icon,
+    children
+  ] });
+}
+WavelengthStyledButton.displayName = "WavelengthStyledButton";
+
 // src/themes/WavelengthAppTheme.tsx
 
 var WavelengthAppTheme = _react.createContext.call(void 0, {});
@@ -990,11 +1407,11 @@ var WavelengthFileDropZone = _react.forwardRef.call(void 0,
 );
 WavelengthFileDropZone.displayName = "WavelengthFileDropZone";
 
-// src/components/SnackBar/WavelengthWebSnackbar.tsx
+// src/components/SnackBar/WavelengthSnackbar.tsx
 
 
 
-var WavelengthWebSnackbar = ({
+var WavelengthSnackbar = ({
   message,
   duration,
   backgroundColor,
@@ -1161,6 +1578,75 @@ function WavelengthPermissionAlert({
 }
 WavelengthPermissionAlert.displayName = "WavelengthPermissionAlert";
 
+// src/components/PageComponents/WavelengthDragAndDrop.tsx
+
+function WavelengthDragAndDrop({
+  width = "550px",
+  height = "230px",
+  onFilesSelected,
+  border,
+  textColor,
+  fontSize = "12px",
+  allowedFileMIME,
+  allowedFileExtensions,
+  backgroundColor = "transparent",
+  dataTestId,
+  id
+}) {
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles);
+      onFilesSelected(newFiles);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const newFiles = Array.from(droppedFiles);
+      const allowedTypes = allowedFileMIME ? allowedFileMIME : "*/*";
+      const validFiles = newFiles.filter((file) => allowedTypes === "*/*" || allowedTypes.includes(file.type));
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      } else {
+        alert(`Invalid file type`);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      id,
+      "data-testid": dataTestId,
+      style: {
+        backgroundColor,
+        border: border ? border : "1px dashed rgba(14, 178, 178, 1)",
+        borderRadius: "8px",
+        paddingTop: "10px",
+        boxSizing: "border-box",
+        width,
+        height,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "scroll"
+      },
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize, color: textColor }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "file", hidden: true, multiple: true, id: "browse", onChange: handleFileChange, accept: allowedFileExtensions }),
+        "Drag File here or",
+        " ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "browse", style: { textDecoration: "underline", cursor: "pointer" }, children: "select from files" })
+      ] })
+    }
+  );
+}
+WavelengthDragAndDrop.displayName = "WavelengthDragAndDrop";
+
 // src/components/PageComponents/WavelengthToolTip.tsx
 
 
@@ -2205,35 +2691,41 @@ WavelengthInput.displayName = "WavelengthInput";
 
 // src/components/DataTable/WavelengthDataTable.tsx
 
-var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
 
 var ModalInputDiv = _styledcomponents2.default.div`
   display: flex;
-  flex-direction: column; /* Corrected this line */
-  gap: 3px;
-  margin: 3px;
+  flex-direction: column;
+  gap: 5px;
+  margin: 10px;
 
   label {
     align-self: flex-start;
-    color: #c6c7cc;
+    color: #304359;
+    font-weight: 600;
+    font-family: Montserrat, sans-serif;
   }
 
   input,
   select {
     width: 100%;
-    padding: 12px 20px;
-    margin: 8px 0;
+    padding: 10px 15px;
+    margin: 4px 0 12px 0;
     box-sizing: border-box;
-    border: none;
+    border: 1px solid #c6c7cc;
+    border-radius: 4px;
     outline: none;
-    border-bottom: 2px solid #c6c7cc;
+    background-color: #ffffff;
+    color: #000000;
+    font-family: Montserrat, sans-serif;
 
     &:hover {
-      border-bottom: 2px solid black;
+      border-color: #304359;
     }
 
     &:focus {
-      border-bottom: 2px solid #8fd8ff;
+      border-color: #8fd8ff;
+      box-shadow: 0 0 0 2px rgba(143, 216, 255, 0.3);
     }
   }
 `;
@@ -2263,12 +2755,17 @@ var ModalWrapper = _styledcomponents2.default.div`
 var ModalClose = _styledcomponents2.default.button`
   position: absolute;
   top: 10px;
-  right: 10px;
-  font-size: 20px;
+  right: 15px;
+  font-size: 24px;
   cursor: pointer;
   border: none;
   background: none;
+  color: #304359;
   z-index: 2;
+
+  &:hover {
+    color: #000000;
+  }
 `;
 var TableHeadStyle = _styledcomponents2.default.th`
   position: relative;
@@ -2296,41 +2793,58 @@ var MenuOptions = _styledcomponents2.default.ul`
   position: absolute;
   right: 0;
   top: 100%;
-  background-color: #f9f9f9;
+  background-color: #ffffff;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
+  z-index: 10;
   list-style: none;
   padding: 0;
   margin: 0;
+  border-radius: 4px;
+  overflow: hidden;
 
   li {
-    padding: 10px;
+    padding: 12px 16px;
     text-decoration: none;
     display: block;
     cursor: pointer;
+    color: #304359 !important;
+    font-family: Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
 
     &:hover {
-      background-color: #ddd;
+      background-color: #f0f4f8;
+      color: #000000 !important;
+    }
+
+    span {
+      margin-right: 8px;
+      color: #304359 !important;
+    }
+
+    &:hover span {
+      color: #000000 !important;
     }
   }
 `;
 var StyledBoxDiv = _styledcomponents2.default.div`
   background-color: white;
-  width: 700px;
-  height: 480px;
+  width: 100%;
+  height: auto;
+  min-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 */
+  width: 100%;
+  display: flex;
   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`
@@ -2350,18 +2864,17 @@ var StyledTableTwo = _styledcomponents2.default.table`
   margin-right: auto;
 
   th {
-    position: relative; /* Enable absolute positioning of pseudo-elements */
+    position: relative;
     padding: 10px 15px;
 
-    /* Create the partial right border */
     &:not(:last-child):after {
-      content: ""; /* Ensure the pseudo-element is visible */
+      content: "";
       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 */
+      right: 0;
+      top: 50%;
+      height: 50%;
       border-right: 1px solid #c6c7cc;
-      transform: translateY(-50%); /* Center it vertically */
+      transform: translateY(-50%);
     }
   }
 `;
@@ -2372,7 +2885,7 @@ var StyledInput = _styledcomponents2.default.input`
   border: none;
   color: #8fd8ff;
 `;
-var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id, onRowClick, paginationOptions }) => {
   const [localData, setLocalData] = _react.useState.call(void 0, data || []);
   const copiedArray = [...data || []];
   const [editingId, setEditingId] = _react.useState.call(void 0, null);
@@ -2387,6 +2900,38 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   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);
+  const [modalPos, setModalPos] = _react.useState.call(void 0, { x: 0, y: 0 });
+  const isDragging = _react.useRef.call(void 0, false);
+  const dragStartPos = _react.useRef.call(void 0, { x: 0, y: 0 });
+  const handleDragStart = (e) => {
+    isDragging.current = true;
+    dragStartPos.current = {
+      x: e.clientX - modalPos.x,
+      y: e.clientY - modalPos.y
+    };
+  };
+  _react.useEffect.call(void 0, () => {
+    const handleDragMove = (e) => {
+      if (!isDragging.current) return;
+      setModalPos({
+        x: e.clientX - dragStartPos.current.x,
+        y: e.clientY - dragStartPos.current.y
+      });
+    };
+    const handleDragEnd = () => {
+      isDragging.current = false;
+    };
+    if (isModalOpen) {
+      document.addEventListener("mousemove", handleDragMove);
+      document.addEventListener("mouseup", handleDragEnd);
+    } else {
+      setModalPos({ x: 0, y: 0 });
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleDragMove);
+      document.removeEventListener("mouseup", handleDragEnd);
+    };
+  }, [isModalOpen]);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -2506,36 +3051,47 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             /* @__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);
+          isModalOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalOverlay, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            ModalWrapper,
+            {
+              ref: modalRef,
+              style: {
+                transform: `translate(${modalPos.x}px, ${modalPos.y}px)`,
+                cursor: "grab"
+              },
+              onMouseDown: handleDragStart,
+              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)
                     }
-                  },
-                  onChange: (e) => setSearchItem(e.target.value)
-                }
-              )
-            ] })
-          ] }) })
+                  )
+                ] })
+              ]
+            }
+          ) })
         ] })
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _45 => _45.map, 'call', _46 => _46((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _45 => _45.map, 'call', _46 => _46((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { onClick: () => onRowClick && onRowClick(item), style: { cursor: onRowClick ? "pointer" : "default" }, 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,
       {
@@ -2553,14 +3109,14 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         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);
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => column.editable !== false && handleEdit(item.id, item[column.key], column.key), children: column.render ? column.render(column, item) : item[column.key] }) }, index2);
   }) }, item.id))]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { id, 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, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic" }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNavBoxDiv, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthPagination, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic", ...paginationOptions || {} }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";
@@ -3658,9 +4214,6 @@ var WavelengthNotificationPanel = ({
   _react.useEffect.call(void 0, () => {
     const el = ref.current;
     if (!el) return;
-    if (typeof rest.onSignOut === "function") {
-      el.onSignOut = rest.onSignOut;
-    }
     if (username !== void 0) {
       el.username = username;
     }
@@ -3796,5 +4349,7 @@ WavelengthCheckboxList.displayName = "WavelengthCheckboxList";
 
 
 
-exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCard = WavelengthCard; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCheckboxList = WavelengthCheckboxList; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataGrid = WavelengthDataGrid; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.useThemeContext = useThemeContext;
+
+
+exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthBadge = WavelengthBadge; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCard = WavelengthCard; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCheckboxList = WavelengthCheckboxList; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataGrid = WavelengthDataGrid; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDialog = WavelengthDialog; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.add = add; exports.concat = concat; exports.useThemeContext = useThemeContext;
 //# sourceMappingURL=index.cjs.map