[pull] main from chakra-ui:main

e2e/drawer.e2e.ts

@@ -25,7 +25,7 @@ test.describe("drawer", () => {
     await I.seeContent()
     await I.waitForOpenState()
 
-    await I.clickOutsideSheet()
+    await I.clickOutside()
 
     await I.dontSeeContent()
     await I.dontSeeBackdrop()
@@ -177,52 +177,3 @@ test.describe("drawer [snapPoints]", () => {
     expect(currentHeight).toBeCloseTo(250, 0)
   })
 })
-
-test.describe("drawer [defaultSnapPoint]", () => {
-  test.beforeEach(async ({ page }) => {
-    I = new DrawerModel(page)
-    await I.goto("/drawer-default-active-snap-point")
-  })
-
-  test("should open at default snap point and drag to 250px and 100%", async () => {
-    await I.clickTrigger()
-    await I.seeContent()
-    await I.waitForOpenState()
-
-    // First, measure full height at the 100% snap point.
-    await I.dragGrabber("up", 800)
-    await I.waitForSnapComplete()
-
-    const fullHeight = await I.getContentVisibleHeight()
-    const viewportHeight = await I.page.evaluate(() => window.innerHeight)
-    const lowerHeight = Math.min(fullHeight, viewportHeight * 0.25)
-
-    // Close and reopen to test default snap point
-    await I.pressKey("Escape")
-    await I.dontSeeContent()
-    await I.waitForClosedState()
-
-    await I.clickTrigger()
-    await I.seeContent()
-    await I.waitForOpenState()
-
-    // Should open at default snap point (25%)
-    await I.waitForVisibleHeightNear(lowerHeight, 6)
-
-    // Drag up to reach 250px snap point using distance from measured default height.
-    const dragTo250 = Math.max(80, Math.ceil(250 - lowerHeight + 40))
-    await I.dragGrabber("up", dragTo250)
-    await I.waitForSnapComplete()
-
-    // Should have snapped to 250px fixed snap point
-    await I.waitForVisibleHeightNear(250, 6)
-
-    // Drag up to reach full height (100%) from the 250px snap point.
-    const dragToFull = Math.max(100, Math.ceil(fullHeight - 250 + 40))
-    await I.dragGrabber("up", dragToFull)
-    await I.waitForSnapComplete()
-
-    // Should be at maximum height (100% snap point)
-    await I.waitForVisibleHeightNear(fullHeight, 6)
-  })
-})

e2e/models/drawer.model.ts

@@ -41,7 +41,7 @@ export class DrawerModel extends Model {
   }
 
   private get scrollable() {
-    return this.page.locator(".scrollable")
+    return this.page.locator("[data-testid=scrollable]")
   }
 
   clickTrigger(opts: { delay?: number } = {}) {
@@ -118,8 +118,8 @@ export class DrawerModel extends Model {
     return scrollTop === 0
   }
 
-  clickOutsideSheet() {
-    return this.page.locator("main").click({ position: { x: 5, y: 5 } })
+  override clickOutside() {
+    return this.page.locator("body").click({ force: true, position: { x: 5, y: 5 } })
   }
 
   async waitForOpenState() {

examples/next-ts/pages/drawer.tsx

@@ -34,7 +34,7 @@ export default function Page() {
             <div data-no-drag className={styles.noDrag}>
               No drag area
             </div>
-            <div className={styles.scrollable}>
+            <div className={styles.scrollable} data-testid="scrollable">
               {Array.from({ length: 100 }).map((_element, index) => (
                 <div key={index}>Item {index}</div>
               ))}