@portnet/ui 3.1.2 → 3.1.3

package/dist/components/table/PuiModernTable.js

@@ -63,17 +63,34 @@ const TableCard = (0, _styles.styled)(_material.Box)(() => ({
   borderRadius: '8px',
   border: "1px solid ".concat(_apperance.palette.border.light),
   boxShadow: _apperance.palette.shadow.card,
-  transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  cursor: 'pointer',
   '&:hover': {
-    transform: 'translateY(-1px)',
+    transform: 'translateY(-2px)',
     boxShadow: _apperance.palette.shadow.medium,
-    borderColor: "".concat(_apperance.palette.primary, "30")
+    borderColor: "".concat(_apperance.palette.primary, "40"),
+    backgroundColor: "".concat(_apperance.palette.primary, "02"),
+    // Afficher les actions de cette ligne spécifique au survol
+    '& .actions-section': {
+      opacity: 1,
+      transform: 'translateX(0)',
+      transitionDelay: '0.1s'
+    },
+    // Masquer l'indicateur de points au survol
+    '& .actions-section::before': {
+      opacity: 0
+    }
   },
   // Responsive
   '@media (max-width: 768px)': {
     flexDirection: 'column',
     alignItems: 'stretch',
-    gap: '12px'
+    gap: '12px',
+    cursor: 'default',
+    '&:hover': {
+      transform: 'none' // Pas d'effet de survol sur mobile
+    }
   }
 }));
 
@@ -83,6 +100,11 @@ const DataSection = (0, _styles.styled)(_material.Box)(() => ({
   alignItems: 'center',
   gap: '24px',
   flex: 1,
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  // Indicateur subtil d'actions disponibles
+  '.MuiBox-root:hover &': {
+    opacity: 0.7
+  },
   '@media (max-width: 768px)': {
     flexDirection: 'column',
     alignItems: 'stretch',
@@ -116,14 +138,48 @@ const ColumnValue = (0, _styles.styled)(_material.Typography)(() => ({
   wordBreak: 'break-word'
 }));
 
-// Section des actions
+// Section des actions avec effet de survol
 const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
   flexShrink: 0,
+  opacity: 0,
+  transform: 'translateX(10px)',
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  // Afficher les actions uniquement au survol de la card parent directe
+  '&:hover': {
+    opacity: 1,
+    transform: 'translateX(0)',
+    transitionDelay: '0.1s' // Délai d'apparition pour un effet plus fluide
+  },
+  // Indicateur subtil d'actions disponibles (icône menu)
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    right: '8px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '4px',
+    height: '4px',
+    borderRadius: '50%',
+    backgroundColor: _apperance.palette.gray[400],
+    opacity: 1,
+    transition: 'opacity 0.3s ease',
+    boxShadow: "\n      0 6px 0 ".concat(_apperance.palette.gray[400], ",\n      0 12px 0 ").concat(_apperance.palette.gray[400], "\n    ")
+  },
+  '.MuiBox-root:hover &::before': {
+    opacity: 0
+  },
   '@media (max-width: 768px)': {
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: 1,
+    // Toujours visible sur mobile
+    transform: 'translateX(0)',
+    '&::before': {
+      display: 'none' // Pas d'indicateur sur mobile
+    }
   }
 }));
 
@@ -213,8 +269,14 @@ const actionConfig = {
   }
 };
 
-/**
- * Composant de tableau moderne basé sur la maquette
+/**
+ * Composant de tableau moderne basé sur la maquette
+ * 
+ * Fonctionnalités :
+ * - Actions visibles uniquement au survol de la ligne
+ * - Indicateur visuel subtil (3 points) quand les actions sont cachées
+ * - Transitions fluides et animations modernes
+ * - Design responsive (actions toujours visibles sur mobile)
  */
 const PuiModernTable = _ref => {
   let {
@@ -357,22 +419,79 @@ const PuiModernTable = _ref => {
           variant: "body1",
           children: emptyMessage
         })
-      }) : data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
-          children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DataColumn, {
-            style: {
-              flex: column.flex || 1
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
+          sx: {
+            backgroundColor: "".concat(_apperance.palette.primary, "05"),
+            borderColor: "".concat(_apperance.palette.primary, "20"),
+            cursor: 'default',
+            '&:hover': {
+              transform: 'none',
+              boxShadow: _apperance.palette.shadow.card,
+              borderColor: "".concat(_apperance.palette.primary, "20"),
+              backgroundColor: "".concat(_apperance.palette.primary, "05")
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
+            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DataColumn, {
+              style: {
+                flex: column.flex || 1
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
+                sx: {
+                  fontSize: '12px',
+                  fontWeight: 700,
+                  color: _apperance.palette.primary,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.8px'
+                },
+                children: column.label
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
+                sx: {
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  color: _apperance.palette.gray[600],
+                  fontStyle: 'italic'
+                },
+                children: "En-t\xEAte"
+              })]
+            }, column.key))
+          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
+            className: "actions-section",
+            sx: {
+              opacity: 0.6,
+              '&::before': {
+                backgroundColor: _apperance.palette.primary,
+                boxShadow: "\n                          0 6px 0 ".concat(_apperance.palette.primary, ",\n                          0 12px 0 ").concat(_apperance.palette.primary, "\n                        ")
+              }
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
-              children: column.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
-              children: renderColumnValue(item, column)
-            })]
-          }, column.key))
-        }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
-          children: renderActions(item)
-        })]
-      }, item.id || index))
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: '11px',
+                fontWeight: 600,
+                color: _apperance.palette.primary,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px'
+              },
+              children: "Actions"
+            })
+          })]
+        }), data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
+            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(DataColumn, {
+              style: {
+                flex: column.flex || 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
+                children: renderColumnValue(item, column)
+              })
+            }, column.key))
+          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
+            className: "actions-section",
+            children: renderActions(item)
+          })]
+        }, item.id || index))]
+      })
     }), pagination && totalPages > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFooter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Pagination, {
         count: totalPages,

package/package.json

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