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

package/src/form/SelectedOption.tsx

@@ -0,0 +1,55 @@
+import { cnb } from "cnbuilder";
+import { type ReactElement, type ReactNode } from "react";
+import { Box, type BoxProps } from "../box/Box.js";
+import { cssUtils } from "../cssUtils.js";
+import { type OptionProps } from "./Option.js";
+import { textField } from "./textFieldStyles.js";
+
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface SelectedOptionProps extends BoxProps {
+  option: OptionProps | undefined;
+  placeholder?: ReactNode;
+  disableAddon: boolean;
+}
+
+/**
+ * **Server Component**
+ *
+ * This component is used to render the current option.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export function SelectedOption(props: SelectedOptionProps): ReactElement {
+  const {
+    disableAddon,
+    option,
+    className,
+    disablePadding = true,
+    placeholder,
+    ...remaining
+  } = props;
+
+  let children = option?.children || placeholder;
+  // when the children are a string or number, wrap it in additional span so
+  // that overflow can be ellipsis-ed
+  if (typeof children === "string" || typeof children === "number") {
+    children = (
+      <span className={cssUtils({ textOverflow: "ellipsis" })}>{children}</span>
+    );
+  }
+
+  return (
+    <Box
+      {...remaining}
+      className={cnb("rmd-selected-option", textField(), className)}
+      disablePadding={disablePadding}
+    >
+      {!disableAddon && option?.leftAddon}
+      {children}
+    </Box>
+  );
+}

package/src/form/TextField.tsx

@@ -14,7 +14,7 @@ import { getFormConfig } from "./formConfig.js";
 import { textField } from "./textFieldStyles.js";
 import {
   type FormFieldOptions,
-  type UserAgentAutoCompleteProps,
+  type UserAgentAutocompleteProps,
 } from "./types.js";
 
 /**
@@ -54,7 +54,7 @@ export type TextFieldInputAttributes = Omit<
  */
 export interface TextFieldProps
   extends TextFieldInputAttributes,
