@wavelengthusaf/components 5.0.5 → 5.0.7

package/dist/cjs/index.cjs

@@ -2695,31 +2695,37 @@ WavelengthInput.displayName = "WavelengthInput";
 
 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);
     }
   }
 `;
@@ -2749,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;
@@ -2782,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`
@@ -2836,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%);
     }
   }
 `;
@@ -2858,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);
@@ -2873,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);
   }
@@ -2992,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,
       {
@@ -3039,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";

package/dist/cjs/index.d.cts

@@ -674,6 +674,23 @@ declare const WavelengthInput: React__default.ForwardRefExoticComponent<Waveleng
     validate?: () => boolean;
 }>>;
 
+interface PaginationOptions {
+    testProp?: string;
+    customStyle?: StyleProp;
+    variant?: "basic" | "common";
+    textColor?: string;
+    font?: string;
+    fontSize?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    activeColor?: string;
+    activeTextColor?: string;
+    backgroundColor?: string;
+    disabledColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
 interface DataType$1 {
     id: number;
     [key: string]: any;
@@ -691,9 +708,11 @@ type Props$1<T> = {
     itemsPerPage: number;
     totalPages: number;
     id?: string;
+    onRowClick?: (item: T) => void;
+    paginationOptions?: PaginationOptions;
 };
 declare const WavelengthDataTable: {
-    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages, id }: Props$1<T>): react_jsx_runtime.JSX.Element;
+    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages, id, onRowClick, paginationOptions }: Props$1<T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -875,4 +894,4 @@ interface WavelengthCheckboxListProps extends React__default.HTMLAttributes<HTML
 }
 declare const WavelengthCheckboxList: React__default.FC<WavelengthCheckboxListProps>;
 
-export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, type WavelengthSnackbarProps, WavelengthSpinningLogo, WavelengthStyledButton, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, add, concat, useThemeContext };
+export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, type PaginationOptions, SampleComponent, type SearchResult, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, type WavelengthSnackbarProps, WavelengthSpinningLogo, WavelengthStyledButton, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, add, concat, useThemeContext };

package/dist/esm/index.d.ts

@@ -674,6 +674,23 @@ declare const WavelengthInput: React__default.ForwardRefExoticComponent<Waveleng
     validate?: () => boolean;
 }>>;
 
+interface PaginationOptions {
+    testProp?: string;
+    customStyle?: StyleProp;
+    variant?: "basic" | "common";
+    textColor?: string;
+    font?: string;
+    fontSize?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    activeColor?: string;
+    activeTextColor?: string;
+    backgroundColor?: string;
+    disabledColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
 interface DataType$1 {
     id: number;
     [key: string]: any;
@@ -691,9 +708,11 @@ type Props$1<T> = {
     itemsPerPage: number;
     totalPages: number;
     id?: string;
+    onRowClick?: (item: T) => void;
+    paginationOptions?: PaginationOptions;
 };
 declare const WavelengthDataTable: {
-    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages, id }: Props$1<T>): react_jsx_runtime.JSX.Element;
+    <T extends DataType$1>({ data, columns, itemsPerPage, totalPages, id, onRowClick, paginationOptions }: Props$1<T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -875,4 +894,4 @@ interface WavelengthCheckboxListProps extends React__default.HTMLAttributes<HTML
 }
 declare const WavelengthCheckboxList: React__default.FC<WavelengthCheckboxListProps>;
 
-export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, type SearchResult, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, type WavelengthSnackbarProps, WavelengthSpinningLogo, WavelengthStyledButton, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, add, concat, useThemeContext };
+export { ChildDataTable, type DataGridColumn, type DataGridRow, type FileSelectedEventDetail, type IFileSelectedEventDetail, type NavItem, NestedDataTable, type PaginationOptions, SampleComponent, type SearchResult, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthBadge, type WavelengthBadgeProps, WavelengthBanner, WavelengthButton, WavelengthCard, WavelengthCheckbox, WavelengthCheckboxList, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentPlaceholder, WavelengthDataGrid, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDialog, WavelengthDragAndDrop, WavelengthDropdown, WavelengthExampleComponent, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, type WavelengthSideBarProps, WavelengthSlider, WavelengthSnackbar, type WavelengthSnackbarProps, WavelengthSpinningLogo, WavelengthStyledButton, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip, add, concat, useThemeContext };

package/dist/esm/index.js

@@ -2695,31 +2695,37 @@ import styled2 from "styled-components";
 import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
 var ModalInputDiv = styled2.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);
     }
   }
 `;
