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

package/src/table/tableRowStyles.ts

@@ -0,0 +1,28 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-tr");
+
+/** @remarks \@since 6.0.0 */
+export interface TableRowClassNameOptions {
+  className?: string;
+  disableHover?: boolean;
+  disableBorders?: boolean;
+  selected?: boolean;
+  clickable?: boolean;
+}
+
+/** @remarks \@since 6.0.0 */
+export function tableRow(options: TableRowClassNameOptions = {}): string {
+  const { disableHover, disableBorders, selected, clickable, className } =
+    options;
+  return cnb(
+    styles({
+      bordered: !disableBorders,
+      hoverable: !disableHover,
+      clickable,
+      selected,
+    }),
+    className
+  );
+}

package/src/table/tableStyles.ts

@@ -0,0 +1,24 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-table");
+
+/** @remarks \@since 6.0.0 */
+export interface TableClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `false` */
+  dense?: boolean;
+
+  /** @defaultValue `false` */
+  fullWidth?: boolean;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function table(options: TableClassNameOptions = {}): string {
+  const { dense = false, fullWidth = false, className } = options;
+
+  return cnb(styles({ dense, "full-width": fullWidth }), className);
+}

package/src/table/types.ts

@@ -6,6 +6,29 @@ export type TableStickySectionOptions = Pick<
   "disabled" | "getThreshold" | "getRootMargin"
 >;
 
