Merge branch 'master' into revert-28965-scrollbar

change/@fluentui-react-drawer-2717e06f-3daf-42cf-b77c-dcf03e0f40c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: organize code imports",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-d34a5b7e-7de6-4bcc-a0b1-095e88a476b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "test: add e2e tests for base Drawer components",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-3d0f8452-1cf1-433e-9c40-cfdaae09343b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: `useOnScrollOutside` should invoke callback on dragging scrollbar",
+  "packageName": "@fluentui/react-utilities",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/.eslintrc.json

@@ -1,4 +1,13 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "root": true,
+  "overrides": [
+    {
+      "files": ["./src/e2e/*.tsx"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off",
+        "react/jsx-no-bind": "off"
+      }
+    }
+  ]
 }

packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx

@@ -2,65 +2,30 @@ import * as React from 'react';
 import { mount } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
-import { dialogSurfaceClassNames } from '@fluentui/react-dialog';
 
+import { testDrawerBaseScenarios } from '../../e2e/DrawerShared';
 import { Drawer } from './Drawer';
-import type { DrawerProps } from './Drawer.types';
+import { drawerOverlayClassNames } from '../DrawerOverlay';
+import { drawerInlineClassNames } from '../DrawerInline';
 
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
 };
-const backdropSelector = `.${dialogSurfaceClassNames.backdrop}`;
-
-const ControlledDrawer = ({ open: initialOpen = false, ...props }: DrawerProps) => {
-  const [isOpen, setIsOpen] = React.useState(initialOpen);
-
-  React.useEffect(() => setIsOpen(initialOpen), [initialOpen]);
-
-  return <Drawer id="drawer" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)} {...props} />;
-};
 
 describe('Drawer', () => {
-  it('render drawer component', () => {
-    mountFluent(<Drawer id="drawer" />);
-
-    cy.get('#drawer').should('not.exist');
-  });
+  testDrawerBaseScenarios(Drawer);
 
-  it('should toggle drawer visibility on open', () => {
-    const ExampleDrawer = () => {
-      const [open, setOpen] = React.useState(false);
+  describe('type prop', () => {
+    it('should render DrawerOverlay by default', () => {
+      mountFluent(<Drawer id="drawer" open />);
 
-      return (
-        <>
-          <ControlledDrawer position="end" open={open} />
-          <button id="button" onClick={() => setOpen(true)}>
-            Open
-          </button>
-        </>
-      );
-    };
-
-    mountFluent(<ExampleDrawer />);
-
-    cy.get('#drawer').should('not.exist');
-    cy.get('#button').click();
-    cy.get('#drawer').should('exist');
-  });
-
-  it('should dismiss the drawer when clicking the backdrop', () => {
-    mountFluent(<ControlledDrawer open />);
-
-    cy.get('#drawer').should('exist');
-    cy.get(backdropSelector).click({ force: true });
-    cy.get('#drawer').should('not.exist');
-  });
+      cy.get(`.${drawerOverlayClassNames.root}`).should('exist');
+    });
 
-  it('should NOT dismiss the drawer when clicking on the backdrop if `modalType` is `alert`', () => {
-    mountFluent(<ControlledDrawer open modalType={'alert'} />);
+    it('should render DrawerInline when type is `inline`', () => {
+      mountFluent(<Drawer id="drawer" type="inline" open />);
 
-    cy.get('#drawer').should('exist');
-    cy.get(backdropSelector).click({ force: true });
-    cy.get('#drawer').should('exist');
+      cy.get(`.${drawerInlineClassNames.root}`).should('exist');
+    });
   });
 });

packages/react-components/react-drawer/src/components/Drawer/Drawer.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { Drawer } from './Drawer';
-import { isConformant } from '../../testing/isConformant';
 import { resetIdsForTests } from '@fluentui/react-utilities';
-import { DrawerProps } from './Drawer.types';
+
+import { isConformant } from '../../testing/isConformant';
+import { Drawer } from './Drawer';
+import type { DrawerProps } from './Drawer.types';
 
 describe('Drawer', () => {
   const testid = 'test';

packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts

@@ -1,6 +1,7 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerOverlayProps } from '../DrawerOverlay/DrawerOverlay.types';
-import { DrawerInlineProps } from '../DrawerInline/DrawerInline.types';
+
+import type { DrawerOverlayProps } from '../DrawerOverlay';
+import type { DrawerInlineProps } from '../DrawerInline';
 
 export type DrawerSlots = {
   /**

packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx

@@ -2,6 +2,7 @@
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
 import { assertSlots } from '@fluentui/react-utilities';
+
 import type { DrawerState, DrawerSlots } from './Drawer.types';
 
 /**

packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 
 import type { DrawerProps, DrawerState } from './Drawer.types';
-import { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';
-import { DrawerInline } from '../DrawerInline/DrawerInline';
+import { DrawerOverlay } from '../DrawerOverlay';
+import { DrawerInline } from '../DrawerInline';
 
 /**
  * Create the state required to render Drawer.

packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts

@@ -1,7 +1,8 @@
 import { mergeClasses } from '@griffel/react';
-import type { DrawerSlots, DrawerState } from './Drawer.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+import type { DrawerSlots, DrawerState } from './Drawer.types';
+
 export const drawerClassNames: SlotClassNames<DrawerSlots> = {
   root: 'fui-Drawer',
 };

packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx

@@ -1,7 +1,8 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
-import type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types';
+
+import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';
 
 /**
  * Render the final JSX of DrawerBody

packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+
 import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts

@@ -1,7 +1,8 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';
 
 export const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {
   root: 'fui-DrawerBody',

packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx

@@ -1,7 +1,8 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
-import type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';
+
+import type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';
 
 /**
  * Render the final JSX of DrawerFooter

packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+
 import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts

@@ -1,7 +1,8 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+import type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';
 
 export const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {
   root: 'fui-DrawerFooter',

packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx

@@ -1,6 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
+
 import type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+
 import type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts

@@ -1,7 +1,8 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+import type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';
 
 export const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {
   root: 'fui-DrawerHeader',

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx

@@ -1,7 +1,8 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
-import type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } from './DrawerHeaderNavigation.types';
+
+import type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
 
 /**
  * Render the final JSX of DrawerHeaderNavigation

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+
 import type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts

@@ -1,7 +1,8 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+import type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
 
 export const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {
   root: 'fui-DrawerHeaderNavigation',

packages/react-components/react-drawer/src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx

@@ -1,6 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
+
 import type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+
 import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts

@@ -1,9 +1,10 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
 import { tokens } from '@fluentui/react-theme';
 
+import type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
+
 export const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {
   root: 'fui-DrawerHeaderTitle',
   heading: 'fui-DrawerHeaderTitle__heading',

packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.cy.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+import { testDrawerBaseScenarios } from '../../e2e/DrawerShared';
+import { DrawerInline } from './DrawerInline';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+describe('DrawerInline', () => {
+  testDrawerBaseScenarios(DrawerInline);
+
+  describe('separator prop', () => {
+    it('should not render any border when separator is false', () => {
+      mountFluent(<DrawerInline id="drawer" position="start" open />);
+
+      cy.get('#drawer').should('not.have.css', `border-right-width`, '1px');
+      cy.get('#drawer').should('not.have.css', `border-left-width`, '1px');
+    });
+
+    it('should render correct border when when position is `start`', () => {
+      mountFluent(<DrawerInline id="drawer" position="start" separator open />);
+
+      cy.get('#drawer').should('not.have.css', `border-left-width`, '1px');
+      cy.get('#drawer').should('have.css', `border-right-width`, '1px');
+    });
+
+    it('should render correct border when when position is `end`', () => {
+      mountFluent(<DrawerInline id="drawer" position="end" separator open />);
+
+      cy.get('#drawer').should('not.have.css', `border-right-width`, '1px');
+      cy.get('#drawer').should('have.css', `border-left-width`, '1px');
+    });
+  });
+});

packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.types.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';
+
+import { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';
 
 export type DrawerInlineSlots = {
   root: Slot<'div'>;

packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx

@@ -1,6 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
+
 import type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';
 
 /**

packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot, useControllableState, useMergedRefs } from '@fluentui/react-utilities';
 import { useMotion } from '@fluentui/react-motion-preview';
 
 import type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';
-import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 
 /**
  * Create the state required to render DrawerInline.

packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts

@@ -4,7 +4,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 
 import type { DrawerInlineSlots, DrawerInlineState } from './DrawerInline.types';
-import { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';
+import { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
 
 export const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots> = {
   root: 'fui-DrawerInline',