@galaxy-ds/core 1.1.55 → 1.1.58

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

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

package/dist/ToolbarButton/ToolbarButtonProps.types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface ToolbarButtonProps {
+import { ButtonProps } from "@material-ui/core";
+export interface ToolbarButtonProps extends ButtonProps {
     label?: string;
     icon?: React.ReactNode;
     title?: string;

package/dist/index.esm.js

@@ -35683,6 +35683,9 @@ var useStyles$a = makeStyles(function (theme) {
                     : 'none',
         }); },
         containerDivider: function (props) { return ({
+            flexShrink: 0,
+            display: 'flex',
+            flexDirection: 'row',
             borderLeft: props.divider === undefined
                 ? theme.shape.borderRadius === 0
                     ? "1px solid " + common.brand.utility.border
@@ -35691,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%' } },
-            React__default.createElement(Box$2, { 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", 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)))));
 };
@@ -35913,7 +35927,7 @@ var Tag = React__default.forwardRef(function (props, ref) {
 });
 
 function LeapLogo(props) {
-    return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size + "px", viewBox: "0 0 142 60" },
+    return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.width, viewBox: "0 0 142 60" },
         React__default.createElement("path", { fill: "#f69139", d: "M2,10.0002 L9.75846683,10.0002 L9.75846683,41.99924 L27.5974176,41.99924 L30.9207597,50 L2,50 L2,10.0002 Z M63.8025461,17.99876 L40.7008366,17.99876 L40.7008366,25.99352 L56.1077126,25.99352 L56.1077126,33.99628 L40.7008366,33.99628 L40.7008366,41.99904 L63.8025461,41.99904 L63.8025461,49.9998 L33,49.9998 L33,10 L63.8025461,10 L63.8025461,17.99876 Z M116.448143,33.99636 L116.30847,49.99988 L108.550003,49.99988 L108.550003,10.00008 L127.948171,10.00008 C135.935456,10.00008 139.972317,15.9915384 140.001958,22 C140.031507,27.9896489 136.07889,33.99636 128.087844,33.99636 L116.448143,33.99636 Z M98.2230148,49.99984 L94.9072768,41.99908 L76.7701697,41.99908 L73.4556323,49.99984 L65,49.99984 L81.5742879,10.00004 L81.6483267,10.00004 L90.0303204,10.00004 L90.1043592,10.00004 L106.679047,49.99984 L98.2230148,49.99984 Z M116.544807,26.0279999 L128.184508,25.9936 C133.919514,25.9936 133.72141,17.99884 128.044835,17.99884 L116.529999,17.99884 L116.544807,26.0279999 Z M80.0899963,33.99632 L91.5948269,33.99632 L85.8426117,20.1139894 L80.0899963,33.99632 Z" })));
 }
 
@@ -48681,9 +48695,9 @@ var themeDesktop = createTheme({
                 },
             },
             adornedStart: {
-                '&.customdropdown > svg:first-child': {
+                '& svg:first-child': {
                     marginLeft: 3,
-                },
+                }
             },
             input: {
                 fontSize: '0.875rem',