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

package/src/navigation/__tests__/Navigation.tsx

@@ -1,97 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { FontIcon } from "../../icon/FontIcon.js";
-import { render, screen, userEvent, within } from "../../test-utils/index.js";
-import { Navigation, type NavigationProps } from "../Navigation.js";
-import { type NavigationItem } from "../types.js";
-
-const items: NavigationItem[] = [
-  {
-    type: "route",
-    href: "/",
-    children: "Home",
-    beforeAddon: <FontIcon>home</FontIcon>,
-  },
-  { type: "divider" },
-  {
-    type: "subheader",
-    children: "Subheader",
-  },
-  {
-    type: "group",
-    href: "/path-1",
-    children: "Path 1",
-    items: [
-      {
-        type: "route",
-        href: "/route-1",
-        children: "Route 1",
-      },
-      {
-        type: "route",
-        href: "/route-2",
-        children: "Route 2",
-      },
-    ],
-  },
-  {
-    type: "group",
-    href: "/path-2",
-    children: "Path 2",
-    items: [
-      { type: "subheader", children: "Routes" },
-      {
-        type: "route",
-        href: "/route-1",
-        children: "Route 1",
-      },
-      {
-        type: "divider",
-        inset: true,
-      },
-      {
-        type: "route",
-        href: "/route-2",
-        children: "Route 2",
-      },
-    ],
-  },
-];
-
-const BASE_PROPS: NavigationProps = {
-  "data-testid": "nav",
-  data: { pathname: "/", linkComponent: "a" },
-  items,
-};
-
-describe("Navigation", () => {
-  it("should be able to render dividers, subheaders, groups, links, and nested items out of the box", () => {
-    render(<Navigation {...BASE_PROPS} />);
-
-    const nav = screen.getByTestId("nav");
-    expect(nav).toMatchSnapshot();
-    const path2 = screen.getByRole("button", { name: "Path 2" });
-    const path2Parent = path2.parentElement;
-    if (!path2Parent) {
-      throw new Error();
-    }
-
-    expect(() => within(path2Parent).getByText("Route 1")).toThrow();
-  });
-
-  it("should allow route groups to be expanded", async () => {
-    const user = userEvent.setup();
-    render(<Navigation {...BASE_PROPS} />);
-    const path2 = screen.getByRole("button", { name: "Path 2" });
-    const path2Parent = path2.parentElement;
-    if (!path2Parent) {
-      throw new Error();
-    }
-
-    await user.click(path2);
-    const route1 = within(path2Parent).getByText("Route 1");
-    expect(path2Parent).toMatchSnapshot();
-
-    await user.click(path2);
-    expect(route1).not.toBeInTheDocument();
-  });
-});

package/src/navigation/__tests__/__snapshots__/Navigation.tsx.snap

