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

package/src/__tests__/useElementSize.tsx

@@ -0,0 +1,181 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef, type MutableRefObject, type ReactElement } from "react";
+import {
+  act,
+  cleanupResizeObserverAfterEach,
+  render,
+  screen,
+  setupResizeObserverMock,
+} from "../test-utils/index.js";
+import { type ElementSize } from "../types.js";
+import { useElementSize, type ElementSizeOptions } from "../useElementSize.js";
+
+cleanupResizeObserverAfterEach();
+
+const getValue = (element: HTMLElement): number =>
+  parseFloat(element.textContent || "");
+
+function MainTest(
+  props: Omit<ElementSizeOptions<HTMLElement>, "ref">
+): ReactElement {
+  const { height, width, elementRef } = useElementSize(props);
+
+  return (
+    <div data-testid="target" ref={elementRef}>
+      <div data-testid="height">{height}</div>
+      <div data-testid="width">{width}</div>
+    </div>
+  );
+}
+
+const renderMain = (options: ElementSizeOptions<HTMLElement> = {}) => {
+  const observer = setupResizeObserverMock();
+  render(<MainTest {...options} />);
+  const target = screen.getByTestId("target");
+  const height = screen.getByTestId("height");
+  const width = screen.getByTestId("width");
+
+  return { target, height, width, observer };
+};
+
+describe("useElementSize", () => {
+  it("should default to a height and width of 0", async () => {
+    const elementSize: MutableRefObject<ElementSize | null> = {
+      current: null,
+    };
+
+    function Test(): ReactElement {
+      const { height, width, elementRef } = useElementSize();
+      if (!elementSize.current) {
+        elementSize.current = {
+          height,
+          width,
+        };
+      }
+
+      return <div ref={elementRef} />;
+    }
+
+    render(<Test />);
+    expect(elementSize.current).toEqual({
+      height: 0,
+      width: 0,
+    });
+  });
+
+  it("should merge a ref correctly", () => {
+    const ref = createRef<HTMLDivElement>();
+    function Test(): ReactElement {
+      const { elementRef } = useElementSize({ ref });
+
+      return <div data-testid="div" ref={elementRef} />;
+    }
+
+    render(<Test />);
+    expect(ref.current).toBe(screen.getByTestId("div"));
+  });
+
+  it("should update the height and width correctly", () => {
+    const { target, height, width, observer } = renderMain();
+
+    expect(getValue(height)).toBe(0);
+    expect(getValue(width)).toBe(0);
+
+    act(() => {
+      observer.resizeElement(target, {
+        height: 300,
+        width: 200,
+      });
+    });
+
+    expect(getValue(height)).toBe(300);
+    expect(getValue(width)).toBe(200);
+  });
+
+  it("support not updating when the height changes and the disableHeight is true", () => {
+    const { target, height, width, observer } = renderMain({
+      disableHeight: true,
+    });
+
+    expect(getValue(height)).toBe(0);
+    expect(getValue(width)).toBe(0);
+
+    act(() => {
+      observer.resizeElement(target, {
+        height: 300,
+        width: 200,
+      });
+    });
+
+    expect(getValue(height)).toBe(300);
+    expect(getValue(width)).toBe(200);
+
+    act(() => {
+      observer.resizeElement(target, {
+        height: 600,
+        width: 200,
+      });
+    });
+
+    expect(getValue(height)).toBe(300);
+    expect(getValue(width)).toBe(200);
+  });
+
+  it("support not updating when the width changes and the disableWidth is true", () => {
+    const { target, height, width, observer } = renderMain({
+      disableWidth: true,
+    });
+
+    expect(getValue(height)).toBe(0);
+    expect(getValue(width)).toBe(0);
+
+    act(() => {
+      observer.resizeElement(target, {
+        height: 300,
+        width: 200,
+      });
+    });
+
+    expect(getValue(height)).toBe(300);
+    expect(getValue(width)).toBe(200);
+
+    act(() => {
+      observer.resizeElement(target, {
+        height: 300,
+        width: 800,
+      });
+    });
+
+    expect(getValue(height)).toBe(300);
+    expect(getValue(width)).toBe(200);
+  });
+
+  it("should allow for a defaultValue", () => {
+    const elementSize: MutableRefObject<ElementSize | null> = {
+      current: null,
+    };
+
+    function Test(): ReactElement {
+      const { height, width, elementRef } = useElementSize({
+        defaultValue: () => ({
+          height: 300,
+          width: 200,
+        }),
+      });
+      if (!elementSize.current) {
+        elementSize.current = {
+          height,
+          width,
+        };
+      }
+
+      return <div ref={elementRef} />;
+    }
+    render(<Test />);
+
+    expect(elementSize.current).toEqual({
+      height: 300,
+      width: 200,
+    });
+  });
+});