@@ -2749,12 +2755,17 @@ var ModalWrapper = styled2.div`
 var ModalClose = styled2.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 = styled2.th`
   position: relative;
@@ -2782,41 +2793,58 @@ var MenuOptions = styled2.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 = styled2.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 = styled2.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 = styled2.td`
@@ -2836,18 +2864,17 @@ var StyledTableTwo = styled2.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%);
     }
   }
 `;
@@ -2858,7 +2885,7 @@ var StyledInput = styled2.input`
   border: none;
   color: #8fd8ff;
 `;
-var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id, onRowClick, paginationOptions }) => {
   const [localData, setLocalData] = useState(data || []);
   const copiedArray = [...data || []];
   const [editingId, setEditingId] = useState(null);
@@ -2873,6 +2900,38 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [editingMenuKey, setEditingMenuKey] = useState(null);
   const menuRef = useRef27(null);
   const modalRef = useRef27(null);
+  const [modalPos, setModalPos] = useState({ x: 0, y: 0 });
+  const isDragging = useRef27(false);
+  const dragStartPos = useRef27({ x: 0, y: 0 });
+  const handleDragStart = (e) => {
+    isDragging.current = true;
+    dragStartPos.current = {
+      x: e.clientX - modalPos.x,
+      y: e.clientY - modalPos.y
+    };
+  };
+  useEffect27(() => {
+    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);
   }
@@ -2992,36 +3051,47 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             /* @__PURE__ */ jsx32("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx32(ModalOverlay, { children: /* @__PURE__ */ jsxs10(ModalWrapper, { ref: modalRef, children: [
-            /* @__PURE__ */ jsx32(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx32("label", { htmlFor: "filterSelectId", children: "Columns: " }),
-              /* @__PURE__ */ jsx32("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx32("option", { children: item.key }, item.key)) })
-            ] }),
-            /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx32("label", { htmlFor: "filterInputId", children: "Values: " }),
-              /* @__PURE__ */ jsx32(
-                "input",
-                {
-                  title: `Inputfiltertest-${index}`,
-                  id: "filterInputId",
-                  type: isNumeric(searchItem) ? "number" : "text",
-                  value: searchItem,
-                  onKeyDown: (e) => {
-                    if (e.key === "Backspace") {
-                      setLocalData(copiedArray);
+          isModalOpen && /* @__PURE__ */ jsx32(ModalOverlay, { children: /* @__PURE__ */ jsxs10(
+            ModalWrapper,
+            {
+              ref: modalRef,
+              style: {
+                transform: `translate(${modalPos.x}px, ${modalPos.y}px)`,
+                cursor: "grab"
+              },
+              onMouseDown: handleDragStart,
+              children: [
+                /* @__PURE__ */ jsx32(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+                /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
+                  /* @__PURE__ */ jsx32("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+                  /* @__PURE__ */ jsx32("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx32("option", { children: item.key }, item.key)) })
+                ] }),
+                /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
+                  /* @__PURE__ */ jsx32("label", { htmlFor: "filterInputId", children: "Values: " }),
+                  /* @__PURE__ */ jsx32(
+                    "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 = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx32("tr", { children: columns.map((column, index2) => {
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx32("tr", { onClick: () => onRowClick && onRowClick(item), style: { cursor: onRowClick ? "pointer" : "default" }, children: columns.map((column, index2) => {
     return /* @__PURE__ */ jsx32(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx32(
       StyledInput,
       {
@@ -3039,14 +3109,14 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         autoFocus: true
       }
-    ) : /* @__PURE__ */ jsx32("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+    ) : /* @__PURE__ */ jsx32("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__ */ jsxs10("div", { id, children: [
     /* @__PURE__ */ jsx32(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs10(StyledTableTwo, { title: "StyledTable", children: [
       /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsx32("tr", { children: headers }) }),
       /* @__PURE__ */ jsx32("tbody", { children: rows })
     ] }) }),
-    /* @__PURE__ */ jsx32(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx32(WavelengthPagination, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic" }) })
+    /* @__PURE__ */ jsx32(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx32(WavelengthPagination, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic", ...paginationOptions || {} }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "5.0.5",
+  "version": "5.0.7",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -67,7 +67,7 @@
     "tsup": "^8.0.1"
   },
   "dependencies": {
-    "@wavelengthusaf/web-components": "^2.1.5",
+    "@wavelengthusaf/web-components": "^2.1.6",
     "react": "^18.0.0",
     "styled-components": "^6.1.12",
     "typescript": "^5.5.2"