@linzjs/lui 23.4.0 → 23.5.0

package/dist/lui.esm.js

@@ -33687,6 +33687,9 @@ function LuiSideToolbar(props) {
     return (React__default.createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
 }
 
+var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
+styleInject(css_248z$c);
+
 /**
  * Show LuiIcon or Image.
  *
@@ -33698,24 +33701,21 @@ var ToolbarIcon = function (_a) {
     return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
 };
 
-var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
-styleInject(css_248z$c);
-
 /**
  * Create button for using either LuiIcon or Image.
  *
  * @param props
  * @returns
  */
-var ToolbarButton = function (_a) {
+var ToolbarButton = forwardRef$1(function ToolbarButton(_a, ref) {
     var disabled = _a.disabled, highlighted = _a.highlighted, iconImage = _a.iconImage, iconName = _a.iconName, loading = _a.loading, onClick = _a.onClick, panelTitle = _a.panelTitle, panelKey = _a.panelKey, tooltip = _a.tooltip;
     if (loading) {
         return React__default.createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
     }
-    var button = (React__default.createElement("button", { className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
+    var button = (React__default.createElement("button", { ref: ref, className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
         React__default.createElement(ToolbarIcon, { iconImage: iconImage, iconName: iconName })));
-    return tooltip ? (React__default.createElement(LuiTooltip, { placement: "auto", message: tooltip }, button)) : (React__default.createElement(React__default.Fragment, null, button));
-};
+    return tooltip ? (React__default.createElement(LuiTooltip, { placement: "auto", content: tooltip }, button)) : (React__default.createElement(React__default.Fragment, null, button));
+});
 
 /**
  * Allows any item to be added into the toolbar (with appropriate styles and size)