@madie/madie-design-system 1.2.89 → 1.2.91

package/.babelrc

@@ -1,4 +1,8 @@
 {
-    "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["@babel/plugin-transform-modules-umd", "@babel/plugin-transform-class-properties"]
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "plugins": [
+    "babel-plugin-macros",
+    "@babel/plugin-transform-modules-umd",
+    "@babel/plugin-transform-class-properties"
+  ]
 }

package/components/MadieTable/index.jsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { flexRender } from "@tanstack/react-table";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import tw from "twin.macro";
+import "styled-components/macro";
+
+const MadieTable = ({
+  table,
+  currentSort,
+  currentDirection,
+  handleSort,
+  renderExpandedRow,
+  id="measureListTable",
+  dataTestId = "measure-list-tbl"
+}) => {
+    const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
+    const [hoveredHeader, setHoveredHeader] = useState(null);
+
+  return (
+    <table
+      /* eslint-disable-next-line react/no-unknown-property */
+      tw="min-w-full"
+      id={id}
+      data-testid={dataTestId}
+      className="tcl-table"
+      style={{
+        borderSpacing: "0 2em !important",
+        overflow: "visible",
+        backgroundColor: "#fff",
+        opacity: 1,
+      }}
+    >
+      <thead className="sticky-table" style={{ overflow: "visible" }}>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              const isHovered = hoveredHeader?.includes(header.id);
+
+              return (
+                <TH
+                  key={header.id}
+                  scope="col"
+                  onMouseEnter={() => setHoveredHeader(header.id)}
+                  onMouseLeave={() => setHoveredHeader(null)}
+                  className="header-cell"
+                >
+                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                    <button
+                      className={
+                        header.column.getCanSort()
+                          ? "cursor-pointer select-none header-button"
+                          : "header-button"
+                      }
+                      disabled={!header.column.getCanSort()}
+                      onClick={() =>
+                        handleSort(header.id.replace("_", "."))
+                      }
+                      data-testid={`header-${header.id.replace("_", ".")}`}
+                      title={
+                        header.column.getCanSort()
+                          ? currentSort ===
+                            header.column.id.replace("_", ".")
+                            ? currentDirection === "ASC"
+                              ? "Sort descending"
+                              : currentDirection === "DESC"
+                              ? "Clear sort"
+                              : "Sort ascending"
+                            : "Sort ascending"
+                          : undefined
+                      }
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+
+                      <span className="arrowDisplay">
+                        {header.column.getCanSort() ? (
+                          currentSort ===
+                          header.column.id.replace("_", ".") ? (
+                            currentDirection === "ASC" ? (
+                              <KeyboardArrowUpIcon />
+                            ) : (
+                              <KeyboardArrowDownIcon />
+                            )
+                          ) : isHovered ? (
+                            <UnfoldMoreIcon data-testid="unfold-more-icon" />
+                          ) : null
+                        ) : null}
+                      </span>
+                    </button>
+                  ) : (
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  )}
+                </TH>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+
+      <tbody className="table-body measures-list" style={{ padding: 20 }}>
+                {table.getRowModel().rows.length === 0 && (
+                  <tr>
+                    <td
+                      colSpan={table.getAllColumns().length}
+                      style={{ padding: "40px 0", textAlign: "center" }}
+                    >
+                      <span>No results were found</span>
+                    </td>
+                  </tr>
+                )}
+                {table.getRowModel().rows.map((row) => (
+                  <React.Fragment key={row.id}>
+                    <tr
+                      key={row.id}
+                      className="ml-tr"
+                      data-testid={`row-item`}
+                      style={{
+                        borderBottom: "solid 1px #8c8c8c",
+                        borderSpacing: "0 2em !important",
+                      }}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} data-testid={`measure-name-${cell.id}`}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                    {/* Expanded row logic should be passed in as a fragment as we look for measureset, libraryset, and will also render a table in the composite view. */}
+                    {renderExpandedRow?.(row)}
+                  </React.Fragment>
+                ))}
+              </tbody>
+    </table>
+  );
+};
+
+MadieTable.propTypes = {
+  table: PropTypes.shape({
+    getHeaderGroups: PropTypes.func.isRequired,
+    getRowModel: PropTypes.func.isRequired,
+    getAllColumns: PropTypes.func.isRequired,
+  }).isRequired,
+
+  currentSort: PropTypes.string,
+  currentDirection: PropTypes.oneOf(["ASC", "DESC"]),
+  handleSort: PropTypes.func.isRequired,
+  renderExpandedRow: PropTypes.func,
+
+  id: PropTypes.string,
+  dataTestId: PropTypes.string,
+};
+
+
+export default MadieTable;

package/components/SearchAndFilter/index.jsx

