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

package/src/form/__tests__/__snapshots__/Switch.tsx.snap

@@ -0,0 +1,428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch should allow the switch to gain the error and active colors by enabling the current-color class 1`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--active rmd-label--reversed"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--current-color rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r1:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should allow the switch to gain the error and active colors by enabling the current-color class 2`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--error rmd-label--reversed rmd-error-color"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--current-color rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r1:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r0:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed custom-class-name"
+  data-testid="label"
+  style="color: white;"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r0:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed"
+  data-testid="label"
+  style=""
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable container-class-name"
+    style="font-size: 3rem;"
+  >
+    <div
+      class="rmd-switch__track track-class-name track-props-class-name"
+      style="width: 10%;"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r0:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball ball-class-name"
+        style="background: orange;"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed"
+  data-testid="label"
+  style=""
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+    style=""
+  >
+    <div
+      class="rmd-switch__track"
+      style=""
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="custom-id"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+        style=""
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should merge any labelProps correctly 1`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed root-class-name test-class-name"
+  data-testid="label"
+  style="color: red;"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r2:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should render correctly when disabled 1`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--disabled rmd-label--reversed rmd-text-disabled-color"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch"
+  >
+    <div
+      class="rmd-switch__track rmd-switch__track--disabled"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input rmd-hidden-input--disabled"
+        disabled=""
+        id="switch-:r3:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should support rendering a CircularProgress by using the ballAddon prop 1`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--reversed"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r7:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      >
+        <span
+          aria-label="Loading"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
+          id="circular-progress-:r8:"
+          role="progressbar"
+        >
+          <svg
+            class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
+            viewBox="0 0 66 66"
+          >
+            <circle
+              class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
+              cx="33"
+              cy="33"
+              r="30"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should support rendering the form messages with the switch 1`] = `
+<div
+  class="rmd-form-message-container"
+  data-testid="container"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--reversed"
+  >
+    Label
+    <div
+      class="rmd-switch rmd-switch--clickable"
+    >
+      <div
+        class="rmd-switch__track"
+      >
+        <input
+          class="rmd-switch__input rmd-hidden-input"
+          id="switch-:r5:"
+          role="switch"
+          type="checkbox"
+        />
+        <span
+          class="rmd-switch__ball"
+        />
+      </div>
+    </div>
+  </label>
+  <div
+    aria-live="polite"
+    class="rmd-form-message rmd-form-message--outline rmd-text-secondary-color"
+    id="form-message-:r6:"
+  >
+    <p
+      class="rmd-form-message__message"
+      id="form-message-:r6:-message"
+    >
+      Help Text
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Switch should support rendering the form messages with the switch 2`] = `
+<div
+  class="rmd-form-message-container"
+  data-testid="container"
+>
+  <label
+    class="rmd-label rmd-label--gap rmd-label--error rmd-label--reversed rmd-error-color"
+  >
+    Label
+    <div
+      class="rmd-switch rmd-switch--current-color rmd-switch--clickable"
+    >
+      <div
+        class="rmd-switch__track"
+      >
+        <input
+          class="rmd-switch__input rmd-hidden-input"
+          id="switch-:r5:"
+          role="switch"
+          type="checkbox"
+        />
+        <span
+          class="rmd-switch__ball"
+        />
+      </div>
+    </div>
+  </label>
+  <div
+    aria-live="polite"
+    class="rmd-form-message rmd-form-message--outline rmd-error-color"
+    id="form-message-:r6:"
+  >
+    <p
+      class="rmd-form-message__message"
+      id="form-message-:r6:-message"
+    >
+      Error Text
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Switch should support rendering the label before and after as well as stacked 1`] = `
+<label
+  class="rmd-label rmd-label--gap"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r4:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should support rendering the label before and after as well as stacked 2`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--stacked-reversed"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r4:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;
+
+exports[`Switch should support rendering the label before and after as well as stacked 3`] = `
+<label
+  class="rmd-label rmd-label--gap rmd-label--stacked"
+  data-testid="label"
+>
+  Switch
+  <div
+    class="rmd-switch rmd-switch--clickable"
+  >
+    <div
+      class="rmd-switch__track"
+    >
+      <input
+        class="rmd-switch__input rmd-hidden-input"
+        id="switch-:r4:"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="rmd-switch__ball"
+      />
+    </div>
+  </div>
+</label>
+`;

package/src/form/__tests__/__snapshots__/useCheckboxGroup.tsx.snap

@@ -374,7 +374,7 @@ exports[`useCheckboxGroup should support an indeterminate checkbox group 3`] = `
 exports[`useCheckboxGroup should support rendering a group of MenuItemCheckbox by enabling the \`menu\` option 1`] = `
 <div
   aria-labelledby="menubutton-:rd:"
-  class="rmd-menu rmd-menu--elevated rmd-scale-transition--enter rmd-scale-transition--y-enter rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"
+  class="rmd-menu rmd-menu--elevated"
   id="menu-:rf:"
   role="menu"
   style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"

package/src/form/__tests__/__snapshots__/useRadioGroup.tsx.snap

@@ -597,7 +597,7 @@ exports[`useRadioGroup should support creating a required radio group 2`] = `
 exports[`useRadioGroup should support rendering within a menu 1`] = `
 <div
   aria-labelledby="menubutton-:rg:"
-  class="rmd-menu rmd-menu--elevated rmd-scale-transition--enter rmd-scale-transition--y-enter rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active"
+  class="rmd-menu rmd-menu--elevated"
   id="menu-:ri:"
   role="menu"
   style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"

package/src/form/__tests__/useCheckboxGroup.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 { Button } from "../../button/Button.js";
 import { AppSizeProvider } from "../../media-queries/AppSizeProvider.js";
@@ -13,11 +13,11 @@ import { useCheckboxGroup } from "../useCheckboxGroup.js";
 describe("useCheckboxGroup", () => {
   it("should not behave as an indeterminate checkbox group and check any checkboxes by default", () => {
     function Test(): ReactElement {
-      const checkboGroup = useCheckboxGroup({ name: "example" });
-      const { getCheckboxProps } = checkboGroup;
+      const checkboxGroup = useCheckboxGroup({ name: "example" });
+      const { getCheckboxProps } = checkboxGroup;
 
       // @ts-expect-error
-      checkboGroup.getIndeterminateProps;
+      checkboxGroup.getIndeterminateProps;
 
       return (
         <Form>
@@ -28,11 +28,11 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
 
     expect(checkbox1).toHaveAttribute("name", "example");
     expect(checkbox2).toHaveAttribute("name", "example");
@@ -81,11 +81,11 @@ describe("useCheckboxGroup", () => {
         </Form>
       );
     }
-    const { getByRole } = render(<Test defaultCheckedValues={["b", "c"]} />);
+    render(<Test defaultCheckedValues={["b", "c"]} />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
 
     expect(checkbox1).not.toBeChecked();
     expect(checkbox2).toBeChecked();
@@ -112,13 +112,11 @@ describe("useCheckboxGroup", () => {
         </Form>
       );
     }
-    const { getByRole } = render(
-      <Test defaultCheckedValues={() => ["a", "c"]} />
-    );
+    render(<Test defaultCheckedValues={() => ["a", "c"]} />);
 
-    const checkbox1 = getByRole("checkbox", { name: "First" });
-    const checkbox2 = getByRole("checkbox", { name: "Second" });
-    const checkbox3 = getByRole("checkbox", { name: "Third" });
+    const checkbox1 = screen.getByRole("checkbox", { name: "First" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "Second" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "Third" });
     expect(checkbox1).toBeChecked();
     expect(checkbox2).not.toBeChecked();
     expect(checkbox3).toBeChecked();
@@ -130,7 +128,7 @@ describe("useCheckboxGroup", () => {
     expect(checkbox2).toBeChecked();
     expect(checkbox3).not.toBeChecked();
 
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(checkbox1).toBeChecked();
     expect(checkbox2).not.toBeChecked();
     expect(checkbox3).toBeChecked();
@@ -140,8 +138,8 @@ describe("useCheckboxGroup", () => {
     const values = ["a", "b", "c"] as const;
 
     function Test(): ReactElement {
-      const checkboGroup = useCheckboxGroup({ name: "example", values });
-      const { getCheckboxProps, getIndeterminateProps } = checkboGroup;
+      const checkboxGroup = useCheckboxGroup({ name: "example", values });
+      const { getCheckboxProps, getIndeterminateProps } = checkboxGroup;
 
       // some additional type-only tests since `values` was defined as a const
       // of valid choices
@@ -166,12 +164,14 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
 
-    const indeterminate = getByRole("checkbox", { name: "Indeterminate" });
-    const checkbox1 = getByRole("checkbox", { name: "A" });
-    const checkbox2 = getByRole("checkbox", { name: "B" });
-    const checkbox3 = getByRole("checkbox", { name: "C" });
+    const indeterminate = screen.getByRole("checkbox", {
+      name: "Indeterminate",
+    });
+    const checkbox1 = screen.getByRole("checkbox", { name: "A" });
+    const checkbox2 = screen.getByRole("checkbox", { name: "B" });
+    const checkbox3 = screen.getByRole("checkbox", { name: "C" });
 
     expect(indeterminate).not.toHaveAttribute("aria-checked");
     expect(indeterminate).not.toBeChecked();
@@ -259,17 +259,17 @@ describe("useCheckboxGroup", () => {
       );
     }
 
-    const { getByRole } = render(<Test />, { wrapper: AppSizeProvider });
+    render(<Test />, { wrapper: AppSizeProvider });
 
-    fireEvent.click(getByRole("button", { name: "Toggle" }));
-    expect(getByRole("menu")).toMatchSnapshot();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(screen.getByRole("menu")).toMatchSnapshot();
 
-    const indeterminate = getByRole("menuitemcheckbox", {
+    const indeterminate = screen.getByRole("menuitemcheckbox", {
       name: "Indeterminate",
     });
-    const checkbox1 = getByRole("menuitemcheckbox", { name: "1" });
-    const checkbox2 = getByRole("menuitemcheckbox", { name: "3" });
-    const checkbox3 = getByRole("menuitemcheckbox", { name: "FIVE" });
+    const checkbox1 = screen.getByRole("menuitemcheckbox", { name: "1" });
+    const checkbox2 = screen.getByRole("menuitemcheckbox", { name: "3" });
+    const checkbox3 = screen.getByRole("menuitemcheckbox", { name: "FIVE" });
 
     expect(indeterminate).toHaveAttribute("aria-checked", "false");
     expect(checkbox1).not.toBeChecked();