@react-md/core 1.0.0-next.1 → 1.0.0-next.3

package/src/suspense/__tests__/CircularProgressSuspense.tsx

@@ -0,0 +1,90 @@
+import { describe, it, expect } from "@jest/globals";
+import { act } from "react-dom/test-utils";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "../../test-utils/index.js";
+import {
+  CircularProgressSuspense,
+  type CircularProgressSuspenseProps,
+} from "../CircularProgressSuspense.js";
+import { type FC, lazy, type ReactElement } from "react";
+import { Typography } from "../../typography/Typography.js";
+
+const setup = (props?: Omit<CircularProgressSuspenseProps, "children">) => {
+  function Content(): ReactElement {
+    return <Typography>Hello, world!</Typography>;
+  }
+
+  // this is how you can manually resolve a promise using events
+  const instance = new EventTarget();
+  const FakeLazyComponent = lazy(
+    () =>
+      new Promise<{ default: FC }>((resolve) => {
+        instance.addEventListener("resolve-promise", () =>
+          resolve({ default: Content })
+        );
+      })
+  );
+
+  function Test(): ReactElement {
+    return (
+      <div data-testid="container">
+        <CircularProgressSuspense {...props}>
+          <FakeLazyComponent />
+        </CircularProgressSuspense>
+      </div>
+    );
+  }
+
+  render(<Test />);
+
+  return () => {
+    act(() => {
+      // resolve the promise
+      instance.dispatchEvent(new Event("resolve-promise"));
+    });
+  };
+};
+
+describe("CircularProgressSuspense", () => {
+  it("should render a CircularProgress as the fallback value", async () => {
+    const resolve = setup();
+
+    const progress = await screen.findByRole("progressbar", {
+      name: "Loading",
+    });
+    expect(() => screen.getByText("Hello, world!")).toThrow();
+
+    resolve();
+    await waitForElementToBeRemoved(progress);
+    expect(() => screen.getByText("Hello, world!")).not.toThrow();
+  });
+
+  it("should not provide the loading aria-label if the aria-labelledby prop was provided", async () => {
+    const resolve = setup({ "aria-labelledby": "fake-id" });
+    const progress = await screen.findByRole("progressbar");
+    expect(progress).not.toHaveAttribute("aria-label");
+    expect(progress).toHaveAttribute("aria-labelledby", "fake-id");
+
+    // just resolve promises in case it causes issues
+    resolve();
+    await waitForElementToBeRemoved(progress);
+  });
+
+  it("should pass props to the CircularProgress component", async () => {
+    const resolve = setup({
+      "aria-label": "Custom",
+      dense: true,
+      className: "custom-class-name",
+    });
+    const progress = await screen.findByRole("progressbar", { name: "Custom" });
+
+    expect(progress).toMatchSnapshot();
+
+    // just resolve promises in case it causes issues
+    resolve();
+    await waitForElementToBeRemoved(progress);
+  });
+});

package/src/suspense/__tests__/NullSuspense.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "@jest/globals";
+import { lazy, type FC, type ReactElement } from "react";
+import { act, render, screen, waitFor } from "../../test-utils/index.js";
+import { Typography } from "../../typography/Typography.js";
+import { NullSuspense } from "../NullSuspense.js";
+
+describe("NullSuspense", () => {
+  it("should render nothing as the fallback value", async () => {
+    function Content(): ReactElement {
+      return <Typography>Hello, world!</Typography>;
+    }
+
+    // this is how you can manually resolve a promise using events
+    const instance = new EventTarget();
+    const FakeLazyComponent = lazy(
+      () =>
+        new Promise<{ default: FC }>((resolve) => {
+          instance.addEventListener("resolve-promise", () =>
+            resolve({ default: Content })
+          );
+        })
+    );
+
+    function Test(): ReactElement {
+      return (
+        <div data-testid="container">
+          <NullSuspense>
+            <FakeLazyComponent />
+          </NullSuspense>
+        </div>
+      );
+    }
+
+    render(<Test />);
+    const container = screen.getByTestId("container");
+    expect(container).toBeEmptyDOMElement();
+
+    act(() => {
+      // resolve the promise
+      instance.dispatchEvent(new Event("resolve-promise"));
+    });
+    await waitFor(() => {
+      expect(() => screen.getByText("Hello, world!")).not.toThrow();
+    });
+  });
+});

