@react-md/core 1.0.0-next.8 → 1.0.0-next.9

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

@@ -0,0 +1,492 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select should allow for the OptGroup to be used 1`] = `
+<div
+  aria-labelledby="select-label-:r1q:"
+  class="rmd-menu rmd-menu--elevated"
+  id="combobox-popup-:r1r:"
+  role="listbox"
+  style="position: fixed; transform-origin: 50% 0; left: 16px; top: 0px; min-width: 0;"
+  tabindex="-1"
+>
+  <ul
+    class="rmd-list"
+    role="none"
+  >
+    <ul
+      aria-labelledby="optgroup-:r1u:"
+      class="rmd-list rmd-menu-item-group"
+      role="group"
+    >
+      <li
+        class="rmd-list-subheader"
+        id="optgroup-:r1u:"
+        role="presentation"
+      >
+        <span
+          class="rmd-list-item__text"
+        >
+          A
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-menu-item--focused rmd-option rmd-option--icon"
+        id="option-:r1v:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Apple
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+        id="option-:r21:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Apricot
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+        id="option-:r23:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Avocado
+        </span>
+      </li>
+    </ul>
+    <ul
+      aria-labelledby="optgroup-:r25:"
+      class="rmd-list rmd-menu-item-group"
+      role="group"
+    >
+      <li
+        class="rmd-list-subheader"
+        id="optgroup-:r25:"
+        role="presentation"
+      >
+        <span
+          class="rmd-list-item__text"
+        >
+          B
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+        id="option-:r26:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Blueberry
+        </span>
+      </li>
+    </ul>
+    <ul
+      aria-labelledby="optgroup-:r28:"
+      class="rmd-list rmd-menu-item-group"
+      role="group"
+    >
+      <li
+        class="rmd-list-subheader"
+        id="optgroup-:r28:"
+        role="presentation"
+      >
+        <span
+          class="rmd-list-item__text"
+        >
+          <span>
+            C
+          </span>
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+        id="option-:r29:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Cranberry
+        </span>
+      </li>
+      <li
+        class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+        id="option-:r2b:"
+        role="option"
+        tabindex="-1"
+      >
+        <span
+          class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+        />
+        <span
+          class="rmd-list-item__text"
+        >
+          Currant
+        </span>
+      </li>
+    </ul>
+  </ul>
+</div>
+`;
+
+exports[`Select should allow the selected icon to appear after the option instead of before 1`] = `
+<li
+  aria-selected="true"
+  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-menu-item--focused rmd-option rmd-option--icon rmd-option--selected"
+  id="option-:r31:"
+  role="option"
+  tabindex="-1"
+>
+  <span
+    aria-hidden="true"
+    class="rmd-icon rmd-icon--font material-icons rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon"
+  >
+    check
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Option 1
+  </span>
+</li>
+`;
+
+exports[`Select should allow the selected icon to appear after the option instead of before 2`] = `
+<li
+  aria-selected="true"
+  class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-menu-item--focused rmd-option rmd-option--icon rmd-option--selected"
+  id="option-:r31:"
+  role="option"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Option 1
+  </span>
+  <span
+    aria-hidden="true"
+    class="rmd-icon rmd-icon--font material-icons rmd-icon--after rmd-list-item__addon rmd-option__icon"
+  >
+    check
+  </span>
+</li>
+`;
+
+exports[`Select should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<div
+  aria-activedescendant=""
+  aria-controls="combobox-popup-:r3:"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-labelledby="select-label-:r2:"
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-right rmd-select-container"
+  id="select-:r0:"
+  role="combobox"
+  tabindex="0"
+>
+  <div
+    class="rmd-box rmd-box--wrap rmd-selected-option rmd-text-field"
+    data-testid="selected"
+  />
+  <input
+    aria-hidden="true"
+    class="rmd-select rmd-select--outline rmd-text-field"
+    id="select-value-:r1:"
+    placeholder=" "
+    tabindex="-1"
+    type="text"
+    value=""
+  />
+  <span
+    class="rmd-label rmd-label--floating"
+    id="select-label-:r2:"
+  >
+    Select
+  </span>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-text-field-addon--presentational"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
+    >
+      arrow_drop_down
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Select should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<div
+  aria-activedescendant=""
+  aria-controls="combobox-popup-:r3:"
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  aria-labelledby="select-label-:r2:"
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-right rmd-select-container custom-class-name"
+  id="select-:r0:"
+  role="combobox"
+  style="color: white;"
+  tabindex="0"
+>
+  <div
+    class="rmd-box rmd-box--wrap rmd-selected-option rmd-text-field"
+    data-testid="selected"
+  />
+  <input
+    aria-hidden="true"
+    class="rmd-select rmd-select--outline rmd-text-field"
+    id="select-value-:r1:"
+    placeholder=" "
+    tabindex="-1"
+    type="text"
+    value=""
+  />
+  <span
+    class="rmd-label rmd-label--floating"
+    id="select-label-:r2:"
+  >
+    Select
+  </span>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-text-field-addon--presentational"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
+    >
+      arrow_drop_down
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Select should automatically pull options from the children and update when selected 1`] = `
+<div
+  aria-labelledby="select-label-:r8:"
+  class="rmd-menu rmd-menu--elevated"
+  id="combobox-popup-:r9:"
+  role="listbox"
+  style="position: fixed; transform-origin: 50% 0; left: 16px; top: 0px; min-width: 0;"
+  tabindex="-1"
+>
+  <ul
+    class="rmd-list"
+    role="none"
+  >
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-menu-item--focused rmd-option rmd-option--icon"
+      id="option-:rc:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 1
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:re:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 2
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:rg:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 3
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:ri:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 4
+      </span>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Select should automatically pull options from the children and update when selected 2`] = `
+<div
+  aria-labelledby="select-label-:r8:"
+  class="rmd-menu rmd-menu--elevated"
+  id="combobox-popup-:r9:"
+  role="listbox"
+  style="position: fixed; transform-origin: 50% 0; left: 16px; top: 0px; min-width: 0;"
+  tabindex="-1"
+>
+  <ul
+    class="rmd-list"
+    role="none"
+  >
+    <li
+      aria-selected="true"
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-menu-item--focused rmd-option rmd-option--icon rmd-option--selected"
+      id="option-:rk:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon"
+      >
+        check
+      </span>
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 1
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:rm:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 2
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:ro:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 3
+      </span>
+    </li>
+    <li
+      class="rmd-list-item rmd-list-item--normal rmd-interaction-surface rmd-menu-item rmd-option rmd-option--icon"
+      id="option-:rq:"
+      role="option"
+      tabindex="-1"
+    >
+      <span
+        class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-option__icon rmd-icon rmd-icon--svg"
+      />
+      <span
+        class="rmd-list-item__text"
+      >
+        Option 4
+      </span>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Select should include the leftAddon of the selected option unless disableOptionAddon is true 1`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-selected-option rmd-text-field"
+  data-testid="selected"
+>
+  <span
+    aria-hidden="true"
+    class="rmd-avatar rmd-avatar--icon"
+    data-testid="avatar"
+  >
+    A
+  </span>
+  <span
+    class="rmd-nowrap rmd-ellipsis"
+  >
+    Avatar
+  </span>
+</div>
+`;
+
+exports[`Select should include the leftAddon of the selected option unless disableOptionAddon is true 2`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-selected-option rmd-text-field"
+  data-testid="selected"
+>
+  <span
+    aria-hidden="true"
+    class="rmd-icon rmd-icon--font material-icons"
+    data-testid="icon"
+  >
+    favorite
+  </span>
+  <span
+    class="rmd-nowrap rmd-ellipsis"
+  >
+    Icon
+  </span>
+</div>
+`;

package/src/form/__tests__/useFormReset.tsx

@@ -0,0 +1,195 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { useRef, useState, type ReactElement } from "react";
+import { act } from "react-dom/test-utils";
+import { Button } from "../../button/Button.js";
+import { rmdRender, screen, userEvent } from "../../test-utils/index.js";
+import { useFormReset } from "../useFormReset.js";
+
+interface TestImplementationProps {
+  form?: string;
+  defaultValue?: string;
+}
+
+function TestImplementation({
+  form,
+  defaultValue = "Default Value",
+}: TestImplementationProps): ReactElement {
+  const elementRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState(defaultValue);
+  useFormReset({
+    form,
+    elementRef,
+    defaultValue,
+  });
+
+  return (
+    <label>
+      Input
+      <input
+        ref={elementRef}
+        form={form}
+        type="text"
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+      />
+    </label>
+  );
+}
+
+describe("useFormReset", () => {
+  it("should reset the value when a form is reset", async () => {
+    const user = userEvent.setup();
+    const onReset = jest.fn();
+    function Test(): ReactElement {
+      return (
+        <form name="form" onReset={onReset}>
+          <TestImplementation />
+          <Button type="reset">Reset</Button>
+        </form>
+      );
+    }
+
+    rmdRender(<Test />);
+
+    const form = screen.getByRole<HTMLFormElement>("form");
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const input = screen.getByRole("textbox", { name: "Input" });
+
+    expect(input).toHaveValue("Default Value");
+    await user.click(reset);
+    expect(onReset).toHaveBeenCalledTimes(1);
+
+    await user.clear(input);
+    await user.type(input, "New Value");
+    expect(input).toHaveValue("New Value");
+    await user.click(reset);
+    expect(onReset).toHaveBeenCalledTimes(2);
+    expect(input).toHaveValue("Default Value");
+
+    await user.clear(input);
+    await user.type(input, "New Value");
+    expect(input).toHaveValue("New Value");
+    act(() => {
+      form.reset();
+    });
+    expect(onReset).toHaveBeenCalledTimes(3);
+    expect(input).toHaveValue("Default Value");
+  });
+
+  it("should be able to find a form by using the form prop", async () => {
+    const user = userEvent.setup();
+    function Test(): ReactElement {
+      return (
+        <>
+          <TestImplementation form="main-form" />
+          <form id="main-form" name="form">
+            <Button type="reset">Reset</Button>
+          </form>
+        </>
+      );
+    }
+
+    rmdRender(<Test />);
+
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const input = screen.getByRole("textbox", { name: "Input" });
+    await user.clear(input);
+    await user.type(input, "New Value");
+    expect(input).toHaveValue("New Value");
+    await user.click(reset);
+    expect(input).toHaveValue("Default Value");
+  });
+
+  it("should do nothing if an elementRef was not set", async () => {
+    const user = userEvent.setup();
+    const onReset = jest.fn();
+
+    function Broken(): ReactElement {
+      const elementRef = useRef<HTMLInputElement>(null);
+      const [value, setValue] = useState("Default Value");
+      useFormReset({
+        elementRef,
+        defaultValue: "Default Value",
+      });
+
+      return (
+        <label>
+          Input
+          <input
+            type="text"
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+        </label>
+      );
+    }
+
+    function Test(): ReactElement {
+      return (
+        <form name="form" onReset={onReset}>
+          <Broken />
+          <Button type="reset">Reset</Button>
+        </form>
+      );
+    }
+
+    rmdRender(<Test />);
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const input = screen.getByRole("textbox", { name: "Input" });
+
+    await user.clear(input);
+    await user.type(input, "New Value");
+    expect(input).toHaveValue("New Value");
+
+    await user.click(reset);
+    expect(input).toHaveValue("New Value");
+  });
+
+  it("should do nothing if a form cannot be found", async () => {
+    const user = userEvent.setup();
+    const onReset = jest.fn();
+
+    function Broken(): ReactElement {
+      const elementRef = useRef<HTMLInputElement>(null);
+      const [value, setValue] = useState("Default Value");
+      useFormReset({
+        elementRef,
+        defaultValue: "Default Value",
+      });
+
+      return (
+        <label>
+          Input
+          <input
+            ref={elementRef}
+            type="text"
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+        </label>
+      );
+    }
+
+    function Test(): ReactElement {
+      return (
+        <>
+          <Broken />
+          <form name="form" onReset={onReset}>
+            <Button type="reset">Reset</Button>
+          </form>
+        </>
+      );
+    }
+
+    rmdRender(<Test />);
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const input = screen.getByRole("textbox", { name: "Input" });
+
+    await user.clear(input);
+    await user.type(input, "New Value");
+    expect(input).toHaveValue("New Value");
+
+    await user.click(reset);
+    expect(input).toHaveValue("New Value");
+  });
+});