@galaxy-ds/core 1.1.56 → 1.1.57

package/dist/HeaderToolbar/HeaderToolbarProps.types.d.ts

@@ -9,4 +9,5 @@ export interface HeaderToolbarProps {
     bgPosition?: string;
     bgSize?: string;
     divider?: boolean;
+    tooltip?: boolean;
 }

package/dist/index.esm.js

@@ -35683,8 +35683,9 @@ var useStyles$a = makeStyles(function (theme) {
                     : 'none',
         }); },
         containerDivider: function (props) { return ({
+            flexShrink: 0,
             display: 'flex',
-            marginLeft: 'auto',
+            flexDirection: 'row',
             borderLeft: props.divider === undefined
                 ? theme.shape.borderRadius === 0
                     ? "1px solid " + common.brand.utility.border
@@ -35693,17 +35694,28 @@ var useStyles$a = makeStyles(function (theme) {
                     ? "1px solid " + common.brand.utility.border
                     : 'none',
         }); },
+        toolbarContainer: function (props) { return ({
+            paddingRight: '16px',
+            display: 'grid',
+        }); },
+        toolbarWrap: function (props) { return ({
+            width: '100%',
+            overflow: 'hidden',
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+        }); },
     });
 });
 var HeaderToolbar = function (_a) {
     var _b;
-    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider"]);
-    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
+    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider, tooltip = _a.tooltip; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider", "tooltip"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, right: right, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
     return (React__default.createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
-        React__default.createElement(Box$2, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", style: { width: '100%', overflow: 'hidden' } },
-            React__default.createElement(Box$2, { style: { flex: '1', maxWidth: right ? '70%' : '90%', paddingRight: '16px' }, display: "flex", flexDirection: "column", justifyContent: "stretch" },
-                title && (React__default.createElement(Box$2, { className: clsx("gds-header-toolbar-title", classes.titleVis), mb: 3 },
-                    React__default.createElement(Typography, { variant: "h1", noWrap: true, color: "primary" }, title))),
+        React__default.createElement(Box$2, { className: clsx(classes.toolbarWrap) },
+            React__default.createElement(Box$2, { className: clsx(classes.toolbarContainer) },
+                title && (tooltip ? (React__default.createElement(Tooltip, { title: title, placement: "bottom-start" },
+                    React__default.createElement(Typography, { gutterBottom: true, variant: "h1", noWrap: true, color: "primary" }, title))) : (React__default.createElement(Typography, { gutterBottom: true, variant: "h1", noWrap: true, color: "primary" }, title))),
                 left),
             right && (React__default.createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
 };