package/src/suspense/__tests__/__snapshots__/CircularProgressSuspense.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CircularProgressSuspense should pass props to the CircularProgress component 1`] = `
+<span
+  aria-label="Custom"
+  aria-valuemax="100"
+  aria-valuemin="0"
+  class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color custom-class-name"
+  id="circular-progress-:r2:"
+  role="progressbar"
+>
+  <svg
+    class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
+    viewBox="0 0 66 66"
+  >
+    <circle
+      class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
+      cx="33"
+      cy="33"
+      r="30"
+    />
+  </svg>
+</span>
+`;

package/src/table/TableCheckbox.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { forwardRef, type TdHTMLAttributes } from "react";
 import { Checkbox } from "../form/Checkbox.js";
 import { type CheckboxProps } from "../form/InputToggle.js";
@@ -76,8 +77,9 @@ export interface TableCheckboxProps
 }
 
 /**
- * **Server Component**
- * This might actually be a client component.
+ * **Client Component**
+ * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying
+ * some minimal styles.
  *
  * @example
  * Simple Example

package/src/table/TableRadio.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { forwardRef, type TdHTMLAttributes } from "react";
 import { type RadioProps } from "../form/InputToggle.js";
 import { Radio } from "../form/Radio.js";
@@ -70,8 +71,9 @@ export interface TableRadioProps
 }
 
 /**
- * **Server Component**
- * This might actually be a client component.
+ * **Client Component**
+ * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying
+ * some minimal styles.
  *
  * @example
  * Simple Example

package/src/table/_table.scss

@@ -108,85 +108,37 @@ $sticky-footer-active-styles: $sticky-header-active-styles !default;
 $row-hover-color: interaction.get-var(hover-background-color) !default;
 $row-selected-color: interaction.get-var(selected-background-color) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-table-background-color,
-    value: $background-color,
-  ),
-  border-size: (
-    var: --rmd-table-border-size,
-    value: $border-size,
-  ),
-  border-color: (
-    var: --rmd-table-border-color,
-    value: $border-color,
-  ),
-  header-background-color: (
-    var: --rmd-table-header-background-color,
-    value: $header-background-color,
-  ),
-  cell-color: (
-    var: --rmd-table-cell-color,
-    value: $cell-color,
-  ),
-  cell-height: (
-    var: --rmd-table-cell-height,
-    value: $cell-height,
-  ),
-  cell-horizontal-padding: (
-    var: --rmd-table-cell-horizontal-padding,
-    value: $cell-horizontal-padding,
-  ),
-  cell-vertical-padding: (
-    var: --rmd-table-cell-vertical-padding,
-    value: $cell-vertical-padding,
-  ),
-  header-cell-height: (
-    var: --rmd-table-header-cell-height,
-    value: $cell-header-height,
-  ),
-  hover-color: (
-    var: --rmd-table-hover-color,
-    value: $row-hover-color,
-  ),
-  selected-color: (
-    var: --rmd-table-selected-color,
-    value: $row-selected-color,
-  ),
-  sticky-cell: (
-    var: --rmd-table-sticky-cell,
-    value: $sticky-cell-position,
-  ),
-  sticky-header: (
-    var: --rmd-table-sticky-header,
-    value: $sticky-header-position,
-  ),
-  sticky-footer: (
-    var: --rmd-table-sticky-footer,
-    value: $sticky-footer-position,
-  ),
-  sticky-background-color: (
-    var: --rmd-table-sticky-background-color,
-    value: $sticky-background-color,
-  ),
+$variables: (
+  background-color,
+  border-size,
+  border-color,
+  header-background-color,
+  cell-color,
+  cell-height,
+  cell-horizontal-padding,
+  cell-vertical-padding,
+  header-cell-height,
+  hover-color,
+  selected-color,
+  sticky-cell,
+  sticky-header,
+  sticky-footer,
+  sticky-background-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "table 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, "table");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "table var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "table")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -227,6 +179,39 @@ $row-selected-styles: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(header-background-color, $header-background-color);
+    @include set-var(cell-color, $cell-color);
+    @include set-var(cell-height, $cell-height);
+    @include set-var(cell-horizontal-padding, $cell-horizontal-padding);
+    @include set-var(cell-vertical-padding, $cell-vertical-padding);
+    @include set-var(header-cell-height, $cell-header-height);
+    @include set-var(selected-color, $row-selected-color);
+
+    @if not $disable-bordered {
+      @include set-var(border-size, $border-size);
+      @include set-var(border-color, $border-color);
+    }
+    @if not $disable-hoverable {
+      @include set-var(hover-color, $row-hover-color);
+    }
+    @if not $disable-sticky-cell {
+      @include set-var(sticky-cell, $sticky-cell-position);
+    }
+    @if not $disable-sticky-header {
+      @include set-var(sticky-header, $sticky-header-position);
+    }
+    @if not $disable-sticky-footer {
+      @include set-var(sticky-footer, $sticky-footer-position);
+    }
+    @if not $disable-sticky-header or not $disable-sticky-footer {
+      @include set-var(sticky-background-color, $sticky-background-color);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @if not $disable-container {

package/src/table/tableCellStyles.ts

@@ -3,7 +3,7 @@ import { cssUtils } from "../cssUtils.js";
 import {
   type TableCellHorizontalAlignment,
   type TableCellVerticalAlignment,
-} from "./TableConfigurationProvider.jsx";
+} from "./TableConfigurationProvider.js";
 
 /** @remarks \@since 6.0.0 */
 export interface TableCellClassNameOptions {

package/src/tabs/Tab.tsx

@@ -1,7 +1,13 @@
 "use client";
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import {
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { tab } from "./tabStyles.js";
@@ -14,7 +20,7 @@ import { type TabListProps } from "./TabList.js";
 /**
  * @remarks \@since 6.0.0
  */
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface BaseTabProps {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -31,6 +37,14 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   activeIndicator?: boolean;
 
+  /**
+   * Set this to `true` when rendering the tabs vertically and
+   * {@link activeIndicator} has been enabled.
+   *
+   * @defaultValue !false
+   */
+  verticalActiveIndicator?: boolean;
+
   /**
    * An optional icon to render with the with the {@link children}. The default
    * behavior will render this icon before the children.
@@ -56,6 +70,26 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   stacked?: boolean;
 }
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TabButtonProps
+  extends BaseTabProps,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: "button";
+}
+
+export interface TabLinkProps
+  extends BaseTabProps,
+    AnchorHTMLAttributes<HTMLAnchorElement> {
+  as: CustomLinkComponent;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TabProps = TabButtonProps | TabLinkProps;
+
 /**
  * **Client Component**
  *
@@ -66,74 +100,80 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @remarks \@since 6.0.0
  */
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(
-  function Tab(props, ref) {
-    const {
-      id: propId,
-      active,
-      activeIndicator,
-      icon,
-      iconAfter,
-      stacked,
-      className,
-      children: propChildren,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      ...remaining
-    } = props;
-    const { disabled } = props;
-
-    const id = useEnsuredId(propId, "tab");
-    const { activeDescendantId } = useKeyboardMovementContext();
-    const { ripples, handlers } = useElementInteraction({
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      disabled,
-    });
+export function Tab(props: TabProps): ReactElement {
+  const {
+    id: propId,
+    as: Component = "button",
+    active,
+    activeIndicator,
+    verticalActiveIndicator,
+    icon,
+    iconAfter,
+    stacked,
+    className,
+    children: propChildren,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    ...remaining
+  } = props as TabButtonProps;
+  const { disabled } = props as TabButtonProps;
 
-    const children = useHigherContrastChildren(propChildren);
+  const id = useEnsuredId(propId, "tab");
+  const { activeDescendantId } = useKeyboardMovementContext();
+  const { ripples, handlers } = useElementInteraction({
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    disabled,
+  });
 
-    return (
-      <button
-        {...remaining}
-        {...handlers}
-        aria-selected={active}
-        id={id}
-        ref={ref}
-        role="tab"
-        type="button"
-        tabIndex={id === activeDescendantId ? 0 : -1}
-        className={tab({
-          className,
-          active,
-          stacked: !!icon && stacked,
-          disabled,
-          reversed: !!icon && iconAfter,
-          activeIndicator,
-        })}
-      >
-        {icon}
-        {children}
-        {ripples}
-      </button>
-    );
+  const isLink = Component !== "button";
+  const children = useHigherContrastChildren(propChildren);
+  let buttonOnlyProps: Record<string, unknown> | undefined;
+  if (!isLink) {
+    buttonOnlyProps = { type: "button" };
   }
-);
+
+  return (
+    <Component
+      {...remaining}
+      {...buttonOnlyProps}
+      {...handlers}
+      aria-selected={active}
+      id={id}
+      role="tab"
+      tabIndex={id === activeDescendantId ? 0 : -1}
+      className={tab({
+        className,
+        active,
+        isLink,
+        stacked: !!icon && stacked,
+        disabled,
+        reversed: !!icon && iconAfter,
+        activeIndicator,
+        verticalActiveIndicator,
+      })}
+    >
+      {icon}
+      {children}
+      {ripples}
+    </Component>
+  );
+}

package/src/tabs/__tests__/Tab.tsx

@@ -1,7 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
-import { render, screen } from "../../test-utils/index.js";
-
 import { FontIcon } from "../../icon/FontIcon.js";
+import { render, screen } from "../../test-utils/index.js";
 import { Tab, type TabProps } from "../Tab.js";
 
 describe("Tab", () => {
@@ -25,4 +24,28 @@ describe("Tab", () => {
     rerender(<Tab {...props} iconAfter stacked />);
     expect(tab).toMatchSnapshot();
   });
+
+  it("should render as a button", () => {
+    const { rerender } = render(<Tab active={false}>Tab</Tab>);
+    let tab = screen.getByRole("tab", { name: "Tab" });
+    expect(tab).toBeInstanceOf(HTMLButtonElement);
+
+    rerender(
+      <Tab as="button" active={false}>
+        Tab
+      </Tab>
+    );
+    tab = screen.getByRole("tab", { name: "Tab" });
+    expect(tab).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("should be able to render as a link using the as prop", () => {
+    render(
+      <Tab as="a" href="#tab" active={false}>
+        Tab
+      </Tab>
+    );
+    const tab = screen.getByRole("tab", { name: "Tab" });
+    expect(tab).toBeInstanceOf(HTMLAnchorElement);
+  });
 });

package/src/tabs/__tests__/TabList.tsx

@@ -124,14 +124,14 @@ describe("TabList", () => {
 
     // it should always start to 33.33% and then calculate the correct width
     // based on the number of tabs
-    expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe(
+    expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe(
       `${100 / 3}%`
     );
     expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("0px");
 
     // need to use waitFor since ResizeObserver uses requestAnimationFrame
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("120px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("120px");
     });
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("0px");
@@ -144,7 +144,7 @@ describe("TabList", () => {
 
     await user.click(tab2);
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("90px");
     });
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");
@@ -155,7 +155,7 @@ describe("TabList", () => {
 
     await user.click(tab1);
     await waitFor(() => {
-      expect(tablist.style.getPropertyValue("--rmd-tab-width")).toBe("90px");
+      expect(tablist.style.getPropertyValue("--rmd-tab-size")).toBe("90px");
     });
     await waitFor(() => {
       expect(tablist.style.getPropertyValue("--rmd-tab-offset")).toBe("120px");

package/src/tabs/__tests__/__snapshots__/TabList.tsx.snap

@@ -3,9 +3,9 @@
 exports[`TabList should update the tab indicator styles based on the active index 1`] = `
 <div
   aria-orientation="horizontal"
-  class="rmd-tablist rmd-tablist--left rmd-tablist--full-width rmd-tablist--no-scrollbar rmd-tab-indicator rmd-tab-indicator--tablist"
+  class="rmd-tablist rmd-tablist--left rmd-tablist--full-width rmd-tablist--no-scrollbar rmd-tab-indicator rmd-tab-indicator--h rmd-tab-indicator--tablist-h"
   role="tablist"
-  style="--rmd-tab-width: 120px; --rmd-tab-offset: 0px;"
+  style="--rmd-tab-size: 120px; --rmd-tab-offset: 0px;"
   tabindex="0"
 >
   <button