@balena/ui-shared-components 1.2.0 → 1.3.0

package/dist/components/ButtonWithTracking/index.js

@@ -21,8 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, Tooltip } from '@mui/material';
+import { Button } from '@mui/material';
 import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
+import { Tooltip } from '../Tooltip';
 /**
  * This button will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
  */

package/dist/components/DropDownButton/DropDownButton.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import(".").DropDownButtonProps>;
+    component: <T extends unknown>({ items, selectedItemIndex, groupByProp, onClick, children, ...buttonProps }: import(".").DropDownButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;

package/dist/components/DropDownButton/index.d.ts

@@ -1,15 +1,29 @@
-import * as React from 'react';
-import { ButtonGroupProps } from '@mui/material';
-import { ButtonWithTrackingProps } from '../ButtonWithTracking';
-export interface DropDownButtonProps extends Omit<ButtonGroupProps, 'onClick'> {
-    items: Array<ButtonWithTrackingProps & {
-        tooltip?: string | undefined;
-    }>;
+/// <reference types="react" />
+import { ButtonGroupProps, MenuItemProps, ButtonProps } from '@mui/material';
+type MenuItemType<T> = MenuItemWithTrackingProps & T & {
+    tooltip?: string | undefined;
+};
+export interface DropDownButtonProps<T = unknown> extends Omit<ButtonGroupProps & ButtonProps, 'onClick'> {
+    items: Array<MenuItemType<T>>;
     selectedItemIndex?: number;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, button: ButtonWithTrackingProps) => void;
+    groupByProp?: keyof T;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLLIElement, MouseEvent>, item: MenuItemWithTrackingProps) => void;
 }
 /**
  * This component implements a Dropdown button using MUI (This can be removed as soon as MUI implements it. Check
  * progress: https://mui.com/material-ui/discover-more/roadmap/#new-components)
  */