+/**
+ * This **should be wrapped in `useCallback`** to increase performance.
+ *
+ * The default behavior is to enable the "active" state for sticky headers is:
+ *
+ * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
+ *   after the `<thead>` and enable the active state once 1px overlaps with
+ *   the container.
+ * - otherwise, assume the `TableHeader` is fixed within the viewport and
+ *   parse the `top` CSS style as `px`. enable the active state once 1px
+ *   overlaps with this value AND the `TableHeader` exists within the
+ *   viewport.
+ *   - Note: This really only works with `px` and `rem` units.
+ *
+ * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and
+ * margin.
+ * @remarks \@since 6.0.0
+ */
+export type IsStickyTableSectionActive = (
+  entry: IntersectionObserverEntry,
+  isInTableContainer: boolean
+) => boolean;
+
 /** @remarks \@since 6.0.0 */
 export interface TableStickySectionProps {
   /**
@@ -50,25 +73,20 @@ export interface TableStickySectionProps {
   stickyOptions?: TableStickySectionOptions;
 
   /**
-   * This **should be wrapped in `useCallback`** to increase performance.
-   *
-   * The default behavior is to enable the "active" state for sticky headers is:
-   *
-   * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
-   *   after the `<thead>` and enable the active state once 1px overlaps with
-   *   the container.
-   * - otherwise, assume the `TableHeader` is fixed within the viewport and
-   *   parse the `top` CSS style as `px`. enable the active state once 1px
-   *   overlaps with this value AND the `TableHeader` exists within the
-   *   viewport.
-   *   - Note: This really only works with `px` and `rem` units.
-   *
-   *
+   * An optional className to use when the sticky section is covering other rows
+   * (`active`). When this is defined, the default
+   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+   * applied.
+   */
+  stickyActiveClassName?: string;
+
+  /**
+   * @see {@link IsStickyTableSectionActive} for a description.
    * @see {@link stickyOptions} for an example usage with custom threshold and
    * margin.
    * @remarks \@since 6.0.0
    */
-  isStickyActive?(entry: IntersectionObserverEntry): boolean;
+  isStickyActive?: IsStickyTableSectionActive;
 
   /**
    * Set this to `true` when the {@link sticky} prop is `true` to disable the

package/src/tabs/__tests__/Tab.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { FontIcon } from "../../icon/FontIcon.js";
 import { Tab, type TabProps } from "../Tab.js";
@@ -12,8 +12,8 @@ describe("Tab", () => {
       children: "Tab",
     };
 
-    const { getByRole, rerender } = render(<Tab {...props} />);
-    const tab = getByRole("tab", { name: "Tab" });
+    const { rerender } = render(<Tab {...props} />);
+    const tab = screen.getByRole("tab", { name: "Tab" });
     expect(tab).toMatchSnapshot();
 
     rerender(<Tab {...props} stacked />);

package/src/tabs/__tests__/TabList.tsx

@@ -117,10 +117,10 @@ describe("TabList", () => {
       .mockReturnValue(120);
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
-    const tablist = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
+    rmdRender(<Test />);
+    const tablist = screen.getByRole("tablist");
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
 
     // it should always start to 33.33% and then calculate the correct width
     // based on the number of tabs
@@ -132,6 +132,8 @@ describe("TabList", () => {
     // need to use waitFor since ResizeObserver uses requestAnimationFrame
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("120px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("0px");
     });
 
@@ -143,6 +145,8 @@ describe("TabList", () => {
     await user.click(tab2);
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");
     });
 
@@ -152,6 +156,8 @@ describe("TabList", () => {
     await user.click(tab1);
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+    });
+    await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");
     });
   });
@@ -176,10 +182,12 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons />);
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons />);
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -192,8 +200,8 @@ describe("TabList", () => {
       .mockReturnValue(0);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(100);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -269,10 +277,12 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons vertical />);
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons vertical />);
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -286,8 +296,8 @@ describe("TabList", () => {
     jest.spyOn(tablist, "scrollHeight", "get").mockReturnValue(100);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(40);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -344,7 +354,7 @@ describe("TabList", () => {
   });
 
   it("should support custom labels for the scroll buttons", () => {
-    const { getByRole } = rmdRender(
+    rmdRender(
       <Test
         scrollButtons
         backwardScrollButtonProps={{
@@ -356,8 +366,8 @@ describe("TabList", () => {
       />
     );
 
-    const back = getByRole("button", { name: "Scroll left" });
-    const forward = getByRole("button", { name: "Scroll right" });
+    const back = screen.getByRole("button", { name: "Scroll left" });
+    const forward = screen.getByRole("button", { name: "Scroll right" });
 
     expect(back).toBeInTheDocument();
     expect(forward).toBeInTheDocument();
@@ -384,10 +394,10 @@ describe("TabList", () => {
       },
     }));
 
-    const { getByRole, rerender } = rmdRender(<Test scrollButtons />);
+    const { rerender } = rmdRender(<Test scrollButtons />);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
     expect(back).toBeInTheDocument();
     expect(forward).toBeInTheDocument();
 
@@ -405,8 +415,8 @@ describe("TabList", () => {
     expect(forward).not.toBeInTheDocument();
 
     rerender(<Test scrollButtons="allow-phone" />);
-    expect(getByRole("button", { name: "back" })).toBeInTheDocument();
-    expect(getByRole("button", { name: "forward" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "back" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "forward" })).toBeInTheDocument();
   });
 
   it("should support scrolling correctly in RTL mode", async () => {
@@ -429,16 +439,18 @@ describe("TabList", () => {
       });
 
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test scrollButtons />, {
+    rmdRender(<Test scrollButtons />, {
       wrapper: ({ children }) => (
         <WritingDirectionProvider defaultDir="rtl">
           {children}
         </WritingDirectionProvider>
       ),
     });
-    const tablist = getByRole("tablist");
+    const tablist = screen.getByRole("tablist");
     await waitFor(() => {
       expect(backObserver).toBeDefined();
+    });
+    await waitFor(() => {
       expect(forwardObserver).toBeDefined();
     });
 
@@ -451,8 +463,8 @@ describe("TabList", () => {
       .mockReturnValue(0);
     jest.spyOn(tablist, "scrollWidth", "get").mockReturnValue(100);
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     expect(back).toBeDisabled();
     expect(forward).not.toBeDisabled();
@@ -517,15 +529,13 @@ describe("TabList", () => {
       behavior: "auto",
     }));
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(
-      <Test scrollButtons getScrollToOptions={getScrollToOptions} />
-    );
-    const tablist = getByRole("tablist");
+    rmdRender(<Test scrollButtons getScrollToOptions={getScrollToOptions} />);
+    const tablist = screen.getByRole("tablist");
     tablist.scrollTo ??= jest.fn();
     const scrollTo = jest.spyOn(tablist, "scrollTo");
 
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
     await user.click(forward);
     expect(getScrollToOptions).toHaveBeenCalledWith({
@@ -562,8 +572,8 @@ describe("TabList", () => {
   });
 
   it("should support rendering scrollbars if the scrollbar prop is enabled", () => {
-    const { getByRole, rerender } = rmdRender(<Test />);
-    const tablist = getByRole("tablist");
+    const { rerender } = rmdRender(<Test />);
+    const tablist = screen.getByRole("tablist");
     expect(tablist).toHaveClass("rmd-tablist--no-scrollbar");
 
     rerender(<Test scrollbar />);
@@ -575,10 +585,10 @@ describe("TabList", () => {
     getIntersectionRatio.mockReturnValue(0.5);
     function TooltipTest(): ReactElement {
       const forwardTooltip = useTooltip({
-        hoverTime: 0,
+        hoverTimeout: 0,
       });
       const backwardTooltip = useTooltip({
-        hoverTime: 0,
+        hoverTimeout: 0,
       });
       return (
         <>
@@ -597,11 +607,11 @@ describe("TabList", () => {
       );
     }
 
-    const { getByRole } = rmdRender(<TooltipTest />);
-    const back = getByRole("button", { name: "back" });
-    const forward = getByRole("button", { name: "forward" });
+    rmdRender(<TooltipTest />);
+    const back = screen.getByRole("button", { name: "back" });
+    const forward = screen.getByRole("button", { name: "forward" });
 
-    expect(() => getByRole("tooltip")).toThrow();
+    expect(() => screen.getByRole("tooltip")).toThrow();
 
     fireEvent.mouseEnter(back);
     await waitFor(() => {
@@ -612,7 +622,7 @@ describe("TabList", () => {
 
     fireEvent.mouseLeave(back);
     await waitFor(() => {
-      expect(() => getByRole("tooltip")).toThrow();
+      expect(() => screen.getByRole("tooltip")).toThrow();
     });
 
     fireEvent.mouseEnter(forward);
@@ -624,7 +634,7 @@ describe("TabList", () => {
 
     fireEvent.mouseLeave(forward);
     await waitFor(() => {
-      expect(() => getByRole("tooltip")).toThrow();
+      expect(() => screen.getByRole("tooltip")).toThrow();
     });
   });
 });

package/src/tabs/__tests__/useTabs.tsx

@@ -1,6 +1,11 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type ReactElement } from "react";
-import { rmdRender, userEvent, waitFor } from "../../test-utils/index.js";
+import {
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../test-utils/index.js";
 
 import { Slide } from "../../transition/Slide.js";
 import { SlideContainer } from "../../transition/SlideContainer.js";
@@ -36,13 +41,11 @@ function Test(props: TestProps): ReactElement {
 describe("useTabs", () => {
   it("should scroll to the top of the tab panels element unless disableScrollFix is true", async () => {
     const user = userEvent.setup();
-    const { getByRole, getByTestId, rerender } = rmdRender(
-      <Test disableScrollFix />
-    );
+    const { rerender } = rmdRender(<Test disableScrollFix />);
 
-    const panels = getByTestId("panels");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
+    const panels = screen.getByTestId("panels");
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
 
     const scrollTop = jest.spyOn(panels, "scrollTop", "set");
 
@@ -56,14 +59,14 @@ describe("useTabs", () => {
 
   it("should move focus without selecting the next tab with keyboard movement when the activationMode is not automatic", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
-    const tabList = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
-    const tab3 = getByRole("tab", { name: "Tab 3" });
-    const panel1 = getByRole("tabpanel", { name: "Tab 1" });
-    const panel2 = getByRole("tabpanel", { name: "Tab 2" });
-    const panel3 = getByRole("tabpanel", { name: "Tab 3" });
+    rmdRender(<Test />);
+    const tabList = screen.getByRole("tablist");
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    const tab3 = screen.getByRole("tab", { name: "Tab 3" });
+    const panel1 = screen.getByRole("tabpanel", { name: "Tab 1" });
+    const panel2 = screen.getByRole("tabpanel", { name: "Tab 2" });
+    const panel3 = screen.getByRole("tabpanel", { name: "Tab 3" });
 
     expect(isElementVisible(panel1)).toBe(true);
     expect(isElementVisible(panel2)).toBe(false);
@@ -127,10 +130,10 @@ describe("useTabs", () => {
 
     await user.keyboard("[End][Enter]");
     await waitFor(() => {
-      expect(isElementVisible(panel2)).toBe(false);
-      expect(isElementVisible(panel1)).toBe(false);
       expect(isElementVisible(panel3)).toBe(true);
     });
+    expect(isElementVisible(panel2)).toBe(false);
+    expect(isElementVisible(panel1)).toBe(false);
 
     expect(tabList).toHaveAttribute("tabIndex", "-1");
     expect(tab1).toHaveAttribute("aria-selected", "false");
@@ -165,10 +168,10 @@ describe("useTabs", () => {
 
     await user.keyboard("tt[Space]");
     await waitFor(() => {
-      expect(isElementVisible(panel1)).toBe(false);
-      expect(isElementVisible(panel2)).toBe(true);
       expect(isElementVisible(panel3)).toBe(false);
     });
+    expect(isElementVisible(panel1)).toBe(false);
+    expect(isElementVisible(panel2)).toBe(true);
     expect(tabList).toHaveAttribute("tabIndex", "-1");
     expect(tab1).toHaveAttribute("aria-selected", "false");
     expect(tab1).toHaveAttribute("tabIndex", "-1");
@@ -180,11 +183,11 @@ describe("useTabs", () => {
 
   it("should focus and select next tab when the activationMode is set to automatic", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test activationMode="automatic" />);
-    const tabList = getByRole("tablist");
-    const tab1 = getByRole("tab", { name: "Tab 1" });
-    const tab2 = getByRole("tab", { name: "Tab 2" });
-    const tab3 = getByRole("tab", { name: "Tab 3" });
+    rmdRender(<Test activationMode="automatic" />);
+    const tabList = screen.getByRole("tablist");
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    const tab3 = screen.getByRole("tab", { name: "Tab 3" });
 
     await user.tab();
     expect(document.activeElement).toBe(tab1);

package/src/tabs/_tabs.scss

@@ -42,45 +42,27 @@ $tablist-scroller-background-color: theme.theme-get-var(
   inherit
 ) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs 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, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -126,6 +108,8 @@ $var-lookup: (
     // also fixes issues when placed within a flex column container
     flex-shrink: 0;
     flex-wrap: nowrap;
+    // make sure it can enable scrollbars in flex/grid containers
+    max-width: 100%;
     outline: none;
     overflow-x: auto;
     position: relative;
@@ -246,6 +230,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $inactive-color);
+    @include set-var(active-color, $active-color);
+    @include set-var(inactive-color, $inactive-color);
+    @include set-var(disabled-color, $disabled-color);
+
+    @if not $disable-indicator {
+      @include set-var(indicator-background, $indicator-background);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include tablist-styles;

package/src/test-utils/data-testid.ts

@@ -0,0 +1,5 @@
+declare module "react" {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    "data-testid"?: string | number;
+  }
+}

package/src/test-utils/jest-setup.ts

@@ -1,9 +1,13 @@
 import { beforeEach } from "@jest/globals";
 import { INTERACTION_CONFIG } from "../interaction/config.js";
+import { TRANSITION_CONFIG } from "../transition/config.js";
 
 beforeEach(() => {
   // set the mode to `none` in tests since ripples require
   // `getBoundingClientRect()` to create correct CSS. You'll either see warnings
   // in the console around invalid css values or `NaN`.
   INTERACTION_CONFIG.mode = "none";
+
+  // disable transitions in tests since it just makes it more difficult
+  TRANSITION_CONFIG.disabled = true;
 });

package/src/theme/ThemeProvider.tsx

@@ -40,6 +40,8 @@ import { useColorScheme } from "./useColorScheme.js";
 declare module "react" {
   interface CSSProperties {
     "--rmd-background-color"?: string;
+    "--rmd-on-background-color"?: string;
+    "--rmd-surface-color"?: string;
     "--rmd-primary-color"?: string;
     "--rmd-on-primary-color"?: string;
     "--rmd-secondary-color"?: string;
@@ -54,6 +56,10 @@ declare module "react" {
     "--rmd-text-secondary-color"?: string;
     "--rmd-text-hint-color"?: string;
     "--rmd-text-disabled-color"?: string;
+
+    "--rmd-outline-width"?: string | number;
+    "--rmd-outline-color"?: string;
+    "--rmd-outline-grey-color"?: string;
   }
 }
 

package/src/theme/__tests__/LocalStorageColorSchemeProvider.tsx

@@ -56,15 +56,15 @@ function ControllableTest(): ReactElement {
 
 describe("LocalStorageColorSchemeProvider", () => {
   it("should default to the light color scheme and allow the useColorScheme hook to change the values", () => {
-    const { getByRole } = render(
+    render(
       <LocalStorageColorSchemeProvider>
         <ControllableTest />
       </LocalStorageColorSchemeProvider>
     );
 
-    const lightTheme = getByRole("checkbox", { name: "Light" });
-    const darkTheme = getByRole("checkbox", { name: "Dark" });
-    const systemTheme = getByRole("checkbox", { name: "System" });
+    const lightTheme = screen.getByRole("checkbox", { name: "Light" });
+    const darkTheme = screen.getByRole("checkbox", { name: "Dark" });
+    const systemTheme = screen.getByRole("checkbox", { name: "System" });
     expect(lightTheme).toBeChecked();
     expect(darkTheme).not.toBeChecked();
     expect(systemTheme).not.toBeChecked();

package/src/theme/__tests__/useCSSVariables.tsx

@@ -7,7 +7,7 @@ import {
   type ReactElement,
   type RefObject,
 } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { textPrimaryColorVar } from "../cssVars.js";
 import { type CSSVariableName, type DefinedCSSVariableName } from "../types.js";
@@ -116,9 +116,9 @@ describe("useCSSVariables", () => {
       );
     }
 
-    const { getByTestId, getByRole } = render(<Test />);
-    const div = getByTestId("div");
-    const button = getByRole("button", { name: "Style" });
+    render(<Test />);
+    const div = screen.getByTestId("div");
+    const button = screen.getByRole("button", { name: "Style" });
 
     expect(div.style.getPropertyValue("--test")).toBe("100px");
     expect(div).toMatchSnapshot();