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

package/src/link/__tests__/SkipToMainContent.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { createRef, type FC, type ReactNode } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { SkipToMainContent } from "../SkipToMainContent.js";
 
@@ -18,11 +18,11 @@ describe("SkipToMainContent", () => {
       ref,
       mainId: "main-id",
     } as const;
-    const { getByRole, rerender } = render(<SkipToMainContent {...props} />, {
+    const { rerender } = render(<SkipToMainContent {...props} />, {
       wrapper: MainIdWrapper,
     });
 
-    const link = getByRole("link", { name: "Skip to main content" });
+    const link = screen.getByRole("link", { name: "Skip to main content" });
     expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     expect(ref.current).toBe(link);
     expect(link).toMatchSnapshot();
@@ -77,15 +77,12 @@ describe("SkipToMainContent", () => {
   });
 
   it("should focus the main element when clicked unless the provided onClick prop calls event.stopPropagation()", () => {
-    const { getByRole, rerender } = render(
-      <SkipToMainContent mainId="main-id" />,
-      {
-        wrapper: MainIdWrapper,
-      }
-    );
+    const { rerender } = render(<SkipToMainContent mainId="main-id" />, {
+      wrapper: MainIdWrapper,
+    });
 
-    const link = getByRole("link", { name: "Skip to main content" });
-    const main = getByRole("main");
+    const link = screen.getByRole("link", { name: "Skip to main content" });
+    const main = screen.getByRole("main");
     expect(document.activeElement).toBe(document.body);
 
     fireEvent.click(link);
@@ -110,13 +107,13 @@ describe("SkipToMainContent", () => {
     process.env.NODE_ENV = "production";
 
     const querySelector = jest.spyOn(document, "querySelector");
-    const { getByRole } = render(<SkipToMainContent />, {
+    render(<SkipToMainContent />, {
       wrapper: MainIdWrapper,
     });
     expect(querySelector).not.toHaveBeenCalled();
 
-    const link = getByRole("link", { name: "Skip to main content" });
-    const main = getByRole("main");
+    const link = screen.getByRole("link", { name: "Skip to main content" });
+    const main = screen.getByRole("main");
     expect(document.activeElement).toBe(document.body);
 
     fireEvent.click(link);

package/src/link/_link.scss

@@ -29,37 +29,21 @@ $skip-to-main-active-styles: (
   outline: 0.25rem dashed #000,
 ) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-link-color,
-    value: $color,
-  ),
-  visited-color: (
-    var: --rmd-link-visited-color,
-    value: $visited-color,
-  ),
-  hover-color: (
-    var: --rmd-link-hover-color,
-    value: $hover-color,
-  ),
-);
+$variables: (color, visited-color, hover-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "link 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($variables, $name, "link");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "link var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "link")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -80,6 +64,14 @@ $var-lookup: (
   #{$property}: get-var(size) inset get-var(color);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $color);
+    @include set-var(visited-color, $visited-color);
+    @include set-var(hover-color, $hover-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-link {

package/src/list/ListItemLink.tsx

@@ -6,7 +6,7 @@ import {
 } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { type CustomLinkComponent } from "../link/LinkProvider.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type PropsWithRef } from "../types.js";
 import { ListItemChildren } from "./ListItemChildren.js";
 import { getListItemHeight } from "./getListItemHeight.js";

package/src/list/__tests__/List.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { type PropsWithRef } from "../../types.js";
 import { List, list, type ListElement, type ListProps } from "../List.js";
@@ -8,9 +8,9 @@ import { List, list, type ListElement, type ListProps } from "../List.js";
 describe("List", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<ListElement>();
-    const { getByRole, rerender } = render(<List ref={ref} />);
+    const { rerender } = render(<List ref={ref} />);
 
-    const unorderedList = getByRole("none");
+    const unorderedList = screen.getByRole("none");
     expect(ref.current).toBeInstanceOf(HTMLUListElement);
     expect(ref.current).toBe(unorderedList);
     expect(unorderedList).toMatchSnapshot();
@@ -33,7 +33,7 @@ describe("List", () => {
     rerender(<List ref={ref} ordered />);
     expect(unorderedList).not.toBeInTheDocument();
 
-    const orderedList = getByRole("none");
+    const orderedList = screen.getByRole("none");
     expect(ref.current).toBeInstanceOf(HTMLOListElement);
     expect(ref.current).toBe(orderedList);
     expect(orderedList).toMatchSnapshot();
@@ -44,10 +44,10 @@ describe("List", () => {
   });
 
   it("should allow the role to be overridden", () => {
-    const { getByRole } = render(<List role="menu" />);
+    render(<List role="menu" />);
 
-    expect(() => getByRole("none")).toThrow();
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("none")).toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
   });
 
   describe("styling utility class", () => {

package/src/list/__tests__/ListItem.tsx

@@ -3,6 +3,7 @@ import { createRef, type ReactElement, type Ref } from "react";
 import {
   fireEvent,
   render,
+  screen,
   userEvent,
   waitFor,
 } from "../../test-utils/index.js";
@@ -30,9 +31,9 @@ function Test(props: TestProps): ReactElement {
 describe("ListItem", () => {
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const nodeRef = createRef<HTMLLIElement>();
-    const { getByRole, rerender } = render(<Test nodeRef={nodeRef} />);
+    const { rerender } = render(<Test nodeRef={nodeRef} />);
 
-    const item = getByRole("button", { name: "Item" });
+    const item = screen.getByRole("button", { name: "Item" });
     expect(nodeRef.current).toBeInstanceOf(HTMLLIElement);
     expect(nodeRef.current).toBe(item);
     expect(item).toMatchSnapshot();
@@ -69,11 +70,11 @@ describe("ListItem", () => {
   it("should implement the correct click behavior", async () => {
     const onClick = jest.fn();
     const props: TestProps = { onClick };
-    const { getByRole, rerender } = render(<Test {...props} />, {
+    const { rerender } = render(<Test {...props} />, {
       wrapper: UserInteractionModeProvider,
     });
 
-    const item = getByRole("button", { name: "Item" });
+    const item = screen.getByRole("button", { name: "Item" });
     expect(item).toHaveProperty("tabIndex", 0);
     fireEvent.click(item);
     expect(onClick).toHaveBeenCalledTimes(1);
@@ -113,8 +114,8 @@ describe("ListItem", () => {
   });
 
   it("should wrap text children in span elements to enable higher contrast", () => {
-    const { getByRole, rerender } = render(<Test />);
-    const item = getByRole("button", { name: "Item" });
+    const { rerender } = render(<Test />);
+    const item = screen.getByRole("button", { name: "Item" });
     expect(item).toMatchSnapshot();
 
     rerender(<Test disableTextChildren />);
@@ -139,8 +140,8 @@ describe("ListItem", () => {
     const higherContrastMock = jest
       .spyOn(INTERACTION_CONFIG, "higherContrast", "get")
       .mockReturnValue(false);
-    const { getByRole, rerender } = render(<Test />);
-    const item = getByRole("button", { name: "Item" });
+    const { rerender } = render(<Test />);
+    const item = screen.getByRole("button", { name: "Item" });
     expect(item).toMatchSnapshot();
 
     rerender(<Test disableTextChildren />);
@@ -164,9 +165,9 @@ describe("ListItem", () => {
   });
 
   it("should update the height based on the provided addons and render correctly", () => {
-    const { getByRole, rerender } = render(<Test />);
+    const { rerender } = render(<Test />);
 
-    const item = getByRole("button", { name: "Item" });
+    const item = screen.getByRole("button", { name: "Item" });
     expect(item).toMatchSnapshot();
 
     rerender(<Test secondaryText="Secondary text!" />);
@@ -234,7 +235,7 @@ describe("ListItem", () => {
 
   it("should allow for custom props to be passed to the primary text wrapper", () => {
     const ref = createRef<HTMLSpanElement>();
-    const { getByRole } = render(
+    render(
       <Test
         textProps={{
           ref,
@@ -244,14 +245,14 @@ describe("ListItem", () => {
       />
     );
 
-    const item = getByRole("button", { name: "Item" });
+    const item = screen.getByRole("button", { name: "Item" });
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(item).toMatchSnapshot();
   });
 
   it("should allow for custom props to be passed to the secondary text wrapper", () => {
     const ref = createRef<HTMLSpanElement>();
-    const { getByRole } = render(
+    render(
       <Test
         secondaryText="Secondary Text!"
         secondaryTextProps={{
@@ -262,15 +263,15 @@ describe("ListItem", () => {
       />
     );
 
-    const item = getByRole("button", { name: /Item/ });
+    const item = screen.getByRole("button", { name: /Item/ });
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(item).toMatchSnapshot();
   });
 
   it("should not allow presentational items to be interactable", async () => {
-    const { getByRole } = render(<Test role="presentation" />);
+    render(<Test role="presentation" />);
 
-    const item = getByRole("presentation");
+    const item = screen.getByRole("presentation");
     expect(item).not.toHaveAttribute("tabIndex");
 
     await userEvent.click(item);

package/src/list/__tests__/ListItemLink.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { forwardRef, type HTMLAttributes, type ReactElement } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Link } from "../../link/Link.js";
 import { List } from "../List.js";
@@ -8,12 +8,12 @@ import { ListItemLink } from "../ListItemLink.js";
 
 describe("ListItemLink", () => {
   it("should render as an <a> element by default", () => {
-    const { getByRole, container } = render(
+    const { container } = render(
       <List>
         <ListItemLink href="/link">Hello</ListItemLink>
       </List>
     );
-    const link = getByRole("link", { name: "Hello" });
+    const link = screen.getByRole("link", { name: "Hello" });
     expect(link).toBeInstanceOf(HTMLAnchorElement);
     expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
 
@@ -21,14 +21,14 @@ describe("ListItemLink", () => {
   });
 
   it("should allow for a custom link component using the as prop", () => {
-    const { getByRole, container } = render(
+    const { container } = render(
       <List>
         <ListItemLink as={Link} href="/link">
           Hello
         </ListItemLink>
       </List>
     );
-    const link = getByRole("link", { name: "Hello" });
+    const link = screen.getByRole("link", { name: "Hello" });
     expect(link).toBeInstanceOf(HTMLAnchorElement);
     expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
 
@@ -60,7 +60,7 @@ describe("ListItemLink", () => {
       }
     );
 
-    const { getByRole, container, rerender } = render(
+    const { container, rerender } = render(
       <List>
         <ListItemLink
           // custom links **must** allow for a ref to be passed
@@ -80,7 +80,7 @@ describe("ListItemLink", () => {
         </ListItemLink>
       </List>
     );
-    const link = getByRole("link", { name: "Hello" });
+    const link = screen.getByRole("link", { name: "Hello" });
     expect(link).toBeInstanceOf(HTMLAnchorElement);
     expect(link.parentElement).toBeInstanceOf(HTMLLIElement);
 

package/src/list/__tests__/ListSubheader.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef, type ReactElement, type Ref } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { List } from "../List.js";
 import { ListSubheader, type ListSubheaderProps } from "../ListSubheader.js";
@@ -23,9 +23,9 @@ function Test(props: TestProps): ReactElement {
 describe("ListSubheader", () => {
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const nodeRef = createRef<HTMLLIElement>();
-    const { getByRole, rerender } = render(<Test nodeRef={nodeRef} />);
+    const { rerender } = render(<Test nodeRef={nodeRef} />);
 
-    const item = getByRole("presentation");
+    const item = screen.getByRole("presentation");
     expect(nodeRef.current).toBeInstanceOf(HTMLLIElement);
     expect(nodeRef.current).toBe(item);
     expect(item).toMatchSnapshot();
@@ -64,7 +64,7 @@ describe("ListSubheader", () => {
 
   it("should allow for custom props to be passed to the text wrapper", () => {
     const ref = createRef<HTMLSpanElement>();
-    const { getByRole } = render(
+    render(
       <Test
         textProps={{
           ref,
@@ -74,7 +74,7 @@ describe("ListSubheader", () => {
       />
     );
 
-    const item = getByRole("presentation");
+    const item = screen.getByRole("presentation");
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(item).toMatchSnapshot();
   });

package/src/list/_list.scss

@@ -60,77 +60,35 @@ $item-media-large-size: 6.25rem !default;
 
 $item-keyline: 4.5rem !default;
 
-$var-lookup: (
-  horizontal-padding: (
-    var: --rmd-list-padding-h,
-    value: $horizontal-padding,
-  ),
-  vertical-padding: (
-    var: --rmd-list-padding-v,
-    value: $vertical-padding,
-  ),
-  item-keyline: (
-    var: --rmd-list-item-keyline,
-    value: $item-keyline,
-  ),
-  item-horizontal-padding: (
-    var: --rmd-list-item-padding-h,
-    value: $item-horizontal-padding,
-  ),
-  item-vertical-padding: (
-    var: --rmd-list-item-padding-v,
-    value: $item-vertical-padding,
-  ),
-  item-height: (
-    var: --rmd-list-item-height,
-    value: $item-height,
-  ),
-  item-medium-height: (
-    var: --rmd-list-item-medium-height,
-    value: $item-medium-height,
-  ),
-  item-large-height: (
-    var: --rmd-list-item-large-height,
-    value: $item-large-height,
-  ),
-  item-extra-large-height: (
-    var: --rmd-list-item-extra-large-height,
-    value: $item-extra-large-height,
-  ),
-  item-three-line-height: (
-    var: --rmd-list-item-three-line-height,
-    value: $item-three-line-height,
-  ),
-  item-media-size: (
-    var: --rmd-list-item-media-size,
-    value: $item-media-size,
-  ),
-  item-media-spacing: (
-    var: --rmd-list-item-media-spacing,
-    value: $item-media-spacing,
-  ),
-  text-three-line-height: (
-    var: --rmd-list-item-text-three-line-height,
-    value: $item-secondary-text-three-line-max-height,
-  ),
+$variables: (
+  horizontal-padding,
+  vertical-padding,
+  item-keyline,
+  item-horizontal-padding,
+  item-vertical-padding,
+  item-height,
+  item-medium-height,
+  item-large-height,
+  item-extra-large-height,
+  item-three-line-height,
+  item-media-size,
+  item-media-spacing,
+  item-text-three-line-height
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "list 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($variables, $name, "list");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "list var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "list")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -147,6 +105,38 @@ $var-lookup: (
   );
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(horizontal-padding, $horizontal-padding);
+    @include set-var(vertical-padding, $vertical-padding);
+    @include set-var(item-horizontal-padding, $item-horizontal-padding);
+    @include set-var(item-vertical-padding, $item-vertical-padding);
+
+    @include set-var(item-height, $item-height);
+    @if not $disable-medium-height {
+      @include set-var(item-medium-height, $item-medium-height);
+    }
+    @if not $disable-large-height {
+      @include set-var(item-large-height, $item-large-height);
+    }
+    @if not $disable-extra-large-height {
+      @include set-var(item-extra-large-height, $item-extra-large-height);
+    }
+    @if not $disable-three-line-height {
+      @include set-var(item-three-line-height, $item-three-line-height);
+      @include set-var(
+        item-text-three-line-height,
+        $item-secondary-text-three-line-max-height
+      );
+    }
+
+    @if not $disable-item-media {
+      @include set-var(item-media-size, $item-media-size);
+      @include set-var(item-media-spacing, $item-media-spacing);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-list {
@@ -243,7 +233,7 @@ $var-lookup: (
 
         &--clamped {
           @include typography.line-clamp;
-          @include use-var(max-height, text-three-line-height);
+          @include use-var(max-height, item-text-three-line-height);
 
           line-height: $item-secondary-text-line-height;
           white-space: normal;

package/src/menu/DropdownMenu.tsx

@@ -2,14 +2,15 @@
 import {
   useCallback,
   useRef,
-  useState,
   type ReactElement,
   type ReactNode,
   type RefObject,
 } from "react";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { getLastFocusableIndex } from "../movement/utils.js";
+import { type UseStateSetter } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useEnsuredState } from "../useEnsuredState.js";
 import {
   Menu,
   type MenuConvenienceProps,
@@ -41,6 +42,14 @@ export interface DropdownMenuItemButtonProps
   extends MenuItemButtonProps,
     BaseDropdownMenuProps {}
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface DropdownMenuStateProps {
+  visible: boolean;
+  setVisible: UseStateSetter<boolean>;
+}
+
 /**
  * @remarks
  * \@since 5.0.0
@@ -49,7 +58,8 @@ export interface DropdownMenuItemButtonProps
  * incorrect props.
  */
 export type DropdownMenuProps = DropdownMenuButtonProps &
-  DropdownMenuItemButtonProps;
+  DropdownMenuItemButtonProps &
+  (DropdownMenuStateProps | { visible?: never; setVisible?: never });
 
 /**
  * **Client Component**
@@ -118,6 +128,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
     buttonChildren,
     iconRotatorProps: propIconRotatorProps,
     disableTransition: propDisableTransition,
+    floating,
     anchor,
     vwMargin,
     vhMargin,
@@ -144,12 +155,18 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
     sheetProps,
     sheetStyle,
     sheetClassName,
+    visible: propVisible,
+    setVisible: propSetVisible,
     ...remaining
   } = props;
 
   const fixedTo = useRef<HTMLElement | HTMLButtonElement>(null);
   const defaultFocusIndex = useRef(0);
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useEnsuredState({
+    value: propVisible,
+    setValue: propSetVisible,
+    defaultValue: false,
+  });
   const { menubar, menuitem, activeIdRef, animatedOnceRef } =
     useMenuBarContext();
   const id = useEnsuredId(propId, `menu${menuitem ? "item" : "button"}`);
@@ -165,7 +182,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
 
   const onRequestClose = useCallback(() => {
     setVisible(false);
-  }, []);
+  }, [setVisible]);
 
   let iconRotatorProps = propIconRotatorProps;
   if (disableTransition) {
@@ -193,6 +210,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
         {...(remaining as DropdownMenuButtonProps)}
         id={id}
         ref={fixedTo as RefObject<HTMLButtonElement>}
+        floating={floating}
         iconRotatorProps={iconRotatorProps}
       >
         {buttonChildren}
@@ -227,6 +245,7 @@ export function DropdownMenu(props: DropdownMenuProps): ReactElement {
         disablePortal={disablePortal}
         disableElevation={disableElevation}
         disableTransition={disableTransition}
+        floating={floating}
         anchor={anchor}
         vwMargin={vwMargin}
         vhMargin={vhMargin}

package/src/menu/Menu.tsx

@@ -7,6 +7,7 @@ import {
   type CSSProperties,
   type HTMLAttributes,
 } from "react";
+import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.jsx";
 import { useFocusContainer } from "../focus/useFocusContainer.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { type ListElement, type ListProps } from "../list/List.js";
@@ -240,6 +241,14 @@ export interface MenuProps
    * sheet.
    */
   menuClassName?: string;
+
+  /**
+   * @internal
+   *
+   * This is only used to update the default anchor when the DropdownMenu's
+   * toggle is a floating action button.
+   */
+  floating?: FloatingActionButtonPosition;
 }
 
 /**
@@ -299,6 +308,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       listClassName,
       visible,
       onRequestClose,
+      floating,
       anchor,
       closeOnResize = false,
       closeOnScroll = false,
@@ -447,6 +457,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       anchor: getDefaultAnchor({
         anchor,
         menubar,
+        floating,
         menuitem: !root && menuitem,
         horizontal,
       }),