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

package/src/chip/__tests__/Chip.tsx

@@ -21,9 +21,9 @@ describe("Chip", () => {
       ref,
       children: "Chip",
     } as const;
-    const { getByRole, rerender } = render(<Chip {...props} />);
+    const { rerender } = render(<Chip {...props} />);
 
-    const chip = getByRole("button", { name: "Chip" });
+    const chip = screen.getByRole("button", { name: "Chip" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(chip);
     expect(chip).toMatchSnapshot();
@@ -51,8 +51,8 @@ describe("Chip", () => {
     const modeMock = jest
       .spyOn(INTERACTION_CONFIG, "mode", "get")
       .mockReturnValue("press");
-    const { getByRole, rerender } = render(<Chip raisable>Chip</Chip>);
-    const chip = getByRole("button");
+    const { rerender } = render(<Chip raisable>Chip</Chip>);
+    const chip = screen.getByRole("button");
 
     fireEvent.mouseDown(chip);
     expect(chip).toHaveClass("rmd-chip--pressed");
@@ -86,8 +86,8 @@ describe("Chip", () => {
       children: "Content",
     } as const;
 
-    const { getByRole, rerender } = render(<Chip {...props} />);
-    const chip = getByRole("button", { name: "Content" });
+    const { rerender } = render(<Chip {...props} />);
+    const chip = screen.getByRole("button", { name: "Content" });
 
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(chip.firstElementChild);
@@ -99,7 +99,7 @@ describe("Chip", () => {
   });
 
   it("should allow for addons to appear before and after the children", () => {
-    const { getByRole } = render(
+    render(
       <Chip
         leftAddon={<FontIcon>favorite</FontIcon>}
         rightAddon={<FontIcon>close</FontIcon>}
@@ -108,7 +108,7 @@ describe("Chip", () => {
       </Chip>
     );
 
-    const chip = getByRole("button", { name: "Content" });
+    const chip = screen.getByRole("button", { name: "Content" });
     expect(chip).toMatchSnapshot();
   });
 
@@ -119,11 +119,9 @@ describe("Chip", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByTestId, rerender } = render(
-      <Chip {...props} noninteractive />
-    );
+    const { rerender } = render(<Chip {...props} noninteractive />);
 
-    let chip = getByTestId("chip");
+    let chip = screen.getByTestId("chip");
     expect(chip).toBeInstanceOf(HTMLSpanElement);
     expect(chip).not.toHaveAttribute("aria-pressed");
     expect(chip).not.toHaveAttribute("type");
@@ -132,7 +130,7 @@ describe("Chip", () => {
     expect(chip).toMatchSnapshot();
 
     rerender(<Chip {...props} />);
-    chip = getByTestId("chip");
+    chip = screen.getByTestId("chip");
     expect(chip).toBeInstanceOf(HTMLButtonElement);
     expect(chip).toHaveAttribute("type", "button");
     expect(chip).not.toHaveAttribute("disabled");
@@ -142,12 +140,12 @@ describe("Chip", () => {
 
   describe("selectable chips", () => {
     it("should update the aria-pressed state based on the selected state for interactable chips", () => {
-      const { getByTestId, rerender } = render(
+      const { rerender } = render(
         <Chip data-testid="chip" selected={false}>
           Chip
         </Chip>
       );
-      const buttonChip = getByTestId("chip");
+      const buttonChip = screen.getByTestId("chip");
       expect(buttonChip).not.toHaveAttribute("aria-pressed");
 
       rerender(
@@ -163,7 +161,7 @@ describe("Chip", () => {
         </Chip>
       );
 
-      const spanChip = getByTestId("chip");
+      const spanChip = screen.getByTestId("chip");
       expect(spanChip).not.toHaveAttribute("aria-pressed", "true");
     });
 
@@ -173,8 +171,8 @@ describe("Chip", () => {
         children: "Chip",
       } as const;
 
-      const { getByRole, rerender } = render(<Chip {...props} />);
-      const chip = getByRole("button");
+      const { rerender } = render(<Chip {...props} />);
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(<Chip {...props} selected />);
@@ -236,13 +234,13 @@ describe("Chip", () => {
     });
 
     it("should allow for a custom selectedIcon", () => {
-      const { getByRole, rerender } = render(
+      const { rerender } = render(
         <Chip selected={false} selectedIcon={<FontIcon>favorite</FontIcon>}>
           Chip
         </Chip>
       );
 
-      const chip = getByRole("button");
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(
@@ -289,8 +287,8 @@ describe("Chip", () => {
         disableIconTransition: true,
       } as const;
 
-      const { getByRole, rerender } = render(<Chip {...props} />);
-      const chip = getByRole("button");
+      const { rerender } = render(<Chip {...props} />);
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(<Chip {...props} selected />);

package/src/chip/__tests__/__snapshots__/Chip.tsx.snap

@@ -281,7 +281,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 exports[`Chip selectable chips should apply the selected icon when the selectedThemed prop is not true 6`] = `
 <button
   aria-pressed="true"
-  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span
@@ -332,7 +332,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 exports[`Chip selectable chips should apply the selected icon when the selectedThemed prop is not true 8`] = `
 <button
   aria-pressed="true"
-  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span
@@ -396,7 +396,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 
 exports[`Chip should allow for addons to appear before and after the children 1`] = `
 <button
-  class="rmd-chip rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span

package/src/chip/__tests__/__snapshots__/styles.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`chip should be callable without any arguments 1`] = `"rmd-chip rmd-chip--solid rmd-interaction-surface"`;
+exports[`chip should be callable without any arguments 1`] = `"rmd-chip rmd-chip--solid"`;
 
 exports[`chipContent should be callable without any arguments 1`] = `"rmd-chip__content"`;

package/src/chip/_chip.scss

@@ -23,7 +23,6 @@ $disable-outline-theme: $disable-everything !default;
 $disable-outline-raisable: false !default;
 $disable-left-addon: false !default;
 $disable-right-addon: false !default;
-$disable-both-addons: $disable-left-addon and $disable-right-addon !default;
 $disable-selected-theme: false !default;
 $disable-selected-icon-transition: false !default;
 
@@ -324,21 +323,6 @@ $var-lookup: (
         }
       }
 
-      @if not $disable-both-addons {
-        &--surrounded {
-          @include utils.auto-rtl(
-            padding-left,
-            $addon-left-padding,
-            $addon-right-padding
-          );
-          @include utils.auto-rtl(
-            padding-right,
-            $addon-right-padding,
-            $addon-left-padding
-          );
-        }
-      }
-
       @if not $disable-content {
         &__content {
           @include typography.text-overflow;

package/src/chip/styles.ts

@@ -52,7 +52,7 @@ export interface ChipClassNameOptions {
   /** @defaultValue `false` */
   selectedThemed?: boolean;
 
-  /** @defaultValue `false` */
+  /** @defaultValue `true` */
   noninteractive?: boolean;
 
   /** @defaultValue `false` */
@@ -78,7 +78,7 @@ export function chip(options: ChipClassNameOptions = {}): string {
     selected = false,
     selectedThemed = false,
     selectedClassName,
-    noninteractive = false,
+    noninteractive = true,
     pressedClassName,
     leftAddon = false,
     rightAddon = false,
@@ -92,9 +92,8 @@ export function chip(options: ChipClassNameOptions = {}): string {
       solid: theme === "solid",
       outline: theme === "outline",
       disabled,
-      "left-addon": leftAddon && !rightAddon,
-      "right-addon": !leftAddon && rightAddon,
-      surrounded: leftAddon && rightAddon,
+      "left-addon": leftAddon,
+      "right-addon": rightAddon,
       pressed,
     }),
     selected && selectedClassName,

package/src/cssUtils.ts

@@ -84,6 +84,7 @@ export type Margin = "none" | "top" | "bottom" | "centered";
 /** @remarks \@since 6.0.0 */
 export type TextOverflow = "allow" | "nowrap" | "ellipsis";
 
+/** @remarks \@since 6.0.0 */
 export interface TextCssUtilsOptions {
   textColor?: ThemeColor | TextColor;
 
@@ -206,7 +207,9 @@ export function cssUtils(options: CssUtilsOptions): string {
     !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,
     !backgroundColor && isTextColor && `rmd-${textColor}-color`,
     backgroundColor && "rmd-background-container",
-    backgroundColor && `rmd-${backgroundColor}-container`,
+    backgroundColor &&
+      backgroundColor !== "current-color" &&
+      `rmd-${backgroundColor}-container`,
     outlineColor && "rmd-outline",
     outlineColor && `rmd-${outlineColor}-outline`,
     (isMarginTop || margin === "bottom") &&

package/src/dialog/Dialog.tsx

@@ -69,7 +69,7 @@ export interface BaseDialogProps
     TransitionActions,
     FocusContainerComponentProps {
   /**
-   * @defaultValue `useEnsuredId('dialog')`
+   * @defaultValue `"dialog-" + useId()`
    */
   id?: string;
 
@@ -263,7 +263,9 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
   function Dialog(props, ref) {
     const {
       id: propId,
-      role = "dialog",
+      fixed = false,
+      modal = false,
+      role = modal ? "alertdialog" : "dialog",
       type = "centered",
       tabIndex = -1,
       visible,
@@ -284,8 +286,6 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       onExiting = noop,
       onExited,
       exitedHidden = true,
-      fixed = false,
-      modal = false,
       disableOverlay = false,
       overlayProps,
       overlayHidden,
@@ -389,6 +389,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
               enabled={type === "centered"}
             >
               <div
+                aria-modal={modal || undefined}
                 {...remaining}
                 {...elementProps}
                 {...eventHandlers}

package/src/dialog/__tests__/Dialog.tsx

@@ -0,0 +1,316 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef, type ReactElement } from "react";
+import { Button } from "../../button/Button.js";
+import { PORTAL_CONTAINER_ID } from "../../portal/PortalContainerProvider.js";
+import {
+  rmdRender,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../test-utils/index.js";
+import { useToggle } from "../../useToggle.js";
+import { isElementVisible } from "../../utils/isElementVisible.js";
+import { Dialog, type DialogProps } from "../Dialog.js";
+import { dialog } from "../styles.js";
+
+interface TestProps
+  extends Omit<
+    DialogProps,
+    "aria-label" | "aria-labelledby" | "visible" | "onRequestClose"
+  > {}
+
+function Test(props: TestProps): ReactElement {
+  const { children, ...remaining } = props;
+
+  const { toggled, enable, disable } = useToggle();
+  return (
+    <>
+      <Button onClick={enable}>Show</Button>
+      <Dialog
+        {...remaining}
+        aria-label="Dialog"
+        visible={toggled}
+        onRequestClose={disable}
+        overlayProps={{
+          "data-testid": "overlay",
+          ...remaining.overlayProps,
+        }}
+        containerProps={{
+          "data-testid": "container",
+          ...remaining.containerProps,
+        }}
+      >
+        <Button onClick={disable}>Close</Button>
+        {children}
+      </Dialog>
+    </>
+  );
+}
+
+describe("Dialog", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    const props = {
+      "aria-label": "Dialog",
+      ref,
+      visible: true,
+      onRequestClose: () => {},
+    } as const;
+
+    const { rerender } = rmdRender(<Dialog {...props} />);
+
+    const dialog = screen.getByRole("dialog", { name: "Dialog" });
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current).toBe(dialog);
+    expect(dialog).toMatchSnapshot();
+
+    rerender(
+      <Dialog
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(dialog).toMatchSnapshot();
+  });
+
+  it("should use conditional rendering but support being hidden with the DISPLAY_NONE_CLASS by setting temporary to false", async () => {
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+
+    let show = screen.getByRole("button", { name: "Show" });
+    expect(() => screen.getByRole("dialog")).toThrow();
+    expect(() => screen.getByRole("button", { name: "Close" })).toThrow();
+
+    await user.click(show);
+    let dialog = screen.getByRole("dialog", { name: "Dialog" });
+    let closeButton = screen.getByRole("button", { name: "Close" });
+    expect(dialog).not.toHaveClass("rmd-dialog--enter");
+
+    await user.click(closeButton);
+    expect(dialog).not.toBeInTheDocument();
+    expect(closeButton).not.toBeInTheDocument();
+
+    // I do not support toggling the temporary state without going through the
+    // full transition flow again
+    rerender(<Test key="restart" temporary={false} />);
+    show = screen.getByRole("button", { name: "Show" });
+    dialog = screen.getByRole("dialog", { name: "Dialog" });
+    closeButton = screen.getByRole("button", { name: "Close" });
+
+    expect(isElementVisible(dialog)).toBe(false);
+    expect(isElementVisible(closeButton)).toBe(false);
+
+    await user.click(show);
+    expect(isElementVisible(dialog)).toBe(true);
+    expect(isElementVisible(closeButton)).toBe(true);
+
+    await user.click(closeButton);
+    expect(isElementVisible(dialog)).toBe(false);
+    expect(isElementVisible(closeButton)).toBe(false);
+  });
+
+  it("should render an overlay unless the disableOverlay prop is true", async () => {
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+
+    const show = screen.getByRole("button", { name: "Show" });
+    expect(() => screen.getByTestId("overlay")).toThrow();
+
+    await user.click(show);
+    expect(() => screen.getByTestId("overlay")).not.toThrow();
+    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
+
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(() => screen.getByTestId("overlay")).toThrow();
+    expect(() => screen.getByRole("dialog")).toThrow();
+
+    rerender(<Test disableOverlay />);
+
+    await user.click(show);
+    expect(() => screen.getByTestId("overlay")).toThrow();
+    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
+  });
+
+  it("should allow the user to close the dialog by clicking on the overlay", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+    await user.click(screen.getByRole("button", { name: "Show" }));
+
+    expect(() => screen.getByRole("dialog", { name: "Dialog" })).not.toThrow();
+    await user.click(screen.getByTestId("overlay"));
+    expect(() => screen.getByRole("dialog")).toThrow();
+  });
+
+  it("should move the focus onto the dialog when it becomes visible and back to the previous element once it is closed", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+
+    const show = screen.getByRole("button", { name: "Show" });
+    await user.click(show);
+
+    const dialog = screen.getByRole("dialog", { name: "Dialog" });
+    expect(document.activeElement).toBe(dialog);
+
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(dialog).not.toBeInTheDocument();
+
+    // have to use waitFor because this focus happens after an animation frame
+    // due to the weird timing of Enter keydown events compared to space
+    await waitFor(() => {
+      expect(document.activeElement).toBe(show);
+    });
+  });
+
+  it("should allow both the dialog and overlay to disable the portal behavior by enabling the disablePortal prop", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Test disablePortal />);
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+
+    const dialog = screen.getByRole("dialog", { name: "Dialog" });
+    const overlay = screen.getByTestId("overlay");
+    const portalContainer = document.getElementById(PORTAL_CONTAINER_ID);
+    expect(portalContainer).not.toContainElement(dialog);
+    expect(portalContainer).not.toContainElement(overlay);
+  });
+
+  it("should close the modal when the escape key is pressed and the disableEscapeClose is not true", async () => {
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+
+    const show = screen.getByRole("button", { name: "Show" });
+    await user.click(show);
+    let dialog = screen.getByRole("dialog", { name: "Dialog" });
+
+    await user.keyboard("[Escape]");
+    expect(dialog).not.toBeInTheDocument();
+
+    rerender(<Test disableEscapeClose />);
+    await user.click(show);
+    dialog = screen.getByRole("dialog", { name: "Dialog" });
+
+    await user.keyboard("[Escape]");
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it("should be able to render as a modal with the correct accessibility", async () => {
+    const user = userEvent.setup();
+    rmdRender(
+      <Test aria-describedby="alert-message" modal>
+        <div id="alert-message">Warning</div>
+      </Test>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    const alertDialog = screen.getByRole("alertdialog", { name: "Dialog" });
+    const overlay = screen.getByTestId("overlay");
+
+    expect(alertDialog).toHaveAttribute("aria-modal", "true");
+    expect(overlay).not.toHaveClass("rmd-overlay--clickable");
+    expect(overlay).toMatchSnapshot();
+  });
+
+  it("should not close the modal dialog when escape key is pressed or the overlay is clicked", async () => {
+    const user = userEvent.setup();
+    rmdRender(
+      <Test aria-describedby="alert-message" modal>
+        <div id="alert-message">Warning</div>
+      </Test>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    const alertDialog = screen.getByRole("alertdialog", { name: "Dialog" });
+
+    await user.keyboard("[Escape]");
+    expect(alertDialog).toBeInTheDocument();
+
+    await user.click(screen.getByTestId("overlay"));
+    expect(alertDialog).toBeInTheDocument();
+  });
+
+  it("should be able to render as a full-page dialog by setting the type prop to full-page", async () => {
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    const dialog = screen.getByRole("dialog", { name: "Dialog" });
+    const container = screen.getByTestId("container");
+    expect(container).toMatchSnapshot();
+
+    rerender(<Test type="full-page" />);
+    // for some reason the container changes to the dialog? so just check there
+    // is no container by retying to re-query for it
+    expect(() => screen.getByTestId("container")).toThrow();
+    expect(dialog).toMatchSnapshot();
+  });
+
+  it("should enable scroll lock on the page while visible unless the disableScrollLock prop is true", async () => {
+    const user = userEvent.setup();
+    const { rerender } = rmdRender(<Test />);
+
+    expect(document.body).not.toHaveStyle("overflow: hidden");
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    expect(document.body).toHaveStyle("overflow: hidden");
+
+    rerender(<Test disableScrollLock />);
+    expect(document.body).not.toHaveStyle("overflow: hidden");
+
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(document.body).not.toHaveStyle("overflow: hidden");
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+    expect(document.body).not.toHaveStyle("overflow: hidden");
+  });
+
+  it("should enable the noOpacity prop on parent dialog overlay elements so the screen does not get darker as more dialogs are visible", async () => {
+    const user = userEvent.setup();
+    function InfiniteDialog({ depth }: { depth: number }): ReactElement {
+      const { toggled, enable, disable } = useToggle();
+
+      return (
+        <>
+          <Button onClick={enable}>{`Show ${depth}`}</Button>
+          <Dialog
+            aria-label={`Dialog ${depth}`}
+            visible={toggled}
+            onRequestClose={disable}
+            overlayProps={{
+              "data-testid": `overlay${depth}`,
+            }}
+          >
+            <InfiniteDialog depth={depth + 1} />
+          </Dialog>
+        </>
+      );
+    }
+
+    rmdRender(
+      <Test>
+        <InfiniteDialog depth={1} />
+      </Test>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Show" }));
+
+    const overlay = screen.getByTestId("overlay");
+    expect(overlay.className).toMatchSnapshot();
+
+    await user.click(screen.getByRole("button", { name: "Show 1" }));
+
+    const overlay1 = screen.getByTestId("overlay1");
+    expect(overlay.className).toMatchSnapshot();
+    expect(overlay1.className).toMatchSnapshot();
+
+    await user.click(screen.getByRole("button", { name: "Show 2" }));
+    expect(overlay.className).toMatchSnapshot();
+    expect(overlay1.className).toMatchSnapshot();
+  });
+});
+
+describe("dialog class name utility", () => {
+  it("should be callable with no arguments", () => {
+    expect(dialog()).toMatchSnapshot();
+  });
+});

package/src/dialog/__tests__/DialogContent.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { render, screen } from "../../test-utils/index.js";
+import { DialogContent } from "../DialogContent.js";
+import { dialogContent } from "../styles.js";
+
+describe("DialogContent", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    const props = {
+      "data-testid": "content",
+      ref,
+    } as const;
+
+    const { rerender } = render(<DialogContent {...props} />);
+
+    const content = screen.getByTestId("content");
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current).toBe(content);
+    expect(content).toMatchSnapshot();
+
+    rerender(
+      <DialogContent
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(content).toMatchSnapshot();
+  });
+
+  it("should support disabling padding", () => {
+    const { rerender } = render(
+      <DialogContent data-testid="content">Content</DialogContent>
+    );
+
+    const content = screen.getByTestId("content");
+    expect(content).toMatchSnapshot();
+
+    rerender(
+      <DialogContent data-testid="content" disablePadding>
+        Content
+      </DialogContent>
+    );
+    expect(content).toMatchSnapshot();
+  });
+});
+
+describe("dialogContent class name utility", () => {
+  it("should be callable with no arguments", () => {
+    expect(dialogContent()).toMatchSnapshot();
+  });
+});