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

package/src/draggable/__tests__/useDraggable.tsx

@@ -7,7 +7,7 @@ import {
   type ReactElement,
   type Ref,
 } from "react";
-import { fireEvent, rmdRender } from "../../test-utils/index.js";
+import { fireEvent, rmdRender, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { WritingDirectionProvider } from "../../typography/WritingDirectionProvider.js";
@@ -89,7 +89,7 @@ describe("useDraggable", () => {
     const onMouseMove = jest.fn();
     const onMouseUp = jest.fn();
 
-    const { getByRole } = rmdRender(
+    rmdRender(
       <Test
         onMouseUp={onMouseUp}
         onMouseDown={onMouseDown}
@@ -97,7 +97,7 @@ describe("useDraggable", () => {
       />
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onMouseDown).not.toHaveBeenCalled();
     expect(onMouseMove).not.toHaveBeenCalled();
     expect(onMouseUp).not.toHaveBeenCalled();
@@ -175,9 +175,9 @@ describe("useDraggable", () => {
   });
 
   it("should not start dragging if any of meta keys are pressed", () => {
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     fireEvent.mouseDown(button, { button: 1, clientX: 50 });
@@ -212,9 +212,9 @@ describe("useDraggable", () => {
 
     const onKeyDown = jest.fn();
 
-    const { getByRole } = rmdRender(<Test onKeyDown={onKeyDown} />);
+    rmdRender(<Test onKeyDown={onKeyDown} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onKeyDown).not.toHaveBeenCalled();
     expect(button).toMatchSnapshot();
     expect(button).toHaveAttribute("aria-valuenow", "50");
@@ -261,11 +261,9 @@ describe("useDraggable", () => {
     const onTouchStart = jest.fn();
     const onTouchMove = jest.fn();
 
-    const { getByRole } = rmdRender(
-      <Test onTouchStart={onTouchStart} onTouchMove={onTouchMove} />
-    );
+    rmdRender(<Test onTouchStart={onTouchStart} onTouchMove={onTouchMove} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(onTouchStart).not.toHaveBeenCalled();
     expect(onTouchMove).not.toHaveBeenCalled();
     expect(button).toMatchSnapshot();
@@ -297,14 +295,14 @@ describe("useDraggable", () => {
 
   it("should allow a ref to be merged", () => {
     const ref = createRef<HTMLButtonElement>();
-    const { getByRole } = rmdRender(<Test nodeRef={ref} />);
-    const button = getByRole("button");
+    rmdRender(<Test nodeRef={ref} />);
+    const button = screen.getByRole("button");
     expect(ref.current).toBe(button);
   });
 
   it("should never trigger the event handlers when disabled", () => {
-    const { getByRole } = rmdRender(<Test disabled />);
-    const button = getByRole("button");
+    rmdRender(<Test disabled />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -323,7 +321,7 @@ describe("useDraggable", () => {
   });
 
   it("should support dragging when RTL is enabled", () => {
-    const { getByRole } = rmdRender(<Test />, {
+    rmdRender(<Test />, {
       wrapper: ({ children }) => (
         <WritingDirectionProvider defaultDir="rtl">
           {children}
@@ -331,7 +329,7 @@ describe("useDraggable", () => {
       ),
     });
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -340,9 +338,9 @@ describe("useDraggable", () => {
   });
 
   it("should support vertical dragging", () => {
-    const { getByRole } = rmdRender(<Test vertical />);
+    rmdRender(<Test vertical />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
@@ -354,11 +352,9 @@ describe("useDraggable", () => {
   });
 
   it("should allow the dragging class names to be disabled", () => {
-    const { rerender, getByRole } = rmdRender(
-      <Test disableDraggingClassName />
-    );
+    const { rerender } = rmdRender(<Test disableDraggingClassName />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     fireEvent.mouseDown(button, { button: 0 });
     fireEvent.mouseMove(button);
     fireEvent.mouseMove(window, { clientX: 60 });
@@ -372,21 +368,21 @@ describe("useDraggable", () => {
   });
 
   it("should allow the default value to be a function", () => {
-    const { getByRole } = rmdRender(<Test defaultValue={() => 0} />);
-    const button = getByRole("button");
+    rmdRender(<Test defaultValue={() => 0} />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "0");
   });
 
   it("should allow the default value to be a number", () => {
-    const { getByRole } = rmdRender(<Test defaultValue={12} />);
-    const button = getByRole("button");
+    rmdRender(<Test defaultValue={12} />);
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "12");
   });
 
   it("should allow for a custom increment step", () => {
-    const { getByRole } = rmdRender(<Test step={10} />);
+    rmdRender(<Test step={10} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     fireEvent.keyDown(button, { key: "ArrowRight" });
@@ -397,9 +393,9 @@ describe("useDraggable", () => {
   });
 
   it("should automatically update the value if the min, max, or step options change", () => {
-    const { getByRole, rerender } = rmdRender(<Test step={10} />);
+    const { rerender } = rmdRender(<Test step={10} />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-valuenow", "50");
 
     rerender(<Test step={10} min={10} max={30} />);
@@ -450,13 +446,13 @@ describe("useDraggable", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button", { name: "Button" });
-    const minimum = getByRole("button", { name: "Minimum" });
-    const maximum = getByRole("button", { name: "Maximum" });
-    const increment = getByRole("button", { name: "Increment" });
-    const decrement = getByRole("button", { name: "Decrement" });
+    const button = screen.getByRole("button", { name: "Button" });
+    const minimum = screen.getByRole("button", { name: "Minimum" });
+    const maximum = screen.getByRole("button", { name: "Maximum" });
+    const increment = screen.getByRole("button", { name: "Increment" });
+    const decrement = screen.getByRole("button", { name: "Decrement" });
     expect(button).toMatchSnapshot();
     expect(button).toHaveAttribute("aria-valuenow", "20");
 
@@ -522,9 +518,9 @@ describe("useDraggable", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(localStorage.getItem("test")).toBe("50");
 
     fireEvent.mouseDown(button, { button: 0 });

package/src/expansion-panel/__tests__/ExpansionPanel.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "@jest/globals";
+import { beforeEach, describe, expect, it } from "@jest/globals";
 import { createRef, type ReactElement } from "react";
 import {
   fireEvent,
@@ -8,6 +8,7 @@ import {
   waitFor,
 } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { ExpansionList } from "../ExpansionList.js";
 import { ExpansionPanel, type ExpansionPanelProps } from "../ExpansionPanel.js";
@@ -50,14 +51,18 @@ function Test(props: TestProps): ReactElement {
 }
 
 describe("ExpansionPanel", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should default to single expansion, allowing all panels to be closed, no expanded ids, and apply hidden while collapsed", async () => {
-    const { container, getByRole, getAllByRole } = render(<Test />);
-    const panel1 = getByRole("button", { name: "Panel 1" });
-    const panel2 = getByRole("button", { name: "Panel 2" });
-    const panel3 = getByRole("button", { name: "Panel 3" });
+    const { container } = render(<Test />);
+    const panel1 = screen.getByRole("button", { name: "Panel 1" });
+    const panel2 = screen.getByRole("button", { name: "Panel 2" });
+    const panel3 = screen.getByRole("button", { name: "Panel 3" });
 
     const [panel1Contents, panel2Contents, panel3Contents] =
-      getAllByRole("region");
+      screen.getAllByRole("region");
 
     expect(panel1).toHaveAttribute("aria-expanded", "false");
     expect(panel2).toHaveAttribute("aria-expanded", "false");
@@ -81,33 +86,33 @@ describe("ExpansionPanel", () => {
     fireEvent.click(panel1);
     // have to wait because of the collapse transition
     await waitFor(() => {
-      expect(panel1).toHaveAttribute("aria-expanded", "false");
-      expect(panel2).toHaveAttribute("aria-expanded", "false");
-      expect(panel3).toHaveAttribute("aria-expanded", "false");
       expect(isElementVisible(panel1Contents)).toBe(false);
-      expect(isElementVisible(panel2Contents)).toBe(false);
-      expect(isElementVisible(panel3Contents)).toBe(false);
     });
+    expect(panel1).toHaveAttribute("aria-expanded", "false");
+    expect(panel2).toHaveAttribute("aria-expanded", "false");
+    expect(panel3).toHaveAttribute("aria-expanded", "false");
+    expect(isElementVisible(panel2Contents)).toBe(false);
+    expect(isElementVisible(panel3Contents)).toBe(false);
 
     fireEvent.click(panel2);
     await waitFor(() => {
-      expect(panel1).toHaveAttribute("aria-expanded", "false");
-      expect(panel2).toHaveAttribute("aria-expanded", "true");
-      expect(panel3).toHaveAttribute("aria-expanded", "false");
-      expect(isElementVisible(panel1Contents)).toBe(false);
       expect(isElementVisible(panel2Contents)).toBe(true);
-      expect(isElementVisible(panel3Contents)).toBe(false);
     });
+    expect(panel1).toHaveAttribute("aria-expanded", "false");
+    expect(panel2).toHaveAttribute("aria-expanded", "true");
+    expect(panel3).toHaveAttribute("aria-expanded", "false");
+    expect(isElementVisible(panel1Contents)).toBe(false);
+    expect(isElementVisible(panel3Contents)).toBe(false);
 
     fireEvent.click(panel3);
     await waitFor(() => {
-      expect(panel1).toHaveAttribute("aria-expanded", "false");
-      expect(panel2).toHaveAttribute("aria-expanded", "false");
-      expect(panel3).toHaveAttribute("aria-expanded", "true");
-      expect(isElementVisible(panel1Contents)).toBe(false);
       expect(isElementVisible(panel2Contents)).toBe(false);
-      expect(isElementVisible(panel3Contents)).toBe(true);
     });
+    expect(panel1).toHaveAttribute("aria-expanded", "false");
+    expect(panel2).toHaveAttribute("aria-expanded", "false");
+    expect(panel3).toHaveAttribute("aria-expanded", "true");
+    expect(isElementVisible(panel1Contents)).toBe(false);
+    expect(isElementVisible(panel3Contents)).toBe(true);
   });
 
   it("should support multiple panel expansion using the multiple prop", async () => {
@@ -216,9 +221,9 @@ describe("ExpansionPanel", () => {
         ref,
       },
     };
-    const { getByRole, rerender } = render(<ExpansionPanel {...props} />);
+    const { rerender } = render(<ExpansionPanel {...props} />);
 
-    const contentEl = getByRole("region");
+    const contentEl = screen.getByRole("region");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(contentEl);
     expect(contentEl).toMatchSnapshot();

package/src/focus/__tests__/useFocusContainer.tsx

@@ -0,0 +1,280 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { type ReactElement } from "react";
+import { Button } from "../../button/Button.js";
+import {
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../test-utils/index.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
+import { useScaleTransition } from "../../transition/useScaleTransition.js";
+import { useToggle } from "../../useToggle.js";
+import {
+  useFocusContainer,
+  type FocusContainerOptions,
+} from "../useFocusContainer.js";
+
+function Test(
+  props: Omit<FocusContainerOptions<HTMLDivElement>, "activate"> & {
+    autoFocus?: boolean;
+    disableChildren?: boolean;
+  }
+): ReactElement {
+  const { autoFocus, disableChildren, ...options } = props;
+  const { disableTransition } = options;
+  const { toggled, enable, disable } = useToggle(false);
+
+  const { eventHandlers, transitionOptions } = useFocusContainer({
+    ...options,
+    activate: toggled,
+  });
+  const { elementProps, rendered } = useScaleTransition({
+    transitionIn: toggled,
+    temporary: true,
+    ...transitionOptions,
+    appear: !disableTransition,
+    enter: !disableTransition,
+    exit: !disableTransition,
+  });
+
+  return (
+    <>
+      <Button onClick={enable}>Show</Button>
+      {rendered && (
+        <div
+          data-testid="container"
+          {...eventHandlers}
+          {...elementProps}
+          tabIndex={-1}
+        >
+          {!disableChildren && (
+            <>
+              <Button autoFocus={autoFocus} onClick={disable}>
+                Button 1
+              </Button>
+              <Button onClick={disable}>Button 2</Button>
+              <Button onClick={disable}>Button 3</Button>
+              <Button onClick={disable}>Button 4</Button>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+describe("useFocusContainer", () => {
+  it("should correctly call the transition callbacks", async () => {
+    TRANSITION_CONFIG.disabled = false;
+
+    const user = userEvent.setup();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    rmdRender(
+      <Test
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExiting={onExiting}
+        onExited={onExited}
+      />
+    );
+
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    await waitFor(() => {
+      expect(onEntering).toHaveBeenCalled();
+    });
+    expect(onEntered).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(onEntered).toHaveBeenCalled();
+    });
+
+    await user.click(screen.getByRole("button", { name: "Button 1" }));
+    expect(onEntering).toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalled();
+    expect(onExiting).toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(onExited).toHaveBeenCalled();
+    });
+  });
+
+  it("should capture the previous focus and refocus that element when entering and then exiting when transitions are enabled", async () => {
+    TRANSITION_CONFIG.disabled = false;
+
+    const user = userEvent.setup();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    rmdRender(
+      <Test
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExiting={onExiting}
+        onExited={onExited}
+      />
+    );
+    const showButton = screen.getByRole("button", { name: "Show" });
+
+    expect(document.activeElement).toBe(document.body);
+    await user.click(showButton);
+
+    const container = screen.getByTestId("container");
+    await waitFor(() => {
+      expect(onEntering).toHaveBeenCalled();
+    });
+    expect(onEntered).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(container);
+    expect(onExiting).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(onEntered).toHaveBeenCalled();
+    });
+    expect(document.activeElement).toBe(container);
+
+    await user.click(screen.getByRole("button", { name: "Button 1" }));
+    await waitFor(() => {
+      expect(onExiting).toHaveBeenCalled();
+    });
+    // have to await because of the raf. this might cause a timing issue at some point with the onExited...
+    await waitFor(() => {
+      expect(document.activeElement).toBe(showButton);
+    });
+    expect(onExited).not.toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(onExited).toHaveBeenCalled();
+    });
+    expect(document.activeElement).toBe(showButton);
+  });
+
+  it("should still move focus when the disableTransition option is true", async () => {
+    TRANSITION_CONFIG.disabled = false;
+
+    const user = userEvent.setup();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    rmdRender(
+      <Test
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExiting={onExiting}
+        onExited={onExited}
+        disableTransition
+      />
+    );
+    const showButton = screen.getByRole("button", { name: "Show" });
+
+    expect(document.activeElement).toBe(document.body);
+    await user.click(showButton);
+
+    const container = screen.getByTestId("container");
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalled();
+    expect(document.activeElement).toBe(container);
+
+    await user.click(screen.getByRole("button", { name: "Button 1" }));
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(document.activeElement).toBe(showButton);
+    });
+  });
+
+  it("should still move focus when the TRANSITION_CONFIG.disabled is true", async () => {
+    const user = userEvent.setup();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    rmdRender(
+      <Test
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExiting={onExiting}
+        onExited={onExited}
+      />
+    );
+    const showButton = screen.getByRole("button", { name: "Show" });
+
+    expect(document.activeElement).toBe(document.body);
+    await user.click(showButton);
+
+    const container = screen.getByTestId("container");
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalled();
+    expect(document.activeElement).toBe(container);
+
+    await user.click(screen.getByRole("button", { name: "Button 1" }));
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(document.activeElement).toBe(showButton);
+    });
+  });
+
+  it("should not move focus to the container element if one of the children has autoFocus enabled or has been programmatically focused", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test autoFocus />);
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    expect(document.activeElement).toBe(
+      screen.getByRole("button", { name: "Button 1" })
+    );
+  });
+
+  it("should prevent tab focus from moving outside of the container element", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+
+    const button1 = screen.getByRole("button", { name: "Button 1" });
+    const button2 = screen.getByRole("button", { name: "Button 2" });
+    const button3 = screen.getByRole("button", { name: "Button 3" });
+    const button4 = screen.getByRole("button", { name: "Button 4" });
+
+    await user.tab();
+    expect(document.activeElement).toBe(button1);
+
+    await user.tab({ shift: true });
+    expect(document.activeElement).toBe(button4);
+
+    await user.tab();
+    expect(document.activeElement).toBe(button1);
+
+    await user.tab();
+    expect(document.activeElement).toBe(button2);
+
+    await user.tab();
+    expect(document.activeElement).toBe(button3);
+  });
+
+  it("should just stop tab focus if there are no focusable elements", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test disableChildren />);
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    const container = screen.getByTestId("container");
+    expect(document.activeElement).toBe(container);
+
+    await user.tab();
+    expect(document.activeElement).toBe(container);
+
+    await user.tab({ shift: true });
+    expect(document.activeElement).toBe(container);
+  });
+});

package/src/focus/useFocusContainer.ts

@@ -1,6 +1,7 @@
 "use client";
 import type { KeyboardEventHandler, Ref, RefObject } from "react";
 import { useEffect, useRef } from "react";
+import { TRANSITION_CONFIG } from "../transition/config.js";
 import type {
   TransitionCallbacks,
   TransitionEnterHandler,
@@ -116,26 +117,26 @@ export interface FocusContainerImplementation<E extends HTMLElement> {
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   const { toggled, toggle } = useToggle(false);
+ *   const { toggled, enable, disable } = useToggle(false);
  *
  *   const { eventHandlers, transitionOptions } = useFocusContainer({
- *     activate: visible,
+ *     activate: toggled,
  *   });
  *   const { elementProps, rendered } = useScaleTransition({
- *     transitionIn: visible,
+ *     transitionIn: toggled,
  *     temporary: true,
  *     ...transitionOptions,
  *   });
  *
  *   return (
  *     <>
- *       <Button onClick={toggle}>Toggle</Button>
+ *       <Button onClick={enable}>Toggle</Button>
  *       {rendered && (
  *         <div {...eventHandlers} {...elementProps}>
- *           <Button>Button 1</Button>
- *           <Button>Button 2</Button>
- *           <Button>Button 3</Button>
- *           <Button>Button 4</Button>
+ *           <Button onClick={disable}>Button 1</Button>
+ *           <Button onClick={disable}>Button 2</Button>
+ *           <Button onClick={disable}>Button 3</Button>
+ *           <Button onClick={disable}>Button 4</Button>
  *         </div>
  *       )}
  *     </>
@@ -206,9 +207,15 @@ export function useFocusContainer<E extends HTMLElement>(
     transitionOptions: {
       nodeRef: refCallback,
       onEntering: handleMountFocus(onEntering, false),
-      onEntered: handleMountFocus(onEntered, !disableTransition),
+      onEntered: handleMountFocus(
+        onEntered,
+        !disableTransition && !TRANSITION_CONFIG.disabled
+      ),
       onExiting: handleUnmountFocus(onExiting, false),
-      onExited: handleUnmountFocus(onExited, !disableTransition),
+      onExited: handleUnmountFocus(
+        onExited,
+        !disableTransition && !TRANSITION_CONFIG.disabled
+      ),
     },
     eventHandlers: {
       onKeyDown(event) {

package/src/form/MenuItemInputToggle.tsx

@@ -204,8 +204,12 @@ export const MenuItemInputToggle = forwardRef<
       icon = (
         <SwitchTrack
           style={trackStyle}
-          className={trackClassName}
           {...trackProps}
+          className={cnb(
+            styles("track"),
+            trackClassName,
+            trackProps?.className
+          )}
           active={checked}
           ballProps={ballProps}
           ballStyle={ballStyle}
@@ -261,7 +265,6 @@ export const MenuItemInputToggle = forwardRef<
   return (
     <ListItem
       {...remaining}
-      aria-disabled={disabled || undefined}
       // I'm not actually sure if this is correct
       aria-checked={indeterminate && checked ? "mixed" : checked}
       id={id}
@@ -276,6 +279,7 @@ export const MenuItemInputToggle = forwardRef<
       }}
       ref={ref}
       className={menuItemInputToggle({ type, className })}
+      disabled={disabled}
       tabIndex={tabIndex}
       leftAddon={leftAddon}
       leftAddonType={leftAddonType}

package/src/form/MenuItemTextField.tsx

@@ -12,6 +12,9 @@ export interface MenuItemTextFieldProps extends TextFieldProps {
    * Any additional props or a `ref` to apply to the surrounding `<li>` element.
    */
   liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+
+  /** @defaultValue `true` */
+  stretch?: boolean;
 }
 
 /**