@toptal/picasso-menu 1.0.17 → 2.0.0

package/dist-package/src/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAQvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,oDAAoD;IACpD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF;AAMD,eAAO,MAAM,IAAI,gFA4Cf,CAAA;AASF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,oDAAoD;IACpD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF;AAED,eAAO,MAAM,IAAI,gFAmGf,CAAA;AASF,eAAe,IAAI,CAAA"}

package/dist-package/src/Menu/Menu.js

@@ -10,29 +10,59 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import cx from 'classnames';
-import { MenuList as MUIMenuList } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { BackMinor16 } from '@toptal/picasso-icons';
 import { Typography } from '@toptal/picasso-typography';
 import { MenuItem } from '../MenuItem';
 import { useMenu } from './hooks';
 import MenuContext from './MenuContext';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoMenu',
-});
 export const Menu = forwardRef(function Menu(props, ref) {
-    const { children, className, style, variant, allowNestedNavigation, testIds } = props, rest = __rest(props, ["children", "className", "style", "variant", "allowNestedNavigation", "testIds"]);
-    const classes = useStyles();
+    const { children, className, style, variant, allowNestedNavigation, testIds, role = 'menu' } = props, rest = __rest(props, ["children", "className", "style", "variant", "allowNestedNavigation", "testIds", "role"]);
     const { context, innerMenu, hasBackButton } = useMenu({ variant });
     const { onBackClick, onMenuMouseLeave } = context;
-    return (React.createElement(MenuContext.Provider, { value: context }, innerMenu !== null && innerMenu !== void 0 ? innerMenu : (React.createElement(MUIMenuList, Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style, onMouseLeave: onMenuMouseLeave }),
+    let activeItemIndex = -1;
+    // Find the first selected or first non-disabled item
+    React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        if (process.env.NODE_ENV !== 'production') {
+            // check if child is a fragment
+            if (child.type === React.Fragment) {
+                console.error([
+                    "The Menu component doesn't accept a Fragment as a child.",
+                    'Consider providing an array instead.',
+                ].join('\n'));
+            }
+        }
+        if (!child.props.disabled) {
+            if (child.props.selected) {
+                activeItemIndex = index;
+            }
+            else if (activeItemIndex === -1) {
+                activeItemIndex = index;
+            }
+        }
+    });
+    const items = React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        if (index === activeItemIndex) {
+            const newChildProps = {};
+            if (child.props.tabIndex === undefined) {
+                newChildProps.tabIndex = 0;
+            }
+            return React.cloneElement(child, newChildProps);
+        }
+        return child;
+    });
+    return (React.createElement(MenuContext.Provider, { value: context }, innerMenu !== null && innerMenu !== void 0 ? innerMenu : (React.createElement("ul", Object.assign({}, rest, { ref: ref, className: twMerge('relative list-none', 'outline-none shadow-1', 'py-2 px-0 m-0', 'rounded-sm', className), style: style, onMouseLeave: onMenuMouseLeave, role: role, tabIndex: -1 }),
         hasBackButton && allowNestedNavigation && (React.createElement(MenuItem, { key: 'back', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.menuItem, onClick: onBackClick },
             React.createElement(Typography, { size: 'xsmall', color: 'dark-grey', variant: 'body' },
-                React.createElement(BackMinor16, { className: classes.backButtonIcon }),
+                React.createElement(BackMinor16, { className: '-mt-[1px] mr-1 -ml-[5px] align-middle' }),
                 "Back"))),
-        children))));
+        items))));
 });
 Menu.defaultProps = {
     variant: 'slide',

package/dist-package/src/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa;CACpB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA0B,SAAS,IAAI,CACnE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,qBAAqB,EACrB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EARH,iFAQL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;IAClE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,OAAO,CAAA;IAEjD,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IACjC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CACZ,oBAAC,WAAW,oBACN,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,gBAAgB;QAE7B,aAAa,IAAI,qBAAqB,IAAI,CACzC,oBAAC,QAAQ,IACP,GAAG,EAAC,MAAM,iBACG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAC9B,OAAO,EAAE,WAAW;YAEpB,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,MAAM;gBACxD,oBAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI;uBAEvC,CACJ,CACZ;QACA,QAAQ,CACG,CACf,CACoB,CACxB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,OAAO,EAAE,OAAO;IAChB,qBAAqB,EAAE,IAAI;CAC5B,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/MenuItem/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/MenuItem/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAA;AACd,OAAO,KAA6B,MAAM,OAAO,CAAA;AAKjD,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAKjE,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1C,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,CAAC,GAC9D,cAAc,CAAC,cAAc,CAAC,GAC9B,mBAAmB,CAAA;AAErB,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,EAAE,kBAAkB;IAC1E,2CAA2C;IAC3C,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,MAAM,CAAA;IAC5C,wBAAwB;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,EAAE,OAAO,MAAM,CAAC,CAAA;IACjD,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CAC1E;AAMD,eAAO,MAAM,QAAQ,EAAE,oBAAoB,CAAC,KAAK,CAwI/C,CAAA;AAUF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/MenuItem/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAA;AACd,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAIjE,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1C,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,CAAC,GAC9D,cAAc,CAAC,cAAc,CAAC,GAC9B,mBAAmB,CAAA;AAErB,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,EAAE,kBAAkB;IAC1E,2CAA2C;IAC3C,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,MAAM,CAAA;IAC5C,wBAAwB;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC,WAAW,EAAE,OAAO,MAAM,CAAC,CAAA;IACjD,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CAC1E;AAgDD,eAAO,MAAM,QAAQ,EAAE,oBAAoB,CAAC,KAAK,CA6I/C,CAAA;AAUF,eAAe,QAAQ,CAAA"}

package/dist-package/src/MenuItem/MenuItem.js

@@ -10,24 +10,42 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useRef } from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { MenuItem as MUIMenuItem } from '@material-ui/core';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
 import { useTitleCase } from '@toptal/picasso-shared';
