@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/src/expansion-panel/__tests__/ExpansionPanel.tsx

@@ -1,290 +0,0 @@
-import { beforeEach, describe, expect, it } from "@jest/globals";
-import { createRef, type ReactElement } from "react";
-import {
-  fireEvent,
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { isElementVisible } from "../../utils/isElementVisible.js";
-import { ExpansionList } from "../ExpansionList.js";
-import { ExpansionPanel, type ExpansionPanelProps } from "../ExpansionPanel.js";
-import {
-  useExpansionPanels,
-  type ExpansionPanelHookOptions,
-} from "../useExpansionPanels.js";
-
-interface TestProps extends ExpansionPanelHookOptions {
-  manualIds?: boolean;
-  disablePanel2?: boolean;
-}
-
-function Test(props: TestProps): ReactElement {
-  const { manualIds, ...options } = props;
-  const { getPanelProps } = useExpansionPanels(options);
-
-  return (
-    <ExpansionList>
-      <ExpansionPanel
-        {...getPanelProps(manualIds ? "panel-1" : 0)}
-        headerChildren="Panel 1"
-      >
-        Panel 1 Contents
-      </ExpansionPanel>
-      <ExpansionPanel
-        {...getPanelProps(manualIds ? "panel-2" : 1)}
-        headerChildren="Panel 2"
-      >
-        Panel 2 Contents
-      </ExpansionPanel>
-      <ExpansionPanel
-        {...getPanelProps(manualIds ? "panel-3" : 2)}
-        headerChildren="Panel 3"
-      >
-        Panel 3 Contents
-      </ExpansionPanel>
-    </ExpansionList>
-  );
-}
-
-describe("ExpansionPanel", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  it("should default to single expansion, allowing all panels to be closed, no expanded ids, and apply hidden while collapsed", async () => {
-    const { container } = render(<Test />);
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-    const panel2 = screen.getByRole("button", { name: "Panel 2" });
-    const panel3 = screen.getByRole("button", { name: "Panel 3" });
-
-    const [panel1Contents, panel2Contents, panel3Contents] =
-      screen.getAllByRole("region");
-
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-    expect(panel1Contents).toBeInTheDocument();
-    expect(panel2Contents).toBeInTheDocument();
-    expect(panel3Contents).toBeInTheDocument();
-    expect(isElementVisible(panel1Contents)).toBe(false);
-    expect(isElementVisible(panel2Contents)).toBe(false);
-    expect(isElementVisible(panel3Contents)).toBe(false);
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(panel1);
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-    expect(isElementVisible(panel1Contents)).toBe(true);
-    expect(isElementVisible(panel2Contents)).toBe(false);
-    expect(isElementVisible(panel3Contents)).toBe(false);
-
-    fireEvent.click(panel1);
-    // have to wait because of the collapse transition
-    await waitFor(() => {
-      expect(isElementVisible(panel1Contents)).toBe(false);
-    });
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-    expect(isElementVisible(panel2Contents)).toBe(false);
-    expect(isElementVisible(panel3Contents)).toBe(false);
-
-    fireEvent.click(panel2);
-    await waitFor(() => {
-      expect(isElementVisible(panel2Contents)).toBe(true);
-    });
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "true");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-    expect(isElementVisible(panel1Contents)).toBe(false);
-    expect(isElementVisible(panel3Contents)).toBe(false);
-
-    fireEvent.click(panel3);
-    await waitFor(() => {
-      expect(isElementVisible(panel2Contents)).toBe(false);
-    });
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "true");
-    expect(isElementVisible(panel1Contents)).toBe(false);
-    expect(isElementVisible(panel3Contents)).toBe(true);
-  });
-
-  it("should support multiple panel expansion using the multiple prop", async () => {
-    const user = userEvent.setup();
-    render(<Test multiple defaultExpandedIndex={1} />);
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-    const panel2 = screen.getByRole("button", { name: "Panel 2" });
-    const panel3 = screen.getByRole("button", { name: "Panel 3" });
-
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "true");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(panel1);
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "true");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(panel1);
-    expect(panel1).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).toHaveAttribute("aria-expanded", "true");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should support providing a list of default expanded ids", () => {
-    render(
-      <Test
-        manualIds
-        multiple
-        defaultExpandedIds={() => ["panel-1", "panel-2"]}
-      />
-    );
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-    const panel2 = screen.getByRole("button", { name: "Panel 2" });
-    const panel3 = screen.getByRole("button", { name: "Panel 3" });
-
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "true");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should support preventing all the panels from being closed", async () => {
-    const user = userEvent.setup();
-    render(<Test multiple preventAllCollapsed />);
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-    const panel2 = screen.getByRole("button", { name: "Panel 2" });
-    const panel3 = screen.getByRole("button", { name: "Panel 3" });
-
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-    expect(panel1).toHaveAttribute("aria-disabled");
-
-    await user.click(panel1);
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should handle keyboard movement correctly", async () => {
-    const user = userEvent.setup();
-    render(<Test preventAllCollapsed />);
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-    const panel2 = screen.getByRole("button", { name: "Panel 2" });
-    const panel3 = screen.getByRole("button", { name: "Panel 3" });
-
-    expect(panel1).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toHaveAttribute("aria-expanded", "false");
-    expect(panel3).toHaveAttribute("aria-expanded", "false");
-
-    await user.tab();
-    expect(document.activeElement).toBe(panel1);
-
-    await user.keyboard("[End]");
-    expect(document.activeElement).toBe(panel3);
-
-    await user.keyboard("[Home]");
-    expect(document.activeElement).toBe(panel1);
-
-    await user.keyboard("[ArrowUp]");
-    expect(document.activeElement).toBe(panel3);
-
-    await user.keyboard("[ArrowUp]");
-    expect(document.activeElement).toBe(panel2);
-
-    await user.keyboard("[ArrowDown]");
-    expect(document.activeElement).toBe(panel3);
-
-    await user.keyboard("[ArrowDown]");
-    expect(document.activeElement).toBe(panel1);
-
-    // not searchable
-    await user.keyboard("p");
-    expect(document.activeElement).toBe(panel1);
-  });
-
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props: ExpansionPanelProps = {
-      children: "Content",
-      expanded: false,
-      onExpandClick() {
-        // do nothing
-      },
-      contentProps: {
-        ref,
-      },
-    };
-    const { rerender } = render(<ExpansionPanel {...props} />);
-
-    const contentEl = screen.getByRole("region");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(contentEl);
-    expect(contentEl).toMatchSnapshot();
-
-    rerender(
-      <ExpansionPanel
-        {...props}
-        contentProps={{
-          ...props.contentProps,
-          style: { color: "white" },
-          className: "custom-class-name",
-        }}
-      />
-    );
-    expect(contentEl).toMatchSnapshot();
-  });
-
-  it("should apply the correct styling, HTML attributes, and allow a ref on the content element", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      ref,
-      children: "Content",
-      expanded: false,
-      onExpandClick() {
-        // do nothing
-      },
-    } as const;
-    const { container, rerender } = render(<ExpansionPanel {...props} />);
-
-    const containerEl = container.firstElementChild;
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(containerEl);
-    expect(containerEl).toMatchSnapshot();
-
-    rerender(
-      <ExpansionPanel
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(containerEl).toMatchSnapshot();
-  });
-
-  it("should support disabling the transition", async () => {
-    const user = userEvent.setup();
-    const { rerender } = render(
-      <Test disableTransition defaultExpandedIndex={0} />
-    );
-    const panel1 = screen.getByRole("button", { name: "Panel 1" });
-
-    const content1 = screen.getByRole("region", { name: "Panel 1" });
-    await user.click(panel1);
-    expect(isElementVisible(content1)).toBe(false);
-    expect(content1).not.toHaveClass("rmd-collapse--enter");
-    expect(content1).not.toHaveClass("rmd-collapse--leave");
-
-    rerender(<Test defaultExpandedIndex={0} />);
-    await user.click(panel1);
-    expect(isElementVisible(content1)).toBe(true);
-    expect(content1).toHaveClass("rmd-collapse--enter");
-    expect(content1).not.toHaveClass("rmd-collapse--leave");
-  });
-});

