@wavelengthusaf/components 2.7.3 → 2.8.0

package/dist/cjs/index.d.cts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants, SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material';
@@ -507,4 +507,23 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface DataType {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps<T>, item: T) => ReactElement;
+}
+type Props<T> = {
+    columns: Array<ColumnProps<T>>;
+    data?: T[] | undefined;
+    itemsPerPage: number;
+    totalPages: number;
+};
+declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextFieldVariants, SxProps as SxProps$1, Theme as Theme$1 } from '@mui/material';
@@ -507,4 +507,23 @@ interface TextFieldProps {
 }
 declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface DataType {
+    id: number;
+    [key: string]: any;
+}
+interface ColumnProps<T> {
+    key: string;
+    title: string | ReactElement;
+    width?: string;
+    editable?: boolean;
+    render?: (column: ColumnProps<T>, item: T) => ReactElement;
+}
+type Props<T> = {
+    columns: Array<ColumnProps<T>>;
+    data?: T[] | undefined;
+    itemsPerPage: number;
+    totalPages: number;
+};
+declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -6114,6 +6114,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
+var WavelengthPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 import { useCallback, useState as useState9 } from "react";
@@ -6246,6 +6247,367 @@ function WavelengthTextField(props) {
   }
   return null;
 }
+
+// src/components/DataTable/WavelengthDataTable.tsx
+import { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import styled11 from "styled-components";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var ModalInputDiv = styled11.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 = styled11.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 = styled11.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 = styled11.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  border: none;
+  background: none;
+  z-index: 2;
+`;
+var TableHeadStyle = styled11.th`
+  position: relative;
+`;
+var KebabMenu = styled11.div`
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 2px;
+`;
+var KebabIcon = styled11.div`
+  cursor: pointer;
+  font-size: 20px;
+  padding: 5px;
+
+  &:hover,
+  &:focus {
+    color: #45beff;
+  }
+  &:active {
+    color: #8fd8ff;
+  }
+`;
+var MenuOptions = styled11.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 = styled11.div`
+  background-color: white;
+  width: 700px;
+  height: 480px;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+`;
+var StyledNavBoxDiv = styled11.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 = styled11.td`
+  border-top: 1px solid #c6c7cc;
+  border-bottom: 1px solid #c6c7cc;
+  padding: 10px 15px;
+  vertical-align: middle;
+`;
+var StyledTableTwo = styled11.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 = styled11.input`
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #8fd8ff;
+`;
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
+  const [localData, setLocalData] = useState10(data || []);
+  const copiedArray = [...data || []];
+  const [editingId, setEditingId] = useState10(null);
+  const [editedColumnKey, setEditedColumnKey] = useState10(null);
+  const [editedValue, setEditedValue] = useState10("");
+  const [noRowsOpen, setNoRowsOpen] = useState10(false);
+  const [isModalOpen, setIsModalOpen] = useState10(false);
+  const [searchItem, setSearchItem] = useState10("");
+  const [selectedValue, setSelectedValue] = useState10(columns[0]?.key || "");
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [isOpen, setIsOpen] = useState10(false);
+  const [editingMenuKey, setEditingMenuKey] = useState10(null);
+  const menuRef = useRef5(null);
+  const modalRef = useRef5(null);
+  function isNumeric(value) {
+    return /^\d+$/.test(value);
+  }
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+    setLocalData(copiedArray);
+  };
+  useEffect6(() => {
+    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);
+  };
+  useEffect6(() => {
+    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] = useState10("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__ */ jsxs29(TableHeadStyle, { children: [
+      column.title,
+      /* @__PURE__ */ jsxs29(KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ jsx38(
+          KebabIcon,
+          {
+            title: `KebabIcon-${index}`,
+            onClick: () => {
+              toggleMenu(column.key);
+            },
+            children: "\u22EE"
+          }
+        ),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs29(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs29("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u2B06" }),
+            " Sort ASC"
+          ] }) : /* @__PURE__ */ jsxs29("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u2B07" }),
+            " Sort DESC"
+          ] }),
+          /* @__PURE__ */ jsxs29("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ jsx38("span", { children: "\u23F7" }),
+            " Filter"
+          ] }),
+          isModalOpen && /* @__PURE__ */ jsx38(ModalOverlay, { children: /* @__PURE__ */ jsxs29(ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ jsx38(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx38("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ jsx38("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx38("option", { children: item.key }, item.key)) })
+            ] }),
+            /* @__PURE__ */ jsxs29(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx38("label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ jsx38(
+                "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 = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx38("tr", { children: /* @__PURE__ */ jsx38("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx38("tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx38(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx38(
+      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__ */ jsx38("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__ */ jsxs29("div", { children: [
+    /* @__PURE__ */ jsx38(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs29(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx38("tbody", { children: rows })
+    ] }) }),
+    /* @__PURE__ */ jsx38(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx38(WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+  ] });
+};
 export {
   AppLogo,
   ButtonIcon,
@@ -6267,6 +6629,7 @@ export {
   WavelengthConfirmationModal,
   WavelengthContentModal,
   WavelengthContentPlaceholder,
+  WavelengthDataTable,
   WavelengthDragAndDrop,
   WavelengthDropdown,
   WavelengthDropdownButton,