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

package/src/tree/TreeItem.tsx

@@ -8,7 +8,6 @@ import {
 } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useLink } from "../link/LinkProvider.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { type PropsWithRef } from "../types.js";
@@ -148,11 +147,12 @@ export function TreeItem(props: TreeItemProps): ReactElement {
   }
 
   const {
-    metadataLookup,
     expandedIds,
     selectedIds,
     expanderLeft,
     expansionMode,
+    metadataLookup,
+    linkComponent: Link,
     toggleTreeItemSelection,
     toggleTreeItemExpansion,
     disableTransition: contextDisableTransition,
@@ -203,7 +203,6 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     });
 
   const isLink = !!(remaining.to || remaining.href);
-  const Link = useLink();
 
   // cheating a bit so there are type errors around the event handlers
   const ContentComponent = (isLink ? Link : "span") as "span";

package/src/tree/TreeProvider.tsx

@@ -6,6 +6,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type NonNullRef } from "../types.js";
 import {
   type DefaultTreeItemNode,
@@ -82,6 +83,8 @@ export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>
   disableTransition: boolean;
   temporaryChildItems: boolean;
 
+  linkComponent: CustomLinkComponent;
+
   /** @internal */
   expanderLeft: boolean;
   /** @internal */
@@ -144,6 +147,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
     metadataLookup,
     disableTransition,
     temporaryChildItems,
+    linkComponent,
     expandedIds,
     selectedIds,
     expandMultipleTreeItems,
@@ -162,6 +166,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
       metadataLookup,
       disableTransition,
       temporaryChildItems,
+      linkComponent,
       expandedIds,
       selectedIds,
       expandMultipleTreeItems,
@@ -177,6 +182,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
       expanderIcon,
       expanderLeft,
       expansionMode,
+      linkComponent,
       metadataLookup,
       multiSelect,
       rootId,

package/src/tree/__tests__/Tree.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it, jest } from "@jest/globals";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import {
   createRef,
   forwardRef,
@@ -15,7 +15,8 @@ import {
 
 import { Divider } from "../../divider/Divider.js";
 import { FontIcon } from "../../icon/FontIcon.js";
-import { type RenderRecursiveItemsProps } from "../../utils/RenderRecursively.jsx";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
+import { type RenderRecursiveItemsProps } from "../../utils/RenderRecursively.js";
 import { alphaNumericSort } from "../../utils/alphaNumericSort.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { DefaultTreeItemRenderer } from "../DefaultTreeItemRenderer.js";
@@ -148,6 +149,10 @@ function Test(props: TestProps): ReactElement {
 }
 
 describe("Tree", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLUListElement>();
     const props = {

package/src/tree/__tests__/TreeGroup.tsx

@@ -29,6 +29,7 @@ describe("TreeGroup", () => {
         <TreeProvider
           temporaryChildItems={false}
           data={{}}
+          linkComponent="a"
           disableTransition={false}
           expandedIds={new Set()}
           expanderIcon={null}

package/src/tree/__tests__/TreeItemExpander.tsx

@@ -28,6 +28,7 @@ describe("TreeItemExpander", () => {
       <TreeProvider
         temporaryChildItems={false}
         data={{}}
+        linkComponent="a"
         disableTransition={false}
         expandedIds={new Set()}
         expanderIcon="icon"

package/src/tree/_tree.scss

@@ -6,6 +6,7 @@
 @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;
@@ -22,153 +23,145 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .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%;
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(depth, -1);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $padding-base);
+    @include set-var(item-padding-incrementor, $padding-incrementor);
   }
+}
 
-  .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,
-      calc(
-        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    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);
-      }
+@mixin styles {
+  @if not $disable-everything {
+    .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%;
     }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
-
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
+    .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,
+        calc(
+          get-var(depth) * get-var(item-padding-incrementor) +
+            get-var(item-padding-base)
+        )
+      );
+
+      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);
         }
       }
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
-      }
+      &__content {
+        &--disabled {
+          cursor: auto;
 
-      &--padded {
-        @include utils.auto-rtl(
-          padding-left,
-          get-var(item-padding),
-          list.get-var(item-horizontal-padding)
-        );
-      }
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
+        }
+
+        &--link {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        &--padded {
+          @include utils.auto-rtl(
+            padding-left,
+            get-var(item-padding),
+            list.get-var(item-horizontal-padding)
+          );
+        }
 
-      &--focused::before {
-        .rmd-tree:focus-within & {
-          @include utils.keyboard-only {
-            @include interaction.focus-styles;
+        &--focused::before {
+          .rmd-tree:focus-within & {
+            @include utils.keyboard-only {
+              @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)
-                );
+        @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);
           }
-          @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 {
+        &__media {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+          @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;
+    .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;
+      // remove the list padding to make it more condensed
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 }

package/src/typography/__tests__/TextContainer.tsx

@@ -1,19 +1,19 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { textContainer, TextContainer } from "../TextContainer.js";
 import { Typography } from "../Typography.js";
 
 describe("TextContainer", () => {
   it("should render correctly and apply the correct class names", () => {
-    const { getByTestId, rerender } = render(
+    const { rerender } = render(
       <TextContainer data-testid="container">
         <Typography>Content</Typography>
       </TextContainer>
     );
 
-    const container = getByTestId("container");
+    const container = screen.getByTestId("container");
     expect(container).toHaveClass("rmd-text-container");
     expect(container).toMatchSnapshot();
 

package/src/typography/__tests__/Typography.tsx

@@ -1,13 +1,13 @@
 import { describe, expect, it } from "@jest/globals";
 import { type HTMLAttributes, type ReactElement } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { typography, Typography, type TypographyType } from "../Typography.js";
 
 describe("Typography", () => {
   it("should default to rendering as a paragraph and body-1 styles", () => {
-    const { getByTestId } = render(<Typography data-testid="text" />);
-    const text = getByTestId("text");
+    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");
@@ -29,10 +29,10 @@ describe("Typography", () => {
       { type: "overline", expected: "span" },
     ];
 
-    const { getByTestId, rerender } = render(<Typography data-testid="text" />);
+    const { rerender } = render(<Typography data-testid="text" />);
     tests.forEach(({ type, expected }) => {
       rerender(<Typography data-testid="text" type={type} />);
-      const text = getByTestId("text");
+      const text = screen.getByTestId("text");
       expect(text.tagName.toLowerCase()).toBe(expected);
       expect(text).toHaveClass("rmd-typography");
       expect(text).toHaveClass(`rmd-typography--${type}`);
@@ -44,7 +44,7 @@ describe("Typography", () => {
         <Typography type="caption" data-testid="text" />
       </table>
     );
-    const text = getByTestId("text");
+    const text = screen.getByTestId("text");
     expect(text.tagName).toBe("CAPTION");
     expect(text).toHaveClass("rmd-typography");
     expect(text).toHaveClass("rmd-typography--caption");
@@ -56,14 +56,12 @@ describe("Typography", () => {
       return <div {...props}>Custom!</div>;
     }
 
-    const { getByTestId } = render(
-      <Typography data-testid="text" as={Custom} />
-    );
-    expect(getByTestId("text")).toMatchSnapshot();
+    render(<Typography data-testid="text" as={Custom} />);
+    expect(screen.getByTestId("text")).toMatchSnapshot();
   });
 
   it("should be able to apply additional styles", () => {
-    const { getByTestId } = render(
+    render(
       <Typography
         data-testid="text"
         textAlign="center"
@@ -76,7 +74,7 @@ describe("Typography", () => {
       />
     );
 
-    expect(getByTestId("text")).toMatchSnapshot();
+    expect(screen.getByTestId("text")).toMatchSnapshot();
   });
 
   describe("styling utility class", () => {

package/src/typography/__tests__/WritingDirectionProvider.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type FC } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import {
   useDir,
@@ -54,7 +54,7 @@ describe("WritingDirectionProvider", () => {
   });
 
   it("should clone the dir into a child element", () => {
-    const { getByTestId } = render(
+    render(
       <WritingDirectionProvider defaultDir="ltr">
         <WritingDirectionProvider defaultDir="rtl">
           <span data-testid="span" />
@@ -62,18 +62,18 @@ describe("WritingDirectionProvider", () => {
       </WritingDirectionProvider>
     );
 
-    const span = getByTestId("span");
+    const span = screen.getByTestId("span");
     expect(span).toHaveAttribute("dir", "rtl");
   });
 
   it("should allow a child component to access and toggle the direction", () => {
-    const { getByRole } = render(
+    render(
       <WritingDirectionProvider>
         <Child />
       </WritingDirectionProvider>
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(document.documentElement).toHaveAttribute("dir", "ltr");
     expect(button).toHaveTextContent("ltr");
     fireEvent.click(button);
@@ -82,7 +82,7 @@ describe("WritingDirectionProvider", () => {
   });
 
   it("should toggle the correct parent with multiple Dir components", () => {
-    const { getByRole } = render(
+    render(
       <WritingDirectionProvider>
         <WritingDirectionProvider defaultDir="rtl">
           <Child />
@@ -90,7 +90,7 @@ describe("WritingDirectionProvider", () => {
       </WritingDirectionProvider>
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(document.documentElement).toHaveAttribute("dir", "ltr");
     expect(button).toHaveTextContent("rtl");
     fireEvent.click(button);

package/src/typography/_typography.scss

@@ -222,36 +222,21 @@ $button-styles: map.merge(
 $text-container-padding: 1rem !default;
 $text-line-length: 65ch !default;
 
-$typography-var-lookup: (
-  line-length: (
-    var: --rmd-line-length,
-    value: $text-line-length,
-  ),
-  text-container-padding: (
-    var: --rmd-text-container-padding,
-    value: $text-container-padding,
-  ),
-);
+$typography-variables: (line-length, text-container-padding);
 
 @function typography-get-var($name, $fallback: null) {
-  $found: utils.validate($typography-var-lookup, $name, "typography var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($typography-variables, $name, "typography");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin typography-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($typography-var-lookup, $name, "typography var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
+  }
 }
 
 @mixin typography-use-var($property, $name: $property, $fallback: null) {
@@ -339,6 +324,16 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
+@mixin typography-variables {
+  @if not $disable-text-container {
+    @include typography-set-var(line-length, $text-line-length);
+    @include typography-set-var(
+      text-container-padding,
+      $text-container-padding
+    );
+  }
+}
+
 @mixin typography-styles {
   @include typography-text-container-styles;
   @include typography-base-styles;