feat(transition): No longer use findDOMNode for transitions

chore(transition): updated packages and documentation for new transition API chore(transition): Update states and tree to new transition API chore(transition): update menu for new transition API chore(transition): converted most of the remaining packages for new transition API chore(transition): partially converted tabs package to new transition API chore(transition): Removed the temporary transition2 package chore(transition): Update tabs to use new transition API
mlaursen · Nov 24, 2021 · cb952da · cb952da
1 parent 2d79f93
commit cb952da
Show file tree

Hide file tree

Showing 124 changed files with 7,721 additions and 3,831 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,6 @@
     "@types/react": "^17.0.36",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/react-transition-group": "^4.4.3",
     "chokidar": "^3.5.2",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",

diff --git a/packages/alert/package.json b/packages/alert/package.json
@@ -38,8 +38,7 @@
     "@react-md/transition": "^3.1.0",
     "@react-md/typography": "^3.1.0",
     "@react-md/utils": "^3.1.0",
-    "classnames": "^2.3.1",
-    "react-transition-group": "^4.4.2"
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "react": "^17.0.2",

diff --git a/packages/alert/src/Toast.tsx b/packages/alert/src/Toast.tsx
@@ -1,14 +1,16 @@
 import { forwardRef, HTMLAttributes, ReactNode } from "react";
 import cn from "classnames";
-import CSSTransition from "react-transition-group/CSSTransition";
-import { OverridableCSSTransitionProps } from "@react-md/transition";
+import {
+  CSSTransition,
+  CSSTransitionComponentProps,
+} from "@react-md/transition";
 import { bem } from "@react-md/utils";
 
 import { DEFAULT_TOAST_CLASSNAMES, DEFAULT_TOAST_TIMEOUT } from "./constants";
 
 export interface ToastProps
   extends HTMLAttributes<HTMLDivElement>,
-    Omit<OverridableCSSTransitionProps, "mountOnEnter" | "unmountOnExit"> {
+    Omit<CSSTransitionComponentProps, "temporary"> {
   /**
    * Boolean if the main message content should be stacked above the action
    * button.  This prop is invalid if an `action` is not provided.
@@ -62,12 +64,14 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
     visible,
     ...props
   },
-  ref
+  nodeRef
 ) {
   return (
     <CSSTransition
-      in={visible}
       appear
+      nodeRef={nodeRef}
+      temporary
+      transitionIn={visible}
       onEnter={onEnter}
       onEntering={onEntering}
       onEntered={onEntered}
@@ -76,12 +80,9 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
       onExited={onExited}
       timeout={timeout}
       classNames={classNames}
-      mountOnEnter
-      unmountOnExit
     >
       <div
         {...props}
-        ref={ref}
         className={cn(
           block({
             stacked,

diff --git a/packages/alert/src/constants.ts b/packages/alert/src/constants.ts
@@ -1,12 +1,22 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type {
+  CSSTransitionClassNamesObject,
+  TransitionTimeout,
+} from "@react-md/transition";
 
+/**
+ * @remarks \@since 2.4.0
+ */
 export const DEFAULT_TOAST_TIMEOUT: TransitionTimeout = 150;
-export const DEFAULT_TOAST_CLASSNAMES: CSSTransitionClassNames = {
-  appear: "rmd-toast--enter",
-  appearActive: "rmd-toast--enter-active",
-  enter: "rmd-toast--enter",
-  enterActive: "rmd-toast--enter-active",
-  exit: "rmd-toast--exit",
-  exitActive: "rmd-toast--exit-active",
-};
+
+/**
+ * @remarks \@since 2.4.0
+ */
+export const DEFAULT_TOAST_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =
+  {
+    appear: "rmd-toast--enter",
+    appearActive: "rmd-toast--enter-active",
+    enter: "rmd-toast--enter",
+    enterActive: "rmd-toast--enter-active",
+    exit: "rmd-toast--exit",
+    exitActive: "rmd-toast--exit-active",
+  };
diff --git a/packages/autocomplete/src/AutoComplete.tsx b/packages/autocomplete/src/AutoComplete.tsx
@@ -173,20 +173,16 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
           }}
         />
         <ScaleTransition
+          nodeRef={listboxRef}
           portal={portal}
           portalInto={portalInto}
           portalIntoId={portalIntoId}
           vertical
-          visible={visible}
+          transitionIn={visible}
           {...transitionHooks}
+          className={cn(listbox({ temporary: true }), listboxClassName)}
         >
