@bygd/nc-report-ui 0.1.25 → 0.1.26

package/dist/default/esm/index.js

@@ -2280,18 +2280,24 @@ const SortableChip$1 = ({
     }
   })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
-      flex: 1,
       minWidth: 0
     }
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: fullLabel || displayLabel,
+    arrow: true,
+    placement: "top"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "h6",
     sx: {
       fontWeight: hasCustomTitle ? 600 : 500,
       fontStyle: hasCustomTitle ? "italic" : "normal",
       color: "#1a1a1a",
-      fontSize: "14px"
+      fontSize: "14px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, displayLabel)), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2318,7 +2324,32 @@ const SortableChip$1 = ({
     onClick: handleSortToggle,
     "aria-label": "toggle sort order",
     color: sortOrder ? "primary" : "default"
-  }, getSortIcon())), /*#__PURE__*/React__default.createElement(IconButton, {
+  }, getSortIcon())), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Delete",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onDelete,
+    "aria-label": "delete",
+    sx: {
+      color: "#ef5350"
+    }
+  }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    className: "hover-icons",
+    sx: {
+      display: "flex",
+      gap: 0.5,
+      opacity: 0,
+      transition: "opacity 0.2s"
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     size: "small",
     onClick: onMoveUp,
     disabled: isFirst,
@@ -2332,27 +2363,15 @@ const SortableChip$1 = ({
     "aria-label": "move down"
   }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
     fontSize: "small"
-  })), /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Delete",
-    arrow: true,
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    size: "small",
-    onClick: onDelete,
-    "aria-label": "delete",
-    sx: {
-      color: "#ef5350"
-    }
-  }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
-    fontSize: "small"
-  }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
     inputRef: inputRef,
     value: editValue,
     onChange: e => setEditValue(e.target.value),
     onKeyDown: handleKeyDown,
     size: "small",
     sx: {
-      flex: 1
+      minWidth: '200px',
+      maxWidth: '400px'
     }
   }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
@@ -2393,7 +2412,11 @@ const SortableChip$1 = ({
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))))));
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }))));
 };
 const Dimensions = ({
   providersData,
@@ -2963,18 +2986,24 @@ const SortableChip = ({
     }
   })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
-      flex: 1,
       minWidth: 0
     }
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: fullLabel || displayLabel,
+    arrow: true,
+    placement: "top"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "h6",
     sx: {
       fontWeight: hasCustomTitle ? 600 : 500,
       fontStyle: hasCustomTitle ? "italic" : "normal",
       color: "#1a1a1a",
-      fontSize: "14px"
+      fontSize: "14px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, displayLabel)), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, displayLabel))), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
     sx: {
       display: "flex",
@@ -2992,7 +3021,32 @@ const SortableChip = ({
     "aria-label": "edit title"
   }, /*#__PURE__*/React__default.createElement(EditIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(IconButton, {
+  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Delete",
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "small",
+    onClick: onDelete,
+    "aria-label": "delete",
+    sx: {
+      color: "#ef5350"
+    }
+  }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    className: "hover-icons",
+    sx: {
+      display: "flex",
+      gap: 0.5,
+      opacity: 0,
+      transition: "opacity 0.2s"
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     size: "small",
     onClick: onMoveUp,
     disabled: isFirst,
@@ -3006,27 +3060,15 @@ const SortableChip = ({
     "aria-label": "move down"
   }, /*#__PURE__*/React__default.createElement(ArrowDownwardIcon, {
     fontSize: "small"
-  })), /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Delete",
-    arrow: true,
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    size: "small",
-    onClick: onDelete,
-    "aria-label": "delete",
-    sx: {
-      color: "#ef5350"
-    }
-  }, /*#__PURE__*/React__default.createElement(GridDeleteIcon, {
-    fontSize: "small"
-  }))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, {
     inputRef: inputRef,
     value: editValue,
     onChange: e => setEditValue(e.target.value),
     onKeyDown: handleKeyDown,
     size: "small",
     sx: {
-      flex: 1
+      minWidth: '200px',
+      maxWidth: '400px'
     }
   }), /*#__PURE__*/React__default.createElement(Box$1, {
     className: "hover-icons",
@@ -3067,7 +3109,11 @@ const SortableChip = ({
     "aria-label": "reset title"
   }, /*#__PURE__*/React__default.createElement(RestartAltIcon, {
     fontSize: "small"
-  })))))));
+  })))), /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      flex: 1
+    }
+  }))));
 };
 const Metrics = ({
   providersData,
@@ -5824,6 +5870,30 @@ const ReportApp = ({
               }
             }
           }
+        },
+        MuiTooltip: {
+          styleOverrides: {
+            tooltip: {
+              fontSize: "0.875rem",
+              backgroundColor: "rgba(97, 97, 97, 0.95)",
+              maxWidth: 500
+            },
+            arrow: {
+              color: "rgba(97, 97, 97, 0.95)"
+            }
+          },
+          defaultProps: {
+            arrow: true,
+            enterDelay: 300,
+            leaveDelay: 200
+          }
+        },
+        MuiPopper: {
+          defaultProps: {
+            style: {
+              zIndex: 1500
+            }
+          }
         }
       }
     })