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

package/dist/window-splitter/_window-splitter.scss

@@ -9,43 +9,17 @@ $disable-vertical: false !default;
 $disable-reversed: false !default;
 $disable-absolute-position: false !default;
 
-$window-splitter-size: 1rem !default;
-$window-splitter-background-size: 0.25rem !default;
-$window-splitter-background-color: interaction.get-var(focus-color) !default;
-$window-splitter-z-index: 30 !default;
-
-$var-lookup: (
-  top: (
-    var: --rmd-window-splitter-top,
-    value: 0,
-  ),
-  right: (
-    var: --rmd-window-splitter-right,
-    value: 0,
-  ),
-  bottom: (
-    var: --rmd-window-splitter-bottom,
-    value: 0,
-  ),
-  left: (
-    var: --rmd-window-splitter-left,
-    value: 0,
-  ),
-  opacity: (
-    var: --rmd-window-splitter-opacity,
-    value: 0,
-  ),
-  position: (
-    var: --rmd-window-splitter-position,
-    value: 0,
-  ),
-);
+$size: 1rem !default;
+$background-size: 0.25rem !default;
+$background-color: interaction.get-var(focus-color) !default;
+$z-index: 30 !default;
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "window-splitter var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$variables: (top, right, bottom, left, opacity, position);
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "window-splitter");
+  // window-splitter variables don't make much sense to set globally
+  $value: if($fallback, $fallback, 0);
   @if $value {
     @return var(#{$var}, #{$value});
   }
@@ -54,9 +28,9 @@ $var-lookup: (
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "window-splitter var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "window-splitter")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -74,10 +48,10 @@ $var-lookup: (
       padding: 0;
       position: fixed;
       transition: opacity transition.$linear-duration;
-      z-index: $window-splitter-z-index;
+      z-index: $z-index;
 
       &::after {
-        background-color: $window-splitter-background-color;
+        background-color: $background-color;
         content: "";
         inset: 0;
         position: absolute;
@@ -106,10 +80,10 @@ $var-lookup: (
           @include use-var(top);
 
           cursor: col-resize;
-          width: $window-splitter-size;
+          width: $size;
 
           &::after {
-            width: $window-splitter-background-size;
+            width: $background-size;
           }
         }
 
@@ -133,11 +107,11 @@ $var-lookup: (
           @include use-var(top, position);
 
           cursor: row-resize;
-          height: $window-splitter-size;
+          height: $size;
           width: 100%;
 
           &::after {
-            height: $window-splitter-background-size;
+            height: $background-size;
           }
         }
 
@@ -148,7 +122,7 @@ $var-lookup: (
             top: auto;
 
             &::after {
-              top: calc(100% - $window-splitter-background-size);
+              top: calc(100% - $background-size);
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.2",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -11,11 +11,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./test-utils": "./dist/test-utils/index.js",
-    "./test-utils/*": {
-      "require": "./dist/test-utils/*",
-      "default": "./dist/test-utils/*.js"
-    },
     "./test-utils/polyfills": {
       "require": "./dist/test-utils/polyfills",
       "default": "./dist/test-utils/polyfills/index.js"
@@ -24,7 +19,13 @@
       "require": "./dist/test-utils/polyfills/*",
       "default": "./dist/test-utils/polyfills/*.js"
     },
-    "./test-utils/jest-setup": "./dist/test-utils/jest-setup.js*",
+    "./test-utils/jest-setup": "./dist/test-utils/jest-setup.js",
+    "./test-utils/data-testid": "./dist/test-utils/data-testid.js",
+    "./test-utils": "./dist/test-utils/index.js",
+    "./test-utils/*": {
+      "require": "./dist/test-utils/*",
+      "default": "./dist/test-utils/*.js"
+    },
     "./colors": {
       "sass": "./dist/_colors.scss"
     },
@@ -54,22 +55,22 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.1"
+    "nanoid": "^5.0.3"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@swc/cli": "^0.1.62",
-    "@swc/core": "1.3.92",
+    "@swc/core": "1.3.96",
     "@swc/jest": "^0.2.29",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/lodash": "^4.14.199",
-    "@types/node": "^20.8.3",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "chokidar": "^3.5.3",
     "filesize": "^10.1.0",
     "glob": "10.3.10",
@@ -81,9 +82,9 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-order": "^6.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
@@ -129,6 +130,7 @@
   },
   "scripts": {
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
+    "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
     "build-esm": "swc src -d ./dist",
     "build-esm-watch": "pnpm run build-esm --watch",
@@ -136,6 +138,7 @@
     "build-types-watch": "pnpm run build-types --watch",
     "build-scss": "node scripts/copySassFiles.js",
     "build-scss-watch": "pnpm run build-scss --watch",
+    "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
     "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",

package/src/__tests__/NoSsr.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
-import { render } from "../test-utils/index.js";
+import { render, screen } from "../test-utils/index.js";
 
 import { NoSsr } from "../NoSsr.js";
 import { SsrProvider, useSsr } from "../SsrProvider.js";
@@ -15,17 +15,17 @@ describe("NoSsr", () => {
       return <p>Some Text</p>;
     }
 
-    const { getByText } = render(
+    render(
       <NoSsr>
         <Content />
       </NoSsr>
     );
 
-    expect(() => getByText("Some Text")).not.toThrow();
+    expect(() => screen.getByText("Some Text")).not.toThrow();
   });
 
   it("should always render the children if ssr mode has not been initialized", () => {
-    const { getByText } = render(
+    render(
       <SsrProvider>
         <NoSsr>
           <Content />
@@ -33,7 +33,7 @@ describe("NoSsr", () => {
       </SsrProvider>
     );
 
-    expect(() => getByText("Some Text")).not.toThrow();
+    expect(() => screen.getByText("Some Text")).not.toThrow();
   });
 
   // I don't really know how to test this part

package/src/__tests__/useAsyncAction.tsx

@@ -1,6 +1,12 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type MouseEvent, type ReactElement } from "react";
-import { act, rmdRender, userEvent, waitFor } from "../test-utils/index.js";
+import {
+  act,
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../test-utils/index.js";
 
 import { box } from "../box/styles.js";
 import { Button, type ButtonProps } from "../button/Button.js";
@@ -41,7 +47,7 @@ function Test(props: TestProps): ReactElement {
             disablePadding: true,
           })}
         >
-          <CircularProgress />
+          <CircularProgress aria-label="Loading" />
         </span>
       )}
     </Button>
@@ -59,8 +65,8 @@ describe("useAsyncAction", () => {
         instance.addEventListener("resolve-promise", () => resolve());
       });
     });
-    const { getByRole, unmount } = rmdRender(<Test onClick={onClick} />);
-    const button = getByRole("button", { name: "Button" });
+    const { unmount } = rmdRender(<Test onClick={onClick} />);
+    const button = screen.getByRole("button", { name: "Button" });
 
     expect(button).not.toHaveAttribute("aria-disabled");
     await user.click(button);
@@ -74,6 +80,8 @@ describe("useAsyncAction", () => {
     });
     await waitFor(() => {
       expect(button).not.toHaveAttribute("aria-disabled");
+    });
+    await waitFor(() => {
       expect(button).not.toHaveAttribute("disabled");
     });
 
@@ -101,8 +109,8 @@ describe("useAsyncAction", () => {
       onClick,
     };
 
-    const { getByRole, rerender } = rmdRender(<Test {...props} disabled />);
-    const button = getByRole("button", { name: "Button" });
+    const { rerender } = rmdRender(<Test {...props} disabled />);
+    const button = screen.getByRole("button", { name: "Button" });
     expect(button).toBeDisabled();
 
     await user.click(button);

package/src/__tests__/useDebouncedFunction.tsx

@@ -4,6 +4,7 @@ import {
   act,
   fireEvent,
   render,
+  screen,
   userEvent,
   waitFor,
 } from "../test-utils/index.js";
@@ -34,9 +35,9 @@ describe("useDebouncedFunction", () => {
       );
     }
 
-    const { getByRole, getByTestId, unmount } = render(<Test />);
-    const output = getByTestId("output");
-    const field = getByRole("textbox", { name: "Field" });
+    const { unmount } = render(<Test />);
+    const output = screen.getByTestId("output");
+    const field = screen.getByRole("textbox", { name: "Field" });
 
     expect(output).toHaveTextContent("");
     expect(field).toHaveValue("");
@@ -47,6 +48,8 @@ describe("useDebouncedFunction", () => {
 
     await waitFor(() => {
       expect(output).toHaveTextContent("Hello, world!");
+    });
+    await waitFor(() => {
       expect(field).toHaveValue("Hello, world!");
     });
     expect(fired).toHaveBeenCalledTimes(1);

package/src/__tests__/useDropzone.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, jest } from "@jest/globals";
-import { type ReactElement, type ReactNode } from "react";
 import { cnb } from "cnbuilder";
-import { fireEvent, render } from "../test-utils/index.js";
+import { type ReactElement, type ReactNode } from "react";
+import { fireEvent, render, screen } from "../test-utils/index.js";
 
 import { useDropzone, type DropzoneOptions } from "../useDropzone.js";
 
@@ -29,7 +29,7 @@ describe("useDropzone", () => {
     const onDragLeave = jest.fn();
     const onDrop = jest.fn();
 
-    const { getByTestId } = render(
+    render(
       <Test
         onDragLeave={onDragLeave}
         onDragEnter={onDragEnter}
@@ -37,7 +37,7 @@ describe("useDropzone", () => {
         onDrop={onDrop}
       />
     );
-    const dropzone = getByTestId("dropzone");
+    const dropzone = screen.getByTestId("dropzone");
     expect(dropzone).not.toHaveClass("over");
     expect(onDragOver).not.toHaveBeenCalled();
     expect(onDragEnter).not.toHaveBeenCalled();
@@ -78,7 +78,7 @@ describe("useDropzone", () => {
     const onDragEnter = jest.fn();
     const onDragLeave = jest.fn();
     const onDrop = jest.fn();
-    const { getByTestId } = render(
+    render(
       <div
         data-testid="container"
         onDragLeave={onDragLeave}
@@ -90,7 +90,7 @@ describe("useDropzone", () => {
       </div>
     );
 
-    const dropzone = getByTestId("dropzone");
+    const dropzone = screen.getByTestId("dropzone");
     fireEvent.dragEnter(dropzone);
     fireEvent.dragLeave(dropzone);
     fireEvent.dragOver(dropzone);
@@ -103,16 +103,16 @@ describe("useDropzone", () => {
   });
 
   it("should not disable the isOver state if a dragleave event is called on a child element", () => {
-    const { getByTestId } = render(
+    render(
       <Test onDrop={() => {}}>
         <div data-testid="child1" />
         <div data-testid="child2" />
       </Test>
     );
 
-    const dropzone = getByTestId("dropzone");
-    const child1 = getByTestId("child1");
-    const child2 = getByTestId("child2");
+    const dropzone = screen.getByTestId("dropzone");
+    const child1 = screen.getByTestId("child1");
+    const child2 = screen.getByTestId("child2");
     expect(dropzone).not.toHaveClass("over");
 
     fireEvent.dragEnter(dropzone);

package/src/__tests__/useEnsuredId.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
-import { render } from "../test-utils/index.js";
+import { render, screen } from "../test-utils/index.js";
 
 import { useEnsuredId } from "../useEnsuredId.js";
 
@@ -10,15 +10,15 @@ function Test(props: { id?: string }): ReactElement {
 
 describe("useEnsuredId", () => {
   it("should return the propId if it is defined", () => {
-    const { getByTestId } = render(<Test id="my-test-id" />);
-    const test = getByTestId("test");
+    render(<Test id="my-test-id" />);
+    const test = screen.getByTestId("test");
 
     expect(test).toHaveAttribute("id", "my-test-id");
   });
 
   it("should return an auto-generated id with the component name prefixed", () => {
-    const { getByTestId } = render(<Test />);
-    const test = getByTestId("test");
+    render(<Test />);
+    const test = screen.getByTestId("test");
 
     expect(test.id).toMatch(/^test-.+$/);
   });

package/src/__tests__/useEnsuredState.tsx

@@ -1,7 +1,6 @@
 import { describe, expect, it, jest } from "@jest/globals";
-import { fireEvent } from "@testing-library/dom";
 import { type ReactElement } from "react";
-import { render, screen } from "../test-utils/index.js";
+import { fireEvent, render, screen } from "../test-utils/index.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 import { useToggle } from "../useToggle.js";
 

package/src/__tests__/useLocalStorage.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from "@jest/globals";
 import lzString from "lz-string";
 import { useEffect, type ReactElement } from "react";
-import { act, fireEvent, render } from "../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../test-utils/index.js";
 
 import { Button } from "../button/Button.js";
 import { SsrProvider } from "../SsrProvider.js";
@@ -78,8 +78,8 @@ describe("useLocalStorage", () => {
     }
 
     expect(localStorage.getItem(TEST_KEY)).toBe(null);
-    const { getByRole, getAllByRole, unmount } = render(<Test />);
-    const cells = getAllByRole("cell");
+    const { unmount } = render(<Test />);
+    const cells = screen.getAllByRole("cell");
     expect(cells).toHaveLength(5);
 
     const [a, b, c, d, e] = cells;
@@ -91,7 +91,7 @@ describe("useLocalStorage", () => {
 
     expect(localStorage.getItem(TEST_KEY)).toBe(JSON.stringify(defaultValue));
 
-    fireEvent.click(getByRole("button", { name: "Button" }));
+    fireEvent.click(screen.getByRole("button", { name: "Button" }));
     expect(a).toHaveTextContent("welcome");
     expect(b).toHaveTextContent("0");
     expect(c).toHaveTextContent("a");
@@ -138,11 +138,11 @@ describe("useLocalStorage", () => {
       );
     }
 
-    const { getByTestId, getByRole } = render(<Test />);
-    const value = getByTestId("value");
+    render(<Test />);
+    const value = screen.getByTestId("value");
     expect(value).toHaveTextContent("-1");
 
-    const shouldWork = getByRole("button", { name: "Should Work" });
+    const shouldWork = screen.getByRole("button", { name: "Should Work" });
     fireEvent.click(shouldWork);
     expect(value).toHaveTextContent("100");
     expect(localStorage.getItem(TEST_KEY)).toBe("100");
@@ -177,9 +177,9 @@ describe("useLocalStorage", () => {
       );
     }
 
-    const { getByRole, getByTestId } = render(<Test />);
-    const value = getByTestId("value");
-    const button = getByRole("button", { name: "Button" });
+    render(<Test />);
+    const value = screen.getByTestId("value");
+    const button = screen.getByRole("button", { name: "Button" });
     expect(value).toHaveTextContent(JSON.stringify(defaultValue));
     expect(localStorage.getItem(TEST_KEY)).toBe(
       lzString.compress(JSON.stringify(defaultValue))
@@ -264,8 +264,8 @@ describe("useLocalStorage", () => {
       return <div data-testid="value">{JSON.stringify(value)}</div>;
     }
 
-    const { getByTestId } = render(<Test />);
-    const value = getByTestId("value");
+    render(<Test />);
+    const value = screen.getByTestId("value");
     expect(value).toHaveTextContent(
       JSON.stringify({
         username: "existing username",
@@ -299,11 +299,11 @@ describe("useLocalStorage", () => {
       );
     }
 
-    const { getByRole, getByTestId } = render(<Test />);
-    const value = getByTestId("value");
-    const setValue = getByRole("button", { name: "Set Value" });
-    const remove = getByRole("button", { name: "Remove" });
-    const persist = getByRole("button", { name: "Persist" });
+    render(<Test />);
+    const value = screen.getByTestId("value");
+    const setValue = screen.getByRole("button", { name: "Set Value" });
+    const remove = screen.getByRole("button", { name: "Remove" });
+    const persist = screen.getByRole("button", { name: "Persist" });
 
     expect(value).toBeEmptyDOMElement();
     expect(localStorage.length).toBe(0);
@@ -330,8 +330,8 @@ describe("useLocalStorage", () => {
       return <div data-testid="value">{value}</div>;
     }
 
-    const { getByTestId } = render(<Test />);
-    const value = getByTestId("value");
+    render(<Test />);
+    const value = screen.getByTestId("value");
     expect(value).toBeEmptyDOMElement();
 
     act(() => {
@@ -364,13 +364,13 @@ describe("useLocalStorage", () => {
     }
 
     localStorage.setItem(TEST_KEY, "stored value");
-    const { getByTestId } = render(
+    render(
       <SsrProvider ssr>
         <Test />
       </SsrProvider>
     );
 
-    const value = getByTestId("value");
+    const value = screen.getByTestId("value");
     expect(initialValue).toBe("");
     expect(value).toHaveTextContent("stored value");
   });

package/src/__tests__/useResizeObserver.tsx

@@ -115,6 +115,8 @@ describe("useResizeObserver", () => {
 
     await waitFor(() => {
       expect(frameCalled).toHaveBeenCalled();
+    });
+    await waitFor(() => {
       expect(onUpdate).toHaveBeenCalledWith({
         target: div,
         contentRect,

package/src/__tests__/useThrottledFunction.tsx

@@ -9,6 +9,7 @@ import {
   act,
   fireEvent,
   render,
+  screen,
   userEvent,
   waitFor,
 } from "../test-utils/index.js";
@@ -96,9 +97,9 @@ function AsyncTest(props: AsyncTestProps): ReactElement {
 describe("useThrottledFunction", () => {
   it("should throttle functions correctly by prevent setting state after unmounting and preventing stale closures during re-rendering", async () => {
     const user = userEvent.setup();
-    const { getByRole, getByTestId, unmount } = render(<SyncTest />);
-    const value = getByTestId("value");
-    const field = getByRole("textbox", { name: "Field" });
+    const { unmount } = render(<SyncTest />);
+    const value = screen.getByTestId("value");
+    const field = screen.getByRole("textbox", { name: "Field" });
     expect(value).toHaveTextContent("");
     expect(field).toHaveValue("");
 
@@ -108,6 +109,8 @@ describe("useThrottledFunction", () => {
 
     await waitFor(() => {
       expect(value).toHaveTextContent("Hello");
+    });
+    await waitFor(() => {
       expect(field).toHaveValue("Hello");
     });
 
@@ -127,15 +130,13 @@ describe("useThrottledFunction", () => {
 
     const unmounted = { current: false };
     const onUnmounted = jest.fn();
-    const { getByRole, getByTestId } = render(
-      <AsyncTest unmounted={unmounted} onUnmounted={onUnmounted} />
-    );
+    render(<AsyncTest unmounted={unmounted} onUnmounted={onUnmounted} />);
 
     act(() => {
       jest.runAllTimers();
     });
-    const value = getByTestId("value");
-    const field = getByRole("textbox", { name: "Field" });
+    const value = screen.getByTestId("value");
+    const field = screen.getByRole("textbox", { name: "Field" });
     expect(value).toHaveTextContent("");
     expect(field).toHaveValue("");
     expect(onUnmounted).not.toHaveBeenCalled();

package/src/__tests__/useToggle.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type ReactElement } from "react";
-import { fireEvent, render } from "../test-utils/index.js";
+import { fireEvent, render, screen } from "../test-utils/index.js";
 
 import { useToggle } from "../useToggle.js";
 
@@ -25,12 +25,12 @@ function Test(): ReactElement {
 
 describe("useToggle", () => {
   it("should work as expected with no arguments", () => {
-    const { getByRole, getByTestId } = render(<Test />);
+    render(<Test />);
 
-    const output = getByTestId("output");
-    const toggle = getByRole("button", { name: "Toggle" });
-    const enable = getByRole("button", { name: "Enable" });
-    const disable = getByRole("button", { name: "Disable" });
+    const output = screen.getByTestId("output");
+    const toggle = screen.getByRole("button", { name: "Toggle" });
+    const enable = screen.getByRole("button", { name: "Enable" });
+    const disable = screen.getByRole("button", { name: "Disable" });
     expect(output).toHaveTextContent("false");
 
     fireEvent.click(toggle);
@@ -57,9 +57,9 @@ describe("useToggle", () => {
       return <div data-testid="output">{`${toggled}`}</div>;
     }
 
-    const { getByTestId } = render(<Test />);
+    render(<Test />);
 
-    const output = getByTestId("output");
+    const output = screen.getByTestId("output");
     expect(output).toHaveTextContent("true");
   });
 
@@ -70,9 +70,9 @@ describe("useToggle", () => {
       return <div data-testid="output">{`${toggled}`}</div>;
     }
 
-    const { getByTestId } = render(<Test />);
+    render(<Test />);
 
-    const output = getByTestId("output");
+    const output = screen.getByTestId("output");
     expect(output).toHaveTextContent("true");
   });
 });