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

package/dist/window-splitter/useWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport type {\n  BaseDraggableOptions,\n  DraggableImplementation,\n  DraggableKeyboardEventHandlers,\n  DraggableMouseEventHandlers,\n  DraggableStateOptions,\n  DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useDraggable } from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * You are most likely looking for the `useWindowSplitter` or\n * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook\n * to implement those two versions.\n *\n * @example\n * Custom Implementation\n * ```tsx\n * import { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const {\n    id: propId,\n    min,\n    max,\n    reversed = false,\n    vertical,\n    withinOffsetParent,\n  } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    value,\n    dragging,\n    draggableRef,\n    dragPercentage,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","getPercentage","useWindowSplitter","options","id","propId","min","max","reversed","vertical","withinOffsetParent","draggableImplementation","value","dragging","draggableRef","dragPercentage","mouseEventHandlers","keyboardEventHandlers","percentage","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAUA,SAASA,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAiE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,IAAIC,MAAM,EACVC,GAAG,EACHC,GAAG,EACHC,WAAW,KAAK,EAChBC,QAAQ,EACRC,kBAAkB,EACnB,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAMM,0BAA0BZ,aAAaI;IAC7C,MAAM,EACJS,KAAK,EACLC,QAAQ,EACRC,YAAY,EACZC,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGN;IAEJ,MAAMO,aACJL,YAAYH,qBACRK,iBACAd,cAAc;QAAEK;QAAKC;QAAKK;IAAM;IAEtC,OAAO;QACL,GAAGD,uBAAuB;QAC1BQ,eAAe;YACb,oBAAoBV,WAAW,aAAaW;YAC5C,iBAAiBC,KAAKC,IAAI,CAACJ,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBd;YACAmB,KAAKT;YACLU,MAAM;YACNX;YACAL;YACA,GAAGQ,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type Ref, type RefCallback } from \"react\";\nimport {\n  useDraggable,\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example\n * Custom Implementation\n * ```tsx\n * import { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAEA,SACEA,YAAY,QAOP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.3",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -55,22 +55,22 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.3"
+    "nanoid": "^5.0.4"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "1.3.96",
+    "@swc/cli": "^0.1.63",
+    "@swc/core": "1.3.102",
     "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/lodash": "^4.14.201",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
     "chokidar": "^3.5.3",
     "filesize": "^10.1.0",
     "glob": "10.3.10",
@@ -80,14 +80,14 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-order": "^6.0.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-order": "^6.0.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@jest/globals": "^29.6.1",

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-*;
@@ -312,6 +310,7 @@ $_layer-order: (
   @include form.use-light-theme;
   @include table.use-light-theme;
   @include segmented-button.use-light-theme;
+  @include badge.use-light-theme;
 }
 
 @mixin use-dark-theme {
@@ -326,6 +325,38 @@ $_layer-order: (
   @include form.use-dark-theme;
   @include table.use-dark-theme;
   @include segmented-button.use-dark-theme;
+  @include badge.use-dark-theme;
+}
+
+@mixin variables {
+  @include theme.theme-variables;
+  @include app-bar.variables;
+  @include avatar.variables;
+  @include badge.variables;
+  @include box.variables;
+  @include button.variables;
+  @include card.variables;
+  @include chip.variables;
+  @include dialog.variables;
+  @include divider.variables;
+  @include form.variables;
+  @include icon.variables;
+  @include interaction.variables;
+  @include layout.variables;
+  @include link.variables;
+  @include list.variables;
+  @include menu.variables;
+  @include overlay.variables;
+  @include progress.variables;
+  @include segmented-button.variables;
+  @include sheet.variables;
+  @include snackbar.variables;
+  @include table.variables;
+  @include tabs.variables;
+  @include tooltip.variables;
+  @include transition.transition-variables;
+  @include tree.variables;
+  @include typography.typography-variables;
 }
 
 @mixin styles {
@@ -453,7 +484,7 @@ $_layer-order: (
 
   @if not theme.$disable-default-root-theme {
     :root {
-      @include theme.colors;
+      @include variables;
 
       @if not
         theme.$disable-default-system-theme and

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;
@@ -64,6 +74,63 @@ $_swappable-properties: text-align;
   @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
 }
 
+@function get-var-name($variables, $name, $group) {
+  @if $group == icon {
+    @if $name == symbol-grade {
+      @return --rmd-symbol-grad;
+    }
+    @if $name == symbol-weight {
+      @return --rmd-symbol-wght;
+    }
+    @if $name == optical-size {
+      @return --rmd-symbol-opsz;
+    }
+  }
+  @if $group == name and $name == fab-offset {
+    @return --rmd-fab-offset;
+  }
+
+  @if $group == form {
+    @if $name ==
+      addon-top or
+      $name ==
+      addon-margin-top or
+      $name ==
+      active-color or
+      $name ==
+      focus-color
+    {
+      @return --rmd-form-#{$name};
+    }
+  }
+  @if $group == interaction and $name == background-color {
+    @return --rmd-interaction-#{$name};
+  }
+
+  @if $group == list {
+    $updated: str-replace(
+      str-replace($name, "horizontal-padding", "padding-h"),
+      "vertical-padding",
+      "padding-v"
+    );
+    @if $updated != $name {
+      @return --rmd-list-#{$name};
+    }
+  }
+
+  @if $group == snackbar and $name != offset {
+    @return --rmd-toast-#{$name};
+  }
+
+  $prefix: "";
+  @if not list.index((theme, form, interaction, transition, typography), $group)
+  {
+    $prefix: $group + "-";
+  }
+
+  @return "--rmd-" + $prefix + validate($variables, $name, $group + " var");
+}
+
 @mixin map-to-styles($map) {
   @each $property, $value in $map {
     @if meta.type-of($value) == map {
@@ -257,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;
+    }
+  }
+}