package/src/__tests__/useWindowSize.node.tsx

@@ -0,0 +1,56 @@
+/** @jest-environment node */
+
+import { describe, expect, it } from "@jest/globals";
+import { type MutableRefObject } from "react";
+import { renderToString } from "react-dom/server";
+import { type ElementSize } from "../types.js";
+import { useWindowSize } from "../useWindowSize.js";
+
+describe("useWindowSize", () => {
+  it("should default to 0 in ssr", () => {
+    const sizeRef: MutableRefObject<ElementSize | null> = {
+      current: null,
+    };
+    function Test(): null {
+      const { height, width } = useWindowSize();
+      sizeRef.current = {
+        height,
+        width,
+      };
+
+      return null;
+    }
+
+    expect(renderToString(<Test />)).toBe("");
+    expect(sizeRef.current).toEqual({
+      height: 0,
+      width: 0,
+    });
+  });
+
+  it("should allow for custom ssr default values", () => {
+    const ssrHeight = 1080;
+    const ssrWidth = 1920;
+    const sizeRef: MutableRefObject<ElementSize | null> = {
+      current: null,
+    };
+    function Test(): null {
+      const { height, width } = useWindowSize({
+        ssrHeight,
+        ssrWidth,
+      });
+      sizeRef.current = {
+        height,
+        width,
+      };
+
+      return null;
+    }
+
+    expect(renderToString(<Test />)).toBe("");
+    expect(sizeRef.current).toEqual({
+      height: ssrHeight,
+      width: ssrWidth,
+    });
+  });
+});

package/src/__tests__/useWindowSize.tsx