-export declare const DropDownButton: React.FC<DropDownButtonProps>;
+export declare const DropDownButton: <T extends unknown>({ items, selectedItemIndex, groupByProp, onClick, children, ...buttonProps }: DropDownButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface MenuItemWithTrackingProps extends Omit<MenuItemProps, 'onClick'> {
+    eventName: string;
+    eventProperties?: {
+        [key: string]: any;
+    };
+    tooltip?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement | HTMLButtonElement>;
+}
+/**
+ * This MenuItem will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
+ */
+export declare const MenuItemWithTracking: React.FC<MenuItemWithTrackingProps>;
+export {};

package/dist/components/DropDownButton/index.js

@@ -36,51 +36,83 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Button, ButtonGroup, Tooltip, Grow, Paper, Popper, MenuItem, MenuList, } from '@mui/material';
-import { ButtonWithTracking, } from '../ButtonWithTracking';
+import { Button, ButtonGroup, MenuItem, Menu, } from '@mui/material';
+import { ButtonWithTracking } from '../ButtonWithTracking';
+import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
+import groupBy from 'lodash/groupBy';
+import flatMap from 'lodash/flatMap';
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Tooltip } from '../Tooltip';
 /**
  * This component implements a Dropdown button using MUI (This can be removed as soon as MUI implements it. Check
  * progress: https://mui.com/material-ui/discover-more/roadmap/#new-components)
  */
 export var DropDownButton = function (_a) {
-    var items = _a.items, _b = _a.selectedItemIndex, selectedItemIndex = _b === void 0 ? 0 : _b, onClick = _a.onClick, buttonGroupProps = __rest(_a, ["items", "selectedItemIndex", "onClick"]);
-    var _c = __read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
-    var anchorRef = React.useRef(null);
-    var _d = __read(React.useState(selectedItemIndex), 2), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var items = _a.items, _b = _a.selectedItemIndex, selectedItemIndex = _b === void 0 ? 0 : _b, groupByProp = _a.groupByProp, onClick = _a.onClick, children = _a.children, buttonProps = __rest(_a, ["items", "selectedItemIndex", "groupByProp", "onClick", "children"]);
+    var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
+    var _d = __read(useState(selectedItemIndex), 2), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    // To use the groupBy pass another property on each item and define that property on groupByProp.
+    // const items = [{...menuItem, section: 'test1'}, {...menuItem, section: 'test2'}];
+    // <Dropdown groupByProp='section' .../>
+    var memoizedItems = useMemo(function () {
+        if (!groupByProp) {
+            return items;
+        }
+        var grouped = groupBy(items, function (item) { return item[groupByProp]; });
+        var keys = Object.keys(grouped);
+        var lastKey = keys[keys.length - 1];
+        return flatMap(grouped, function (value, key) { return __spreadArray([], __read(value.map(function (v, index) {
+            return key !== lastKey && index === value.length - 1
+                ? __assign(__assign({}, v), { divider: true }) : v;
+        })), false); }).filter(function (item) { return item; });
+    }, [items, groupByProp]);
     var handleClick = function (event) {
-        var _a, _b;
-        return ((_b = (_a = items[selectedIndex]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) ||
-            (onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
+        var _a, _b, _c;
+        setAnchorEl(event.currentTarget);
+        return ((_c = (_b = (_a = items === null || items === void 0 ? void 0 : items[selectedIndex]) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) !== null && _c !== void 0 ? _c : onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
     };
-    var handleMenuItemClick = function (index) {
+    var handleMenuItemClick = function (event, index) {
+        var _a, _b, _c;
         setSelectedIndex(index);
-        setOpen(false);
+        setAnchorEl(null);
+        if (children) {
+            return ((_c = (_b = (_a = items === null || items === void 0 ? void 0 : items[index]) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) !== null && _c !== void 0 ? _c : onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
+        }
     };
-    var handleToggle = function () {
-        setOpen(function (prevOpen) { return !prevOpen; });
+    var handleToggle = function (event) {
+        setAnchorEl(event.currentTarget);
     };
-    var handleClose = function (event) {
-        if (anchorRef.current &&
-            anchorRef.current.contains(event.target)) {
-            return;
+    return (_jsxs(_Fragment, { children: [children ? (_jsx(Button, __assign({ "aria-controls": !!anchorEl ? 'dropdown' : undefined, "aria-expanded": !!anchorEl ? 'true' : undefined, onClick: function (event) {
+                    setAnchorEl(event.currentTarget);
+                }, endIcon: _jsx(KeyboardArrowDown, {}) }, buttonProps, { children: children }))) : (_jsxs(ButtonGroup, __assign({ variant: "contained", disableElevation: true }, buttonProps, { children: [_jsx(ButtonWithTracking, __assign({ onClick: handleClick, eventName: items[selectedIndex].eventName, eventProperties: items[selectedIndex].eventProperties, tooltip: items[selectedIndex].tooltip }, { children: items[selectedIndex].children })), _jsx(Button, __assign({ onClick: handleToggle, 
+                        // It doesn't look good without it, hence the addition.
+                        sx: function (theme) { return ({ pl: 2, pr: "calc(".concat(theme.spacing(2), " + 2px)") }); } }, { children: _jsx(ArrowDropDownIcon, {}) }))] }))), _jsx(Menu, __assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: function () {
+                    setAnchorEl(null);
+                } }, { children: memoizedItems.map(function (item, index) { return (_jsx(MenuItemWithTracking, __assign({}, item, { onClick: function (event) { return handleMenuItemClick(event, index); } }, { children: item.children }))); }) }))] }));
+};
+/**
+ * This MenuItem will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
+ */
+export var MenuItemWithTracking = function (_a) {
+    var eventName = _a.eventName, eventProperties = _a.eventProperties, children = _a.children, tooltip = _a.tooltip, onClick = _a.onClick, menuItem = __rest(_a, ["eventName", "eventProperties", "children", "tooltip", "onClick"]);
+    var state = useAnalyticsContext().state;
+    var handleClick = function (event) {
+        if (state.webTracker) {
+            state.webTracker.track(eventName, eventProperties);
         }
-        setOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs(ButtonGroup, __assign({ variant: "contained", ref: anchorRef, "aria-label": "split button", disableElevation: true }, buttonGroupProps, { children: [_jsx(ButtonWithTracking, __assign({ onClick: handleClick, eventName: items[selectedIndex].eventName, eventProperties: items[selectedIndex].eventProperties, tooltip: items[selectedIndex].tooltip }, { children: items[selectedIndex].children })), _jsx(Button, __assign({ size: "small", "aria-controls": open ? 'split-button-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-label": "actions", "aria-haspopup": "menu", onClick: handleToggle, 
-                        // It doesn't look good without it, hence the addition.
-                        sx: function (theme) { return ({ pl: 2, pr: "calc(".concat(theme.spacing(2), " + 2px)") }); } }, { children: _jsx(ArrowDropDownIcon, {}) }))] })), _jsx(Popper, __assign({ sx: {
-                    zIndex: 1,
-                }, open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true }, { children: function (_a) {
-                    var TransitionProps = _a.TransitionProps, placement = _a.placement;
-                    return (_jsx(Grow, __assign({}, TransitionProps, { style: {
-                            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
-                        } }, { children: _jsx(Paper, { children: _jsx(ClickAwayListener, __assign({ onClickAway: handleClose }, { children: _jsx(MenuList, __assign({ id: "split-button-menu", autoFocusItem: true }, { children: items.map(function (option, index) {
-                                        var _a, _b;
-                                        return (_jsx(Tooltip, __assign({ title: option.tooltip }, { children: _jsx(MenuItem, __assign({ disabled: option.disabled, selected: index === selectedIndex, onClick: function () { return handleMenuItemClick(index); } }, { children: option.children })) }), (_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.key) !== null && _b !== void 0 ? _b : index));
-                                    }) })) })) }) })));
-                } }))] }));
+    return (_jsx(Tooltip, __assign({ title: tooltip }, { children: _jsx(MenuItem, __assign({}, menuItem, { onClick: handleClick }, { children: children })) })));
 };

package/dist/components/Tooltip/index.js

@@ -28,6 +28,6 @@ import { Tooltip as MuiTooltip } from '@mui/material';
  */
 var Tooltip = function (_a) {
     var children = _a.children, tooltipProps = __rest(_a, ["children"]);
-    return (_jsx(MuiTooltip, __assign({}, tooltipProps, { children: _jsx("span", { children: children }) })));
+    return (_jsx(MuiTooltip, __assign({}, tooltipProps, { children: children.props.disabled ? _jsx("span", { children: children }) : children })));
 };
 export { Tooltip };

package/dist_esm5/components/ButtonWithTracking/index.js

@@ -1,7 +1,8 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, Tooltip } from '@mui/material';
+import { Button } from '@mui/material';
 import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
+import { Tooltip } from '../Tooltip';
 /**
  * This button will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
  */

package/dist_esm5/components/DropDownButton/DropDownButton.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import(".").DropDownButtonProps>;
+    component: <T extends unknown>({ items, selectedItemIndex, groupByProp, onClick, children, ...buttonProps }: import(".").DropDownButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;

package/dist_esm5/components/DropDownButton/index.d.ts

@@ -1,15 +1,29 @@
-import * as React from 'react';
-import { ButtonGroupProps } from '@mui/material';
-import { ButtonWithTrackingProps } from '../ButtonWithTracking';
-export interface DropDownButtonProps extends Omit<ButtonGroupProps, 'onClick'> {
-    items: Array<ButtonWithTrackingProps & {
-        tooltip?: string | undefined;
-    }>;
+/// <reference types="react" />
+import { ButtonGroupProps, MenuItemProps, ButtonProps } from '@mui/material';
+type MenuItemType<T> = MenuItemWithTrackingProps & T & {
+    tooltip?: string | undefined;
+};
+export interface DropDownButtonProps<T = unknown> extends Omit<ButtonGroupProps & ButtonProps, 'onClick'> {
+    items: Array<MenuItemType<T>>;
     selectedItemIndex?: number;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, button: ButtonWithTrackingProps) => void;
+    groupByProp?: keyof T;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLLIElement, MouseEvent>, item: MenuItemWithTrackingProps) => void;
 }
 /**
  * This component implements a Dropdown button using MUI (This can be removed as soon as MUI implements it. Check
  * progress: https://mui.com/material-ui/discover-more/roadmap/#new-components)
  */
-export declare const DropDownButton: React.FC<DropDownButtonProps>;
+export declare const DropDownButton: <T extends unknown>({ items, selectedItemIndex, groupByProp, onClick, children, ...buttonProps }: DropDownButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface MenuItemWithTrackingProps extends Omit<MenuItemProps, 'onClick'> {
+    eventName: string;
+    eventProperties?: {
+        [key: string]: any;
+    };
+    tooltip?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement | HTMLButtonElement>;
+}
+/**
+ * This MenuItem will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
+ */
+export declare const MenuItemWithTracking: React.FC<MenuItemWithTrackingProps>;
+export {};

package/dist_esm5/components/DropDownButton/index.js

@@ -1,49 +1,72 @@
-import { __assign, __read, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Button, ButtonGroup, Tooltip, Grow, Paper, Popper, MenuItem, MenuList, } from '@mui/material';
-import { ButtonWithTracking, } from '../ButtonWithTracking';
+import { Button, ButtonGroup, MenuItem, Menu, } from '@mui/material';
+import { ButtonWithTracking } from '../ButtonWithTracking';
+import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
+import groupBy from 'lodash/groupBy';
+import flatMap from 'lodash/flatMap';
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Tooltip } from '../Tooltip';
 /**
  * This component implements a Dropdown button using MUI (This can be removed as soon as MUI implements it. Check
  * progress: https://mui.com/material-ui/discover-more/roadmap/#new-components)
  */
 export var DropDownButton = function (_a) {
-    var items = _a.items, _b = _a.selectedItemIndex, selectedItemIndex = _b === void 0 ? 0 : _b, onClick = _a.onClick, buttonGroupProps = __rest(_a, ["items", "selectedItemIndex", "onClick"]);
-    var _c = __read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
-    var anchorRef = React.useRef(null);
-    var _d = __read(React.useState(selectedItemIndex), 2), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var items = _a.items, _b = _a.selectedItemIndex, selectedItemIndex = _b === void 0 ? 0 : _b, groupByProp = _a.groupByProp, onClick = _a.onClick, children = _a.children, buttonProps = __rest(_a, ["items", "selectedItemIndex", "groupByProp", "onClick", "children"]);
+    var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
+    var _d = __read(useState(selectedItemIndex), 2), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    // To use the groupBy pass another property on each item and define that property on groupByProp.
+    // const items = [{...menuItem, section: 'test1'}, {...menuItem, section: 'test2'}];
+    // <Dropdown groupByProp='section' .../>
+    var memoizedItems = useMemo(function () {
+        if (!groupByProp) {
+            return items;
+        }
+        var grouped = groupBy(items, function (item) { return item[groupByProp]; });
+        var keys = Object.keys(grouped);
+        var lastKey = keys[keys.length - 1];
+        return flatMap(grouped, function (value, key) { return __spreadArray([], __read(value.map(function (v, index) {
+            return key !== lastKey && index === value.length - 1
+                ? __assign(__assign({}, v), { divider: true }) : v;
+        })), false); }).filter(function (item) { return item; });
+    }, [items, groupByProp]);
     var handleClick = function (event) {
-        var _a, _b;
-        return ((_b = (_a = items[selectedIndex]).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) ||
-            (onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
+        var _a, _b, _c;
+        setAnchorEl(event.currentTarget);
+        return ((_c = (_b = (_a = items === null || items === void 0 ? void 0 : items[selectedIndex]) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) !== null && _c !== void 0 ? _c : onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
     };
-    var handleMenuItemClick = function (index) {
+    var handleMenuItemClick = function (event, index) {
+        var _a, _b, _c;
         setSelectedIndex(index);
-        setOpen(false);
+        setAnchorEl(null);
+        if (children) {
+            return ((_c = (_b = (_a = items === null || items === void 0 ? void 0 : items[index]) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event)) !== null && _c !== void 0 ? _c : onClick === null || onClick === void 0 ? void 0 : onClick(event, items[selectedIndex]));
+        }
     };
-    var handleToggle = function () {
-        setOpen(function (prevOpen) { return !prevOpen; });
+    var handleToggle = function (event) {
+        setAnchorEl(event.currentTarget);
     };
-    var handleClose = function (event) {
-        if (anchorRef.current &&
-            anchorRef.current.contains(event.target)) {
-            return;
+    return (_jsxs(_Fragment, { children: [children ? (_jsx(Button, __assign({ "aria-controls": !!anchorEl ? 'dropdown' : undefined, "aria-expanded": !!anchorEl ? 'true' : undefined, onClick: function (event) {
+                    setAnchorEl(event.currentTarget);
+                }, endIcon: _jsx(KeyboardArrowDown, {}) }, buttonProps, { children: children }))) : (_jsxs(ButtonGroup, __assign({ variant: "contained", disableElevation: true }, buttonProps, { children: [_jsx(ButtonWithTracking, __assign({ onClick: handleClick, eventName: items[selectedIndex].eventName, eventProperties: items[selectedIndex].eventProperties, tooltip: items[selectedIndex].tooltip }, { children: items[selectedIndex].children })), _jsx(Button, __assign({ onClick: handleToggle, 
+                        // It doesn't look good without it, hence the addition.
+                        sx: function (theme) { return ({ pl: 2, pr: "calc(".concat(theme.spacing(2), " + 2px)") }); } }, { children: _jsx(ArrowDropDownIcon, {}) }))] }))), _jsx(Menu, __assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: function () {
+                    setAnchorEl(null);
+                } }, { children: memoizedItems.map(function (item, index) { return (_jsx(MenuItemWithTracking, __assign({}, item, { onClick: function (event) { return handleMenuItemClick(event, index); } }, { children: item.children }))); }) }))] }));
+};
+/**
+ * This MenuItem will send analytics in case the analytics context is passed through the provider (AnalyticsProvider).
+ */
+export var MenuItemWithTracking = function (_a) {
+    var eventName = _a.eventName, eventProperties = _a.eventProperties, children = _a.children, tooltip = _a.tooltip, onClick = _a.onClick, menuItem = __rest(_a, ["eventName", "eventProperties", "children", "tooltip", "onClick"]);
+    var state = useAnalyticsContext().state;
+    var handleClick = function (event) {
+        if (state.webTracker) {
+            state.webTracker.track(eventName, eventProperties);
         }
-        setOpen(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (_jsxs(React.Fragment, { children: [_jsxs(ButtonGroup, __assign({ variant: "contained", ref: anchorRef, "aria-label": "split button", disableElevation: true }, buttonGroupProps, { children: [_jsx(ButtonWithTracking, __assign({ onClick: handleClick, eventName: items[selectedIndex].eventName, eventProperties: items[selectedIndex].eventProperties, tooltip: items[selectedIndex].tooltip }, { children: items[selectedIndex].children })), _jsx(Button, __assign({ size: "small", "aria-controls": open ? 'split-button-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-label": "actions", "aria-haspopup": "menu", onClick: handleToggle, 
-                        // It doesn't look good without it, hence the addition.
-                        sx: function (theme) { return ({ pl: 2, pr: "calc(".concat(theme.spacing(2), " + 2px)") }); } }, { children: _jsx(ArrowDropDownIcon, {}) }))] })), _jsx(Popper, __assign({ sx: {
-                    zIndex: 1,
-                }, open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true }, { children: function (_a) {
-                    var TransitionProps = _a.TransitionProps, placement = _a.placement;
-                    return (_jsx(Grow, __assign({}, TransitionProps, { style: {
-                            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
-                        } }, { children: _jsx(Paper, { children: _jsx(ClickAwayListener, __assign({ onClickAway: handleClose }, { children: _jsx(MenuList, __assign({ id: "split-button-menu", autoFocusItem: true }, { children: items.map(function (option, index) {
-                                        var _a, _b;
-                                        return (_jsx(Tooltip, __assign({ title: option.tooltip }, { children: _jsx(MenuItem, __assign({ disabled: option.disabled, selected: index === selectedIndex, onClick: function () { return handleMenuItemClick(index); } }, { children: option.children })) }), (_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.key) !== null && _b !== void 0 ? _b : index));
-                                    }) })) })) }) })));
-                } }))] }));
+    return (_jsx(Tooltip, __assign({ title: tooltip }, { children: _jsx(MenuItem, __assign({}, menuItem, { onClick: handleClick }, { children: children })) })));
 };

package/dist_esm5/components/Tooltip/index.js

@@ -7,6 +7,6 @@ import { Tooltip as MuiTooltip } from '@mui/material';
  */
 var Tooltip = function (_a) {
     var children = _a.children, tooltipProps = __rest(_a, ["children"]);
-    return (_jsx(MuiTooltip, __assign({}, tooltipProps, { children: _jsx("span", { children: children }) })));
+    return (_jsx(MuiTooltip, __assign({}, tooltipProps, { children: children.props.disabled ? _jsx("span", { children: children }) : children })));
 };
 export { Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./dist/index.js",
   "module": "./dist_esm5/index.js",
   "sideEffects": false,
@@ -112,6 +112,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-01-12T11:41:12.399Z"
+    "publishedAt": "2024-01-19T10:46:14.728Z"
   }
 }