package/src/expansion-panel/__tests__/__snapshots__/ExpansionPanel.tsx.snap

@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ExpansionPanel should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div
-  aria-labelledby="expansion-panel-:rk:"
-  class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-  id="expansion-panel-:rk:-content"
-  role="region"
-  style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
->
-  Content
-</div>
-`;
-
-exports[`ExpansionPanel should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div
-  aria-labelledby="expansion-panel-:rk:"
-  class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-  id="expansion-panel-:rk:-content"
-  role="region"
-  style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
->
-  Content
-</div>
-`;
-
-exports[`ExpansionPanel should apply the correct styling, HTML attributes, and allow a ref on the content element 1`] = `
-<div
-  class="rmd-card rmd-card--shadowed rmd-card--full-width rmd-expansion-panel rmd-expansion-panel--animate"
-  id="expansion-panel-:rl:-container"
->
-  <h6
-    class="rmd-typography rmd-typography--subtitle-1 rmd-no-margin rmd-expansion-panel__heading"
-  >
-    <button
-      aria-expanded="false"
-      class="rmd-button-unstyled rmd-expansion-panel__button"
-      id="expansion-panel-:rl:"
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-      >
-        keyboard_arrow_down
-      </span>
-    </button>
-  </h6>
-  <div
-    aria-labelledby="expansion-panel-:rl:"
-    class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-    id="expansion-panel-:rl:-content"
-    role="region"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-  >
-    Content
-  </div>
-</div>
-`;
-
-exports[`ExpansionPanel should apply the correct styling, HTML attributes, and allow a ref on the content element 2`] = `
-<div
-  class="rmd-card rmd-card--shadowed rmd-card--full-width rmd-expansion-panel rmd-expansion-panel--animate custom-class-name"
-  id="expansion-panel-:rl:-container"
-  style="color: white;"
->
-  <h6
-    class="rmd-typography rmd-typography--subtitle-1 rmd-no-margin rmd-expansion-panel__heading"
-  >
-    <button
-      aria-expanded="false"
-      class="rmd-button-unstyled rmd-expansion-panel__button"
-      id="expansion-panel-:rl:"
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-      >
-        keyboard_arrow_down
-      </span>
-    </button>
-  </h6>
-  <div
-    aria-labelledby="expansion-panel-:rl:"
-    class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-    id="expansion-panel-:rl:-content"
-    role="region"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-  >
-    Content
-  </div>
-</div>
-`;
-
-exports[`ExpansionPanel should default to single expansion, allowing all panels to be closed, no expanded ids, and apply hidden while collapsed 1`] = `
-<div>
-  <div>
-    <div
-      class="rmd-card rmd-card--shadowed rmd-card--full-width rmd-expansion-panel rmd-expansion-panel--animate"
-      id="expansion-panel-:r0:-1-container"
-    >
-      <h6
-        class="rmd-typography rmd-typography--subtitle-1 rmd-no-margin rmd-expansion-panel__heading"
-      >
-        <button
-          aria-expanded="false"
-          class="rmd-button-unstyled rmd-expansion-panel__button"
-          id="expansion-panel-:r0:-1"
-          type="button"
-        >
-          Panel 1
-          <span
-            aria-hidden="true"
-            class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-          >
-            keyboard_arrow_down
-          </span>
-        </button>
-      </h6>
-      <div
-        aria-labelledby="expansion-panel-:r0:-1"
-        class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-        id="expansion-panel-:r0:-1-content"
-        role="region"
-        style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-      >
-        Panel 1 Contents
-      </div>
-    </div>
-    <div
-      class="rmd-card rmd-card--shadowed rmd-card--full-width rmd-expansion-panel rmd-expansion-panel--animate"
-      id="expansion-panel-:r0:-2-container"
-    >
-      <h6
-        class="rmd-typography rmd-typography--subtitle-1 rmd-no-margin rmd-expansion-panel__heading"
-      >
-        <button
-          aria-expanded="false"
-          class="rmd-button-unstyled rmd-expansion-panel__button"
-          id="expansion-panel-:r0:-2"
-          type="button"
-        >
-          Panel 2
-          <span
-            aria-hidden="true"
-            class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-          >
-            keyboard_arrow_down
-          </span>
-        </button>
-      </h6>
-      <div
-        aria-labelledby="expansion-panel-:r0:-2"
-        class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-        id="expansion-panel-:r0:-2-content"
-        role="region"
-        style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-      >
-        Panel 2 Contents
-      </div>
-    </div>
-    <div
-      class="rmd-card rmd-card--shadowed rmd-card--full-width rmd-expansion-panel rmd-expansion-panel--animate"
-      id="expansion-panel-:r0:-3-container"
-    >
-      <h6
-        class="rmd-typography rmd-typography--subtitle-1 rmd-no-margin rmd-expansion-panel__heading"
-      >
-        <button
-          aria-expanded="false"
-          class="rmd-button-unstyled rmd-expansion-panel__button"
-          id="expansion-panel-:r0:-3"
-          type="button"
-        >
-          Panel 3
-          <span
-            aria-hidden="true"
-            class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-          >
-            keyboard_arrow_down
-          </span>
-        </button>
-      </h6>
-      <div
-        aria-labelledby="expansion-panel-:r0:-3"
-        class="rmd-card__content rmd-card__content--padded rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-        id="expansion-panel-:r0:-3-content"
-        role="region"
-        style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-      >
-        Panel 3 Contents
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/expansion-panel/_expansion-panel.scss

