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

package/src/layout/__tests__/useLayoutTree.tsx

@@ -1,212 +0,0 @@
-import { beforeEach, describe, expect, it } from "@jest/globals";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useState,
-  type AnchorHTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-
-import { FontIcon } from "../../icon/FontIcon.js";
-import { rmdRender, screen, userEvent } from "../../test-utils/index.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { Tree } from "../../tree/Tree.js";
-import { type TreeData } from "../../tree/types.js";
-import { isElementVisible } from "../../utils/isElementVisible.js";
-import { useLayoutTree } from "../useLayoutTree.js";
-
-const navItems = {
-  "/": {
-    itemId: "/",
-    parentId: null,
-    children: "Home",
-    leftAddon: <FontIcon>home</FontIcon>,
-    to: "/",
-  },
-  "/route-1": {
-    itemId: "/route-1",
-    parentId: null,
-    children: "Route 1",
-    leftAddon: <FontIcon>tv</FontIcon>,
-    to: "/route-1",
-  },
-  "/route-2": {
-    itemId: "/route-2",
-    parentId: null,
-    children: "Route 2",
-    leftAddon: <FontIcon>apps</FontIcon>,
-    to: "/route-2",
-  },
-  "/route-3": {
-    itemId: "/route-3",
-    parentId: null,
-    children: "Route 3",
-    leftAddon: <FontIcon>book</FontIcon>,
-    to: "/route-3",
-  },
-  "/route-3/1": {
-    itemId: "/route-3/1",
-    parentId: "/route-3",
-    children: "Route 3-1",
-    to: "/route-3/1",
-  },
-  "/route-3/1/1": {
-    itemId: "/route-3/1/1",
-    parentId: "/route-3/1",
-    children: "Route 3-1/1",
-    to: "/route-3/1/1",
-  },
-  "/route-3/1/1/1": {
-    itemId: "/route-3/1/1/1",
-    parentId: "/route-3/1/1",
-    children: "Route 3-1/1/1",
-    to: "/route-3/1/1/1",
-  },
-} satisfies TreeData;
-
-const fakeRouter = createContext({
-  pathname: "",
-  setPathname(_pathname: string) {
-    //
-  },
-});
-const { Provider } = fakeRouter;
-function useRouter() {
-  return useContext(fakeRouter);
-}
-
-interface WrapperProps {
-  defaultPathname?: string;
-  children: ReactNode;
-}
-
-function Wrapper({
-  children,
-  defaultPathname = "/",
-}: WrapperProps): ReactElement {
-  const [pathname, setPathname] = useState(defaultPathname);
-  return <Provider value={{ pathname, setPathname }}>{children}</Provider>;
-}
-
-const FakeRoutingLibraryLink = forwardRef<
-  HTMLAnchorElement,
-  { to: string } & AnchorHTMLAttributes<HTMLAnchorElement>
->(function FakeRoutingLibraryLink({ to, ...props }, ref) {
-  const { setPathname } = useRouter();
-  return (
-    <a
-      {...props}
-      ref={ref}
-      href={to}
-      onClick={(event) => {
-        props.onClick?.(event);
-        event.preventDefault();
-        setPathname(to);
-      }}
-    />
-  );
-});
-
-function Test() {
-  const { pathname } = useRouter();
-  const tree = useLayoutTree({
-    navItems,
-    pathname,
-  });
-
-  return (
-    <Tree
-      {...tree}
-      aria-label="Navigation"
-      expansionMode="manual"
-      linkComponent={FakeRoutingLibraryLink}
-    />
-  );
-}
-
-describe("useLayoutTree", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  it("should allow you to create a layout tree quickly", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Test />, { wrapper: Wrapper });
-
-    const tree = screen.getByRole("tree", { name: "Navigation" });
-    expect(tree).toBeInTheDocument();
-
-    const home = screen.getByRole("treeitem", { name: "Home" });
-    const route1 = screen.getByRole("treeitem", { name: "Route 1" });
-    const route2 = screen.getByRole("treeitem", { name: "Route 2" });
-    const route3 = screen.getByRole("treeitem", { name: "Route 3" });
-    const subRoute = screen.getByRole("treeitem", { name: "Route 3-1" });
-    expect(home).toHaveAttribute("aria-selected", "true");
-    expect(route1).toHaveAttribute("aria-selected", "false");
-    expect(route2).toHaveAttribute("aria-selected", "false");
-    expect(route3).toHaveAttribute("aria-selected", "false");
-    expect(isElementVisible(subRoute)).toBe(false);
-
-    await user.click(route2);
-    expect(home).toHaveAttribute("aria-selected", "false");
-    expect(route1).toHaveAttribute("aria-selected", "false");
-    expect(route2).toHaveAttribute("aria-selected", "true");
-    expect(route3).toHaveAttribute("aria-selected", "false");
-
-    await user.click(route3);
-    expect(home).toHaveAttribute("aria-selected", "false");
-    expect(route1).toHaveAttribute("aria-selected", "false");
-    expect(route2).toHaveAttribute("aria-selected", "false");
-    expect(route3).toHaveAttribute("aria-selected", "true");
-
-    expect(isElementVisible(subRoute)).toBe(true);
-  });
-
-  it("should default to expanding all parent items from the starting pathname", () => {
-    rmdRender(<Test />, {
-      wrapper: ({ children }) => (
-        <Wrapper defaultPathname={navItems["/route-3/1/1/1"].itemId}>
-          {children}
-        </Wrapper>
-      ),
-    });
-
-    const tree = screen.getByRole("tree", { name: "Navigation" });
-    const deeplyNestedRoute = screen.getByRole("treeitem", {
-      name: navItems["/route-3/1/1/1"].children,
-    });
-    expect(deeplyNestedRoute).toHaveAttribute("aria-selected", "true");
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("should automatically expand parent items if the pathname changed outside of clicking one of the navigation items", async () => {
-    const user = userEvent.setup();
-    const route311 = navItems["/route-3/1/1"];
-    function AnotherTest() {
-      return (
-        <>
-          <Test />
-          <FakeRoutingLibraryLink to={route311.itemId}>
-            Link
-          </FakeRoutingLibraryLink>
-        </>
-      );
-    }
-
-    rmdRender(<AnotherTest />, { wrapper: Wrapper });
-
-    const tree = screen.getByRole("tree", { name: "Navigation" });
-    const route311Item = screen.getByRole("treeitem", {
-      name: route311.children,
-    });
-    expect(isElementVisible(route311Item)).toBe(false);
-    expect(tree).toMatchSnapshot();
-
-    await user.click(screen.getByRole("link", { name: "Link" }));
-
-    expect(isElementVisible(route311Item)).toBe(true);
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/layout/__tests__/useResizableLayout.tsx

@@ -1,170 +0,0 @@
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  jest,
-} from "@jest/globals";
-import { type ReactNode } from "react";
-import { AppBar } from "../../app-bar/AppBar.js";
-import { AppBarTitle } from "../../app-bar/AppBarTitle.js";
-import { Button } from "../../button/Button.js";
-import { Form } from "../../form/Form.js";
-import { Radio } from "../../form/Radio.js";
-import { useRadioGroup } from "../../form/useRadioGroup.js";
-import { useAppSize } from "../../media-queries/AppSizeProvider.js";
-import { Sheet } from "../../sheet/Sheet.js";
-import { drag } from "../../test-utils/drag.js";
-import {
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { removeItemFromStorage } from "../../useLocalStorage.js";
-import { isElementVisible } from "../../utils/isElementVisible.js";
-import { LayoutNav } from "../LayoutNav.js";
-import { LayoutWindowSplitter } from "../LayoutWindowSplitter.js";
-import { Main } from "../Main.js";
-import { DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES } from "../useHorizontalLayoutTransition.js";
-import {
-  useResizableLayout,
-  type ResizableLayoutOptions,
-} from "../useResizableLayout.js";
-
-const OFFSCREEN_CLASS = "rmd-sheet--offscreen";
-const { enter: ENTER_H_CLASS, enterDone: ENTER_H_DONE_CLASS } =
-  DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES;
-
-const getSizeVar = () =>
-  window
-    .getComputedStyle(document.documentElement)
-    .getPropertyValue("--rmd-layout-size");
-
-interface LayoutProps extends Omit<ResizableLayoutOptions, "pathname"> {
-  children?: ReactNode;
-}
-
-function Layout(props: LayoutProps) {
-  const { children = "Hello, world!", ...options } = props;
-
-  const { getRadioProps, value: pathname } = useRadioGroup<string>({
-    defaultValue: "/",
-    name: "pathname",
-  });
-  const {
-    appBarProps,
-    mainProps,
-    navToggleProps,
-    temporaryNavProps,
-    expandableNavProps,
-    windowSplitterProps,
-  } = useResizableLayout({ pathname, ...options });
-  const { isPhone, isTablet, isLandscape, isDesktop } = useAppSize();
-  let layout: "phone" | "tablet" | "landscapeTablet" | "desktop" = "phone";
-  if (isTablet) {
-    layout = isLandscape ? "landscapeTablet" : "tablet";
-  } else if (isDesktop) {
-    layout = "desktop";
-  }
-
-  return (
-    <>
-      <AppBar {...appBarProps}>
-        <Button {...navToggleProps} />
-        <AppBarTitle>Hello, world!</AppBarTitle>
-      </AppBar>
-      <LayoutNav {...expandableNavProps}>
-        {/* pretend like these are navigation items */}
-        <Form>
-          <Radio {...getRadioProps("/")} label="Home" />
-          <Radio {...getRadioProps("/1")} label="Route 1" />
-          <Radio {...getRadioProps("/2")} label="Route 2" />
-        </Form>
-      </LayoutNav>
-      <LayoutWindowSplitter {...windowSplitterProps} />
-      {isPhone && (
-        <Sheet {...temporaryNavProps}>
-          {/* pretend like these are navigation items */}
-          <Form>
-            <Radio {...getRadioProps("/")} label="Home" />
-            <Radio {...getRadioProps("/1")} label="Route 1" />
-            <Radio {...getRadioProps("/2")} label="Route 2" />
-          </Form>
-        </Sheet>
-      )}
-      <Main {...mainProps}>
-        {children}
-        <div data-testid="layout">{layout}</div>
-      </Main>
-    </>
-  );
-}
-
-describe("useResizableLayout", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  afterEach(() => {
-    removeItemFromStorage({ key: "navWidth" });
-  });
-
-  it("should allow you to create a resizable layout quickly", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Layout />);
-
-    const layout = screen.getByTestId("layout");
-    const appBar = screen.getByRole("banner");
-    const main = screen.getByRole("main");
-    const navToggle = screen.getByRole("button", { name: "Navigation" });
-    const nav = screen.getByRole("navigation", { name: "Navigation" });
-    const windowSplitter = screen.getByRole("separator", {
-      name: "Resize Navigation",
-    });
-
-    expect(layout).toHaveTextContent("desktop");
-    expect(isElementVisible(nav)).toBe(false);
-    expect(nav).toHaveClass(OFFSCREEN_CLASS);
-    expect(appBar).toMatchSnapshot();
-    expect(main).toMatchSnapshot();
-    expect(isElementVisible(windowSplitter)).toBe(false);
-    expect(windowSplitter).toMatchSnapshot();
-    expect(getSizeVar()).toBe("256px");
-    expect(() => screen.getByRole("dialog")).toThrow();
-
-    await user.click(navToggle);
-    expect(isElementVisible(nav)).toBe(true);
-    expect(main).toHaveClass(ENTER_H_CLASS);
-    await waitFor(() => {
-      expect(nav).not.toHaveClass(OFFSCREEN_CLASS);
-    });
-    expect(main).toHaveClass(ENTER_H_DONE_CLASS);
-
-    expect(isElementVisible(windowSplitter)).toBe(true);
-    expect(windowSplitter).toMatchSnapshot();
-
-    jest.spyOn(windowSplitter, "getBoundingClientRect").mockReturnValue({
-      ...document.body.getBoundingClientRect(),
-      left: 256,
-      width: 8,
-      top: 0,
-      height: window.innerHeight,
-    });
-
-    await drag(windowSplitter, {
-      to: { x: 286, y: 32 },
-    });
-
-    expect(getSizeVar()).toBe("286px");
-    expect(windowSplitter).toMatchSnapshot();
-
-    await drag(windowSplitter, {
-      to: { x: 0, y: 50 },
-    });
-    expect(getSizeVar()).toBe("96px");
-    expect(windowSplitter).toMatchSnapshot();
-  });
-});

package/src/layout/__tests__/useTemporaryLayout.tsx

@@ -1,109 +0,0 @@
-import { beforeEach, describe, expect, it } from "@jest/globals";
-import { type ReactNode } from "react";
-import { AppBar } from "../../app-bar/AppBar.js";
-import { AppBarTitle } from "../../app-bar/AppBarTitle.js";
-import { Button } from "../../button/Button.js";
-import { Form } from "../../form/Form.js";
-import { Radio } from "../../form/Radio.js";
-import { useRadioGroup } from "../../form/useRadioGroup.js";
-import { Sheet } from "../../sheet/Sheet.js";
-import {
-  rmdRender,
-  screen,
-  userEvent,
-  waitFor,
-} from "../../test-utils/index.js";
-import { TRANSITION_CONFIG } from "../../transition/config.js";
-import { Main } from "../Main.js";
-import {
-  useTemporaryLayout,
-  type TemporaryLayoutOptions,
-} from "../useTemporaryLayout.js";
-
-interface LayoutProps extends Omit<TemporaryLayoutOptions, "pathname"> {
-  children?: ReactNode;
-}
-
-function Layout(props: LayoutProps) {
-  const { children = "Hello, world!", ...options } = props;
-
-  const { getRadioProps, value: pathname } = useRadioGroup<string>({
-    defaultValue: "/",
-    name: "pathname",
-  });
-  const { appBarProps, mainProps, navToggleProps, temporaryNavProps } =
-    useTemporaryLayout({ pathname, ...options });
-
-  return (
-    <>
-      <AppBar {...appBarProps}>
-        <Button {...navToggleProps} />
-        <AppBarTitle>Hello, world!</AppBarTitle>
-      </AppBar>
-      <Main {...mainProps}>{children}</Main>
-      <Sheet {...temporaryNavProps}>
-        {/* pretend like these are navigation items */}
-        <Form>
-          <Radio {...getRadioProps("/")} label="Home" />
-          <Radio {...getRadioProps("/1")} label="Route 1" />
-          <Radio {...getRadioProps("/2")} label="Route 2" />
-        </Form>
-      </Sheet>
-    </>
-  );
-}
-
-describe("useTemporaryLayout", () => {
-  beforeEach(() => {
-    TRANSITION_CONFIG.disabled = false;
-  });
-
-  it("should allow you to create a temporary layout quickly", async () => {
-    const user = userEvent.setup();
-    rmdRender(<Layout />);
-
-    const appBar = screen.getByRole("banner");
-    const main = screen.getByRole("main");
-    const navToggle = screen.getByRole("button", { name: "Navigation" });
-
-    expect(appBar).toMatchSnapshot();
-    expect(main).toMatchSnapshot();
-    expect(() => screen.getByRole("dialog")).toThrow();
-
-    await user.click(navToggle);
-    const nav = await screen.findByRole("dialog", { name: "Navigation" });
-    await waitFor(() => {
-      expect(nav).not.toHaveClass("rmd-sheet--offscreen");
-    });
-    expect(nav).toMatchSnapshot();
-
-    await user.click(screen.getByRole("radio", { name: "Route 1" }));
-    await waitFor(() => {
-      expect(nav).not.toBeInTheDocument();
-    });
-  });
-
-  it("should not offset the main element for static app bar layouts", () => {
-    const { rerender } = rmdRender(<Layout appBarPosition="static" />);
-
-    const main = screen.getByRole("main");
-    expect(main).not.toHaveClass("rmd-layout-main--offset-v");
-    expect(main).toMatchSnapshot();
-
-    rerender(<Layout appBarPosition="sticky" />);
-    expect(main).toHaveClass("rmd-layout-main--offset-v");
-    expect(main).toMatchSnapshot();
-
-    rerender(<Layout appBarPosition="fixed" />);
-    expect(main).toHaveClass("rmd-layout-main--offset-v");
-    expect(main).toMatchSnapshot();
-  });
-
-  it("should allow for the navigation to be visible by default", () => {
-    rmdRender(<Layout defaultVisible />);
-
-    expect(
-      screen.getByRole("dialog", { name: "Navigation" })
-    ).toBeInTheDocument();
-  });
-});

package/src/layout/_layout.scss

@@ -1,163 +0,0 @@
-@use "sass:map";
-@use "../utils";
-@use "../media-queries/media-queries";
-@use "../app-bar/app-bar";
-@use "../icon/icon";
-@use "../interaction/interaction";
-@use "../list/list";
-@use "../sheet/sheet";
-@use "../theme/colors";
-@use "../transition/transition";
-@use "../typography/typography";
-@use "../window-splitter/window-splitter";
-
-$disable-everything: false !default;
-$disable-resizable: false !default;
-$disable-full-height-navigation: false !default;
-
-$main-focus-z-index: 999 !default;
-
-$header-height: app-bar.$height !default;
-
-$navigation-z-index: app-bar.$fixed-z-index !default;
-$navigation-static-width: sheet.$static-width !default;
-$navigation-container-name: nav !default;
-
-$navigation-breakpoint: tablet !default;
-
-$enter-duration: sheet.$enter-duration !default;
-$enter-timing-function: sheet.$enter-timing-function !default;
-$leave-duration: sheet.$leave-duration !default;
-$leave-timing-function: sheet.$leave-timing-function !default;
-
-$variables: (size, header-height);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "layout");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "layout")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(size, $navigation-static-width);
-    @include set-var(header-height, $header-height);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(layout, $disable-layer) {
-      .rmd-layout-main {
-        display: block;
-        outline: none;
-
-        &::before {
-          @include utils.pseudo-element(
-            $fixed: true,
-            $z-index: $main-focus-z-index,
-            $inset: get-var(header-height) 0 interaction.get-var(focus-width)
-          );
-          @include interaction.focus-styles($box-shadow: true);
-
-          opacity: 0;
-          transition: opacity transition.$linear-duration
-            transition.$linear-timing-function;
-        }
-
-        &:focus::before {
-          opacity: 1;
-        }
-
-        &--offset-v {
-          @include use-var(padding-top, header-height);
-        }
-      }
-
-      /// I decided to go with an "SSR-first" approach by having the nav element
-      /// always be rendered, but use media queries to show it for tablets and
-      /// above. This makes it so there is less javascript to dynamically switch
-      /// between layout types as you resize the browser.
-      .rmd-layout-nav {
-        @include sheet.set-var(width, get-var(size));
-        @include media-queries.media($navigation-breakpoint) {
-          // Why did I want grid? flex seems easier atm
-          // use grid so that you can easily have a header + tree that fills the remaining space
-          display: flex;
-          flex-direction: column;
-        }
-
-        container: $navigation-container-name;
-        display: none;
-        z-index: $navigation-z-index;
-
-        &--offset-v {
-          @include use-var(top, header-height);
-        }
-      }
-
-      @if not $disable-full-height-navigation {
-        .rmd-layout-nav-toggle {
-          @include media-queries.media($navigation-breakpoint) {
-            display: none;
-          }
-        }
-      }
-
-      /// This class is used to transition when the nav expands/collapses on
-      /// larger screen sizes
-      .rmd-layout-h {
-        will-change: margin;
-
-        &--active {
-          @include media-queries.media($navigation-breakpoint) {
-            @include utils.auto-rtl(margin-left, get-var(size));
-
-            &::before {
-              @include utils.auto-rtl(left, get-var(size));
-            }
-          }
-        }
-
-        &--enter {
-          transition: margin $enter-duration $enter-timing-function;
-        }
-
-        &--exit {
-          transition: margin $leave-duration $leave-timing-function;
-        }
-      }
-
-      @if not $disable-resizable {
-        .rmd-layout-splitter {
-          @include window-splitter.set-var(position, get-var(size));
-
-          &--offset-v {
-            @include window-splitter.set-var(top, get-var(header-height));
-          }
-
-          &--responsive {
-            @include media-queries.media($navigation-breakpoint) {
-              display: inline-block;
-            }
-
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}

package/src/link/__tests__/Link.tsx

@@ -1,31 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Link } from "../Link.js";
-
-describe("Link", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLAnchorElement>();
-    const props = {
-      ref,
-      href: "/some-url",
-      children: "Content",
-    } as const;
-
-    const { rerender } = render(<Link {...props} />);
-    const link = screen.getByRole("link", { name: "Content" });
-    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-    expect(ref.current).toBe(link);
-    expect(link).toMatchSnapshot();
-
-    rerender(
-      <Link
-        {...props}
-        style={{ color: "blue" }}
-        className="custom-class-name"
-      />
-    );
-    expect(link).toMatchSnapshot();
-  });
-});