@react-md/core 1.0.0-next.2 → 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/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

package/src/tabs/_tabs.scss

@@ -13,11 +13,12 @@ $disable-stacked: false !default;
 $disable-reversed: false !default;
 $disable-tablist-padded: false !default;
 $disable-tablist-vertical: false !default;
-$disable-indicator: false !default;
 $disable-tablist-indicator: false !default;
 $disable-tablist-hidden-scrollbar: false !default;
 $disable-tablist-scroll-button: false !default;
 $disable-tablist-active-indicator-transition: false !default;
+$disable-indicator: false !default;
+$disable-indicator-vertical: false !default;
 
 $typography: map.remove(typography.$button-styles, line-height) !default;
 $gap: icon.$spacing !default;
@@ -41,6 +42,7 @@ $tablist-scroller-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
+$tablist-vertical-indicator-left: 0 !default;
 
 $variables: (
   color,
@@ -74,21 +76,41 @@ $variables: (
     &::after {
       @include use-var(background, indicator-background);
 
-      bottom: 0;
       content: "";
-      height: $indicator-height;
       pointer-events: none;
       position: absolute;
-      width: 100%;
       z-index: 1;
     }
 
+    &--h::after {
+      bottom: 0;
+      height: $indicator-height;
+      width: 100%;
+    }
+
+    @if not $disable-indicator-vertical {
+      &--v::after {
+        @include utils.auto-rtl(left, $tablist-vertical-indicator-left);
+
+        height: 100%;
+        top: 0;
+        width: $indicator-height;
+      }
+    }
+
     @if not $disable-tablist-indicator {
-      &--tablist::after {
+      &--tablist-h::after {
         left: 0;
-        max-width: var(--rmd-tab-width, $min-width);
+        max-width: var(--rmd-tab-size, $min-width);
         transform: translateX(var(--rmd-tab-offset, 0));
       }
+
+      @if not $disable-tablist-vertical {
+        &--tablist-v::after {
+          max-height: var(--rmd-tab-size, $min-width);
+          transform: translateY(var(--rmd-tab-offset, 0));
+        }
+      }
     }
 
     @if not $disable-tablist-active-indicator-transition {
@@ -128,16 +150,6 @@ $variables: (
     @if not $disable-tablist-vertical {
       &--vertical {
         flex-direction: column;
-
-        @if not $disable-tablist-indicator {
-          &::after {
-            bottom: auto;
-            left: auto;
-            right: 0;
-            top: 0;
-            transform: translateY(var(--rmd-tab-offset, 0));
-          }
-        }
       }
     }
 

package/src/tabs/tabIndicatorStyles.ts

@@ -8,8 +8,9 @@ const styles = bem("rmd-tab-indicator");
  */
 export interface TabIndicatorClassNameOptions {
   className?: string;
-  tablist?: boolean;
   animate?: boolean;
+  tablist?: boolean;
+  vertical?: boolean;
 }
 
 /**
@@ -18,7 +19,16 @@ export interface TabIndicatorClassNameOptions {
 export function tabIndicator(
   options: TabIndicatorClassNameOptions = {}
 ): string {
-  const { className, tablist, animate } = options;
+  const { className, vertical, tablist, animate } = options;
 
-  return cnb(styles({ tablist, animate }), className);
+  return cnb(
+    styles({
+      animate,
+      h: !vertical,
+      v: vertical,
+      "tablist-h": tablist && !vertical,
+      "tablist-v": tablist && vertical,
+    }),
+    className
+  );
 }

package/src/tabs/tabListStyles.ts

@@ -46,7 +46,7 @@ export function tabList(options: TabListClassNameOptions = {}): string {
       "full-width": !inline,
       "no-scrollbar": !scrollbar,
     }),
-    indicator && tabIndicator({ tablist: true, animate }),
+    indicator && tabIndicator({ tablist: true, animate, vertical }),
     className
   );
 }

package/src/tabs/tabStyles.ts

@@ -20,7 +20,9 @@ const styles = bem("rmd-tab");
 export interface TabClassNameOptions {
   className?: string;
   active?: boolean;
+  isLink?: boolean;
   activeIndicator?: boolean;
+  verticalActiveIndicator?: boolean;
   stacked?: boolean;
   reversed?: boolean;
   disabled?: boolean;
@@ -30,8 +32,16 @@ export interface TabClassNameOptions {
  * @remarks \@since 6.0.0
  */
 export function tab(options: TabClassNameOptions = {}): string {
-  const { className, active, activeIndicator, stacked, reversed, disabled } =
-    options;
+  const {
+    className,
+    active,
+    isLink,
+    stacked,
+    reversed,
+    disabled,
+    activeIndicator,
+    verticalActiveIndicator,
+  } = options;
 
   return cnb(
     styles({
@@ -41,8 +51,10 @@ export function tab(options: TabClassNameOptions = {}): string {
       "stacked-reversed": stacked && reversed,
       disabled,
     }),
-    active && activeIndicator && tabIndicator(),
-    cssUtils({ surface: true }),
+    active &&
+      activeIndicator &&
+      tabIndicator({ vertical: verticalActiveIndicator }),
+    cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
     className
   );
 }