-          <List
-            id={suggestionsId}
-            role="listbox"
-            ref={listboxRef}
-            style={fixedStyle}
-            className={cn(listbox({ temporary: true }), listboxClassName)}
-          >
+          <List id={suggestionsId} role="listbox" style={fixedStyle}>
             {beforeResultsChildren}
             {filteredData.map((datum, i) => {
               const resultId = getResultId(suggestionsId, i);

diff --git a/packages/autocomplete/src/types.ts b/packages/autocomplete/src/types.ts
@@ -1,8 +1,11 @@
-import { CSSProperties, ReactNode } from "react";
-import { ListboxOptionProps, TextFieldProps } from "@react-md/form";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OptionalFixedPositionOptions } from "@react-md/transition";
-import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
+import type { CSSProperties, ReactNode } from "react";
+import type { ListboxOptionProps, TextFieldProps } from "@react-md/form";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type {
+  CalculateFixedPositionOptions,
+  CaseInsensitiveOptions,
+  PositionWidth,
+} from "@react-md/utils";
 
 /**
  * The supported autocompletion types.
@@ -102,7 +105,7 @@ export interface AutoCompleteResult {
 export type AutoCompleteHandler = (result: AutoCompleteResult) => void;
 
 export interface AutoCompleteListboxPositionOptions
-  extends Omit<OptionalFixedPositionOptions, "width"> {
+  extends Omit<CalculateFixedPositionOptions, "width"> {
   /**
    * The sizing behavior for the listbox. It will default to have the same width
    * as the select button, but it is also possible to either have the

diff --git a/packages/autocomplete/src/useAutoComplete.ts b/packages/autocomplete/src/useAutoComplete.ts
@@ -5,15 +5,17 @@ import {
   HTMLAttributes,
   KeyboardEventHandler,
   MouseEventHandler,
-  MutableRefObject,
   Ref,
   useCallback,
   useEffect,
   useRef,
   useState,
 } from "react";
 import { ListElement } from "@react-md/list";
-import { TransitionHooks, useFixedPositioning } from "@react-md/transition";
+import {
+  FixedPositioningTransitionCallbacks,
+  useFixedPositioning,
+} from "@react-md/transition";
 import {
   ItemRefList,
   MovementPresets,
@@ -77,15 +79,15 @@ export interface AutoCompleteReturnValue {
   activeId: string;
   itemRefs: ItemRefList<HTMLLIElement>;
   filteredData: readonly AutoCompleteData[];
-  listboxRef: MutableRefObject<ListElement | null>;
+  listboxRef: Ref<ListElement>;
   handleBlur: FocusEventHandler<HTMLInputElement>;
   handleFocus: FocusEventHandler<HTMLInputElement>;
   handleClick: MouseEventHandler<HTMLInputElement>;
   handleChange: ChangeEventHandler<HTMLInputElement>;
   handleKeyDown: KeyboardEventHandler<HTMLInputElement>;
   handleAutoComplete: (index: number) => void;
   fixedStyle: CSSProperties | undefined;
-  transitionHooks: Required<TransitionHooks>;
+  transitionHooks: Required<FixedPositioningTransitionCallbacks>;
 }
 
 /**
@@ -308,7 +310,7 @@ export function useAutoComplete({
     ]
   );
 
-  const listboxRef = useRef<ListElement | null>(null);
+  const nodeRef = useRef<ListElement | null>(null);
   const {
     activeId,
     itemRefs,
@@ -330,7 +332,7 @@ export function useAutoComplete({
       // the input element instead of the listbox. So need to implement the
       // scroll into view behavior manually from the listbox instead.
       const item = itemRefs[index] && itemRefs[index].current;
-      const { current: listbox } = listboxRef;
+      const { current: listbox } = nodeRef;
       if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
         scrollIntoView(listbox, item);
       }
@@ -418,26 +420,31 @@ export function useAutoComplete({
     onOutsideClick: hide,
   });
 
-  const { style, onEnter, onEntering, onEntered, onExited, updateStyle } =
-    useFixedPositioning({
-      fixedTo: () => ref.current,
-      anchor,
-      onScroll(_event, { visible }) {
-        if (closeOnScroll || !visible) {
-          hide();
-        }
-      },
-      onResize: closeOnResize ? hide : undefined,
-      width: listboxWidth,
-      xMargin,
-      yMargin,
-      vwMargin,
-      vhMargin,
-      transformOrigin,
-      preventOverlap,
-      disableSwapping,
-      disableVHBounds,
-    });
+  const {
+    ref: listboxRef,
+    style,
+    callbacks,
+    updateStyle,
+  } = useFixedPositioning({
+    fixedTo: ref,
+    nodeRef,
+    anchor,
+    onScroll(_event, { visible }) {
+      if (closeOnScroll || !visible) {
+        hide();
+      }
+    },
+    onResize: closeOnResize ? hide : undefined,
+    width: listboxWidth,
+    xMargin,
+    yMargin,
+    vwMargin,
+    vhMargin,
+    transformOrigin,
+    preventOverlap,
+    disableSwapping,
+    disableVHBounds,
+  });
 
   useEffect(() => {
     if (!focused.current || autocompleted.current) {
@@ -477,12 +484,7 @@ export function useAutoComplete({
     itemRefs,
     filteredData,
     fixedStyle: { ...style, ...listboxStyle },
-    transitionHooks: {
-      onEnter,
-      onEntering,
-      onEntered,
-      onExited,
-    },
+    transitionHooks: callbacks,
     listboxRef,
     handleBlur,
     handleFocus,

diff --git a/packages/dev-utils/src/sandbox/createPackageJson.ts b/packages/dev-utils/src/sandbox/createPackageJson.ts
@@ -17,7 +17,10 @@ function toDependencyJson(
   );
 }
 
-const SIMPLE_AT_TYPES = ["qs", "react-transition-group", "react-virtualized"];
+const SIMPLE_AT_TYPES = [
+  "qs",
+  "react-virtualized",
+];
 
 function getTypesPackage(packageName: string): string | null {
   if (SIMPLE_AT_TYPES.includes(packageName)) {

diff --git a/packages/dialog/package.json b/packages/dialog/package.json
@@ -39,8 +39,7 @@
     "@react-md/transition": "^3.1.0",
     "@react-md/typography": "^3.1.0",
     "@react-md/utils": "^3.1.0",
-    "classnames": "^2.3.1",
-    "react-transition-group": "^4.4.2"
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "react": "^17.0.2",