@portnet/ui 0.1.6 → 0.1.8

package/dist/components/tab/PuiTabs.js

@@ -64,11 +64,19 @@ const StyledTabs = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, re
         fontSize: ".8rem"
       },
       "& .Mui-selected": {
-        color: _apperance.palette.primary
+        color: _apperance.palette.primary,
+        background: "#d0d6e0"
       },
       "& .MuiTabs-indicator": {
-        backgroundColor: _apperance.palette.primary,
+        backgroundColor: "#d1eaff",
         height: "3px"
+      },
+      "&:hover": {
+        color: "#40a9ff",
+        opacity: 1
+      },
+      "&.Mui-focusVisible": {
+        backgroundColor: "#d1eaff"
       }
     }
   };

package/dist/components/table/ActionPopover.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _system = require("@mui/system");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ActionPopover = _ref => {
+  let {
+    row,
+    actions
+  } = _ref;
+  const [anchorEl, setAnchorEl] = _react.default.useState(null);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      "aria-describedby": id,
+      onClick: handleClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
+        p: 2,
+        children: actions.map((action, index) => /*#__PURE__*/_react.default.cloneElement(action, {
+          row,
+          key: index,
+          onClick: handleClose // Assuming you want to close the popover when an action is clicked
+        }))
+      })
+    })]
+  });
+};
+var _default = exports.default = ActionPopover;

package/dist/components/table/PuiTable.js

@@ -18,6 +18,8 @@ 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 _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"];
 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); }
@@ -37,6 +39,10 @@ const StyledMuiTable = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props
     "&.MuiDataGrid-root": {
       fontSize: ".8em",
       "& .tableActionColumn": {
+        "& .MuiDataGrid-columnHeaderTitle": {
+          justifyContent: "center",
+          display: "flex"
+        },
         "& .MuiDataGrid-columnHeaderTitleContainer": {
           justifyContent: "center"
         }
@@ -116,7 +122,16 @@ const StyledMuiTable = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props
         }
       },
       "& .MuiDataGrid-row": {
-        maxHeight: "none !important"
+        maxHeight: "none !important",
+        "&:nth-of-type(odd)": {
+          backgroundColor: "#f9f9f9" // color for odd rows
+        },
+        "&:nth-of-type(even)": {
+          backgroundColor: "#c3e7f3" // color for even rows
+        },
+        "&:hover": {
+          backgroundColor: "#378bb8"
+        }
       },
       "& .MuiDataGrid-virtualScrollerContent": {
         "& .MuiDataGrid-row": {
@@ -285,25 +300,38 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   React.useEffect(() => {
     const newColumns = Boolean(actions.length) ? [...columns, {
       field: "action",
-      width: 10,
+      headerName: "Actions",
       sortable: false,
-      renderHeader: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTableAction.default, {
-        disabled: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {
-          sx: {
-            color: _apperance.palette.gray.dark
-          }
-        })
-      }),
+      filterable: false,
+      width: 100,
       renderCell: _ref4 => {
         let {
           row
         } = _ref4;
-        return oneActionOnly ? ( /*#__PURE__*/React.cloneElement(actions[0], {
-          row
-        })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(TableActions, {
-          row: row,
-          actions: actions
+        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",

package/dist/components/table/PuiTableAction.js

@@ -33,7 +33,8 @@ const PuiTableAction = _ref => {
     sx: _objectSpread(_objectSpread({}, sx), {}, {
       "& .MuiSvgIcon-root": {
         width: ".75em !important",
-        height: ".75em !important"
+        height: ".75em !important",
+        color: "#1e498c"
       }
     }),
     title: title,

package/dist/components/ui/pages/general/PuiSearchPage.js

@@ -60,7 +60,8 @@ const PuiSearchPage = _ref2 => {
     onRetour,
     onReset,
     onSubmit,
-    children: _children
+    children: _children,
+    additionalActions
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDefaultPage.default, {
     title: title,
@@ -144,7 +145,16 @@ const PuiSearchPage = _ref2 => {
               loadingPosition: "start",
               children: "Rechercher"
             })
-          })]
+          }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+            item: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+              color: "primary",
+              startIcon: actionItem.icon,
+              onClick: actionItem.action,
+              loadingPosition: "start",
+              children: actionItem.name
+            })
+          }, index))]
         }),
         children: _children
       })
@@ -167,7 +177,12 @@ PuiSearchPage.propTypes = {
   retour: _propTypes.default.bool,
   onRetour: _propTypes.default.func,
   onReset: _propTypes.default.func,
-  onSubmit: _propTypes.default.func
+  onSubmit: _propTypes.default.func,
+  additionalActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    action: _propTypes.default.func.isRequired,
+    iconType: _propTypes.default.string
+  }))
 };
 PuiSearchPage.defaultProps = {
   formik: true,

package/package.json

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