@portnet/ui 0.1.37 → 0.1.38

package/dist/components/table/PuiTable.js

@@ -18,8 +18,9 @@ var _PuiCheckbox = _interopRequireDefault(require("../inputs/PuiCheckbox"));
 var _PuiIcon = _interopRequireDefault(require("../others/PuiIcon"));
 var _PuiTooltip = _interopRequireDefault(require("../others/PuiTooltip"));
 var _PuiTableAction = _interopRequireDefault(require("./PuiTableAction"));
-var _ActionPopover = _interopRequireDefault(require("./ActionPopover"));
 var _system = require("@mui/system");
+var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
+var _KeyboardArrowUp = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowUp"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "rowDetailPanel"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -34,122 +35,107 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const StyledMuiTable = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.DataGrid, _objectSpread({
   ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiDataGrid-root": {
-      fontSize: ".8em",
-      "& .tableActionColumn": {
-        "& .MuiDataGrid-columnHeaderTitle": {
-          justifyContent: "center",
-          display: "flex"
-        },
-        "& .MuiDataGrid-columnHeaderTitleContainer": {
-          justifyContent: "center"
-        }
+}, props))))(() => ({
+  "&.MuiDataGrid-root": {
+    fontSize: ".8em",
+    "& .tableActionColumn": {
+      "& .MuiDataGrid-columnHeaderTitle": {
+        justifyContent: "center",
+        display: "flex"
       },
-      "&.elevate": {
-        boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
-      },
-      backgroundColor: _apperance.palette.gray.light,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      "& .MuiPaginationItem-root": {
-        "&.Mui-selected": {
-          color: _apperance.palette.white,
-          backgroundColor: _apperance.palette.primary
-        }
-      },
-      "&.table-loading .MuiDataGrid-virtualScroller, &.table-loading .MuiDataGrid-footerContainer": {
-        filter: "blur(1px)",
-        "&::before": {
-          content: "''",
-          width: "100%",
-          height: "100%",
-          backgroundColor: _apperance.palette.white,
-          position: "absolute",
-          zIndex: 1,
-          display: "block",
-          opacity: 0
-        }
-      },
-      "&.table-stripped .MuiDataGrid-row": {
-        "&:nth-of-type(even)": {
-          backgroundColor: _apperance.palette.gray.light
-        }
-      },
-      "& .MuiLinearProgress-root": {
-        zIndex: 1,
-        backgroundColor: _apperance.palette.info,
-        "& .MuiLinearProgress-bar": {
-          backgroundColor: _apperance.palette.primary
-        }
-      },
-      "& .MuiDataGrid-columnHeaders": {
-        "& .MuiDataGrid-columnHeader": {
-          "& .MuiDataGrid-columnHeaderTitle": {
-            display: "flex",
-            alignItems: "center",
-            fontWeight: "600",
-            color: _apperance.palette.primary,
-            whiteSpace: "normal",
-            lineHeight: "1.2em"
-          },
-          "&:focus-within": {
-            outline: "none"
-          },
-          "&:last-of-type .MuiDataGrid-columnSeparator": {
-            display: "none"
-          }
-        },
-        "& .MuiDataGrid-columnSeparator": {
-          color: _apperance.palette.gray.dark
-        }
-      },
-      "& .MuiDataGrid-cell": {
-        paddingTop: "2px",
-        paddingBottom: "2px",
-        whiteSpace: "normal",
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        maxHeight: "none",
-        minWidth: 'maxWidth',
-        wordBreak: "break-word",
-        "&.tableAction": {
-          justifyContent: "center",
-          position: "relative",
-          overflow: "initial !important"
+      "& .MuiDataGrid-columnHeaderTitleContainer": {
+        justifyContent: "center"
+      }
+    },
+    "&.elevate": {
+      boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
+    },
+    backgroundColor: _apperance.palette.gray.light,
+    border: "2px solid ".concat(_apperance.palette.gray.dark),
+    "& .MuiPaginationItem-root": {
+      "&.Mui-selected": {
+        color: _apperance.palette.white,
+        backgroundColor: _apperance.palette.primary
+      }
+    },
+    "& .table-stripped .MuiDataGrid-row": {
+      "&:nth-of-type(even)": {
+        backgroundColor: _apperance.palette.gray.light
+      }
+    },
+    "& .MuiLinearProgress-root": {
+      zIndex: 1,
+      backgroundColor: _apperance.palette.info,
+      "& .MuiLinearProgress-bar": {
+        backgroundColor: _apperance.palette.primary
+      }
+    },
+    "& .MuiDataGrid-columnHeaders": {
+      "& .MuiDataGrid-columnHeader": {
+        "& .MuiDataGrid-columnHeaderTitle": {
+          display: "flex",
+          alignItems: "center",
+          fontWeight: "600",
+          color: _apperance.palette.primary,
+          whiteSpace: "normal",
+          lineHeight: "1.2em"
         },
         "&:focus-within": {
           outline: "none"
-        }
-      },
-      "& .MuiDataGrid-row": {
-        maxHeight: "none !important",
-        "&:nth-of-type(odd)": {
-          backgroundColor: "#ffffff" // color for odd rows
-        },
-        "&:nth-of-type(even)": {
-          backgroundColor: "#F6F9FF" // color for even rows
         },
-        "&:hover": {
-          backgroundColor: "#95C7FC"
+        "&:last-of-type .MuiDataGrid-columnSeparator": {
+          display: "none"
         }
       },
-      "& .MuiDataGrid-virtualScrollerContent": {
-        "& .MuiDataGrid-row": {
-          maxHeight: "none !important"
-        }
+      "& .MuiDataGrid-columnSeparator": {
+        color: _apperance.palette.gray.dark
+      }
+    },
+    "& .MuiDataGrid-cell": {
+      paddingTop: "2px",
+      paddingBottom: "2px",
+      whiteSpace: "normal",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      maxHeight: "none",
+      minWidth: "maxWidth",
+      wordBreak: "break-word",
+      "&.tableAction": {
+        justifyContent: "center",
+        position: "relative",
+        overflow: "initial !important"
       },
-      "& .MuiDataGrid-virtualScroller": {
-        backgroundColor: _apperance.palette.white
+      "&:focus-within": {
+        outline: "none"
+      }
+    },
+    "& .MuiDataGrid-row": {
+      maxHeight: "none !important",
+      "&:nth-of-type(odd)": {
+        backgroundColor: "#ffffff" // color for odd rows
+      },
+      "&:nth-of-type(even)": {
+        backgroundColor: "#F6F9FF" // color for even rows
       },
-      "& .MuiDataGrid-footerContainer": {
-        backgroundColor: _apperance.palette.white,
-        height: "28px",
-        minHeight: "28px"
+      "&:hover": {
+        backgroundColor: "#95C7FC"
+      }
+    },
+    "& .MuiDataGrid-virtualScrollerContent": {
+      "& .MuiDataGrid-row": {
+        maxHeight: "none !important"
       }
+    },
+    "& .MuiDataGrid-virtualScroller": {
+      backgroundColor: _apperance.palette.white
+    },
+    "& .MuiDataGrid-footerContainer": {
+      backgroundColor: _apperance.palette.white,
+      height: "28px",
+      minHeight: "28px"
     }
-  };
-});
+  }
+}));
 const localeText = {
   noRowsLabel: "Aucune ligne",
   footerRowSelected: count => count !== 1 ? "".concat(count.toLocaleString(), " lignes s\xE9lectionn\xE9es") : "".concat(count.toLocaleString(), " ligne s\xE9lectionn\xE9e"),
@@ -166,76 +152,6 @@ const localeText = {
     labelRowsPerPage: "Lignes par page"
   }
 };
-const TableActions = _ref2 => {
-  let {
-    row,
-    actions
-  } = _ref2;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const actionsRef = React.useRef();
-  const outsideClickHandler = React.useCallback(event => {
-    if (Boolean(actionsRef.current) && !actionsRef.current.contains(event.target)) {
-      closeHandler();
-    }
-    if (!Boolean(actionsRef.current)) {
-      document.removeEventListener("mouseup", outsideClickHandler, false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const openHandler = () => {
-    document.addEventListener("mouseup", outsideClickHandler, false);
-    setIsOpen(true);
-  };
-  const closeHandler = () => {
-    document.removeEventListener("mouseup", outsideClickHandler, false);
-    setIsOpen(false);
-  };
-  React.useEffect(() => {
-    return () => {
-      document.removeEventListener("mouseup", outsideClickHandler, false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTableAction.default, {
-      title: "Voir plus",
-      color: "primary",
-      onClick: openHandler,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-        type: "voir-plus"
-      })
-    }), Boolean(isOpen) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
-      ref: actionsRef,
-      elevation: 1,
-      sx: {
-        borderRadius: "5px",
-        position: "absolute",
-        right: "0",
-        top: "50%",
-        transform: "translate(0, -50%)",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        paddingX: "11px",
-        height: "calc(100% - 4px)",
-        backgroundColor: _apperance.palette.gray.light,
-        border: "2px solid ".concat(_apperance.palette.gray.dark)
-      },
-      children: [actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
-        row,
-        key: index
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTableAction.default, {
-        size: "small",
-        title: "Fermer",
-        color: "primary",
-        onClick: closeHandler,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-          type: "voir-plus"
-        })
-      })]
-    })]
-  });
-};
 const TablePagination = () => {
   const apiRef = (0, _xDataGrid.useGridApiContext)();
   const page = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridPageSelector);