@@ -0,0 +1,156 @@
+import { beforeAll, beforeEach, describe, expect, it } from "@jest/globals";
+import { createRef, type MutableRefObject, type ReactElement } from "react";
+import { act } from "react-dom/test-utils";
+import { SsrProvider } from "../SsrProvider.js";
+import { render, screen, waitFor } from "../test-utils/index.js";
+import { type ElementSize } from "../types.js";
+import { useWindowSize, type WindowSizeOptions } from "../useWindowSize.js";
+
+const getValue = (element: HTMLElement): number =>
+  parseFloat(element.textContent || "");
+
+interface TestProps extends WindowSizeOptions {
+  initialRef?: MutableRefObject<ElementSize | null>;
+}
+
+function Test(props: TestProps): ReactElement {
+  const { initialRef, ...options } = props;
+
+  const { height, width } = useWindowSize(options);
+  if (initialRef && !initialRef.current) {
+    initialRef.current = { height, width };
+  }
+
+  return (
+    <>
+      <div data-testid="height">{height}</div>
+      <div data-testid="width">{width}</div>
+    </>
+  );
+}
+
+let HEIGHT: number;
+let WIDTH: number;
+beforeAll(() => {
+  HEIGHT = window.innerHeight;
+  WIDTH = window.innerWidth;
+});
+
+beforeEach(() => {
+  window.innerHeight = HEIGHT;
+  window.innerWidth = WIDTH;
+});
+
+describe("useWindowSize", () => {
+  it("should default to 0 when in ssr mode", async () => {
+    // disable throttle so don't need to await the throttled hydration
+    const initialRef = createRef<ElementSize | null>();
+    render(
+      <SsrProvider ssr>
+        <Test initialRef={initialRef} />
+      </SsrProvider>
+    );
+
+    expect(initialRef.current).toEqual({
+      height: 0,
+      width: 0,
+    });
+
+    const height = screen.getByTestId("height");
+    const width = screen.getByTestId("width");
+    await waitFor(() => {
+      expect(getValue(height)).toBe(HEIGHT);
+    });
+    expect(getValue(width)).toBe(WIDTH);
+  });
+
+  it("should allow custom ssr default values in ssr mode", async () => {
+    const initialRef = createRef<ElementSize | null>();
+    const ssrHeight = 1080;
+    const ssrWidth = 1920;
+    render(
+      <SsrProvider ssr>
+        <Test
+          initialRef={initialRef}
+          ssrHeight={ssrHeight}
+          ssrWidth={ssrWidth}
+        />
+      </SsrProvider>
+    );
+
+    expect(initialRef.current).toEqual({
+      height: ssrHeight,
+      width: ssrWidth,
+    });
+
+    const height = screen.getByTestId("height");
+    const width = screen.getByTestId("width");
+    await waitFor(() => {
+      expect(getValue(height)).toBe(HEIGHT);
+    });
+    expect(getValue(width)).toBe(WIDTH);
+  });
+
+  it("should default to the window size when not in ssr mode", () => {
+    const initialRef = createRef<ElementSize | null>();
+    render(
+      <SsrProvider>
+        <Test initialRef={initialRef} />
+      </SsrProvider>
+    );
+
+    expect(initialRef.current).toEqual({
+      height: HEIGHT,
+      width: WIDTH,
+    });
+
+    const height = screen.getByTestId("height");
+    const width = screen.getByTestId("width");
+    expect(getValue(height)).toBe(HEIGHT);
+    expect(getValue(width)).toBe(WIDTH);
+  });
+
+  it("should support disabling updating when only the height changes", () => {
+    render(<Test throttle={false} disableHeight />);
+    const height = screen.getByTestId("height");
+    const width = screen.getByTestId("width");
+    expect(getValue(height)).toBe(HEIGHT);
+    expect(getValue(width)).toBe(WIDTH);
+
+    act(() => {
+      window.innerHeight = 1000;
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(getValue(height)).toBe(HEIGHT);
+    expect(getValue(width)).toBe(WIDTH);
+
+    act(() => {
+      window.innerWidth = 800;
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(getValue(height)).toBe(1000);
+    expect(getValue(width)).toBe(800);
+  });
+
+  it("should support disabling updating when only the width changes", () => {
+    render(<Test throttle={false} disableWidth />);
+    const height = screen.getByTestId("height");
+    const width = screen.getByTestId("width");
+    expect(getValue(height)).toBe(HEIGHT);
+    expect(getValue(width)).toBe(WIDTH);
+
+    act(() => {
+      window.innerWidth = 800;
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(getValue(height)).toBe(HEIGHT);
+    expect(getValue(width)).toBe(WIDTH);
+
+    act(() => {
+      window.innerHeight = 1000;
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(getValue(height)).toBe(1000);
+    expect(getValue(width)).toBe(800);
+  });
+});

package/src/_box-shadows.scss

@@ -168,8 +168,16 @@ $box-shadow-3-layers: (
       }
     }
 
-    #{$active-string} {
-      opacity: 1;
+    @if $active-selectors == "&:hover" {
+      @include utils.mouse-hover {
+        #{$active-string} {
+          opacity: 1;
+        }
+      }
+    } @else {
+      #{$active-string} {
+        opacity: 1;
+      }
     }
   }
 }
@@ -179,6 +187,7 @@ $box-shadow-3-layers: (
   $end-z-value,
   $active-selectors,
   $pseudo-before: true,
+  $pseudo-z-index: 0,
   $duration: transition.$linear-duration,
   $color: $box-shadow-color,
   $opacity-boost: 0,
@@ -201,6 +210,7 @@ $box-shadow-3-layers: (
     $active-selectors,
     $duration,
     $pseudo-before,
+    $pseudo-z-index,
     $position-relative: $position-relative
   );
 }

package/src/_core.scss

@@ -1,5 +1,3 @@
-@use "sass:list" as sassList;
-
 @forward "utils";
 @forward "media-queries/media-queries";
 @forward "box/box" as box-*;

package/src/_utils.scss

@@ -5,6 +5,16 @@
 
 $disable-rtl: false !default;
 $disable-validation: false !default;
+// :has css selectors will arrive in firefox 121 so the browsers I support will
+// also support it by the time of the react-md release. allowing this to be
+// disabled just to be safe though
+$disable-has-selectors: false !default;
+// I'm reducing the required CSS for `:focus` styles by switching to
+// `:focus-visible` instead of `.keyboard-only .some-selector:focus` but there
+// are some things I don't like as much when switching from mouse to keyboard.
+// Defaulting to `:focus-visible`, but allowing the keyboard-only styles as well
+// if users are more familiar with it
+$disable-focus-visible: false !default;
 $temporary-element-z-index: 30 !default;
 
 $_swappable-positions: top right bottom left;
@@ -314,3 +324,15 @@ $_swappable-properties: text-align;
     @content;
   }
 }
+
+@mixin mouse-hover($wrap-in-hover: true) {
+  @media (hover: hover) and (pointer: fine) {
+    @if $wrap-in-hover {
+      &:hover {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}

package/src/app-bar/AppBar.tsx

@@ -5,7 +5,13 @@ import {
   type HTMLAttributes,
   type Ref,
 } from "react";
-import { cssUtils, type BackgroundColor } from "../cssUtils.js";
+import { box, type BoxOptions } from "../box/styles.js";
+import {
+  cssUtils,
+  type BackgroundColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type CssUtilsOptions,
+} from "../cssUtils.js";
 import { type CssPosition } from "../types.js";
 import { bem } from "../utils/bem.js";
 
@@ -52,7 +58,7 @@ export type AppBarHeight =
   | "prominent-dense";
 
 /** @remarks \@since 6.0.0 */
-export interface AppBarClassNameOptions {
+export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
   className?: string;
 
   /**
@@ -87,21 +93,15 @@ export interface AppBarClassNameOptions {
    */
   theme?: AppBarTheme;
 
-  /**
-   * Set this to `true` to update the `AppBar` to have `flex-direction: column`.
-   * This is useful when nesting `AppBar`s.
-   *
-   * @remarks \@since 6.0.0
-   * @defaultValue `false`
-   */
-  stacked?: boolean;
-
   /**
    * @defaultValue `stacked ? "auto" : "normal"`
    * @see {@link AppBarHeight}
    */
   height?: AppBarHeight;
 
+  /** @see {@link CssUtilsOptions.surfaceColor} */
+  surfaceColor?: "light" | "dark";
+
   /**
    * Set this to `true` if the app bar's positioning and width should be
    * changed whenever the scrollbar is visible on the page. This defaults to
@@ -123,13 +123,22 @@ export interface AppBarClassNameOptions {
 export function appBar(options: AppBarClassNameOptions = {}): string {
   const {
     className,
-    height = "normal",
     theme = "primary",
-    stacked = false,
+    stacked,
+    height = stacked ? "auto" : "normal",
     position = "static",
     pagePosition = "top",
     scrollbarOffset = position === "fixed",
-    disableElevation = false,
+    align,
+    grid,
+    gridColumns,
+    gridName,
+    justify,
+    reversed,
+    surfaceColor,
+    disableWrap = true,
+    disablePadding,
+    disableElevation,
   } = options;
   const surface = theme === "surface";
   const clear = theme === "clear";
@@ -139,15 +148,28 @@ export function appBar(options: AppBarClassNameOptions = {}): string {
       surface,
       [height]: height !== "normal",
       fixed: position !== "static",
-      sticky: position === "sticky",
       stacked,
+      sticky: position === "sticky",
       [pagePosition]: position !== "static",
       elevated: position !== "static" && !disableElevation,
       "scrollbar-offset": scrollbarOffset,
       "static-scrollbar-offset": position === "static" && scrollbarOffset,
     }),
+    box({
+      align,
+      stacked,
+      fullWidth: true,
+      grid,
+      gridColumns,
+      gridName,
+      justify,
+      reversed,
+      disableWrap,
+      disablePadding,
+    }),
     cssUtils({
       backgroundColor: !surface && !clear ? theme : undefined,
+      surfaceColor,
     }),
     className
   );
@@ -212,9 +234,18 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       className,
       theme,
       stacked,
-      height = stacked ? "auto" : "normal",
+      height,
+      align,
+      grid,
+      gridName,
+      justify,
+      reversed,
+      gridColumns,
+      disableWrap,
+      disablePadding,
       position,
       pagePosition,
+      surfaceColor,
       scrollbarOffset,
       disableElevation,
       as: Component = position ? "header" : "div",
@@ -226,14 +257,23 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       <Component
         {...remaining}
         className={appBar({
+          className,
           theme,
           position,
           pagePosition,
           disableElevation,
-          stacked,
-          height,
-          className,
           scrollbarOffset,
+          height,
+          grid,
+          gridName,
+          gridColumns,
+          align,
+          stacked,
+          justify,
+          reversed,
+          surfaceColor,
+          disableWrap,
+          disablePadding,
         })}
         ref={ref}
       >