@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/transition/__tests__/useTransition.tsx

@@ -1,6 +1,7 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
@@ -12,16 +13,23 @@ import {
   type MutableRefObject,
   type ReactElement,
 } from "react";
-import { act, fireEvent, render, waitFor } from "../../test-utils/index.js";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../test-utils/index.js";
 
+import { SsrProvider, useSsr } from "../../SsrProvider.js";
+import { useLocalStorage } from "../../useLocalStorage.js";
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   type TransitionHookOptions,
   type TransitionStage,
   type TransitionTimeout,
 } from "../types.js";
 import { useTransition } from "../useTransition.js";
-import { useLocalStorage } from "../../useLocalStorage.js";
-import { SsrProvider, useSsr } from "../../SsrProvider.js";
 
 const createStageRef = (): MutableRefObject<TransitionStage[]> => ({
   current: [],
@@ -71,6 +79,10 @@ describe("useTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
@@ -78,31 +90,39 @@ describe("useTransition", () => {
   it("should default to enabling enter and exit transitions and non-temporary", () => {
     const stageRef = createStageRef();
     const stages = stageRef.current;
-    const { getByRole, getByText } = render(<Test stageRef={stageRef} />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test stageRef={stageRef} />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(stages).toEqual(["exited"]);
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
 
     expect(stages).toEqual(["exited", "enter", "entering", "entered"]);
-    expect(() => getByText(`The current stage is: "entered"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entered"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     // Exit flow
     fireEvent.click(toggle);
@@ -114,8 +134,10 @@ describe("useTransition", () => {
       "exit",
       "exiting",
     ]);
-    expect(() => getByText(`The current stage is: "exiting"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exiting"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
@@ -129,31 +151,33 @@ describe("useTransition", () => {
       "exiting",
       "exited",
     ]);
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should mount and unmount the component if the temporary option is enabled", () => {
-    const { getByRole, getByText } = render(<Test temporary />);
+    render(<Test temporary />);
 
-    const toggle = getByRole("button");
-    expect(() => getByText(/^The current stage/)).toThrow();
+    const toggle = screen.getByRole("button");
+    expect(() => screen.getByText(/^The current stage/)).toThrow();
 
     fireEvent.click(toggle);
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     fireEvent.click(toggle);
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage/)).toThrow();
+    expect(() => screen.getByText(/^The current stage/)).toThrow();
   });
 
   it("should trigger the callbacks at each stage", () => {
@@ -172,8 +196,8 @@ describe("useTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -220,73 +244,89 @@ describe("useTransition", () => {
   });
 
   it("should handle non-temporary appear transitions correctly", () => {
-    const { getByText, getByRole, rerender } = render(<Test appear />);
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    const { rerender } = render(<Test appear />);
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     rerender(<Test appear defaultTransitionIn key="new-key" />);
-    expect(() => getByText('The current stage is: "entering"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entering"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "entered"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entered"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
-    fireEvent.click(getByRole("button"));
-    expect(() => getByText('The current stage is: "exiting"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    fireEvent.click(screen.getByRole("button"));
+    expect(() =>
+      screen.getByText('The current stage is: "exiting"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should handle temporary appear transitions correctly", () => {
-    const { getByRole, getByText, rerender } = render(
-      <Test appear temporary />
-    );
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    const { rerender } = render(<Test appear temporary />);
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     rerender(<Test appear temporary defaultTransitionIn key="new-key" />);
-    expect(() => getByText('The current stage is: "entering"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entering"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "entered"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entered"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
-    fireEvent.click(getByRole("button"));
-    expect(() => getByText('The current stage is: "exiting"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    fireEvent.click(screen.getByRole("button"));
+    expect(() =>
+      screen.getByText('The current stage is: "exiting"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should access the element's scrollTop attribute to trigger a reflow when the reflow option is enabled and the stage is not entered or exited", () => {
     const scrollTop = jest.spyOn(Element.prototype, "scrollTop", "get");
-    const { getByRole } = render(<Test reflow />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test reflow />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
     expect(scrollTop).not.toHaveBeenCalled();
 
@@ -308,25 +348,33 @@ describe("useTransition", () => {
   it("should cancel the timeouts and immediately switch to the new transition if a new transition starts before the previous has been completed", () => {
     const stageRef = createStageRef();
     const stages = stageRef.current;
-    const { getByRole, getByText } = render(<Test stageRef={stageRef} />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test stageRef={stageRef} />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
     expect(stages).toEqual(["exited"]);
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
 
     act(() => {
       jest.advanceTimersByTime(300);
     });
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering", "exit", "exiting"]);
-    expect(() => getByText(`The current stage is: "exiting"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exiting"`)
+    ).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
@@ -339,7 +387,9 @@ describe("useTransition", () => {
       "exiting",
       "exited",
     ]);
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
 
     fireEvent.click(toggle);
     act(() => {
@@ -368,7 +418,9 @@ describe("useTransition", () => {
       "entering",
       "entered",
     ]);
-    expect(() => getByText(`The current stage is: "entered"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entered"`)
+    ).not.toThrow();
   });
 
   it("should skip the enter, entering, exit, and exiting stages if the transition in disabled", () => {
@@ -388,8 +440,8 @@ describe("useTransition", () => {
       timeout: 0,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -469,4 +521,49 @@ describe("useTransition", () => {
     });
     expect(stages).toEqual(["exited"]);
   });
+
+  it("should skip transitions if the TRANSITION_CONFIG ha disabled set to true", () => {
+    jest.spyOn(TRANSITION_CONFIG, "disabled", "get").mockReturnValue(true);
+
+    const onEnter = jest.fn();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExit = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    const props: TestProps = {
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+    };
+
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
+
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).not.toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    fireEvent.click(toggle);
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    fireEvent.click(toggle);
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).toHaveBeenCalledTimes(1);
+  });
 });

package/src/transition/_transition.scss

@@ -64,52 +64,28 @@ $max-width-transition-duration: $linear-duration !default;
 $max-width-transition-timing-function: $linear-timing-function !default;
 $max-width-transition-default: 100% !default;
 
-$transition-var-lookup: (
-  skeleton-placeholder-background-color: (
-    var: --rmd-skeleton-placeholder-background-color,
-    value: $skeleton-placeholder-background-color,
-  ),
-  skeleton-placeholder-height: (
-    var: --rmd-skeleton-placeholder-height,
-    value: $skeleton-placeholder-height,
-  ),
-  skeleton-placeholder-width: (
-    var: --rmd-skeleton-placeholder-width,
-    value: null,
-  ),
-  slide-duration: (
-    var: --rmd-slide-duration,
-    value: $slide-duration,
-  ),
-  max-width: (
-    var: --rmd-max-width,
-    value: $max-width-transition-default,
-  ),
-  max-width-gap: (
-    var: --rmd-max-width-gap,
-    value: 0,
-  ),
+$transition-variables: (
+  skeleton-placeholder-background-color,
+  skeleton-placeholder-height,
+  skeleton-placeholder-width,
+  slide-duration,
+  max-width,
+  max-width-gap
 );
 
 @function transition-get-var($name, $fallback: null) {
-  $found: utils.validate($transition-var-lookup, $name, "transition var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($transition-variables, $name, "transition");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin transition-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($transition-var-lookup, $name, "transition var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
+  }
 }
 
 @mixin transition-use-var($property, $name: $property, $fallback: null) {
@@ -301,6 +277,31 @@ $transition-var-lookup: (
   }
 }
 
+@mixin transition-variables {
+  @if not $disable-skeleton-placeholder {
+    @include transition-set-var(
+      skeleton-placeholder-background-color,
+      $skeleton-placeholder-background-color
+    );
+    @include transition-set-var(
+      skeleton-placeholder-height,
+      $skeleton-placeholder-height
+    );
+  }
+
+  @if not $disable-slide-transition {
+    @include transition-set-var(slide-duration, $slide-duration);
+  }
+
+  @if not $disable-max-width-transition {
+    @include transition-set-var(max-width, $max-width-transition-default);
+
+    @if not $disable-max-width-transition-gap {
+      @include transition-set-var(max-width-gap, 0);
+    }
+  }
+}
+
 @mixin transition-styles {
   @if not $disable-collapse-transition {
     @include collapse-transition;

package/src/transition/config.ts

@@ -0,0 +1,34 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TransitionConfig {
+  /**
+   * Set this to `true` to disable all transitions from `react-md`.
+   *
+   * Note: It is recommended to set this to `true` in testing to keep things
+   * simple and will automatically be set when using:
+   *
+   * ```ts
+   * import "@react-md/core/test-utils/jest-setup.js";
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disabled: boolean;
+}
+
+// NOTE: Uses get/set for test mocking
+
+let disabled = false;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export const TRANSITION_CONFIG: TransitionConfig = {
+  get disabled() {
+    return disabled;
+  },
+  set disabled(nextDisabled: boolean) {
+    disabled = nextDisabled;
+  },
+};

package/src/transition/useTransition.ts

@@ -10,6 +10,7 @@ import type {
   TransitionState,
 } from "./types.js";
 import { getTransitionTimeout } from "./utils.js";
+import { TRANSITION_CONFIG } from "./config.js";
 
 const INITIAL_STATE: TransitionState = {
   appearing: false,
@@ -143,11 +144,11 @@ export function useTransition<E extends HTMLElement>(
     () => {
       let stage: TransitionStage = "exited";
       if (transitionIn) {
-        stage = appear ? "enter" : "entered";
+        stage = appear && !TRANSITION_CONFIG.disabled ? "enter" : "entered";
       }
 
       return {
-        appearing: appear && transitionIn,
+        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,
         rendered: !temporary || transitionIn,
         stage,
       };
@@ -211,8 +212,12 @@ export function useTransition<E extends HTMLElement>(
     let nextStage: TransitionStage = stage;
     switch (stage) {
       case "enter":
-        onEnter(appearing);
-        nextStage = "entering";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "entered";
+        } else {
+          onEnter(appearing);
+          nextStage = "entering";
+        }
         break;
       case "entering":
         onEntering(appearing);
@@ -223,8 +228,12 @@ export function useTransition<E extends HTMLElement>(
         onEntered(appearing);
         break;
       case "exit":
-        onExit();
-        nextStage = "exiting";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "exited";
+        } else {
+          onExit();
+          nextStage = "exiting";
+        }
         break;
       case "exiting":
         onExiting();

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.jsx";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { TreeItem } from "./TreeItem.js";
 import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
 

package/src/tree/Tree.tsx

@@ -6,10 +6,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import {
-  LinkProvider,
-  type CustomLinkComponent,
-} from "../link/LinkProvider.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { type LabelRequiredForA11y } from "../types.js";
@@ -261,7 +258,7 @@ export function Tree<T extends TreeItemNode>(
     expansionMode = "auto",
     expanderIcon,
     expanderLeft = false,
-    linkComponent,
+    linkComponent = "a",
     disableTransition = false,
     temporaryChildItems = false,
     ...remaining
@@ -290,6 +287,7 @@ export function Tree<T extends TreeItemNode>(
       data={data}
       rootId={rootId}
       multiSelect={multiSelect}
+      linkComponent={linkComponent}
       selectedIds={selectedIds}
       expandedIds={expandedIds}
       expanderIcon={expanderIcon}
@@ -303,25 +301,23 @@ export function Tree<T extends TreeItemNode>(
       selectMultipleTreeItems={selectMultipleTreeItems}
       expandMultipleTreeItems={expandMultipleTreeItems}
     >
-      <LinkProvider value={linkComponent}>
-        <KeyboardMovementProvider value={movementContext}>
-          <List
-            {...remaining}
-            {...movementProps}
-            id={treeId}
-            ref={treeRef}
-            role="tree"
-            tabIndex={0}
-            className={tree({ className })}
-          >
-            <RenderRecursively
-              items={items}
-              getItemKey={(item) => item.itemId}
-              render={TreeItemRenderer}
-            />
-          </List>
-        </KeyboardMovementProvider>
-      </LinkProvider>
+      <KeyboardMovementProvider value={movementContext}>
+        <List
+          {...remaining}
+          {...movementProps}
+          id={treeId}
+          ref={treeRef}
+          role="tree"
+          tabIndex={0}
+          className={tree({ className })}
+        >
+          <RenderRecursively
+            items={items}
+            getItemKey={(item) => item.itemId}
+            render={TreeItemRenderer}
+          />
+        </List>
+      </KeyboardMovementProvider>
     </TreeProvider>
   );
 }