@@ -275,7 +191,7 @@ const autosizeOptions = {
   includeHeaders: true,
   includeOutliers: true
 };
-const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
       id,
       className,
@@ -296,82 +212,53 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onPageChange,
       onPageSizeChange,
       rowDetailPanel
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded);
-  const [appColumns, setAppColumns] = React.useState(columns);
-  React.useEffect(() => {
-    const newColumns = Boolean(actions.length) ? [...columns, {
-      field: "action",
-      headerName: "Actions",
-      sortable: false,
-      filterable: false,
-      width: 100,
-      renderCell: _ref4 => {
-        let {
-          row
-        } = _ref4;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
-          sx: {
-            display: 'flex',
-            gap: '8px',
-            // Adjust the space between icons as needed
-            flexWrap: 'wrap',
-            // Keep icons on the same line; remove if you want them to wrap
-            justifyContent: 'center',
-            // Center the icons horizontally
-            alignItems: 'center',
-            // Align icons vertically
-            minWidth: 0 // Prevent the flex container from stretching past its content width
-          },
-          children: actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
-            row,
-            key: index,
-            sx: _objectSpread(_objectSpread({}, action.props.sx), {}, {
-              marginRight: 0,
-              // Remove any outer margins
-              '&:last-child': {
-                marginRight: 0 // Ensure the last item doesn't push the container width
-              }
-            })
-          }))
-        });
-      },
-      cellClassName: "tableAction",
-      headerClassName: "tableActionColumn"
-    }] : columns;
-    setAppColumns(newColumns.map(column => {
-      const renderCell = Boolean(column.renderCell) ? column.renderCell : Boolean(column.valueGetter) ? columnData => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-        title: Boolean(column.titleGetter) ? column.titleGetter(columnData.row) : String(column.valueGetter(columnData)),
-        children: column.valueGetter(columnData)
-      }) : Boolean(column.field) ? _ref5 => {
-        let {
-          row
-        } = _ref5;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-          title: Boolean(column.titleGetter) ? column.titleGetter(row) : String(row[column.field]),
-          children: row[column.field]
-        });
-      } : undefined;
-      return _objectSpread(_objectSpread({}, column), {}, {
-        renderCell
-      });
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  const [expandedRows, setExpandedRows] = React.useState({});
+  const toggleRowExpansion = rowId => {
+    setExpandedRows(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
+      [rowId]: !prevState[rowId]
     }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actions, columns]);