@@ -1,107 +0,0 @@
-@use "../utils";
-@use "../transition/transition";
-@use "../icon/icon";
-@use "../button/button";
-@use "../theme/theme";
-
-$disable-everything: false !default;
-$disable-margin-top-transition: false !default;
-
-$padding: 1rem !default;
-$spacing: 1rem !default;
-$button-spacing: icon.$spacing !default;
-$rotate-from: icon.$rotate-from !default;
-$rotate-to: icon.$rotate-to !default;
-
-$box-shadow-overlay-height: 10px !default;
-$box-shadow-overlay-bottom: -6px !default;
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(expansion-panel, $disable-layer) {
-      // does not require custom styles
-      .rmd-expansion-panel {
-        @if not $disable-margin-top-transition and $spacing {
-          &--animate {
-            transition: margin-top transition.$linear-duration;
-          }
-        }
-
-        @if $spacing {
-          &--expanded + .rmd-expansion-panel {
-            margin-top: $spacing;
-          }
-        }
-
-        @if not utils.$disable-has-selectors {
-          // this makes it so that the box-shadow between closed panels is not
-          // visible by covering it in a small overlay of the current
-          // background-color
-          &:where(:not(.rmd-expansion-panel--expanded)):has(
-              + .rmd-expansion-panel
-            ) {
-            position: relative;
-
-            &::after {
-              @include theme.theme-use-var(background-color);
-
-              bottom: $box-shadow-overlay-bottom;
-              content: "";
-              height: $box-shadow-overlay-height;
-              left: 0;
-              position: absolute;
-              right: 0;
-              z-index: 1;
-            }
-          }
-        }
-      }
-
-      // .rmd-expansion-panel__header {
-      // }
-
-      .rmd-expansion-panel__button {
-        @if $rotate-from != icon.$rotate-from {
-          @include icon.set-var(rotate-from, $rotate-from);
-        }
-
-        @if $rotate-to != icon.$rotate-to {
-          @include icon.set-var(rotate-to, $rotate-to);
-        }
-
-        @if button.$disable-unstyled-utility-class {
-          @include button.unstyled;
-        }
-        @include utils.auto-rtl(text-align, left);
-
-        align-items: center;
-        color: inherit;
-        font: inherit;
-        gap: $button-spacing;
-        justify-content: space-between;
-        letter-spacing: inherit;
-        padding: $padding;
-        width: 100%;
-
-        &[aria-disabled="true"] {
-          cursor: auto;
-        }
-
-        // need to raise the focus outline z-index so it is above the box-shadow
-        @if not utils.$disable-has-selectors {
-          @if not utils.$disable-focus-visible {
-            &::before {
-              z-index: 2;
-            }
-          } @else {
-            @include utils.keyboard-only {
-              &::before {
-                z-index: 2;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}