@toptal/picasso-modal 4.0.2 → 4.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,KAMN,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,wBAAwB,CAAA;AAgB/B,KAAK,cAAc,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;AACvD,KAAK,SAAS,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnC,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,qBAAqB;IACrB,IAAI,CAAC,EACD,QAAQ,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC5D,aAAa,CAAA;IACjB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;IACjD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAuDD,eAAO,MAAM,KAAK,8EA6JhB,CAAA;AAIF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,wBAAwB,CAAA;AAc/B,KAAK,cAAc,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;AACvD,KAAK,SAAS,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnC,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,qBAAqB;IACrB,IAAI,CAAC,EACD,QAAQ,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC5D,aAAa,CAAA;IACjB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;IACjD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAuDD,eAAO,MAAM,KAAK,8EA4KhB,CAAA;AAIF,eAAe,KAAK,CAAA"}

package/dist-package/src/Modal/Modal.js

@@ -9,14 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Modal as Dialog } from '@mui/base/Modal';
-import React, { forwardRef, useEffect, useRef, useCallback, useContext, } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import React, { forwardRef, useEffect, useRef, useContext } from 'react';
 import { usePicassoRoot, RootContext } from '@toptal/picasso-provider';
 import { CloseMinor16 } from '@toptal/picasso-icons';
 import { useCombinedRefs, ModalManager, usePageScrollLock, } from '@toptal/picasso-utils';
 import { ButtonCircular } from '@toptal/picasso-button';
-import { Fade } from '@toptal/picasso-fade';
-import { Backdrop } from '@toptal/picasso-backdrop';
 import ModalContext from '@toptal/picasso-modal-context';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { ModalPaper } from '../ModalPaper';
