orcs-design-system 3.2.43 → 3.2.45

package/es/components/Table/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { useMaterialReactTable, MaterialReactTable } from "material-react-table";
-import { merge } from "lodash";
+import { merge, map } from "lodash";
 import muiStyleOverrides from "./muiStyleOverrides";
 import getExpandColumnConfig from "./getExpandColumnConfig";
 import { PropTypes } from "prop-types";
@@ -8,11 +8,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Table = _ref => {
   let {
     data,
-    columns,
+    columns: columnOverrides,
     ...tableConfig
   } = _ref;
   const otherConfig = {};
   const columnVisibility = {};
+  const columns = useMemo(() => {
+    return tableConfig?.enableSorting ? columnOverrides : map(columnOverrides, col => {
+      return {
+        ...col,
+        enableSorting: false
+      };
+    });
+  }, [columnOverrides, tableConfig?.enableSorting]);
   const firstCol = useMemo(() => columns[0], [columns]);
   if (tableConfig.enableExpanding) {
     columnVisibility[firstCol.id] = false;
@@ -26,6 +34,7 @@ const Table = _ref => {
     ...tableConfig,
     columns,
     data,
+    enableExpanding: true,
     initialState: merge({
       density: "compact",
       columnVisibility

package/es/components/Table/muiStyleOverrides.js

@@ -1,37 +1,60 @@
+import React from "react";
+import Icon from "../Icon";
+import Box from "../Box";
+import { jsx as _jsx } from "react/jsx-runtime";
 const muiStyleOverrides = {
+  muiExpandButtonProps: _ref => {
+    let {
+      row
+    } = _ref;
+    return {
+      children: row?.getIsExpanded() ? /*#__PURE__*/_jsx(Box, {
+        p: "s",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "chevron-down"],
+          size: "xs"
+        })
+      }) : /*#__PURE__*/_jsx(Box, {
+        p: "s",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fal", "chevron-right"],
+          size: "xs"
+        })
+      })
+    };
+  },
   muiBottomToolbarProps: {
     sx: {
-      boxShadow: "none"
+      display: "none" // Remove bottom toolbar
     }
   },
   muiTableHeadProps: {
     sx: {
-      height: "32px",
-      borderRadius: "5px",
+      backgroundColor: "transparent",
+      // No background for header
       "& .MuiTableCell-root": {
-        borderBottom: "none",
-        paddingTop: 0,
-        paddingBottom: 0,
-        verticalAlign: "middle"
-      },
-      "& .MuiTableRow-root": {
-        borderRadius: "5px",
-        background: "#F2F5F5",
-        boxShadow: "none"
-      },
-      "& th:nth-child(1)": {
-        borderRadius: "5px 0px 0px 5px"
+        color: "#6b7280",
+        // Subtle text color (gray tone)
+        fontWeight: "500",
+        // Slightly bold for clarity
+        padding: "0 0 6px 0",
+        // Consistent padding
+        borderBottom: "1px solid #e0e0e0",
+        // Subtle header-row separation
+        textAlign: "left",
+        // Ensure text alignment is consistent
+        lineHeight: "1.5" // Enhance readability
       },
-      "& th:nth-last-child(1)": {
-        borderRadius: "0px 5px 5px 0px"
+      "& button": {
+        display: "none" // Explicitly hide any buttons in the header
       }
     }
   },
-  muiTableBodyRowProps: _ref => {
+  muiTableBodyRowProps: _ref2 => {
     let {
       row,
       table
-    } = _ref;
+    } = _ref2;
     let borderBottomStyle = "solid";
     if (row.getIsExpanded()) {
       borderBottomStyle = "dashed";
@@ -57,9 +80,35 @@ const muiStyleOverrides = {
     sx: {
       borderCollapse: "separate !important",
       tableLayout: "fixed",
-      fontSize: "12px",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      fontWeight: "normal",
+      "& th, .MuiTableCell-root": {
+        fontWeight: "normal",
+        fontSize: "inherit",
+        fontFamily: "inherit"
+      },
+      "& td": {
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        fontWeight: "normal"
+      },
       "& td, .MuiTableCell-root": {
-        fontSize: "12px"
+        padding: "6px 0 6px 0",
+        marginLeft: "0"
+      }
+    }
+  },
+  muiTableBodyCellProps: {
+    sx: {
+      fontWeight: "normal",
+      // Remove bold when expanded
+      // Default row cell style
+      "&.MuiTableRow-root": {
+        fontWeight: "normal" // Ensure the font is not bold by default
+      },
+      "&.expanded": {
+        fontWeight: "normal" // Remove bold when expanded
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.43",
+  "version": "3.2.45",
   "engines": {
     "node": "20.12.2"
   },
@@ -67,7 +67,8 @@
     "react-number-format": "^5.3.0",
     "react-router-dom": "^5.3.4",
     "react-select": "^5.7.4",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
@@ -137,13 +138,13 @@
     "shelljs": "^0.8.5",
     "storybook": "^8.1.7",
     "style-loader": "^2.0.0",
-    "styled-components": "^5.2.1",
     "transform-loader": "^0.2.4",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },
   "overrides": {
     "braces": "3.0.3",
+    "cross-spawn": "7.0.6",
     "eslint-plugin-testing-library": "^5.11.1",
     "jest": "$jest",
     "nth-check": "2.1.0",