Panel: onClosed and onOpened fixed in React 18 strict mode (microsoft…

…#26749)

* Panel: Fix onOpened callback in React 18

* typing

* use internal async, but create new async on each mount

* Add events to didMount and remove both from constructor

* reset the app file

* change file

* Update packages/react/src/components/Panel/Panel.base.tsx

Co-authored-by: Esteban Munoz Facusse <[email protected]>

* remove the button as it has typing issues in r18 context

* linting

* move functions outside of component

* Update change/@fluentui-react-eff13953-3080-4ee9-8ed5-6a778a7f692f.json

Co-authored-by: Esteban Munoz Facusse <[email protected]>

---------

Co-authored-by: Esteban Munoz Facusse <[email protected]>

apps/react-18-tests-v8/src/components/Panel.Basic.Example.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Panel } from '@fluentui/react/lib/Panel';
+import { useBoolean } from '@fluentui/react-hooks';
+
+const handleOpen = () => console.log('onOpen');
+const handleOpened = () => console.log('onOpened');
+
+export const PanelBasicExample: React.FunctionComponent = () => {
+  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
+
+  return (
+    <div>
+      <button onClick={openPanel}> Open panel </button>
+      <Panel
+        onOpen={handleOpen}
+        onOpened={handleOpened}
+        headerText="Sample panel"
+        isOpen={isOpen}
+        onDismiss={dismissPanel}
+        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
+        closeButtonAriaLabel="Close"
+      >
+        <p>Content goes here.</p>
+      </Panel>
+    </div>
+  );
+};

change/@fluentui-react-eff13953-3080-4ee9-8ed5-6a778a7f692f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Panel async and events to work in concurrent mode",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/Panel/Panel.base.tsx

@@ -88,8 +88,6 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
     const { allowTouchBodyScroll = false } = this.props;
     this._allowTouchBodyScroll = allowTouchBodyScroll;
 
-    this._async = new Async(this);
-    this._events = new EventGroup(this);
     initializeComponentRef(this);
 
     warnDeprecations(COMPONENT_NAME, props, {
@@ -107,6 +105,9 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
   }
 
   public componentDidMount(): void {
+    this._async = new Async(this);
+    this._events = new EventGroup(this);
+
     this._events.on(window, 'resize', this._updateFooterPosition);
 
     if (this._shouldListenForOuterClick(this.props)) {
@@ -428,7 +429,7 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
 
     this._animationCallback = this._async.setTimeout(() => {
       this.setState({ visibility: newVisibilityState });
-      this._onTransitionComplete();
+      this._onTransitionComplete(newVisibilityState);
     }, 200);
   };
 
@@ -442,14 +443,13 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
     this.dismiss(ev);
   };
 
-  private _onTransitionComplete = (): void => {
+  private _onTransitionComplete = (newVisibilityState: PanelVisibilityState): void => {
     this._updateFooterPosition();
-
-    if (this.state.visibility === PanelVisibilityState.open && this.props.onOpened) {
+    if (newVisibilityState === PanelVisibilityState.open && this.props.onOpened) {
       this.props.onOpened();
     }
 
-    if (this.state.visibility === PanelVisibilityState.closed && this.props.onDismissed) {
+    if (newVisibilityState === PanelVisibilityState.closed && this.props.onDismissed) {
       this.props.onDismissed();
     }
   };