-    UserAgentAutoCompleteProps,
+    UserAgentAutocompleteProps,
     FormFieldOptions {
   /**
    * @defaultValue `"text-field-" + useId()`

package/src/form/__tests__/MenuItemCheckbox.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { type MenuItemCheckboxProps } from "../MenuItemInputToggle.js";
+import { MenuItemCheckbox } from "../MenuItemCheckbox.js";
+
+describe("MenuItemCheckbox", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLLIElement>();
+    const props = {
+      ref,
+      checked: false,
+      onCheckedChange: jest.fn(),
+      children: "Checkbox",
+    } as const;
+
+    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
+
+    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(ref.current).toBeInstanceOf(HTMLLIElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <MenuItemCheckbox
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should allow for a custom unchecked and checked icon", async () => {
+    const props: MenuItemCheckboxProps = {
+      icon: null,
+      checkedIcon: <span data-testid="checked" />,
+      iconAfter: true,
+      children: "Checkbox",
+      checked: false,
+      onCheckedChange: jest.fn(),
+    };
+
+    const { rerender } = rmdRender(<MenuItemCheckbox {...props} />);
+
+    const element = screen.getByRole("menuitemcheckbox", { name: "Checkbox" });
+    expect(element).toMatchSnapshot();
+    expect(element.querySelector(".rmd-icon")).toBeNull();
+
+    rerender(<MenuItemCheckbox {...props} checked />);
+    expect(element).toMatchSnapshot();
+  });
+});

package/src/form/__tests__/MenuItemRadio.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { rmdRender, screen } from "../../test-utils/index.js";
+import { type MenuItemRadioProps } from "../MenuItemInputToggle.js";
+import { MenuItemRadio } from "../MenuItemRadio.js";
+
+describe("MenuItemRadio", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLLIElement>();
+    const props = {
+      ref,
+      checked: false,
+      onCheckedChange: jest.fn(),
+      children: "Radio",
+    } as const;
+
+    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
+
+    const element = screen.getByRole("menuitemradio", { name: "Radio" });
+    expect(ref.current).toBeInstanceOf(HTMLLIElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <MenuItemRadio
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should allow for a custom unchecked and checked icon", async () => {
+    const props: MenuItemRadioProps = {
+      icon: null,
+      checkedIcon: <span data-testid="checked" />,
+      iconAfter: true,
+      children: "Radio",
+      checked: false,
+      onCheckedChange: jest.fn(),
+    };
+
+    const { rerender } = rmdRender(<MenuItemRadio {...props} />);
+
+    const element = screen.getByRole("menuitemradio", { name: "Radio" });
+    expect(element).toMatchSnapshot();
+    expect(element.querySelector(".rmd-icon")).toBeNull();
+
+    rerender(<MenuItemRadio {...props} checked />);
+    expect(element).toMatchSnapshot();
+  });
+});

package/src/form/__tests__/Select.tsx

@@ -0,0 +1,439 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef, useState, type ReactElement } from "react";
+import { Avatar } from "../../avatar/Avatar.js";
+import { Button } from "../../button/Button.js";
+import { FontIcon } from "../../icon/FontIcon.js";
+import { CircularProgress } from "../../progress/CircularProgress.js";
+import {
+  act,
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+} from "../../test-utils/index.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
+import { Form } from "../Form.js";
+import { OptGroup } from "../OptGroup.js";
+import { Option } from "../Option.js";
+import { Select, type SelectProps } from "../Select.js";
+
+function Test<Value extends string = string>(
+  props: Partial<SelectProps<Value>>
+): ReactElement {
+  return (
+    <Select
+      label="Select"
+      {...props}
+      selectedOptionProps={{ "data-testid": "selected" }}
+    >
+      <Option value="a">Option 1</Option>
+      <Option value="b">Option 2</Option>
+      <Option value="c">Option 3</Option>
+      <Option value="d">Option 4</Option>
+    </Select>
+  );
+}
+
+function render<Value extends string = string>(
+  props: Partial<SelectProps<Value>> = {}
+) {
+  // eslint-disable-next-line testing-library/await-async-events
+  const user = userEvent.setup();
+  const { rerender } = rmdRender(<Test {...props} />);
+  const select = screen.getByRole("combobox", { name: "Select" });
+  const selected = screen.getByTestId("selected");
+  const selectValue = screen.getByRole("textbox", { hidden: true });
+
+  return {
+    rerender: (props: Partial<SelectProps<Value>>) =>
+      rerender(<Test {...props} />),
+    user,
+    select,
+    selected,
+    selectValue,
+  };
+}
+
+describe("Select", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const inputRef = createRef<HTMLInputElement>();
+    const { rerender, select, selectValue } = render({ inputRef });
+
+    expect(inputRef.current).toBeInstanceOf(HTMLInputElement);
+    expect(inputRef.current).toBe(selectValue);
+    expect(select).toMatchSnapshot();
+
+    rerender({
+      inputRef,
+      style: { color: "white" },
+      className: "custom-class-name",
+    });
+    expect(select).toMatchSnapshot();
+  });
+
+  it("should automatically pull options from the children and update when selected", async () => {
+    const { user, select, selectValue } = render();
+    expect(selectValue).toHaveValue("");
+
+    await user.click(select);
+
+    let listbox = screen.getByRole("listbox", { name: "Select" });
+    expect(() => screen.getByRole("option", { checked: true })).toThrow();
+    expect(listbox).toMatchSnapshot();
+
+    await user.click(screen.getByRole("option", { name: "Option 1" }));
+    expect(listbox).not.toBeInTheDocument();
+    expect(selectValue).toHaveValue("a");
+    expect(select).toHaveTextContent(/Option 1/);
+
+    await user.click(select);
+    listbox = screen.getByRole("listbox", { name: "Select" });
+    expect(() =>
+      screen.getByRole("option", { name: "Option 1", selected: true })
+    ).not.toThrow();
+    expect(listbox).toMatchSnapshot();
+
+    await user.click(screen.getByRole("option", { name: "Option 2" }));
+    expect(listbox).not.toBeInTheDocument();
+    expect(selectValue).toHaveValue("b");
+    expect(select).toHaveTextContent(/Option 2/);
+  });
+
+  it("should allow for a default value", async () => {
+    const { user, select, selectValue } = render({ defaultValue: "c" });
+    expect(selectValue).toHaveValue("c");
+
+    await user.click(select);
+    expect(() =>
+      screen.getByRole("option", { name: "Option 3", checked: true })
+    ).toThrow();
+  });
+
+  it("should allow the value to be controlled", async () => {
+    type Value = "a" | "b" | "c" | "d";
+    function ControlledTest(): ReactElement {
+      const [value, setValue] = useState<Value | "">("");
+
+      return (
+        <>
+          <div data-testid="value">{value}</div>
+          <Test
+            value={value}
+            // this should be correctly typed to `Value | ""`
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+        </>
+      );
+    }
+
+    const user = userEvent.setup();
+    rmdRender(<ControlledTest />);
+    const select = screen.getByRole("combobox", { name: "Select" });
+    const selectValue = screen.getByRole("textbox", { hidden: true });
+    const value = screen.getByTestId("value");
+    expect(selectValue).toHaveValue("");
+    expect(value).toHaveTextContent("");
+
+    await user.click(select);
+    expect(() => screen.getByRole("option", { checked: true })).toThrow();
+    await user.click(screen.getByRole("option", { name: "Option 4" }));
+    expect(selectValue).toHaveValue("d");
+    expect(value).toHaveTextContent("d");
+  });
+
+  it("should allow for the OptGroup to be used", async () => {
+    function Test(): ReactElement {
+      return (
+        <Select label="Select a fruit">
+          <OptGroup label="A">
+            <Option value="apple">Apple</Option>
+            <Option value="apricot">Apricot</Option>
+            <Option value="avocado">Avocado</Option>
+          </OptGroup>
+          <OptGroup label="B">
+            <Option value="blueberry">Blueberry</Option>
+          </OptGroup>
+          <OptGroup label={<span>C</span>}>
+            <Option value="cranberry">Cranberry</Option>
+            <Option value="currant">Currant</Option>
+          </OptGroup>
+        </Select>
+      );
+    }
+
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+    const select = screen.getByRole("combobox", { name: "Select a fruit" });
+    const selectValue = screen.getByRole("textbox", { hidden: true });
+    await user.click(select);
+
+    const listbox = screen.getByRole("listbox", { name: "Select a fruit" });
+    expect(listbox).toMatchSnapshot();
+
+    await user.click(screen.getByRole("option", { name: "Apple" }));
+    expect(listbox).not.toBeInTheDocument();
+    expect(selectValue).toHaveValue("apple");
+    expect(select).toHaveTextContent(/Apple/);
+  });
+
+  it("should include the leftAddon of the selected option unless disableOptionAddon is true", async () => {
+    function Test(props: { disableOptionAddon?: boolean }): ReactElement {
+      const { disableOptionAddon } = props;
+      return (
+        <Select
+          label="Select"
+          disableOptionAddon={disableOptionAddon}
+          selectedOptionProps={{ "data-testid": "selected" }}
+        >
+          <Option
+            value="a"
+            leftAddon={
+              <Avatar data-testid="avatar" size="icon">
+                A
+              </Avatar>
+            }
+          >
+            Avatar
+          </Option>
+          <Option
+            value="b"
+            leftAddon={<FontIcon data-testid="icon">favorite</FontIcon>}
+          >
+            Icon
+          </Option>
+        </Select>
+      );
+    }
+
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+    const select = screen.getByRole("combobox", { name: "Select" });
+    const selected = screen.getByTestId("selected");
+    expect(selected).toBeEmptyDOMElement();
+
+    await user.click(select);
+    await user.click(screen.getByRole("option", { name: "Avatar" }));
+
+    expect(() => within(selected).getByTestId("avatar")).not.toThrow();
+    expect(selected).toMatchSnapshot();
+
+    await user.click(select);
+    await user.click(screen.getByRole("option", { name: "Icon" }));
+    expect(() => within(selected).getByTestId("icon")).not.toThrow();
+    expect(selected).toMatchSnapshot();
+
+    rerender(<Test disableOptionAddon />);
+    expect(() => within(selected).getByTestId("icon")).toThrow();
+  });
+
+  it("should allow the selected icon to appear after the option instead of before", async () => {
+    const { user, select, rerender } = render({ defaultValue: "a" });
+    await user.click(select);
+
+    const option1 = screen.getByRole("option", {
+      name: "Option 1",
+      selected: true,
+    });
+    expect(option1.firstElementChild).toHaveClass("rmd-icon");
+    expect(option1).toMatchSnapshot();
+
+    rerender({ defaultValue: "a", selectedIconAfter: true });
+    expect(option1.lastElementChild).toHaveClass("rmd-icon");
+    expect(option1).toMatchSnapshot();
+  });
+
+  it("should be able to remove the selected icon from all options", async () => {
+    const { user, select } = render({
+      defaultValue: "a",
+      disableSelectedIcon: true,
+    });
+    await user.click(select);
+
+    const option1 = screen.getByRole("option", {
+      name: "Option 1",
+      selected: true,
+    });
+    expect(option1.querySelector(".rmd-icon")).toBeNull();
+  });
+
+  it("should not be interactable while disabled", async () => {
+    const { user, select } = render({ disabled: true });
+    expect(select).toHaveAttribute("tabindex", "-1");
+    expect(select).toHaveAttribute("aria-disabled", "true");
+
+    await user.click(select);
+    expect(() => screen.getByRole("listbox")).toThrow();
+
+    act(() => {
+      select.focus();
+    });
+
+    await user.keyboard("[Space]");
+    expect(() => screen.getByRole("listbox")).toThrow();
+  });
+
+  it("should open the listbox and focus the last element when the arrow up key is pressed unless there is a value", async () => {
+    const { user, select, selectValue } = render();
+    act(() => {
+      select.focus();
+    });
+
+    await user.keyboard("[ArrowUp]");
+    const option4 = screen.getByRole("option", { name: "Option 4" });
+    expect(select).toHaveAttribute("aria-activedescendant", option4.id);
+
+    await user.keyboard("[ArrowUp][Enter]");
+    expect(select).toHaveAttribute("aria-activedescendant", "");
+    expect(selectValue).toHaveValue("c");
+
+    await user.keyboard("[ArrowUp]");
+    const option3 = screen.getByRole("option", { name: "Option 3" });
+    expect(select).toHaveAttribute("aria-activedescendant", option3.id);
+  });
+
+  it("should not error if there are no options even though it's not worthwhile", async () => {
+    function Test(): ReactElement {
+      return (
+        <Select label="Select">
+          <CircularProgress aria-label="Loading..." />
+        </Select>
+      );
+    }
+
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+    const select = screen.getByRole("combobox", { name: "Select" });
+
+    await user.click(select);
+    expect(select).toHaveAttribute("aria-activedescendant", "");
+  });
+
+  it("should update the active-descendant while mounting if transitions are not disabled", async () => {
+    TRANSITION_CONFIG.disabled = false;
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const { user, select, rerender } = render({
+      menuProps: { onEntering, onEntered },
+    });
+
+    await user.click(select);
+    await waitFor(() => {
+      expect(onEntered).toHaveBeenCalledTimes(1);
+    });
+    expect(onEntering).toHaveBeenCalledTimes(1);
+
+    const listbox = screen.getByRole("listbox", { name: "Select" });
+    expect(select).toHaveAttribute(
+      "aria-activedescendant",
+      screen.getByRole("option", { name: "Option 1" }).id
+    );
+
+    await user.keyboard("[Tab]");
+    await waitForElementToBeRemoved(listbox);
+    expect(select).toHaveAttribute("aria-activedescendant", "");
+
+    rerender({
+      menuProps: { onEntering, onEntered, disableTransition: true },
+    });
+    await user.click(select);
+    await waitFor(() => {
+      expect(onEntered).toHaveBeenCalledTimes(2);
+    });
+    expect(onEntering).toHaveBeenCalledTimes(1);
+    expect(select).toHaveAttribute(
+      "aria-activedescendant",
+      screen.getByRole("option", { name: "Option 1" }).id
+    );
+
+    TRANSITION_CONFIG.disabled = true;
+  });
+
+  describe("keyboard behavior", () => {
+    it("should open the listbox when the spacebar key is pressed and automatically focus the first element", async () => {
+      const { user, select, selectValue } = render();
+      act(() => {
+        select.focus();
+      });
+
+      await user.keyboard("[Space]");
+      let option1 = screen.getByRole("option", { name: "Option 1" });
+      let option2 = screen.getByRole("option", { name: "Option 2" });
+      let option3 = screen.getByRole("option", { name: "Option 3" });
+      let option4 = screen.getByRole("option", { name: "Option 4" });
+
+      expect(document.activeElement).toBe(select);
+      expect(select).toHaveAttribute("aria-activedescendant", option1.id);
+
+      await user.keyboard("[End]");
+      expect(document.activeElement).toBe(select);
+      expect(select).toHaveAttribute("aria-activedescendant", option4.id);
+
+      await user.keyboard("[ArrowDown]");
+      expect(select).toHaveAttribute("aria-activedescendant", option4.id);
+
+      await user.keyboard("[ArrowUp]");
+      expect(select).toHaveAttribute("aria-activedescendant", option3.id);
+
+      await user.keyboard("[Home]");
+      expect(select).toHaveAttribute("aria-activedescendant", option1.id);
+
+      await user.keyboard("[ArrowUp]");
+      expect(select).toHaveAttribute("aria-activedescendant", option1.id);
+
+      await user.keyboard("[ArrowDown]");
+      expect(select).toHaveAttribute("aria-activedescendant", option2.id);
+
+      await user.keyboard("o");
+      expect(select).toHaveAttribute("aria-activedescendant", option3.id);
+
+      await user.keyboard("[Enter]");
+      expect(selectValue).toHaveValue("c");
+      expect(select).toHaveAttribute("aria-activedescendant", "");
+
+      await user.keyboard("[Space]");
+      option1 = screen.getByRole("option", { name: "Option 1" });
+      option2 = screen.getByRole("option", { name: "Option 2" });
+      option3 = screen.getByRole("option", { name: "Option 3" });
+      option4 = screen.getByRole("option", { name: "Option 4" });
+
+      expect(document.activeElement).toBe(select);
+      expect(select).toHaveAttribute("aria-activedescendant", option3.id);
+
+      await user.keyboard("[Escape]");
+      expect(select).toHaveAttribute("aria-activedescendant", "");
+      expect(selectValue).toHaveValue("c");
+    });
+
+    it("should submit the form when the enter key is pressed while the listbox is not visible", async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      rmdRender(
+        <Form name="form" onSubmit={onSubmit}>
+          <Test />
+          <Button type="submit">Submit</Button>
+        </Form>
+      );
+
+      const select = screen.getByRole("combobox", { name: "Select" });
+      const selectValue = screen.getByRole("textbox", { hidden: true });
+      act(() => {
+        select.focus();
+      });
+
+      await user.keyboard("[Space]");
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(select).toHaveAttribute(
+        "aria-activedescendant",
+        screen.getByRole("option", { name: "Option 1" }).id
+      );
+
+      await user.keyboard("[Enter]");
+      expect(selectValue).toHaveValue("a");
+
+      await user.keyboard("[Enter]");
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+    });
+  });
+});