@@ -0,0 +1,123 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { IconButton, InputAdornment, MenuItem } from "@mui/material";
+import Select from "../Select"
+import TextField from "../TextField"
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
+import { filterByOptions } from "./useFilterSearch";
+/**
+ * Reusable component for measure filter and search UI
+ * Provides filter dropdown and search input with trigger and clear actions
+ */
+
+const SearchAndFilter = ({
+  filterBy,
+  searchField,
+  onFilterChange,
+  onSearchChange,
+  onSearchTrigger,
+  onSearchClear,
+  filterByOpts = filterByOptions,
+  textFieldID = "test-case"
+}) => {
+  
+  return (
+    <div className="measure-search-filters">
+      <div>
+        <Select
+          label="Filter By"
+          id="filter-by-select"
+          data-testid="filter-by-select"
+          inputProps={{ "data-testid": "filter-by-select-input" }}
+          placeHolder={{ name: "Filter By", value: "" }}
+          SelectDisplayProps={{
+            "aria-required": "true",
+          }}
+          size="small"
+          name="filterBy"
+          value={filterBy}
+          onChange={onFilterChange}
+          options={[
+            <MenuItem key="-" value="" data-testid={`filter-by--`}>
+              -
+            </MenuItem>,
+            ...filterByOpts?.map((option) => {
+              return (
+                <MenuItem
+                  key={option}
+                  value={option}
+                  data-testid={`filter-by-${option}`}
+                >
+                  {option}
+                </MenuItem>
+              );
+            }),
+          ]}
+        />
+      </div>
+      <div>
+        <TextField
+          id="search"
+          label="Search"
+          placeholder="Search"
+          inputProps={{
+            "data-testid": `${textFieldID}-list-search-input`, 
+          }}
+          data-testid="test-case-list-search"
+          name="searchField"
+          value={searchField}
+          onChange={onSearchChange}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onSearchTrigger();
+            }
+          }}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment
+                  position="start"
+                  data-testid={`${textFieldID}-trigger-search`}
+                  onClick={onSearchTrigger}
+                  style={{ cursor: "pointer" }}
+                >
+                  <SearchIcon />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment
+                  data-testid={`${textFieldID}-clear-search`}
+                  position="end"
+                  style={{ cursor: "pointer" }}
+                  onClick={onSearchClear}
+                >
+                  <IconButton>
+                    <ClearIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+SearchAndFilter.propTypes = {
+  filterBy: PropTypes.string.isRequired,
+  searchField: PropTypes.string.isRequired,
+  onFilterChange: PropTypes.func.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  onSearchTrigger: PropTypes.func.isRequired,
+  onSearchClear: PropTypes.func.isRequired,
+  filterByOpts: PropTypes.arrayOf(PropTypes.string),
+  textFieldID: PropTypes.string,
+};
+
+SearchAndFilter.defaultProps = {
+  filterByOpts: filterByOptions,
+};
+export default SearchAndFilter;

package/components/SearchAndFilter/useFilterSearch.jsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+
+export const filterByOptions = ["Measure", "Version", "CMS ID"];
+
+export const filterMap = {
+  Measure: "measureName",
+  Version: "version",
+  "CMS ID": "cmsId",
+};
+
+/**
+ * Custom hook for managing measure or libraries filter and search functionality
+ * Provides state and handlers for filtering and searching measures by various criteria
+ */
+export const useFilterSearch = (
+  onPageReset
+) => {
+  const [filterBy, setFilterBy] = useState("");
+  const [searchField, setSearchField] = useState("");
+  const [finalSearchAndFilterby, setFinalSearchAndFilterby] =
+    useState({
+      finalSearchField: "",
+      finalFilterBy: "",
+    });
+
+  const handleFilter = (e) => {
+    setFilterBy(e.target.value);
+  };
+
+  const handleSearch = (e) => {
+    setSearchField(e.target.value);
+  };
+
+  const finalizeSearchCriteria = () => {
+    const finalSearchAndFilter = {
+      finalSearchField: searchField,
+      finalFilterBy: filterBy,
+    };
+    setFinalSearchAndFilterby(finalSearchAndFilter);
+  };
+
+  const blankSearchCriteria = () => {
+    setSearchField("");
+    setFilterBy("");
+    setFinalSearchAndFilterby({ finalFilterBy: "", finalSearchField: "" });
+    if (onPageReset) {
+      onPageReset();
+    }
+  };
+
+  return {
+    filterBy,
+    searchField,
+    finalSearchAndFilterby,
+    handleFilter,
+    handleSearch,
+    finalizeSearchCriteria,
+    blankSearchCriteria,
+  };
+};

package/components/index.js

@@ -17,6 +17,7 @@ import MadieDialog from "./MadieDialog";
 import MadieDiscardDialog from "./MadieDiscardDialog";
 import MadieDeleteDialog from "./MadieDeleteDialog";
 import MadieConfirmDialog from "./MadieConfirmDialog";
+import MadieTable from "./MadieTable";
 import MadieSpinner from "./MadieSpinner";
 import MadieTooltip from "./MadieTooltip";
 import MadieTooltipIcon from "./MadieTooltipIcon";
@@ -37,13 +38,15 @@ import TextArea from "./TextArea";
 import Tooltip from "./Tooltip";
 import Toast from "./Toast";
 import Infotip from "./Infotip";
-import Search from "./Search";
+import SearchAndFilter from "./SearchAndFilter";
 import TextInput from "./TextInput";
 import Dropdown from "./Dropdown";
 import DSLink from "./Link";
 import NumberInput from "./NumberInput";
 import TruncateText from "./TruncateText/index";
 import theme from "../themes/actionCenterTheme.js";
+// utilities
+import { filterByOptions, filterMap, useFilterSearch } from "./SearchAndFilter/useFilterSearch.jsx";
 import {
     MyApplicationsIcon,
     UserSignInIcon,
@@ -150,6 +153,7 @@ export {
     MadieDeleteDialog,
     MadieConfirmDialog,
     MadieSpinner,
+    MadieTable,
     MadieTooltipIcon,
     MadieTooltip,
     NumberInput,
@@ -158,7 +162,7 @@ export {
     RadioButton,
     ReadOnlyTextField,
     RichTextEditor,
-    Search,
+    SearchAndFilter,
     Select,
     Spinner,
     TabPanel,
@@ -175,4 +179,8 @@ export {
     DSLink,
     TruncateText,
     theme,
+    // utilities
+    filterByOptions,
+    filterMap,
+    useFilterSearch,
 };