@toptal/picasso-utils 4.0.1 → 4.0.2-alpha-pf-fix-alpha-release-4de9263c3.0

package/dist-package/src/utils/ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +1,21 @@
+import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+export interface Props {
+    /** The wrapped element. */
+    children: ReactElement;
+    /** If `true`, the React tree is ignored and only the DOM tree is considered. Changes how portaled elements are handled. */
+    disableReactTree?: boolean;
+    /** The mouse event to listen to. Pass `false` to disable the mouse listener. */
+    mouseEvent?: ClickAwayMouseEventHandler | false;
+    /** Callback fired when a click-away event is detected. */
+    onClickAway: (event: ReactMouseEvent) => void;
+    /** The touch event to listen to. Pass `false` to disable the touch listener. */
+    touchEvent?: ClickAwayTouchEventHandler | false;
+}
+export declare const ClickAwayListener: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default ClickAwayListener;
+//# sourceMappingURL=ClickAwayListener.d.ts.map

package/dist-package/src/utils/ClickAwayListener/ClickAwayListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickAwayListener.d.ts","sourceRoot":"","sources":["../../../../src/utils/ClickAwayListener/ClickAwayListener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,eAAe,EAC7B,YAAY,EAGb,MAAM,OAAO,CAAA;AAId,KAAK,0BAA0B,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AACzE,KAAK,0BAA0B,GAAG,cAAc,GAAG,YAAY,CAAA;AAE/D,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAA;IACtB,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gFAAgF;IAChF,UAAU,CAAC,EAAE,0BAA0B,GAAG,KAAK,CAAA;IAC/C,0DAA0D;IAC1D,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC7C,gFAAgF;IAChF,UAAU,CAAC,EAAE,0BAA0B,GAAG,KAAK,CAAA;CAChD;AAsCD,eAAO,MAAM,iBAAiB;YAAW,KAAK;;CA6H7C,CAAA;AAID,eAAe,iBAAiB,CAAA"}