-import { Container } from '@toptal/picasso-container';
 import { ChevronMinor16, CheckMinor16 } from '@toptal/picasso-icons';
 import { Paper } from '@toptal/picasso-paper';
 import { Popper } from '@toptal/picasso-popper';
 import { Link } from '@toptal/picasso-link';
 import { ClickAwayListener, toTitleCase } from '@toptal/picasso-utils';
 import { useMenuItem } from './hooks';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoMenuItem',
-});
+const getFontColor = ({ variant, highlighted, }) => {
+    if (variant === 'light') {
+        return 'text-black';
+    }
+    if (variant === 'dark') {
+        return ['focus:text-white', highlighted ? 'text-white' : 'text-gray-500'];
+    }
+};
+const getBackgroundAndActionStyles = ({ variant, highlighted, nonSelectable, }) => {
+    let bgColor = 'bg-transparent';
+    let actionBgColor;
+    if (variant === 'dark') {
+        actionBgColor =
+            !nonSelectable && 'hover:bg-graphite-700 focus:bg-graphite-700';
+        if (highlighted) {
+            bgColor = 'bg-graphite-700';
+        }
+    }
+    if (variant === 'light') {
+        actionBgColor = !nonSelectable && 'hover:bg-blue-100 focus:bg-blue-100';
+        if (highlighted) {
+            bgColor = 'bg-blue-100';
+        }
+    }
+    return [bgColor, actionBgColor];
+};
 export const MenuItem = forwardRef(function MenuItem(props, ref) {
-    const { as = 'li', children, description, className, disabled, disableGutters, menu, titleCase: propTitleCase, selected, checkmarked, style, value, variant = 'light', nonSelectable, onClick, onMouseEnter, icon, avatar } = props, rest = __rest(props, ["as", "children", "description", "className", "disabled", "disableGutters", "menu", "titleCase", "selected", "checkmarked", "style", "value", "variant", "nonSelectable", "onClick", "onMouseEnter", "icon", "avatar"]);
-    const classes = useStyles();
+    const { as = 'li', children, description, className, disabled, disableGutters, menu, titleCase: propTitleCase, selected, checkmarked, style, value, variant = 'light', role = 'menuitem', nonSelectable, onClick, onMouseEnter, icon, avatar, tabIndex: tabIndexProp } = props, rest = __rest(props, ["as", "children", "description", "className", "disabled", "disableGutters", "menu", "titleCase", "selected", "checkmarked", "style", "value", "variant", "role", "nonSelectable", "onClick", "onMouseEnter", "icon", "avatar", "tabIndex"]);
     const anchorRef = useRef(null);
     const titleCase = useTitleCase(propTitleCase);
     const { isOpened, onItemClick, onItemMouseEnter, onAwayClick } = useMenuItem({
@@ -35,32 +53,28 @@ export const MenuItem = forwardRef(function MenuItem(props, ref) {
         onClick,
         onMouseEnter,
     });
+    const highlighted = selected || isOpened;
     const isLink = as === Link && rest.href;
+    const Component = isLink ? 'a' : as || 'li';
     const isIconWrapperVisible = checkmarked !== undefined || icon;
+    let tabIndex;
+    if (!disabled) {
+        tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+    }
     return (React.createElement(React.Fragment, null,
-        React.createElement(MUIMenuItem, Object.assign({}, rest, { ref: ref, 
+        React.createElement(Component, Object.assign({ ref: ref, role: role, tabIndex: tabIndex, 
             // replace Picasso Link with Anchor to not applying Picasso
             // Link component styles, this is the only difference between them now
-            component: isLink ? 'a' : as, classes: {
-                gutters: classes.gutters,
-                selected: classes.selected,
-            }, className: cx(classes.root, classes[variant], className, {
-                [classes.nonSelectable]: nonSelectable,
-                [classes.disabled]: disabled,
-            }), disabled: disabled, disableGutters: disableGutters, onClick: onItemClick, onMouseEnter: onItemMouseEnter, style: style, value: value, selected: selected || isOpened }),
-            React.createElement(Container, { ref: anchorRef, className: classes.itemWrapper, flex: true, direction: 'row' },
-                avatar && React.createElement(Container, { right: 'xsmall' }, avatar),
-                React.createElement(Container, { flex: true, direction: 'column', className: classes.content },
-                    React.createElement(Container, { flex: true, alignItems: 'center' },
-                        isIconWrapperVisible && (React.createElement(Container, { className: classes.iconContainer, flex: true, inline: true, right: 'xsmall' }, checkmarked ? React.createElement(CheckMinor16, null) : icon)),
-                        typeof children === 'string' ? (React.createElement("span", { className: cx(classes.stringContent, {
-                                [classes.stringContentSemibold]: checkmarked,
-                            }), style: style }, titleCase ? toTitleCase(children) : children)) : (children),
-                        menu && (React.createElement(Container, { flex: true, inline: true, left: 'xsmall' },
+            className: twMerge(getFontColor({ variant, highlighted }), getBackgroundAndActionStyles({ variant, highlighted, nonSelectable }), disableGutters ? 'p-0' : 'px-4 py-[0.375rem]', 'min-w-[9rem] w-auto min-h-[unset] sm:min-h-[auto] md:min-h-0 relative cursor-pointer', 'transition-colors duration-150 ease-in-out', 'overflow-hidden whitespace-normal text-left no-underline', 'flex items-center justify-start', 'outline-none appearance-none leading-4', className, disabled && 'text-gray-600 opacity-100 pointer-events-none'), "aria-disabled": Boolean(disabled), disabled: disabled, onClick: onItemClick, onMouseEnter: onItemMouseEnter, style: style, value: value }, rest),
+            React.createElement("div", { ref: anchorRef, className: 'flex flex-1 max-w-full' },
+                avatar && React.createElement("div", { className: 'mr-2' }, avatar),
+                React.createElement("div", { className: 'flex flex-col flex-1 min-w-0' },
+                    React.createElement("div", { className: 'flex items-center' },
+                        isIconWrapperVisible && (React.createElement("div", { className: 'w-4 inline-flex mr-2' }, checkmarked ? React.createElement(CheckMinor16, null) : icon)),
+                        typeof children === 'string' ? (React.createElement("span", { className: twJoin('flex-1 text-md leading-5', checkmarked && 'text-semibold'), style: style }, titleCase ? toTitleCase(children) : children)) : (children),
+                        menu && (React.createElement("div", { className: 'inline-flex ml-2' },
                             React.createElement(ChevronMinor16, { color: '' })))),
-                    description && (React.createElement(Container, { className: cx(classes.description, {
-                            [classes.descriptionDisabled]: disabled,
-                        }), left: isIconWrapperVisible ? 'medium' : undefined, top: 0.25 }, description))))),
+                    description && (React.createElement("div", { className: twJoin('text-2xs mt-1', !disabled && 'text-graphite-700', isIconWrapperVisible && 'ml-6') }, description))))),
         menu && isOpened && (React.createElement(Popper, { anchorEl: anchorRef.current, placement: 'right-start', open: true, autoWidth: false, enableCompactMode: true, popperOptions: {
                 modifiers: {
                     offset: {
@@ -69,7 +83,7 @@ export const MenuItem = forwardRef(function MenuItem(props, ref) {
                 },
             } },
             React.createElement(ClickAwayListener, { onClickAway: onAwayClick },
-                React.createElement(Paper, { className: classes.paper }, menu))))));
+                React.createElement(Paper, { className: 'max-h-[14.75rem] overflow-y-auto' }, menu))))));
 });
 MenuItem.defaultProps = {
     as: 'li',

package/dist-package/src/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/MenuItem/MenuItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/MenuItem/MenuItem.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-menu",
-  "version": "1.0.17",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Menu",
   "publishConfig": {
     "access": "public"
@@ -22,24 +22,24 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-avatar": "4.0.0",
-    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-avatar": "5.0.0",
+    "@toptal/picasso-container": "2.0.0",
     "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-link": "1.0.3",
-    "@toptal/picasso-paper": "2.0.4",
+    "@toptal/picasso-link": "2.0.0",
+    "@toptal/picasso-paper": "3.0.0",
     "@toptal/picasso-popper": "1.0.3",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@mui/base": "5.0.0-beta.40"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
@@ -47,7 +47,8 @@
     "./styles": "./dist-package/src/styles.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-provider": "5.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Menu/Menu.tsx

@@ -1,9 +1,6 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { MenuList as MUIMenuList } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { BackMinor16 } from '@toptal/picasso-icons'
 import { Typography } from '@toptal/picasso-typography'
@@ -11,7 +8,6 @@ import { Typography } from '@toptal/picasso-typography'
 import { MenuItem } from '../MenuItem'
 import { useMenu } from './hooks'
 import MenuContext from './MenuContext'
-import styles from './styles'
 import type { MenuVariant } from './types'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLUListElement> {
@@ -24,10 +20,6 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLUListElement> {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoMenu',
-})
-
 export const Menu = forwardRef<HTMLUListElement, Props>(function Menu(
   props,
   ref
@@ -39,21 +31,76 @@ export const Menu = forwardRef<HTMLUListElement, Props>(function Menu(
     variant,
     allowNestedNavigation,
     testIds,
+    role = 'menu',
     ...rest
   } = props
-  const classes = useStyles()
   const { context, innerMenu, hasBackButton } = useMenu({ variant })
   const { onBackClick, onMenuMouseLeave } = context
 
+  let activeItemIndex = -1
+
+  // Find the first selected or first non-disabled item
+  React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      return
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      // check if child is a fragment
+      if (child.type === React.Fragment) {
+        console.error(
+          [
+            "The Menu component doesn't accept a Fragment as a child.",
+            'Consider providing an array instead.',
+          ].join('\n')
+        )
+      }
+    }
+
+    if (!child.props.disabled) {
+      if (child.props.selected) {
+        activeItemIndex = index
+      } else if (activeItemIndex === -1) {
+        activeItemIndex = index
+      }
+    }
+  })
+
+  const items = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      return
+    }
+
+    if (index === activeItemIndex) {
+      const newChildProps: { tabIndex?: number } = {}
+
+      if (child.props.tabIndex === undefined) {
+        newChildProps.tabIndex = 0
+      }
+
+      return React.cloneElement(child, newChildProps)
+    }
+
+    return child
+  })
+
   return (
     <MenuContext.Provider value={context}>
       {innerMenu ?? (
-        <MUIMenuList
+        <ul
           {...rest}
           ref={ref}
-          className={cx(classes.root, className)}
+          className={twMerge(
+            'relative list-none',
+            'outline-none shadow-1',
+            'py-2 px-0 m-0',
+            'rounded-sm',
+            className
+          )}
           style={style}
           onMouseLeave={onMenuMouseLeave}
+          role={role}
+          tabIndex={-1}
         >
           {hasBackButton && allowNestedNavigation && (
             <MenuItem
@@ -62,13 +109,13 @@ export const Menu = forwardRef<HTMLUListElement, Props>(function Menu(
               onClick={onBackClick}
             >
               <Typography size='xsmall' color='dark-grey' variant='body'>
-                <BackMinor16 className={classes.backButtonIcon} />
+                <BackMinor16 className='-mt-[1px] mr-1 -ml-[5px] align-middle' />
                 Back
               </Typography>
             </MenuItem>
           )}
-          {children}
-        </MUIMenuList>
+          {items}
+        </ul>
       )}
     </MenuContext.Provider>
   )

package/src/Menu/__snapshots__/test.tsx.snap

@@ -6,27 +6,27 @@ exports[`Menu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="MuiList-root PicassoMenu-root"
+      class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm"
       role="menu"
       tabindex="-1"
     >
       <li
         aria-disabled="false"
-        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
         role="menuitem"
         tabindex="0"
       >
         <div
-          class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+          class="flex flex-1 max-w"
         >
           <div
-            class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+            class="flex flex-col flex-1 min-w"
           >
             <div
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="flex items-center"
             >
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 1
               </span>
@@ -36,21 +36,21 @@ exports[`Menu renders 1`] = `
       </li>
       <li
         aria-disabled="false"
-        class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root PicassoMenuItem-root PicassoMenuItem-light MuiMenuItem-gutters PicassoMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4"
         role="menuitem"
         tabindex="-1"
       >
         <div
-          class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+          class="flex flex-1 max-w"
         >
           <div
-            class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+            class="flex flex-col flex-1 min-w"
           >
             <div
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="flex items-center"
             >
               <span
-                class="PicassoMenuItem-stringContent"
+                class="flex-1 text-md leading-5"
               >
                 2
               </span>