-  const renderRowDetailPanel = params => {
-    const {
-      data
-    } = params;
-    // Render the passed rowDetailPanel component with the row data
-    return /*#__PURE__*/React.cloneElement(rowDetailPanel, {
-      rowData: data
+  };
+  const renderRowDetails = row => {
+    console.log("row ==", row);
+    if (!row) return null; // Ensure row exists
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+      in: expandedRows[row.id],
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
+        sx: {
+          padding: 2
+        },
+        children: rowDetailPanel && /*#__PURE__*/React.cloneElement(rowDetailPanel, {
+          rowData: row
+        })
+      })
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const appColumns = React.useMemo(() => [{
+    field: "expand",
+    headerName: "",
+    sortable: false,
+    width: 50,
+    renderCell: _ref3 => {
+      let {
+        row
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        "aria-label": "expand row",
+        size: "small",
+        onClick: () => toggleRowExpansion(row.id),
+        children: expandedRows[row.id] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowUp.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowDown.default, {})
+      });
+    }
+  }, ...columns], [columns, expandedRows]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
-      width: '100%'
+      width: "100%"
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTable, _objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTable, _objectSpread({
       ref: ref,
       id: id,
       components: {
@@ -404,13 +291,14 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       loading: loading,
       paginationMode: paginationMode,
       localeText: localeText,
-      getRowHeight: () => 'auto',
+      getRowHeight: () => "auto",
       onPageChange: onPageChange,
       onPageSizeChange: onPageSizeChange,
       onSelectionModelChange: onSelect,
-      autosizeOptions: autosizeOptions,
-      rowDetailPanel: renderRowDetailPanel
-    }, rest))
+      autosizeOptions: autosizeOptions
+    }, rest)), rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+      children: expandedRows[row.id] && renderRowDetails(row)
+    }, row.id))]
   });
 });
 PuiTable.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "Portnet UI",
   "keywords": [
     "react",