package/dist-package/src/utils/ClickAwayListener/ClickAwayListener.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { toReactEvent } from '@toptal/picasso-shared';
+const mapEventPropToEvent = (eventProp) => eventProp.substring(2).toLowerCase();
+const clickedRootScrollbar = (event, doc) => {
+    const { clientX, clientY } = event;
+    return (doc.documentElement.clientWidth < clientX ||
+        doc.documentElement.clientHeight < clientY);
+};
+const isEventInsideNode = (event, node, doc) => {
+    if (event.composedPath) {
+        return event.composedPath().indexOf(node) > -1;
+    }
+    return (!doc.documentElement.contains(event.target) ||
+        node.contains(event.target));
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ;
+        ref.current = value;
+    }
+};
+export const ClickAwayListener = (props) => {
+    const { children, disableReactTree = false, mouseEvent = 'onClick', onClickAway, touchEvent = 'onTouchEnd', } = props;
+    const movedRef = useRef(false);
+    const nodeRef = useRef(null);
+    const activatedRef = useRef(false);
+    const syntheticEventRef = useRef(false);
+    useEffect(() => {
+        // Avoid activating synchronously so the interaction that mounts the
+        // component does not immediately count as a click-away.
+        const timeout = setTimeout(() => {
+            activatedRef.current = true;
+        }, 0);
+        return () => {
+            activatedRef.current = false;
+            clearTimeout(timeout);
+        };
+    }, []);
+    const childRef = children.ref;
+    const handleRef = useCallback((instance) => {
+        nodeRef.current = instance;
+        setRef(childRef, instance);
+    }, [childRef]);
+    const handleClickAway = useCallback((event) => {
+        var _a;
+        const insideReactTree = syntheticEventRef.current;
+        syntheticEventRef.current = false;
+        const node = nodeRef.current;
+        const doc = (_a = node === null || node === void 0 ? void 0 : node.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        if (!activatedRef.current || !node || clickedRootScrollbar(event, doc)) {
+            return;
+        }
+        if (movedRef.current) {
+            movedRef.current = false;
+            return;
+        }
+        const insideDOM = isEventInsideNode(event, node, doc);
+        if (!insideDOM && (disableReactTree || !insideReactTree)) {
+            onClickAway(toReactEvent(event));
+        }
+    }, [disableReactTree, onClickAway]);
+    const createHandleSynthetic = (handlerName) => (event) => {
+        var _a;
+        syntheticEventRef.current = true;
+        const childrenPropsHandlers = children.props;
+        (_a = childrenPropsHandlers[handlerName]) === null || _a === void 0 ? void 0 : _a.call(childrenPropsHandlers, event);
+    };
+    const childrenProps = { ref: handleRef };
+    if (touchEvent !== false) {
+        childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+    }
+    if (mouseEvent !== false) {
+        childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+    }
+    useEffect(() => {
+        var _a, _b;
+        if (touchEvent === false) {
+            return undefined;
+        }
+        const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+        const doc = (_b = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        const handleTouchMove = () => {
+            movedRef.current = true;
+        };
+        doc.addEventListener(mappedTouchEvent, handleClickAway);
+        doc.addEventListener('touchmove', handleTouchMove);
+        return () => {
+            doc.removeEventListener(mappedTouchEvent, handleClickAway);
+            doc.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [handleClickAway, touchEvent]);
+    useEffect(() => {
+        var _a, _b;
+        if (mouseEvent === false) {
+            return undefined;
+        }
+        const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+        const doc = (_b = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        doc.addEventListener(mappedMouseEvent, handleClickAway);
+        return () => {
+            doc.removeEventListener(mappedMouseEvent, handleClickAway);
+        };
+    }, [handleClickAway, mouseEvent]);
+    return React.createElement(React.Fragment, null, React.cloneElement(children, childrenProps));
+};
+ClickAwayListener.displayName = 'ClickAwayListener';
+export default ClickAwayListener;
+//# sourceMappingURL=ClickAwayListener.js.map

package/dist-package/src/utils/ClickAwayListener/ClickAwayListener.js.map

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

package/dist-package/src/utils/ClickAwayListener/index.d.ts

@@ -0,0 +1,5 @@
+import type { Props } from './ClickAwayListener';
+export { default } from './ClickAwayListener';
+export { ClickAwayListener } from './ClickAwayListener';
+export type ClickAwayListenerProps = Props;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/utils/ClickAwayListener/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/ClickAwayListener/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA"}

package/dist-package/src/utils/ClickAwayListener/index.js

@@ -0,0 +1,3 @@
+export { default } from './ClickAwayListener';
+export { ClickAwayListener } from './ClickAwayListener';
+//# sourceMappingURL=index.js.map

package/dist-package/src/utils/ClickAwayListener/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/ClickAwayListener/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist-package/src/utils/Transitions/Rotate180/Rotate180.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rotate180.d.ts","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/Rotate180.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,qCAAqC;IACrC,EAAE,EAAE,OAAO,CAAA;IACX,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAMD,eAAO,MAAM,SAAS;YAAW,KAAK;;CAmBrC,CAAA;AAID,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Rotate180.d.ts","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/Rotate180.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,qCAAqC;IACrC,EAAE,EAAE,OAAO,CAAA;IACX,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,SAAS;YAAW,KAAK;;CAgBrC,CAAA;AAID,eAAe,SAAS,CAAA"}

package/dist-package/src/utils/Transitions/Rotate180/Rotate180.js

@@ -11,17 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'Rotate180',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { createRotate180ClassNames } from './styles';
 export const Rotate180 = (props) => {
     const { children, style, className, on } = props, rest = __rest(props, ["children", "style", "className", "on"]);
-    const classes = useStyles();
-    const childProps = Object.assign({ className: cx(className, classes.transition, {
-            [classes.rotate180]: on,
-        }), style }, rest);
+    const childProps = Object.assign({ className: twMerge(cx(createRotate180ClassNames(on)), className), style }, rest);
     return (React.createElement(React.Fragment, null, React.Children.map(children, child => React.cloneElement(child, childProps))));
 };
 Rotate180.displayName = 'Rotate180';

package/dist-package/src/utils/Transitions/Rotate180/Rotate180.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rotate180.js","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/Rotate180.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,WAAW;CAClB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnD,wCAA2C,CAAQ,CAAA;IACzD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,UAAU,mBACd,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE;YAC3C,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE;SACxB,CAAC,EACF,KAAK,IACF,IAAI,CACR,CAAA;IAED,OAAO,CACL,0CACG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CACpC,KAAK,CAAC,YAAY,CAAC,KAAqB,EAAE,UAAU,CAAC,CACtD,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Rotate180.js","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/Rotate180.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AASpD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnD,wCAA2C,CAAQ,CAAA;IAEzD,MAAM,UAAU,mBACd,SAAS,EAAE,OAAO,CAAC,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,EAChE,KAAK,IACF,IAAI,CACR,CAAA;IAED,OAAO,CACL,0CACG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CACpC,KAAK,CAAC,YAAY,CAAC,KAAqB,EAAE,UAAU,CAAC,CACtD,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/dist-package/src/utils/Transitions/Rotate180/styles.d.ts

@@ -1,3 +1,2 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "transition" | "rotate180">;
-export default _default;
+export declare const createRotate180ClassNames: (on: boolean) => string[];
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/utils/Transitions/Rotate180/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/styles.ts"],"names":[],"mappings":";AAEA,wBAQI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,OAAQ,OAAO,KAAG,MAAM,EAK7D,CAAA"}

package/dist-package/src/utils/Transitions/Rotate180/styles.js

@@ -1,10 +1,7 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    transition: {
-        transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    },
-    rotate180: {
-        transform: 'rotate(180deg)',
-    },
-});
+export const createRotate180ClassNames = (on) => [
+    'transition-transform',
+    'duration-150',
+    'ease-in-out',
+    ...(on ? ['rotate-180'] : []),
+];
 //# sourceMappingURL=styles.js.map

package/dist-package/src/utils/Transitions/Rotate180/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE,kDAAkD;KAC/D;IACD,SAAS,EAAE;QACT,SAAS,EAAE,gBAAgB;KAC5B;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/utils/Transitions/Rotate180/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EAAW,EAAY,EAAE,CAAC;IAClE,sBAAsB;IACtB,cAAc;IACd,aAAa;IACb,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;CAC9B,CAAA"}

package/dist-package/src/utils/capitalize.d.ts

@@ -1,2 +1,2 @@
-export { default as capitalize } from '@material-ui/core/utils/capitalize';
+export declare const capitalize: (string: string) => string;
 //# sourceMappingURL=capitalize.d.ts.map

package/dist-package/src/utils/capitalize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capitalize.d.ts","sourceRoot":"","sources":["../../../src/utils/capitalize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAA"}
+{"version":3,"file":"capitalize.d.ts","sourceRoot":"","sources":["../../../src/utils/capitalize.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,WAAY,MAAM,KAAG,MAM3C,CAAA"}

package/dist-package/src/utils/capitalize.js

@@ -1,2 +1,9 @@
-export { default as capitalize } from '@material-ui/core/utils/capitalize';
+// Not equivalent to `text-transform: capitalize` — only the first letter of
+// the whole string is uppercased, not the first letter of each word.
+export const capitalize = (string) => {
+    if (typeof string !== 'string') {
+        throw new Error('Picasso: capitalize(string) expects a string argument.');
+    }
+    return string.charAt(0).toUpperCase() + string.slice(1);
+};
 //# sourceMappingURL=capitalize.js.map

package/dist-package/src/utils/capitalize.js.map

@@ -1 +1 @@
-{"version":3,"file":"capitalize.js","sourceRoot":"","sources":["../../../src/utils/capitalize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAA"}
+{"version":3,"file":"capitalize.js","sourceRoot":"","sources":["../../../src/utils/capitalize.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAc,EAAU,EAAE;IACnD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAA;IAC3E,CAAC;IAED,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACzD,CAAC,CAAA"}

package/dist-package/src/utils/index.d.ts

@@ -8,7 +8,8 @@ export { colorUtils };
 export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, gradients, generateRandomString, generateRandomStringOrGetEmptyInTest, sizes, } from '@toptal/picasso-provider';
 export type { BreakpointKeys } from '@toptal/picasso-provider';
 export { useIsomorphicLayoutEffect, isBrowser, type OverridableComponent, } from '@toptal/picasso-shared';
-export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener';
+export { default as ClickAwayListener } from './ClickAwayListener';
+export type { ClickAwayListenerProps } from './ClickAwayListener';
 export { capitalize } from './capitalize';
 export { default as disableUnsupportedProps } from './disable-unsupported-props';
 export { type FeatureOptions } from './disable-unsupported-props';

package/dist-package/src/utils/index.d.ts.map

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

package/dist-package/src/utils/index.js

@@ -8,7 +8,7 @@ const colorUtils = {
 export { colorUtils };
 export { breakpointsList as breakpoints, screens, isScreenSize, useBreakpoint, useScreens, shadows, colors as palette, gradients, generateRandomString, generateRandomStringOrGetEmptyInTest, sizes, } from '@toptal/picasso-provider';
 export { useIsomorphicLayoutEffect, isBrowser, } from '@toptal/picasso-shared';
-export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener';
+export { default as ClickAwayListener } from './ClickAwayListener';
 export { capitalize } from './capitalize';
 export { default as disableUnsupportedProps } from './disable-unsupported-props';
 export { forwardRef, documentable } from './forward-ref';

package/dist-package/src/utils/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-utils",
-  "version": "4.0.1",
+  "version": "4.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
   "description": "Toptal UI components library - Utils",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "bugs": {
@@ -24,18 +24,18 @@
   "dependencies": {
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1",
-    "@toptal/picasso-shared": "16.0.0"
+    "@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
+    "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-4de9263c3.0"
   },
   "devDependencies": {
     "styled-components": "^6.1.1",
-    "@toptal/picasso-provider": "6.0.0",
-    "@toptal/picasso-test-utils": "2.0.1"
+    "@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
     "notistack": "1.0.10",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0"
   },
   "publishConfig": {
     "access": "public"

package/src/utils/ClickAwayListener/ClickAwayListener.tsx

@@ -0,0 +1,191 @@
+import type {
+  MouseEvent as ReactMouseEvent,
+  ReactElement,
+  Ref,
+  SyntheticEvent,
+} from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { toReactEvent } from '@toptal/picasso-shared'
+
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp'
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd'
+
+export interface Props {
+  /** The wrapped element. */
+  children: ReactElement
+  /** If `true`, the React tree is ignored and only the DOM tree is considered. Changes how portaled elements are handled. */
+  disableReactTree?: boolean
+  /** The mouse event to listen to. Pass `false` to disable the mouse listener. */
+  mouseEvent?: ClickAwayMouseEventHandler | false
+  /** Callback fired when a click-away event is detected. */
+  onClickAway: (event: ReactMouseEvent) => void
+  /** The touch event to listen to. Pass `false` to disable the touch listener. */
+  touchEvent?: ClickAwayTouchEventHandler | false
+}
+
+const mapEventPropToEvent = (
+  eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler
+): string => eventProp.substring(2).toLowerCase()
+
+const clickedRootScrollbar = (event: Event, doc: Document): boolean => {
+  const { clientX, clientY } = event as MouseEvent
+
+  return (
+    doc.documentElement.clientWidth < clientX ||
+    doc.documentElement.clientHeight < clientY
+  )
+}
+
+const isEventInsideNode = (
+  event: Event,
+  node: Element,
+  doc: Document
+): boolean => {
+  if (event.composedPath) {
+    return event.composedPath().indexOf(node) > -1
+  }
+
+  return (
+    !doc.documentElement.contains(event.target as Node) ||
+    node.contains(event.target as Node)
+  )
+}
+
+const setRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref) {
+    ;(ref as React.MutableRefObject<T | null>).current = value
+  }
+}
+
+export const ClickAwayListener = (props: Props) => {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd',
+  } = props
+
+  const movedRef = useRef(false)
+  const nodeRef = useRef<Element | null>(null)
+  const activatedRef = useRef(false)
+  const syntheticEventRef = useRef(false)
+
+  useEffect(() => {
+    // Avoid activating synchronously so the interaction that mounts the
+    // component does not immediately count as a click-away.
+    const timeout = setTimeout(() => {
+      activatedRef.current = true
+    }, 0)
+
+    return () => {
+      activatedRef.current = false
+      clearTimeout(timeout)
+    }
+  }, [])
+
+  const childRef = (children as { ref?: Ref<Element> }).ref
+
+  const handleRef = useCallback(
+    (instance: Element | null) => {
+      nodeRef.current = instance
+      setRef(childRef, instance)
+    },
+    [childRef]
+  )
+
+  const handleClickAway = useCallback(
+    (event: Event) => {
+      const insideReactTree = syntheticEventRef.current
+
+      syntheticEventRef.current = false
+
+      const node = nodeRef.current
+      const doc = node?.ownerDocument ?? document
+
+      if (!activatedRef.current || !node || clickedRootScrollbar(event, doc)) {
+        return
+      }
+
+      if (movedRef.current) {
+        movedRef.current = false
+
+        return
+      }
+
+      const insideDOM = isEventInsideNode(event, node, doc)
+
+      if (!insideDOM && (disableReactTree || !insideReactTree)) {
+        onClickAway(toReactEvent<ReactMouseEvent>(event))
+      }
+    },
+    [disableReactTree, onClickAway]
+  )
+
+  const createHandleSynthetic =
+    (handlerName: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler) =>
+    (event: SyntheticEvent) => {
+      syntheticEventRef.current = true
+
+      const childrenPropsHandlers = children.props as Record<
+        string,
+        ((event: SyntheticEvent) => void) | undefined
+      >
+
+      childrenPropsHandlers[handlerName]?.(event)
+    }
+
+  const childrenProps: Record<string, unknown> = { ref: handleRef }
+
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent)
+  }
+
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent)
+  }
+
+  useEffect(() => {
+    if (touchEvent === false) {
+      return undefined
+    }
+
+    const mappedTouchEvent = mapEventPropToEvent(touchEvent)
+    const doc = nodeRef.current?.ownerDocument ?? document
+
+    const handleTouchMove = () => {
+      movedRef.current = true
+    }
+
+    doc.addEventListener(mappedTouchEvent, handleClickAway)
+    doc.addEventListener('touchmove', handleTouchMove)
+
+    return () => {
+      doc.removeEventListener(mappedTouchEvent, handleClickAway)
+      doc.removeEventListener('touchmove', handleTouchMove)
+    }
+  }, [handleClickAway, touchEvent])
+
+  useEffect(() => {
+    if (mouseEvent === false) {
+      return undefined
+    }
+
+    const mappedMouseEvent = mapEventPropToEvent(mouseEvent)
+    const doc = nodeRef.current?.ownerDocument ?? document
+
+    doc.addEventListener(mappedMouseEvent, handleClickAway)
+
+    return () => {
+      doc.removeEventListener(mappedMouseEvent, handleClickAway)
+    }
+  }, [handleClickAway, mouseEvent])
+
+  return <>{React.cloneElement(children, childrenProps)}</>
+}
+
+ClickAwayListener.displayName = 'ClickAwayListener'
+
+export default ClickAwayListener

package/src/utils/ClickAwayListener/index.ts

@@ -0,0 +1,5 @@
+import type { Props } from './ClickAwayListener'
+
+export { default } from './ClickAwayListener'
+export { ClickAwayListener } from './ClickAwayListener'
+export type ClickAwayListenerProps = Props

package/src/utils/ClickAwayListener/test.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { render, fireEvent, act } from '@toptal/picasso-test-utils'
+
+import { ClickAwayListener } from './ClickAwayListener'
+
+const renderClickAwayListener = (
+  props: Partial<React.ComponentProps<typeof ClickAwayListener>> = {}
+) => {
+  const onClickAway = props.onClickAway ?? jest.fn()
+
+  const api = render(
+    <div>
+      <ClickAwayListener onClickAway={onClickAway} {...props}>
+        <button type='button'>inside</button>
+      </ClickAwayListener>
+      <span data-testid='outside'>outside</span>
+    </div>
+  )
+
+  // Listeners are activated asynchronously to ignore the mounting interaction.
+  act(() => {
+    jest.advanceTimersByTime(0)
+  })
+
+  return { ...api, onClickAway }
+}
+
+describe('ClickAwayListener', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('fires onClickAway when clicking outside the wrapped element', () => {
+    const { getByTestId, onClickAway } = renderClickAwayListener()
+
+    fireEvent.click(getByTestId('outside'))
+
+    expect(onClickAway).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire onClickAway when clicking inside the wrapped element', () => {
+    const { getByText, onClickAway } = renderClickAwayListener()
+
+    fireEvent.click(getByText('inside'))
+
+    expect(onClickAway).not.toHaveBeenCalled()
+  })
+
+  it('does not fire before the listener is activated', () => {
+    const onClickAway = jest.fn()
+
+    const { getByTestId } = render(
+      <div>
+        <ClickAwayListener onClickAway={onClickAway}>
+          <button type='button'>inside</button>
+        </ClickAwayListener>
+        <span data-testid='outside'>outside</span>
+      </div>
+    )
+
+    fireEvent.click(getByTestId('outside'))
+
+    expect(onClickAway).not.toHaveBeenCalled()
+  })
+
+  it('respects a disabled mouse listener', () => {
+    const { getByTestId, onClickAway } = renderClickAwayListener({
+      mouseEvent: false,
+    })
+
+    fireEvent.click(getByTestId('outside'))
+
+    expect(onClickAway).not.toHaveBeenCalled()
+  })
+
+  it('preserves the child existing event handler', () => {
+    const onClick = jest.fn()
+
+    const { getByText } = render(
+      <ClickAwayListener onClickAway={jest.fn()}>
+        <button type='button' onClick={onClick}>
+          inside
+        </button>
+      </ClickAwayListener>
+    )
+
+    act(() => {
+      jest.advanceTimersByTime(0)
+    })
+
+    fireEvent.click(getByText('inside'))
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/utils/Modal/__snapshots__/test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Modal useModal opens and closes modal 1`] = `
 <body>
   <div
+    data-base-ui-inert=""
     id="modal-root"
   />
   <div>
@@ -11,8 +12,8 @@ exports[`Modal useModal opens and closes modal 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-hidden="true"
         class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
+        data-base-ui-inert=""
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -25,47 +26,89 @@ exports[`Modal useModal opens and closes modal 1`] = `
         </span>
       </button>
       <div
-        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
-        role="presentation"
+        data-base-ui-portal=""
+        id=":r2:"
       >
         <div
-          aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
-          style="transition-duration: 300ms; opacity: 1;"
+          class="fixed z-modal inset-0 bg-black/50 transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-inert=""
+          data-open=""
+          data-starting-style=""
+          role="presentation"
+          style="user-select: none; transition-duration: 300ms;"
         />
-        <div
-          data-testid="sentinelStart"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-focusable=""
+          data-open=""
+          data-starting-style=""
+          id=":r0:"
           role="dialog"
-          style="transition-duration: 300ms; opacity: 1;"
+          style="--nested-dialogs: 0; transition-duration: 300ms;"
           tabindex="-1"
         >
-          <p>
-            Modal content
-          </p>
-          <button
-            aria-disabled="false"
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
+          <div
+            class="bg-white shadow-2 transition-shadow duration-300 delay-0 outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+            role="dialog"
+            tabindex="-1"
           >
-            <span
-              class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+            <p>
+              Modal content
+            </p>
+            <button
+              aria-disabled="false"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
+              data-component-type="button"
+              role="button"
+              tabindex="0"
+              type="button"
             >
-              Hide
-            </span>
-          </button>
+              <span
+                class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+              >
+                Hide
+              </span>
+            </button>
+          </div>
         </div>
-        <div
-          data-testid="sentinelEnd"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
       </div>
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns=":r2:"
+        data-base-ui-inert=""
+        style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"
+      />
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </div>
 </body>
@@ -102,6 +145,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
 exports[`Modal useModal shows multiple modals at the same time 1`] = `
 <body>
   <div
+    data-base-ui-inert=""
     id="modal-root"
   />
   <div>
@@ -110,8 +154,8 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-hidden="true"
         class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
+        data-base-ui-inert=""
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -123,10 +167,31 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
           Show first
         </span>
       </button>
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns=":r7:"
+        data-base-ui-inert=""
+        style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"
+      />
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
       <button
         aria-disabled="false"
-        aria-hidden="true"
         class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
+        data-base-ui-inert=""
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -139,62 +204,125 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
         </span>
       </button>
       <div
-        aria-hidden="true"
-        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
-        role="presentation"
+        data-base-ui-inert=""
+        data-base-ui-portal=""
+        id=":r7:"
       >
         <div
-          aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
-          style="transition-duration: 300ms; opacity: 1;"
+          class="fixed z-modal inset-0 bg-black/50 transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-inert=""
+          data-open=""
+          data-starting-style=""
+          role="presentation"
+          style="user-select: none; transition-duration: 300ms;"
         />
-        <div
-          data-testid="sentinelStart"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-focusable=""
+          data-open=""
+          data-starting-style=""
+          id=":r3:"
           role="dialog"
-          style="transition-duration: 300ms; opacity: 1;"
+          style="--nested-dialogs: 0; transition-duration: 300ms;"
           tabindex="-1"
         >
-          <p>
-            First modal content
-          </p>
+          <div
+            class="bg-white shadow-2 transition-shadow duration-300 delay-0 outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+            role="dialog"
+            tabindex="-1"
+          >
+            <p>
+              First modal content
+            </p>
+          </div>
         </div>
-        <div
-          data-testid="sentinelEnd"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
       </div>
       <div
-        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
-        role="presentation"
+        data-base-ui-portal=""
+        id=":r8:"
       >
         <div
-          aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
-          style="transition-duration: 300ms; opacity: 1;"
+          class="fixed z-modal inset-0 bg-black/50 transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-inert=""
+          data-open=""
+          data-starting-style=""
+          role="presentation"
+          style="user-select: none; transition-duration: 300ms;"
         />
-        <div
-          data-testid="sentinelStart"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center transition-opacity data-starting-style:opacity data-ending-style:opacity"
+          data-base-ui-focusable=""
+          data-open=""
+          data-starting-style=""
+          id=":r5:"
           role="dialog"
-          style="transition-duration: 300ms; opacity: 1;"
+          style="--nested-dialogs: 0; transition-duration: 300ms;"
           tabindex="-1"
         >
-          <p>
-            Second modal content
-          </p>
+          <div
+            class="bg-white shadow-2 transition-shadow duration-300 delay-0 outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+            role="dialog"
+            tabindex="-1"
+          >
+            <p>
+              Second modal content
+            </p>
+          </div>
         </div>
-        <div
-          data-testid="sentinelEnd"
+        <span
+          data-base-ui-focus-guard=""
+          data-base-ui-inert=""
+          data-type="inside"
+          role="button"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
           tabindex="0"
         />
       </div>
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns=":r8:"
+        data-base-ui-inert=""
+        style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"
+      />
+      <span
+        data-base-ui-focus-guard=""
+        data-base-ui-inert=""
+        data-type="outside"
+        role="button"
+        style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </div>
 </body>

package/src/utils/Modal/test.tsx

@@ -1,9 +1,5 @@
 import React from 'react'
-import {
-  render,
-  fireEvent,
-  waitForElementToBeRemoved,
-} from '@toptal/picasso-test-utils'
+import { render, fireEvent, waitFor } from '@toptal/picasso-test-utils'
 import { Button } from '@toptal/picasso-button'
 import { Modal } from '@toptal/picasso-modal'
 
@@ -47,7 +43,7 @@ describe('Modal', () => {
     const hideModalButton = getByText('Hide')
 
     fireEvent.click(hideModalButton)
-    await waitForElementToBeRemoved(() => getByText('Hide'))
+    await waitFor(() => expect(queryByText('Hide')).toBeFalsy())
 
     expect(queryByText('Modal content')).toBeFalsy()
     expect(baseElement).toMatchSnapshot()

package/src/utils/Transitions/Rotate180/Rotate180.tsx

@@ -2,10 +2,9 @@ import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import { createRotate180ClassNames } from './styles'
 
 export interface Props extends BaseProps {
   /** Flag for transition execution. */
@@ -14,18 +13,11 @@ export interface Props extends BaseProps {
   children: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Rotate180',
-})
-
 export const Rotate180 = (props: Props) => {
   const { children, style, className, on, ...rest } = props
-  const classes = useStyles()
 
   const childProps = {
-    className: cx(className, classes.transition, {
-      [classes.rotate180]: on,
-    }),
+    className: twMerge(cx(createRotate180ClassNames(on)), className),
     style,
     ...rest,
   }

package/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Rotate180 render with transformation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Rotate180-transition Rotate180-rotate180"
+      class="transition-transform duration-150 ease-in rotate-180"
     >
       Rotating component
     </div>
@@ -20,7 +20,7 @@ exports[`Rotate180 render without transformation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Rotate180-transition"
+      class="transition-transform duration-150 ease-in"
     >
       Rotating component
     </div>

package/src/utils/Transitions/Rotate180/styles.ts

@@ -1,11 +1,6 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    transition: {
-      transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    },
-    rotate180: {
-      transform: 'rotate(180deg)',
-    },
-  })
+export const createRotate180ClassNames = (on: boolean): string[] => [
+  'transition-transform',
+  'duration-150',
+  'ease-in-out',
+  ...(on ? ['rotate-180'] : []),
+]

package/src/utils/capitalize.ts

@@ -1 +1,9 @@
-export { default as capitalize } from '@material-ui/core/utils/capitalize'
+// Not equivalent to `text-transform: capitalize` — only the first letter of
+// the whole string is uppercased, not the first letter of each word.
+export const capitalize = (string: string): string => {
+  if (typeof string !== 'string') {
+    throw new Error('Picasso: capitalize(string) expects a string argument.')
+  }
+
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}

package/src/utils/index.ts

@@ -30,7 +30,8 @@ export {
   type OverridableComponent,
 } from '@toptal/picasso-shared'
 
-export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener'
+export { default as ClickAwayListener } from './ClickAwayListener'
+export type { ClickAwayListenerProps } from './ClickAwayListener'
 
 export { capitalize } from './capitalize'
 export { default as disableUnsupportedProps } from './disable-unsupported-props'