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

package/src/tree/__tests__/__snapshots__/TreeItemExpander.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TreeItemExpander should force wrapping the icon in a span and move the click props to the span if the icon is not cloneable 1`] = `
-<div>
-  <span
-    class="rmd-icon-rotator rmd-icon-rotator--animate"
-  >
-    icon
-  </span>
-</div>
-`;

package/src/tree/__tests__/utils.ts

@@ -1,98 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import type { TreeData } from "../types.js";
-import { getChildTreeItems, getTreeItemsFrom } from "../utils.js";
-
-const item1 = {
-  itemId: "item-id-1",
-  name: "item",
-  parentId: null,
-};
-
-const item2 = {
-  itemId: "item-id-2",
-  name: "item",
-  parentId: "item-id-3",
-};
-
-const item3 = {
-  itemId: "item-id-3",
-  name: "item",
-  parentId: null,
-};
-
-const item4 = {
-  itemId: "item-id-4",
-  name: "item",
-  parentId: "item-id-3",
-};
-
-const item5 = {
-  itemId: "item-id-5",
-  name: "item",
-  parentId: "item-id-4",
-};
-
-const data = {
-  "item-id-1": item1,
-  "item-id-2": item2,
-  "item-id-3": item3,
-  "item-id-4": item4,
-  "item-id-5": item5,
-} satisfies TreeData;
-
-describe("getTreeItemsFrom", () => {
-  it("should return an empty list if the provided itemId does not exist or the data is empty", () => {
-    expect(getTreeItemsFrom({}, "item-1")).toEqual([]);
-    expect(getTreeItemsFrom(data, "item-fake")).toEqual([]);
-    expect(getTreeItemsFrom(data, "")).toEqual([]);
-    expect(getTreeItemsFrom(data, null)).toEqual([]);
-  });
-
-  it("should return the corrected ordered list of items", () => {
-    expect(getTreeItemsFrom(data, "item-id-1")).toEqual([item1]);
-    expect(getTreeItemsFrom(data, "item-id-3")).toEqual([item3]);
-    expect(getTreeItemsFrom(data, "item-id-4")).toEqual([item4, item3]);
-    expect(getTreeItemsFrom(data, "item-id-2")).toEqual([item2, item3]);
-    expect(getTreeItemsFrom(data, "item-id-5")).toEqual([item5, item4, item3]);
-  });
-});
-
-describe("getChildTreeItems", () => {
-  it("should return an empty list if there are not items with the provided parentId", () => {
-    expect(getChildTreeItems({}, "")).toEqual([]);
-    expect(getChildTreeItems({}, "noop")).toEqual([]);
-    expect(getChildTreeItems(data, "")).toEqual([]);
-    expect(getChildTreeItems(data, "noop")).toEqual([]);
-    expect(getChildTreeItems(data, "item-id")).toEqual([]);
-  });
-
-  it("should return a list of all the items that have the matching parentId", () => {
-    expect(getChildTreeItems(data, null, false)).toEqual([item1, item3]);
-    expect(getChildTreeItems(data, "item-id-3", false)).toEqual([item2, item4]);
-    expect(getChildTreeItems(data, "item-id-4", false)).toEqual([item5]);
-  });
-
-  it("should return a list of all the items that have the matching parentId(s)", () => {
-    expect(getChildTreeItems(data, "item-id-3", true)).toEqual([
-      item2,
-      item4,
-      item5,
-    ]);
-    expect(getChildTreeItems(data, "item-id-4", true)).toEqual([item5]);
-
-    // just to show the traversal order even though it doesn't really matter much
-    expect(getChildTreeItems(data, null, true)).toEqual([
-      item1,
-      item3,
-      item2,
-      item4,
-      item5,
-    ]);
-  });
-
-  it("should default to not recursively matching items", () => {
-    expect(getChildTreeItems(data, null)).toEqual([item1, item3]);
-    expect(getChildTreeItems(data, "item-id-3")).toEqual([item2, item4]);
-    expect(getChildTreeItems(data, "item-id-4")).toEqual([item5]);
-  });
-});

package/src/tree/_tree.scss

@@ -1,176 +0,0 @@
-@use "sass:list" as sassList;
-@use "sass:map";
-@use "../utils";
-@use "../icon/icon";
-@use "../list/list";
-@use "../typography/typography";
-@use "../interaction/interaction";
-
-$disable-everything: false !default;
-$disable-expander-left: false !default;
-$disable-expander-left-as-media: false !default;
-$disable-expander-left-as-media-offset: false !default;
-$disable-selected-background-color: false !default;
-
-$item-padding-base: list.$item-horizontal-padding !default;
-$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
-$expander-right-from: icon.$rotate-from !default;
-$expander-right-to: 90deg !default;
-$expander-left-from: 0deg !default;
-$expander-left-to: -90deg !default;
-
-$selected-styles: (
-  font-weight: typography.$font-weight-bold,
-) !default;
-
-$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "tree");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-// must be defined after the `get-var` function
-$item-padding: calc(
-  get-var(depth) * get-var(item-padding-incrementor) +
-    get-var(item-padding-base)
-) !default;
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(depth, 0);
-    @include set-var(item-padding, 0);
-    @include set-var(item-padding-base, $item-padding-base);
-    @include set-var(item-padding-incrementor, $item-padding-incrementor);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(tree, $disable-layer) {
-      .rmd-tree {
-        display: block;
-        height: 100%;
-        outline-style: none;
-        overflow: auto;
-        // this is mostly for firefox. moving the mouse even 1px while clicking will
-        // select the current item and all items to the tree root
-        user-select: none;
-        width: 100%;
-      }
-
-      .rmd-tree-item {
-        @include icon.set-var(rotate-from, $expander-right-from);
-        @include icon.set-var(rotate-to, $expander-right-to);
-        @include set-var(item-padding, $item-padding);
-
-        list-style: none;
-
-        @if not $disable-expander-left {
-          &--expander-left {
-            @include icon.set-var(rotate-from, $expander-left-from);
-            @include icon.set-var(rotate-to, $expander-left-to);
-          }
-        }
-
-        &__content {
-          @include utils.auto-rtl(
-            padding-left,
-            get-var(item-padding),
-            list.get-var(item-horizontal-padding)
-          );
-
-          &--disabled {
-            cursor: auto;
-
-            &:hover::before {
-              @include interaction.set-var(background-color, transparent);
-            }
-          }
-
-          &--link {
-            color: inherit;
-            text-decoration: none;
-          }
-
-          &--focused::before {
-            // Note: Clicking an item and then using the keyboard to move focus
-            // will **not** show the focus outline so might not be ideal. the tree
-            // must be re-focused after a `Tab` keypress for it to appear again
-            @if utils.$disable-focus-visible {
-              .rmd-tree:focus-within & {
-                @include utils.keyboard-only {
-                  @include interaction.focus-styles;
-                }
-              }
-            } @else {
-              .rmd-tree:focus-visible & {
-                @include interaction.focus-styles;
-              }
-            }
-          }
-
-          @if $selected-styles {
-            &--selected {
-              @if not $disable-selected-background-color {
-                @include interaction.set-var(
-                  background-color,
-                  interaction.get-var(selected-background-color)
-                );
-
-                @include utils.touch-only {
-                  &:hover::before {
-                    @include interaction.set-var(
-                      background-color,
-                      interaction.get-var(selected-background-color)
-                    );
-                  }
-                }
-              }
-              @include utils.map-to-styles($selected-styles);
-            }
-          }
-        }
-
-        @if not $disable-expander-left-as-media {
-          &__media {
-            align-items: center;
-            display: flex;
-            justify-content: space-between;
-
-            @if not $disable-expander-left-as-media-offset {
-              &--single {
-                justify-content: flex-end;
-              }
-            }
-          }
-        }
-      }
-
-      .rmd-tree-group {
-        background-color: inherit;
-        color: inherit;
-        font-size: inherit;
-        line-height: inherit;
-
-        // remove the list padding to make it more condensed
-        padding-bottom: 0;
-        padding-top: 0;
-      }
-    }
-  }
-}

package/src/typography/__tests__/SrOnly.tsx

@@ -1,43 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
-
-import { SrOnly } from "../SrOnly.js";
-
-describe("SrOnly", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLSpanElement>();
-    const { container, rerender } = render(
-      <SrOnly ref={ref}>Some content</SrOnly>
-    );
-
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(ref.current).toBe(container.firstElementChild);
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <SrOnly ref={ref} style={{ opacity: 0.3 }} className="custom-class-name">
-        Some content
-      </SrOnly>
-    );
-    expect(container).toMatchSnapshot();
-
-    rerender(<SrOnly focusable>Some content</SrOnly>);
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <SrOnly focusable tabIndex={-1}>
-        Some content
-      </SrOnly>
-    );
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <SrOnly as="h4" ref={ref}>
-        Some content
-      </SrOnly>
-    );
-    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/typography/__tests__/TextContainer.tsx

@@ -1,45 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { TextContainer } from "../TextContainer.js";
-import { Typography } from "../Typography.js";
-import { textContainer } from "../textContainerStyles.js";
-
-describe("TextContainer", () => {
-  it("should render correctly and apply the correct class names", () => {
-    const { rerender } = render(
-      <TextContainer data-testid="container">
-        <Typography>Content</Typography>
-      </TextContainer>
-    );
-
-    const container = screen.getByTestId("container");
-    expect(container).toHaveClass("rmd-text-container");
-    expect(container).toMatchSnapshot();
-
-    rerender(
-      <TextContainer data-testid="container" className="custom-1 custom-2">
-        <Typography>Content</Typography>
-      </TextContainer>
-    );
-
-    expect(container).toHaveClass("rmd-text-container");
-    expect(container).toHaveClass("custom-1");
-    expect(container).toHaveClass("custom-2");
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should forward the ref to the div element", () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<TextContainer ref={ref} />);
-
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(textContainer()).toMatchSnapshot();
-    });
-  });
-});

package/src/typography/__tests__/Typography.tsx

@@ -1,87 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type HTMLAttributes, type ReactElement } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Typography } from "../Typography.js";
-import { typography, type TypographyType } from "../typographyStyles.js";
-
-describe("Typography", () => {
-  it("should default to rendering as a paragraph and body-1 styles", () => {
-    render(<Typography data-testid="text" />);
-    const text = screen.getByTestId("text");
-    expect(text.tagName).toBe("P");
-    expect(text).toHaveClass("rmd-typography");
-    expect(text).toHaveClass("rmd-typography--body-1");
-    expect(text).toMatchSnapshot();
-  });
-
-  it("should render as the correct element based on the typography type", () => {
-    const tests: { type: TypographyType; expected: string }[] = [
-      { type: "headline-1", expected: "h1" },
-      { type: "headline-2", expected: "h2" },
-      { type: "headline-3", expected: "h3" },
-      { type: "headline-4", expected: "h4" },
-      { type: "headline-5", expected: "h5" },
-      { type: "headline-6", expected: "h6" },
-      { type: "subtitle-1", expected: "h6" },
-      { type: "subtitle-2", expected: "h6" },
-      { type: "body-1", expected: "p" },
-      { type: "body-2", expected: "p" },
-      { type: "overline", expected: "span" },
-    ];
-
-    const { rerender } = render(<Typography data-testid="text" />);
-    tests.forEach(({ type, expected }) => {
-      rerender(<Typography data-testid="text" type={type} />);
-      const text = screen.getByTestId("text");
-      expect(text.tagName.toLowerCase()).toBe(expected);
-      expect(text).toHaveClass("rmd-typography");
-      expect(text).toHaveClass(`rmd-typography--${type}`);
-      expect(text).toMatchSnapshot();
-    });
-
-    rerender(
-      <table>
-        <Typography type="caption" data-testid="text" />
-      </table>
-    );
-    const text = screen.getByTestId("text");
-    expect(text.tagName).toBe("CAPTION");
-    expect(text).toHaveClass("rmd-typography");
-    expect(text).toHaveClass("rmd-typography--caption");
-    expect(text).toMatchSnapshot();
-  });
-
-  it("should be able to render as a custom component using the `as` prop", () => {
-    function Custom(props: HTMLAttributes<HTMLDivElement>): ReactElement {
-      return <div {...props}>Custom!</div>;
-    }
-
-    render(<Typography data-testid="text" as={Custom} />);
-    expect(screen.getByTestId("text")).toMatchSnapshot();
-  });
-
-  it("should be able to apply additional styles", () => {
-    render(
-      <Typography
-        data-testid="text"
-        textAlign="center"
-        margin="bottom"
-        textDecoration="overline"
-        textColor="primary"
-        fontStyle="italic"
-        fontWeight="semi-bold"
-        textTransform="capitalize"
-      />
-    );
-
-    expect(screen.getByTestId("text")).toMatchSnapshot();
-  });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments or with a null type", () => {
-      expect(typography()).toMatchSnapshot();
-      expect(typography({ type: null })).toMatchSnapshot();
-    });
-  });
-});

package/src/typography/__tests__/WritingDirectionProvider.node.tsx

@@ -1,27 +0,0 @@
-/** @jest-environment node */
-import { describe, expect, it } from "@jest/globals";
-import { renderToString } from "react-dom/server";
-
-import {
-  WritingDirectionProvider,
-  useDir,
-  type Dir,
-} from "../WritingDirectionProvider.js";
-
-describe("WritingDirectionProvider", () => {
-  it('should default to "ltr" for environments that do not have a document and not crash', () => {
-    expect(typeof document).toBe("undefined");
-    let dir: Dir | undefined;
-    const Child = () => {
-      ({ dir } = useDir());
-      return null;
-    };
-
-    renderToString(
-      <WritingDirectionProvider>
-        <Child />
-      </WritingDirectionProvider>
-    );
-    expect(dir).toBe("ltr");
-  });
-});

package/src/typography/__tests__/WritingDirectionProvider.tsx

@@ -1,119 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { type FC } from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-
-import {
-  useDir,
-  WritingDirectionProvider,
-} from "../WritingDirectionProvider.js";
-
-const Child: FC = () => {
-  const { dir, toggleDir } = useDir();
-  return (
-    <button type="button" onClick={toggleDir}>
-      {dir}
-    </button>
-  );
-};
-
-describe("WritingDirectionProvider", () => {
-  it('should default to the root html dir prop if it exists or fallback to "ltr"', () => {
-    document.documentElement.setAttribute("dir", "rtl");
-
-    let { unmount } = render(
-      <WritingDirectionProvider>
-        <span />
-      </WritingDirectionProvider>
-    );
-    expect(document.documentElement).toHaveAttribute("dir", "rtl");
-    unmount();
-    expect(document.documentElement).not.toHaveAttribute("dir");
-
-    ({ unmount } = render(
-      <WritingDirectionProvider>
-        <span />
-      </WritingDirectionProvider>
-    ));
-    expect(document.documentElement).toHaveAttribute("dir", "ltr");
-    unmount();
-    expect(document.documentElement).not.toHaveAttribute("dir");
-  });
-
-  it("should update the root html with the defaultDir", () => {
-    expect(document.documentElement).not.toHaveAttribute("dir");
-
-    const { unmount } = render(
-      <WritingDirectionProvider defaultDir="ltr">
-        <span />
-      </WritingDirectionProvider>
-    );
-
-    expect(document.documentElement).toHaveAttribute("dir", "ltr");
-    unmount();
-    expect(document.documentElement).not.toHaveAttribute("dir");
-  });
-
-  it("should clone the dir into a child element", () => {
-    render(
-      <WritingDirectionProvider defaultDir="ltr">
-        <WritingDirectionProvider defaultDir="rtl">
-          <span data-testid="span" />
-        </WritingDirectionProvider>
-      </WritingDirectionProvider>
-    );
-
-    const span = screen.getByTestId("span");
-    expect(span).toHaveAttribute("dir", "rtl");
-  });
-
-  it("should allow a child component to access and toggle the direction", () => {
-    render(
-      <WritingDirectionProvider>
-        <Child />
-      </WritingDirectionProvider>
-    );
-
-    const button = screen.getByRole("button");
-    expect(document.documentElement).toHaveAttribute("dir", "ltr");
-    expect(button).toHaveTextContent("ltr");
-    fireEvent.click(button);
-    expect(document.documentElement).toHaveAttribute("dir", "rtl");
-    expect(button).toHaveTextContent("rtl");
-  });
-
-  it("should toggle the correct parent with multiple Dir components", () => {
-    render(
-      <WritingDirectionProvider>
-        <WritingDirectionProvider defaultDir="rtl">
-          <Child />
-        </WritingDirectionProvider>
-      </WritingDirectionProvider>
-    );
-
-    const button = screen.getByRole("button");
-    expect(document.documentElement).toHaveAttribute("dir", "ltr");
-    expect(button).toHaveTextContent("rtl");
-    fireEvent.click(button);
-
-    expect(document.documentElement).toHaveAttribute("dir", "ltr");
-    expect(button).toHaveTextContent("ltr");
-  });
-
-  it("should throw an error if the toggleDir function is called without initializing a Dir component", () => {
-    let toggleDir: (() => void) | undefined;
-    const Test = () => {
-      ({ toggleDir } = useDir());
-      return null;
-    };
-
-    render(<Test />);
-
-    if (typeof toggleDir === "undefined") {
-      throw new Error();
-    }
-
-    expect(toggleDir).toThrow(
-      "Tried to toggle the current writing direction without initializing the `Dir` component."
-    );
-  });
-});

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -1,56 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div>
-  <span
-    class="rmd-sr-only"
-  >
-    Some content
-  </span>
-</div>
-`;
-
-exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div>
-  <span
-    class="rmd-sr-only custom-class-name"
-    style="opacity: 0.3;"
-  >
-    Some content
-  </span>
-</div>
-`;
-
-exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<div>
-  <span
-    class="rmd-sr-only rmd-sr-only--focusable"
-    style=""
-    tabindex="0"
-  >
-    Some content
-  </span>
-</div>
-`;
-
-exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<div>
-  <span
-    class="rmd-sr-only rmd-sr-only--focusable"
-    style=""
-    tabindex="-1"
-  >
-    Some content
-  </span>
-</div>
-`;
-
-exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<div>
-  <h4
-    class="rmd-sr-only"
-  >
-    Some content
-  </h4>
-</div>
-`;

package/src/typography/__tests__/__snapshots__/TextContainer.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextContainer should render correctly and apply the correct class names 1`] = `
-<div
-  class="rmd-text-container"
-  data-testid="container"
->
-  <p
-    class="rmd-typography rmd-typography--body-1"
-  >
-    Content
-  </p>
-</div>
-`;
-
-exports[`TextContainer should render correctly and apply the correct class names 2`] = `
-<div
-  class="rmd-text-container custom-1 custom-2"
-  data-testid="container"
->
-  <p
-    class="rmd-typography rmd-typography--body-1"
-  >
-    Content
-  </p>
-</div>
-`;
-
-exports[`TextContainer styling utility class should be callable without any arguments 1`] = `"rmd-text-container"`;