@@ -58,10 +56,11 @@ const generateKey = (() => {
 // eslint-disable-next-line react/display-name
 export const Modal = forwardRef(function Modal(_a, ref) {
     var { hideBackdrop = false, disableBackdropClick = false, size = 'medium', transitionDuration = 300, align = 'centered' } = _a, props = __rest(_a, ["hideBackdrop", "disableBackdropClick", "size", "transitionDuration", "align"]);
-    const { children, open, onBackdropClick, onClose, onOpen, className, style, container, paperProps, testIds, transitionProps, classes } = props, rest = __rest(props, ["children", "open", "onBackdropClick", "onClose", "onOpen", "className", "style", "container", "paperProps", "testIds", "transitionProps", "classes"]);
+    const { children, open, onBackdropClick, onClose, onOpen, onClick, className, style, container, paperProps, testIds, transitionProps, classes } = props, rest = __rest(props, ["children", "open", "onBackdropClick", "onClose", "onOpen", "onClick", "className", "style", "container", "paperProps", "testIds", "transitionProps", "classes"]);
     const picassoRootContainer = usePicassoRoot();
     const modalRef = useCombinedRefs(ref, useRef(null));
     const modalId = useRef(generateKey());
+    const wasOpen = useRef(false);
     const { rootRef } = useContext(RootContext);
     useEffect(() => {
         const handleDocumentFocus = () => {
@@ -100,33 +99,46 @@ export const Modal = forwardRef(function Modal(_a, ref) {
         };
     }, [open]);
     usePageScrollLock(open);
-    const handleClose = useCallback((_event, reason) => {
-        if (reason === 'escapeKeyDown' && onClose) {
-            onClose();
+    useEffect(() => {
+        if (open && !wasOpen.current) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        wasOpen.current = open;
+    }, [open, onOpen]);
+    const duration = (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.timeout) || transitionDuration;
+    const durationStyle = { transitionDuration: `${duration}ms` };
+    const resolvedContainer = (typeof container === 'function' ? container() : container) ||
+        picassoRootContainer;
+    const handlePopupClick = (event) => {
+        if (event.target === event.currentTarget && !disableBackdropClick) {
+            onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
-        else if (reason === 'backdropClick' && !disableBackdropClick) {
-            if (onBackdropClick) {
-                onBackdropClick();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (React.createElement(Dialog.Root, { open: open, modal: false, disablePointerDismissal: true, onOpenChange: isOpen => {
+            if (!isOpen) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }
-            if (onClose) {
-                onClose();
+        }, onOpenChangeComplete: isOpen => {
+            var _a;
+            if (!isOpen && modalRef.current) {
+                (_a = transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) === null || _a === void 0 ? void 0 : _a.call(transitionProps, modalRef.current);
             }
-        }
-    }, [disableBackdropClick, onBackdropClick, onClose]);
-    const duration = (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.timeout) || transitionDuration;
-    const backdropProps = { transitionDuration: duration };
-    return (React.createElement(Dialog, Object.assign({}, rest, { ref: modalRef, className: twMerge(className, 'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center'), style: style, slots: {
-            backdrop: Backdrop,
-        }, closeAfterTransition: true, slotProps: {
-            backdrop: backdropProps,
-        }, container: container || picassoRootContainer, hideBackdrop: hideBackdrop, onClose: handleClose, open: open, disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
-        : true, disableScrollLock: true }),
-        React.createElement(Fade, { in: open, onEnter: onOpen, onExited: transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited, timeout: transitionDuration },
-            React.createElement(ModalPaper, Object.assign({ size: size, align: align, tabIndex: -1 }, paperProps),
-                React.createElement(ModalContext.Provider, { value: true },
-                    children,
-                    onClose && (React.createElement(ButtonCircular, { "aria-label": 'Close', variant: 'flat', className: twMerge('absolute top-8 right-8', classes === null || classes === void 0 ? void 0 : classes.closeButton), onClick: onClose, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton },
-                        React.createElement(CloseMinor16, null))))))));
+        } },
+        React.createElement(Dialog.Portal, { container: resolvedContainer },
+            !hideBackdrop && (React.createElement(Dialog.Backdrop, { className: 'fixed z-modal inset-0 bg-black/50 transition-opacity data-starting-style:opacity-0 data-ending-style:opacity-0', style: durationStyle })),
+            React.createElement(Dialog.Popup, Object.assign({}, rest, { ref: modalRef, initialFocus: () => {
+                    var _a;
+                    return ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))
+                        ? undefined
+                        : modalRef.current;
+                }, className: twMerge(className, 'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center transition-opacity data-starting-style:opacity-0 data-ending-style:opacity-0'), style: Object.assign(Object.assign({}, style), durationStyle), onClick: handlePopupClick }),
+                React.createElement(ModalPaper, Object.assign({ size: size, align: align, tabIndex: -1 }, paperProps),
+                    React.createElement(ModalContext.Provider, { value: true },
+                        children,
+                        onClose && (React.createElement(ButtonCircular, { "aria-label": 'Close', variant: 'flat', className: twMerge('absolute top-8 right-8', classes === null || classes === void 0 ? void 0 : classes.closeButton), onClick: onClose, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton },
+                            React.createElement(CloseMinor16, null)))))))));
 });
 Modal.displayName = 'Modal';
 export default Modal;

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

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

package/dist-package/src/ModalContent/ModalContent.js

@@ -26,11 +26,11 @@ export const ModalContent = forwardRef(function ModalContent(props, ref) {
      */
     const modalContentRef = useCombinedRefs(ref);
     const { top, bottom } = useScrollableShades(modalContentRef);
-    const shadeClasses = 'z-[1] absolute pointer-events-none right-8 left-8 h-[112px]';
+    const shadeClasses = 'z-[1] absolute pointer-events-none right-8 left-8 h-[112px] opacity-0 transition-opacity duration-300 data-[active=true]:opacity-100';
     const gradientClasses = 'from-white to-transparent to-100% from-0% via-[2rem] via-white';
     return (React.createElement("div", { className: twMerge('flex relative flex-auto overflow-y-hidden', classes === null || classes === void 0 ? void 0 : classes.root) },
-        top && (React.createElement("div", { className: twMerge(shadeClasses, gradientClasses, classes === null || classes === void 0 ? void 0 : classes.topShade, 'top-0 bg-gradient-to-b') })),
-        bottom && (React.createElement("div", { className: twMerge(shadeClasses, gradientClasses, classes === null || classes === void 0 ? void 0 : classes.bottomShade, 'bottom-0 bg-gradient-to-t') })),
+        React.createElement("div", { "data-active": top, className: twMerge(shadeClasses, gradientClasses, classes === null || classes === void 0 ? void 0 : classes.topShade, 'top-0 bg-linear-to-b') }),
+        React.createElement("div", { "data-active": bottom, className: twMerge(shadeClasses, gradientClasses, classes === null || classes === void 0 ? void 0 : classes.bottomShade, 'bottom-0 bg-linear-to-t') }),
         React.createElement("div", Object.assign({}, rest, { style: style, ref: modalContentRef, className: twMerge('pt-6 px-8 pb-8 overflow-auto flex-auto', className) }), children)));
 });
 ModalContent.displayName = 'ModalContent';

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

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,mBAAmB,MAAM,+BAA+B,CAAA;AAO/D,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK;IAE9D;;;OAGG;MALG,6CAAgD,CAAQ,CAAA;IAE9D;;;OAGG;IACH,MAAM,eAAe,GAAG,eAAe,CAAiB,GAAG,CAAC,CAAA;IAE5D,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;IAE5D,MAAM,YAAY,GAChB,6DAA6D,CAAA;IAC/D,MAAM,eAAe,GACnB,gEAAgE,CAAA;IAElE,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAChB,2CAA2C,EAC3C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CACd;QAEA,GAAG,IAAI,CACN,6BACE,SAAS,EAAE,OAAO,CAChB,YAAY,EACZ,eAAe,EACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EACjB,wBAAwB,CACzB,GACD,CACH;QACA,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,OAAO,CAChB,YAAY,EACZ,eAAe,EACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACpB,2BAA2B,CAC5B,GACD,CACH;QACD,6CACM,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,OAAO,CAChB,wCAAwC,EACxC,SAAS,CACV,KAEA,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,mBAAmB,MAAM,+BAA+B,CAAA;AAO/D,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK;IAE9D;;;OAGG;MALG,6CAAgD,CAAQ,CAAA;IAE9D;;;OAGG;IACH,MAAM,eAAe,GAAG,eAAe,CAAiB,GAAG,CAAC,CAAA;IAE5D,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;IAE5D,MAAM,YAAY,GAChB,sIAAsI,CAAA;IACxI,MAAM,eAAe,GACnB,gEAAgE,CAAA;IAElE,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAChB,2CAA2C,EAC3C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CACd;QAED,4CACe,GAAG,EAChB,SAAS,EAAE,OAAO,CAChB,YAAY,EACZ,eAAe,EACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EACjB,sBAAsB,CACvB,GACD;QAEF,4CACe,MAAM,EACnB,SAAS,EAAE,OAAO,CAChB,YAAY,EACZ,eAAe,EACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACpB,yBAAyB,CAC1B,GACD;QAEF,6CACM,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,OAAO,CAChB,wCAAwC,EACxC,SAAS,CACV,KAEA,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-modal",
-  "version": "4.0.2",
+  "version": "4.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
   "description": "Toptal UI components library - Modal",
   "publishConfig": {
     "access": "public"
@@ -18,35 +18,33 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.58",
+    "@base-ui/react": "^1.4.1",
     "debounce": "^1.2.1",
-    "@toptal/picasso-backdrop": "2.0.1",
-    "@toptal/picasso-fade": "1.0.10",
-    "@toptal/picasso-paper": "4.0.6",
-    "@toptal/picasso-shared": "16.0.0",
-    "@toptal/picasso-button": "5.0.2",
-    "@toptal/picasso-icons": "1.15.3",
-    "@toptal/picasso-typography": "5.1.0",
-    "@toptal/picasso-utils": "4.0.1",
-    "@toptal/picasso-modal-context": "1.0.1"
+    "@toptal/picasso-paper": "4.0.7-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-button": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-icons": "1.15.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-typography": "5.1.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-utils": "4.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-modal-context": "1.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-provider": "*",
-    "react": ">=16.12.0 < 19.0.0",
-    "@toptal/picasso-tailwind": ">=2.5.0",
-    "@toptal/picasso-tailwind-merge": "^2.0.0"
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "react": ">=16.12.0",
+    "@toptal/picasso-tailwind": "4.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "6.0.0",
-    "@toptal/picasso-tailwind-merge": "2.0.5",
-    "@toptal/picasso-test-utils": "2.0.1"
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
   },
   "files": [
     "dist-package/**",

package/src/Modal/Modal.tsx

@@ -1,12 +1,6 @@
 import type { ReactNode, HTMLAttributes } from 'react'
-import { Modal as Dialog } from '@mui/base/Modal'
-import React, {
-  forwardRef,
-  useEffect,
-  useRef,
-  useCallback,
-  useContext,
-} from 'react'
+import { Dialog } from '@base-ui/react/dialog'
+import React, { forwardRef, useEffect, useRef, useContext } from 'react'
 import type {
   BaseProps,
   SizeType,
@@ -20,8 +14,6 @@ import {
   usePageScrollLock,
 } from '@toptal/picasso-utils'
 import { ButtonCircular } from '@toptal/picasso-button'
-import { Fade } from '@toptal/picasso-fade'
-import { Backdrop } from '@toptal/picasso-backdrop'
 import ModalContext from '@toptal/picasso-modal-context'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
@@ -136,6 +128,7 @@ export const Modal = forwardRef<HTMLDivElement, Props>(function Modal(
     onBackdropClick,
     onClose,
     onOpen,
+    onClick,
     className,
     style,
     container,
@@ -151,6 +144,7 @@ export const Modal = forwardRef<HTMLDivElement, Props>(function Modal(
     useRef<HTMLDivElement>(null)
   )
   const modalId = useRef(generateKey())
+  const wasOpen = useRef(false)
   const { rootRef } = useContext(RootContext)
 
   useEffect(() => {
@@ -205,76 +199,89 @@ export const Modal = forwardRef<HTMLDivElement, Props>(function Modal(
 
   usePageScrollLock(open)
 
-  const handleClose = useCallback(
-    (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
-      if (reason === 'escapeKeyDown' && onClose) {
-        onClose()
-      } else if (reason === 'backdropClick' && !disableBackdropClick) {
-        if (onBackdropClick) {
-          onBackdropClick()
-        }
-
-        if (onClose) {
-          onClose()
-        }
-      }
-    },
-    [disableBackdropClick, onBackdropClick, onClose]
-  )
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      onOpen?.()
+    }
+    wasOpen.current = open
+  }, [open, onOpen])
 
   const duration = transitionProps?.timeout || transitionDuration
-  const backdropProps = { transitionDuration: duration }
+  const durationStyle = { transitionDuration: `${duration}ms` }
+
+  const resolvedContainer =
+    (typeof container === 'function' ? container() : container) ||
+    picassoRootContainer
+
+  const handlePopupClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget && !disableBackdropClick) {
+      onBackdropClick?.()
+      onClose?.()
+    }
+
+    onClick?.(event)
+  }
 
   return (
-    <Dialog
-      {...rest}
-      ref={modalRef}
-      className={twMerge(
-        className,
-        'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center'
-      )}
-      style={style}
-      slots={{
-        backdrop: Backdrop,
+    <Dialog.Root
+      open={open}
+      modal={false}
+      disablePointerDismissal
+      onOpenChange={isOpen => {
+        if (!isOpen) {
+          onClose?.()
+        }
       }}
-      closeAfterTransition
-      slotProps={{
-        backdrop: backdropProps,
+      onOpenChangeComplete={isOpen => {
+        if (!isOpen && modalRef.current) {
+          transitionProps?.onExited?.(modalRef.current)
+        }
       }}
-      container={container || picassoRootContainer}
-      hideBackdrop={hideBackdrop}
-      onClose={handleClose}
-      open={open}
-      disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
-      disableScrollLock
     >
-      <Fade
-        in={open}
-        onEnter={onOpen}
-        onExited={transitionProps?.onExited}
-        timeout={transitionDuration}
-      >
-        <ModalPaper size={size} align={align} tabIndex={-1} {...paperProps}>
-          <ModalContext.Provider value>
-            {children}
-            {onClose && (
-              <ButtonCircular
-                aria-label='Close'
-                variant='flat'
-                className={twMerge(
-                  'absolute top-8 right-8',
-                  classes?.closeButton
-                )}
-                onClick={onClose}
-                data-testid={testIds?.closeButton}
-              >
-                <CloseMinor16 />
-              </ButtonCircular>
-            )}
-          </ModalContext.Provider>
-        </ModalPaper>
-      </Fade>
-    </Dialog>
+      <Dialog.Portal container={resolvedContainer}>
+        {!hideBackdrop && (
+          <Dialog.Backdrop
+            className='fixed z-modal inset-0 bg-black/50 transition-opacity data-starting-style:opacity-0 data-ending-style:opacity-0'
+            style={durationStyle}
+          />
+        )}
+        <Dialog.Popup
+          {...rest}
+          ref={modalRef}
+          initialFocus={() =>
+            modalRef.current?.contains(document.activeElement)
+              ? undefined
+              : modalRef.current
+          }
+          className={twMerge(
+            className,
+            'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center transition-opacity data-starting-style:opacity-0 data-ending-style:opacity-0'
+          )}
+          style={{ ...style, ...durationStyle }}
+          onClick={handlePopupClick}
+        >
+          <ModalPaper size={size} align={align} tabIndex={-1} {...paperProps}>
+            <ModalContext.Provider value>
+              {children}
+              {onClose && (
+                <ButtonCircular
+                  aria-label='Close'
+                  variant='flat'
+                  className={twMerge(
+                    'absolute top-8 right-8',
+                    classes?.closeButton
+                  )}
+                  onClick={onClose}
+                  data-testid={testIds?.closeButton}
+                >
+                  <CloseMinor16 />
+                </ButtonCircular>
+              )}
+            </ModalContext.Provider>
+          </ModalPaper>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 })
 

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

@@ -5,67 +5,125 @@ exports[`Modal renders 1`] = `
   id="modal-root"
 >
   <div
-    aria-hidden="true"
     class="Picasso-root"
-  />
+    data-base-ui-inert=""
+  >
+    <span
+      data-base-ui-focus-guard=""
+      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:"
+      style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"
+    />
+    <span
+      data-base-ui-focus-guard=""
+      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
-    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=""
+      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=""
+      id=":r0:"
       role="dialog"
-      style="transition-duration: 300ms; opacity: 1;"
+      style="--nested-dialogs: 0; transition-duration: 300ms;"
       tabindex="-1"
     >
       <div
-        class="pr-6 mt-8 mx-8 mb-0"
+        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"
       >
-        <h2
-          class="m-0 text-xl text-black font-semibold"
+        <div
+          class="pr-6 mt-8 mx-8 mb-0"
         >
-          Title
-        </h2>
-      </div>
-      <div
-        class="flex relative flex-auto overflow-y"
-      >
+          <h2
+            class="m-0 text-xl text-black font-semibold"
+          >
+            Title
+          </h2>
+        </div>
         <div
-          class="pt-6 px-8 pb-8 overflow-auto flex-auto"
+          class="flex relative flex-auto overflow-y"
         >
-          Modal test content
+          <div
+            class="z-[1] absolute pointer-events right-8 left-8 h-[112px] opacity-0 transition-opacity duration-300 data-[active=true]:opacity-100 from-white to-transparent to-100% from-0% via-[2rem] via-white top-0 bg-linear-to"
+            data-active="false"
+          />
+          <div
+            class="z-[1] absolute pointer-events right-8 left-8 h-[112px] opacity-0 transition-opacity duration-300 data-[active=true]:opacity-100 from-white to-transparent to-100% from-0% via-[2rem] via-white bottom-0 bg-linear-to"
+            data-active="false"
+          />
+          <div
+            class="pt-6 px-8 pb-8 overflow-auto flex-auto"
+          >
+            Modal test content
+          </div>
         </div>
-      </div>
-      <div
-        class="mt-0 mx-8 mb-8 text-right"
-      >
-        <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 border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
-          data-component-type="button"
-          role="button"
-          tabindex="0"
-          type="button"
+        <div
+          class="mt-0 mx-8 mb-8 text-right"
         >
-          <span
-            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+          <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 border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
+            data-component-type="button"
+            role="button"
+            tabindex="0"
+            type="button"
           >
-            Cancel
-          </span>
-        </button>
+            <span
+              class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+            >
+              Cancel
+            </span>
+          </button>
+          <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-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
+            data-component-type="button"
+            role="button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="items-center inline-flex font-semibold whitespace-nowrap text-button"
+            >
+              Update
+            </span>
+          </button>
+        </div>
         <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-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
+          aria-label="Close"
+          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute top-8 right-8"
           data-component-type="button"
+          data-testid="close-modal"
           role="button"
           tabindex="0"
           type="button"
@@ -73,37 +131,25 @@ exports[`Modal renders 1`] = `
           <span
             class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
-            Update
+            <svg
+              class="fill-current inline-block text-inherit h-[1em] align-[-.125em]"
+              style="min-width: 16px; min-height: 16px;"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
+              />
+            </svg>
           </span>
         </button>
       </div>
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute top-8 right-8"
-        data-component-type="button"
-        data-testid="close-modal"
-        role="button"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
-        >
-          <svg
-            class="fill-current inline-block text-inherit h-[1em] align-[-.125em]"
-            style="min-width: 16px; min-height: 16px;"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
-            />
-          </svg>
-        </span>
-      </button>
     </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>
@@ -118,8 +164,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"
@@ -132,47 +178,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=":r5:"
       >
         <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>
-            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=":r5:"
+        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>
@@ -211,8 +299,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"
@@ -226,8 +314,8 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       </button>
       <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"
@@ -240,62 +328,146 @@ 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=":rg:"
       >
         <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=":rc:"
           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>
+      <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=":rg:"
+        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
-        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=":rh:"
       >
         <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=":re:"
           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=":rh:"
+        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/Modal/test.tsx

@@ -4,7 +4,7 @@ import {
   screen,
   cleanup,
   fireEvent,
-  waitForElementToBeRemoved,
+  waitFor,
 } from '@toptal/picasso-test-utils'
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 import { useModal } from '@toptal/picasso-utils'
@@ -102,7 +102,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/ModalContent/ModalContent.tsx

@@ -24,7 +24,7 @@ export const ModalContent = forwardRef<HTMLDivElement, Props>(
     const { top, bottom } = useScrollableShades(modalContentRef)
 
     const shadeClasses =
-      'z-[1] absolute pointer-events-none right-8 left-8 h-[112px]'
+      'z-[1] absolute pointer-events-none right-8 left-8 h-[112px] opacity-0 transition-opacity duration-300 data-[active=true]:opacity-100'
     const gradientClasses =
       'from-white to-transparent to-100% from-0% via-[2rem] via-white'
 
@@ -35,26 +35,26 @@ export const ModalContent = forwardRef<HTMLDivElement, Props>(
           classes?.root
         )}
       >
-        {top && (
-          <div
-            className={twMerge(
-              shadeClasses,
-              gradientClasses,
-              classes?.topShade,
-              'top-0 bg-gradient-to-b'
-            )}
-          />
-        )}
-        {bottom && (
-          <div
-            className={twMerge(
-              shadeClasses,
-              gradientClasses,
-              classes?.bottomShade,
-              'bottom-0 bg-gradient-to-t'
-            )}
-          />
-        )}
+        <div
+          data-active={top}
+          className={twMerge(
+            shadeClasses,
+            gradientClasses,
+            classes?.topShade,
+            'top-0 bg-linear-to-b'
+          )}
+        />
+
+        <div
+          data-active={bottom}
+          className={twMerge(
+            shadeClasses,
+            gradientClasses,
+            classes?.bottomShade,
+            'bottom-0 bg-linear-to-t'
+          )}
+        />
+
         <div
           {...rest}
           style={style}