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

package/src/snackbar/_snackbar.scss

@@ -11,6 +11,7 @@
 @use "../transition/transition";
 
 $disable-everything: false !default;
+$disable-absolute: false !default;
 $disable-top: false !default;
 $disable-bottom: false !default;
 $disable-top-right: $disable-top !default;
@@ -60,201 +61,204 @@ $background-color: theme.get-default-color(
 ) !default;
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-toast-color,
-    value: $color,
-  ),
-  background-color: (
-    var: --rmd-toast-background-color,
-    value: $background-color,
-  ),
-  offset: (
-    var: --rmd-snackbar-offset,
-    value: 0,
-  ),
-);
+$variables: (background-color, color, offset);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "alert 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, "snackbar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "alert var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "snackbar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-snackbar {
-      align-items: $default-align-items;
-      display: flex;
-      flex-direction: column;
-      gap: $gap;
-      left: 0;
-      margin: $margin;
-      pointer-events: none;
-      position: fixed;
-      right: 0;
-      z-index: $z-index;
-
-      @if not $disable-top or not $disable-top-left or not $disable-bottom-left
-      {
-        &--top {
-          @include use-var(top, offset);
-        }
-      }
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(offset, 0);
+  }
+}
 
-      @if not
-        $disable-bottom or not
-        $disable-bottom-left or not
-        $disable-bottom-right
-      {
-        &--bottom {
-          @include use-var(bottom, offset);
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(snackbar, $disable-layer) {
+      .rmd-snackbar {
+        align-items: $default-align-items;
+        display: flex;
+        flex-direction: column;
+        gap: $gap;
+        left: 0;
+        margin: $margin;
+        pointer-events: none;
+        position: fixed;
+        right: 0;
+        z-index: $z-index;
+
+        @if not $disable-absolute {
+          &--absolute {
+            position: absolute;
+          }
         }
-      }
 
-      @if not $disable-top-left or not $disable-bottom-left {
-        &--start {
-          align-items: flex-start;
+        @if not
+          $disable-top or not
+          $disable-top-left or not
+          $disable-bottom-left
+        {
+          &--top {
+            @include use-var(top, offset);
+          }
         }
-      }
 
-      @if not $disable-top-right or not $disable-bottom-right {
-        &--end {
-          align-items: flex-end;
+        @if not
+          $disable-bottom or not
+          $disable-bottom-left or not
+          $disable-bottom-right
+        {
+          &--bottom {
+            @include use-var(bottom, offset);
+          }
         }
-      }
-    }
 
-    .rmd-toast {
-      @include box-shadows.box-shadow($box-shadow, $disable-colors: true);
-      @include utils.map-to-styles($typography);
-      @include use-var(background-color);
-      @include use-var(color);
-
-      align-items: center;
-      border-radius: $border-radius;
-      display: flex;
-      gap: $toast-gap;
-      justify-content: space-between;
-      max-width: $max-width;
-      min-height: $min-height;
-      padding-left: $horizontal-padding;
-      padding-right: $horizontal-padding;
-      pointer-events: auto;
-      width: 100%;
-
-      @include media-queries.tablet-media {
-        min-width: $min-width;
-        width: auto;
-      }
+        @if not $disable-top-left or not $disable-bottom-left {
+          &--start {
+            align-items: flex-start;
+          }
+        }
 
-      @if not $disable-action-button {
-        &--action {
-          @include utils.auto-rtl(
-            padding-right,
-            $action-horizontal-padding,
-            $horizontal-padding
-          );
+        @if not $disable-top-right or not $disable-bottom-right {
+          &--end {
+            align-items: flex-end;
+          }
         }
       }
 
-      @if not $disable-close-button {
-        &--x {
-          @include utils.auto-rtl(
-            padding-right,
-            $close-button-horizontal-padding,
-            $horizontal-padding
-          );
+      .rmd-toast {
+        @include box-shadows.box-shadow($box-shadow, $disable-colors: true);
+        @include utils.map-to-styles($typography);
+        @include use-var(background-color);
+        @include use-var(color);
+
+        align-items: center;
+        border-radius: $border-radius;
+        display: flex;
+        gap: $toast-gap;
+        justify-content: space-between;
+        max-width: $max-width;
+        min-height: $min-height;
+        padding-left: $horizontal-padding;
+        padding-right: $horizontal-padding;
+        pointer-events: auto;
+        width: 100%;
+
+        @include media-queries.tablet-media {
+          min-width: $min-width;
+          width: auto;
         }
 
         @if not $disable-action-button {
-          &--small-gap {
-            gap: $toast-gap-both-buttons;
+          &--action {
+            @include utils.auto-rtl(
+              padding-right,
+              $action-horizontal-padding,
+              $horizontal-padding
+            );
           }
         }
-      }
 
-      @if not $disable-stacked {
-        &--stacked {
-          display: grid;
-          gap: $toast-gap-stacked;
-          grid-template-columns: 1fr;
-          padding-bottom: $vertical-padding;
-          padding-top: $vertical-padding;
+        @if not $disable-close-button {
+          &--x {
+            @include utils.auto-rtl(
+              padding-right,
+              $close-button-horizontal-padding,
+              $horizontal-padding
+            );
+          }
+
+          @if not $disable-action-button {
+            &--small-gap {
+              gap: $toast-gap-both-buttons;
+            }
+          }
         }
 
-        &--reordered {
-          grid-template-columns: 1fr min-content;
-          padding-top: 0;
+        @if not $disable-stacked {
+          &--stacked {
+            display: grid;
+            gap: $toast-gap-stacked;
+            grid-template-columns: 1fr;
+            padding-bottom: $vertical-padding;
+            padding-top: $vertical-padding;
+          }
+
+          &--reordered {
+            grid-template-columns: 1fr min-content;
+            padding-top: 0;
+          }
         }
       }
-    }
 
-    .rmd-toast-content {
-      flex: 1 1 auto;
+      .rmd-toast-content {
+        flex: 1 1 auto;
 
-      p {
-        margin: 0;
-      }
+        p {
+          margin: 0;
+        }
 
-      &--v-padding {
-        padding: $vertical-padding 0;
-      }
+        &--v-padding {
+          padding: $vertical-padding 0;
+        }
 
-      &--t-padding {
-        padding-bottom: 0;
-      }
+        &--t-padding {
+          padding-bottom: 0;
+        }
 
-      @if not $disable-action-button {
-        &--action {
-          @include utils.auto-rtl(
-            padding-right,
-            button.$text-horizontal-padding
-          );
+        @if not $disable-action-button {
+          &--action {
+            @include utils.auto-rtl(
+              padding-right,
+              button.$text-horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-close-button and not $disable-action-button {
-        &--gap {
-          @include utils.auto-rtl(margin-right, $toast-gap);
+        @if not $disable-close-button and not $disable-action-button {
+          &--gap {
+            @include utils.auto-rtl(margin-right, $toast-gap);
+          }
         }
       }
-    }
 
-    @if not $disable-close-button {
-      .rmd-toast-x {
-        &--reordered {
-          align-self: flex-start;
-          order: 2;
+      @if not $disable-close-button {
+        .rmd-toast-x {
+          &--reordered {
+            align-self: flex-start;
+            order: 2;
+          }
         }
       }
-    }
 
-    @if not $disable-action-button {
-      .rmd-toast-action {
-        justify-self: flex-end;
+      @if not $disable-action-button {
+        .rmd-toast-action {
+          justify-self: flex-end;
 
-        &--reordered {
-          @include utils.auto-rtl(margin-right, $action-horizontal-padding);
+          &--reordered {
+            @include utils.auto-rtl(margin-right, $action-horizontal-padding);
 
-          grid-column-end: span 2;
-          order: 3;
+            grid-column-end: span 2;
+            order: 3;
+          }
         }
       }
     }

package/src/snackbar/snackbarStyles.ts

@@ -20,6 +20,7 @@ export type SnackbarPosition =
 /** @remarks \@since 6.0.0 */
 export interface SnackbarClassNameOptions {
   className?: string;
+  absolute?: boolean;
   position: SnackbarPosition;
 }
 
@@ -27,12 +28,13 @@ export interface SnackbarClassNameOptions {
  * @remarks \@since 6.0.0
  */
 export function snackbar(options: SnackbarClassNameOptions): string {
-  const { className, position } = options;
+  const { className, absolute, position } = options;
   const top =
     position === "top" || position === "top-left" || position === "top-right";
 
   return cnb(
     styles({
+      absolute,
       top,
       bottom: !top,
       start: position === "top-left" || position === "bottom-left",

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