@@ -1,165 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation should allow route groups to be expanded 1`] = `
-<li
-  class="rmd-nav-item"
->
-  <button
-    class="rmd-button rmd-button--text rmd-interaction-surface rmd-nav-item__content"
-    id=":ra:"
-    type="button"
-  >
-    <span
-      class="rmd-nowrap rmd-ellipsis"
-    >
-      Path 2
-    </span>
-    <span
-      aria-hidden="true"
-      class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate rmd-icon-rotator--rotated"
-    >
-      arrow_drop_down
-    </span>
-  </button>
-  <ul
-    class="rmd-list rmd-nav-group rmd-nav-group--np rmd-collapse"
-    role="none"
-    style="padding-top: 0px; padding-bottom: 0px; --rmd-tree-depth: 1;"
-  >
-    <li
-      class="rmd-list-subheader"
-      role="presentation"
-    >
-      <span
-        class="rmd-list-item__text rmd-nav-item"
-      >
-        Routes
-      </span>
-    </li>
-    <li
-      class="rmd-nav-item"
-    >
-      <a
-        class="rmd-nav-item__content rmd-nav-item__link rmd-button rmd-button--text rmd-interaction-surface rmd-none"
-        href="/path-2/route-1"
-        id=":rc:"
-        type="route"
-      >
-        <span
-          class="rmd-nowrap rmd-ellipsis"
-        >
-          Route 1
-        </span>
-      </a>
-    </li>
-    <hr
-      class="rmd-divider rmd-divider--inset"
-      role="separator"
-    />
-    <li
-      class="rmd-nav-item"
-    >
-      <a
-        class="rmd-nav-item__content rmd-nav-item__link rmd-button rmd-button--text rmd-interaction-surface rmd-none"
-        href="/path-2/route-2"
-        id=":re:"
-        type="route"
-      >
-        <span
-          class="rmd-nowrap rmd-ellipsis"
-        >
-          Route 2
-        </span>
-      </a>
-    </li>
-  </ul>
-</li>
-`;
-
-exports[`Navigation should be able to render dividers, subheaders, groups, links, and nested items out of the box 1`] = `
-<ul
-  class="rmd-list rmd-nav-group"
-  data-testid="nav"
-  role="none"
-  style="--rmd-tree-depth: 0;"
->
-  <li
-    class="rmd-nav-item"
-  >
-    <a
-      class="rmd-nav-item__content rmd-nav-item__link rmd-nav-item__link--active rmd-button rmd-button--text rmd-interaction-surface rmd-none rmd-bold"
-      href="/"
-      id=":r0:"
-      type="route"
-    >
-      <span
-        aria-hidden="true"
-        class="rmd-icon rmd-icon--font material-icons"
-      >
-        home
-      </span>
-      <span
-        class="rmd-nowrap rmd-ellipsis"
-      >
-        Home
-      </span>
-    </a>
-  </li>
-  <hr
-    class="rmd-divider"
-    role="separator"
-  />
-  <li
-    class="rmd-list-subheader"
-    role="presentation"
-  >
-    <span
-      class="rmd-list-item__text rmd-nav-item"
-    >
-      Subheader
-    </span>
-  </li>
-  <li
-    class="rmd-nav-item"
-  >
-    <button
-      class="rmd-button rmd-button--text rmd-interaction-surface rmd-nav-item__content"
-      id=":r2:"
-      type="button"
-    >
-      <span
-        class="rmd-nowrap rmd-ellipsis"
-      >
-        Path 1
-      </span>
-      <span
-        aria-hidden="true"
-        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-      >
-        arrow_drop_down
-      </span>
-    </button>
-  </li>
-  <li
-    class="rmd-nav-item"
-  >
-    <button
-      class="rmd-button rmd-button--text rmd-interaction-surface rmd-nav-item__content"
-      id=":r4:"
-      type="button"
-    >
-      <span
-        class="rmd-nowrap rmd-ellipsis"
-      >
-        Path 2
-      </span>
-      <span
-        aria-hidden="true"
-        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
-      >
-        arrow_drop_down
-      </span>
-    </button>
-  </li>
-</ul>
-`;

package/src/navigation/_navigation.scss

@@ -1,99 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "../utils";
-@use "../tree/tree";
-@use "../interaction/interaction";
-
-$disable-everything: false !default;
-$border-radius: 3rem !default;
-$horizontal-padding: 0.25rem !default;
-$padding-incrementor: 0.75rem !default;
-
-$variables: (border-radius, horizontal-padding, padding-incrementor);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "navigation");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "navigation")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(border-radius, $border-radius);
-    @include set-var(horizontal-padding, $horizontal-padding);
-    @include set-var(padding-incrementor, $padding-incrementor);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  $increasing-padding: calc(
-    tree.get-var(depth) * get-var(padding-incrementor) +
-      get-var(horizontal-padding)
-  );
-
-  @if not $disable-everything {
-    @include utils.optional-layer(navigation, $disable-layer) {
-      .rmd-nav-group {
-        min-width: 0;
-
-        &--np {
-          padding: 0;
-        }
-      }
-
-      .rmd-nav-item {
-        @include utils.rtl {
-          @include use-var(padding-left, horizontal-padding);
-
-          padding-right: $increasing-padding;
-        }
-        @include use-var(padding-right, horizontal-padding);
-
-        padding-left: $increasing-padding;
-        padding-right: $horizontal-padding;
-
-        // this is applied to both the `NavItemButton` and `NavItemLink`
-        &__content {
-          @include use-var(border-radius);
-
-          font-size: inherit;
-          justify-content: space-between;
-          letter-spacing: inherit;
-          line-height: initial;
-          width: 100%;
-        }
-
-        &__link {
-          justify-content: flex-start;
-
-          &::after {
-            @include utils.pseudo-element;
-            @include interaction.use-var(
-              background-color,
-              selected-background-color
-            );
-
-            opacity: 0;
-          }
-
-          &--active::after {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-}

package/src/overlay/__tests__/Overlay.tsx

@@ -1,198 +0,0 @@
-import { beforeEach, describe, expect, it, jest } from "@jest/globals";
-import { createRef, type ReactElement } from "react";
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "../../test-utils/index.js";
-
-import { SsrProvider } from "../../SsrProvider.js";
-import { Button } from "../../button/Button.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { useToggle } from "../../useToggle.js";
-import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
-import { Overlay, type OverlayProps } from "../Overlay.js";
-
-interface TestProps {
-  defaultVisible?: boolean;
-}
-
-function Test({ defaultVisible = false }: TestProps): ReactElement {
-  const { toggle, disable, toggled: visible } = useToggle(defaultVisible);
-
-  return (
-    <>
-      <Button onClick={toggle}>Toggle</Button>
-      <Overlay data-testid="overlay" visible={visible} onClick={disable} />
-    </>
-  );
-}
-
-describe("Overlay", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLSpanElement>();
-    const props = {
-      "data-testid": "overlay",
-      ref,
-      visible: true,
-    } as const;
-
-    const { rerender } = render(<Overlay {...props} />);
-
-    const element = screen.getByTestId("overlay");
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(ref.current).toBe(element);
-    expect(element).toMatchSnapshot();
-
-    rerender(
-      <Overlay
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(element).toMatchSnapshot();
-  });
-
-  it("should support rendering inline if disablePortal prop is true", () => {
-    const { container } = render(
-      <Overlay data-testid="overlay" visible disablePortal />
-    );
-
-    const overlay = screen.getByTestId("overlay");
-    expect(container.firstElementChild).toBe(overlay);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should support rendering inline if it was visible by default and rendered through ssr", async () => {
-    const { container } = render(<Test defaultVisible />, {
-      wrapper: ({ children }) => <SsrProvider ssr>{children}</SsrProvider>,
-    });
-
-    const button = screen.getByRole("button", { name: "Toggle" });
-    const overlay = screen.getByTestId("overlay");
-    expect(button.nextElementSibling).toBe(overlay);
-    expect(container).toMatchSnapshot();
-
-    fireEvent.click(overlay);
-    await waitFor(() => {
-      expect(overlay).not.toBeInTheDocument();
-    });
-
-    fireEvent.click(button);
-    await waitFor(() => {
-      expect(() => screen.getByTestId("overlay")).not.toThrow();
-    });
-    await waitFor(() => {
-      expect(() => within(container).getByTestId("overlay")).toThrow();
-    });
-  });
-
-  it("should allow for overriding CSS transition options", async () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExit = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-
-    const props: Partial<OverlayProps> = {
-      "data-testid": "overlay",
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      temporary: false,
-    };
-
-    const { rerender } = render(<Overlay {...props} visible={false} />);
-
-    const overlay = screen.getByTestId("overlay");
-    expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
-    expect(overlay).toMatchSnapshot();
-
-    expect(onEnter).not.toHaveBeenCalled();
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onEntered).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    rerender(<Overlay {...props} visible />);
-    await waitFor(() => {
-      expect(onEntered).toHaveBeenCalledTimes(1);
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-    expect(overlay).not.toHaveClass(DISPLAY_NONE_CLASS);
-    expect(overlay).toMatchSnapshot();
-
-    rerender(<Overlay {...props} visible={false} />);
-    await waitFor(() => {
-      expect(onExited).toHaveBeenCalledTimes(1);
-    });
-    expect(onEnter).toHaveBeenCalledTimes(1);
-    expect(onEntering).toHaveBeenCalledTimes(1);
-    expect(onEntered).toHaveBeenCalledTimes(1);
-    expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onExiting).toHaveBeenCalledTimes(1);
-    expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
-    expect(overlay).toMatchSnapshot();
-  });
-
-  it("should disable the transition if the noOpacity prop is true", async () => {
-    const onEnter = jest.fn();
-    const onEntering = jest.fn();
-    const onEntered = jest.fn();
-    const onExit = jest.fn();
-    const onExiting = jest.fn();
-    const onExited = jest.fn();
-    const props = {
-      "data-testid": "overlay",
-      visible: false,
-      noOpacity: true,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-    } as const;
-
-    const { rerender } = render(<Overlay {...props} />);
-    expect(() => screen.getByTestId("overlay")).toThrow();
-
-    rerender(<Overlay {...props} visible />);
-    await waitFor(() => {
-      expect(onEntered).toHaveBeenCalledTimes(1);
-    });
-    expect(onEnter).not.toHaveBeenCalled();
-    expect(onEntering).not.toHaveBeenCalled();
-    expect(onExit).not.toHaveBeenCalled();
-    expect(onExiting).not.toHaveBeenCalled();
-    expect(onExited).not.toHaveBeenCalled();
-
-    const overlay = screen.getByTestId("overlay");
-    expect(overlay).toMatchSnapshot();
-  });
-
-  it("should support passing the box align/justify to the box class name utils", () => {
-    render(
-      <Overlay visible align="start" justify="end" data-testid="overlay" />
-    );
-    const overlay = screen.getByTestId("overlay");
-
-    expect(overlay).toMatchSnapshot();
-  });
-});

package/src/overlay/__tests__/__snapshots__/Overlay.tsx.snap

@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Overlay should allow for overriding CSS transition options 1`] = `
-<span
-  class="rmd-overlay rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-display-none"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should allow for overriding CSS transition options 2`] = `
-<span
-  class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-overlay--active"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should allow for overriding CSS transition options 3`] = `
-<span
-  class="rmd-overlay rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-display-none"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
-<span
-  class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-overlay--active"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
-<span
-  class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center custom-class-name rmd-overlay--active"
-  data-testid="overlay"
-  style="color: white;"
-/>
-`;
-
-exports[`Overlay should disable the transition if the noOpacity prop is true 1`] = `
-<span
-  class="rmd-overlay rmd-overlay--visible rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should support passing the box align/justify to the box class name utils 1`] = `
-<span
-  class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-start rmd-box--justify-end rmd-overlay--active"
-  data-testid="overlay"
-/>
-`;
-
-exports[`Overlay should support rendering inline if disablePortal prop is true 1`] = `
-<div>
-  <span
-    class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-overlay--active"
-    data-testid="overlay"
-  />
-</div>
-`;
-
-exports[`Overlay should support rendering inline if it was visible by default and rendered through ssr 1`] = `
-<div>
-  <button
-    class="rmd-button rmd-button--text rmd-interaction-surface"
-    type="button"
-  >
-    <span>
-      Toggle
-    </span>
-  </button>
-  <span
-    class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center rmd-overlay--active"
-    data-testid="overlay"
-  />
-</div>
-`;

package/src/overlay/_overlay.scss

@@ -1,74 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../transition/transition";
-
-$disable-everything: false !default;
-$background-color: rgba(0, 0, 0, 0.4) !default;
-$z-index: utils.$temporary-element-z-index !default;
-
-$transition-duration: transition.$linear-duration !default;
-$transition-timing-function: transition.$linear-timing-function !default;
-
-$variables: (background-color, z-index);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "overlay");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(background-color, $background-color);
-    @include set-var(z-index, $z-index);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(overlay, $disable-layer) {
-      .rmd-overlay {
-        @include use-var(background-color);
-        @include use-var(z-index);
-
-        border-radius: inherit;
-        box-shadow: inherit;
-        inset: 0;
-        opacity: 0;
-        pointer-events: none;
-        position: fixed;
-        transition: opacity $transition-duration $transition-timing-function;
-
-        &--active {
-          opacity: 1;
-        }
-
-        &--clickable {
-          cursor: pointer;
-        }
-
-        &--visible {
-          overflow: hidden;
-          pointer-events: auto;
-        }
-
-        &--absolute {
-          position: absolute;
-        }
-      }
-    }
-  }
-}