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

package/src/menu/_menu.scss

@@ -8,7 +8,6 @@
 $disable-everything: false !default;
 $disable-menu-item: false !default;
 $disable-menu-item-group: false !default;
-$disable-focus-outline: false !default;
 $disable-elevation-colors: theme.$disable-dark-elevation !default;
 
 $elevation: 8 !default;
@@ -20,41 +19,21 @@ $min-width: 7rem !default;
 
 $spacing: 1rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-menu-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-menu-color,
-    value: $color,
-  ),
-  min-width: (
-    var: --rmd-menu-min-width,
-    value: $min-width,
-  ),
-  spacing: (
-    var: --rmd-menu-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, min-width, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "dialog 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, "menu");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "menu")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -66,19 +45,6 @@ $var-lookup: (
     outline: none;
     overflow: auto;
 
-    @if not $disable-focus-outline {
-      @include utils.keyboard-only {
-        &--outline:focus {
-          // Note: Do not use the `interaction-outline` mixin +
-          // `interaction.set-var(interaction.$focus-color)` like normal focus
-          // elements since it'll make all focusable children update with the
-          // outline color as well
-          outline: interaction.get-var(focus-color) solid
-            interaction.get-var(focus-width);
-        }
-      }
-    }
-
     &--elevated {
       @include box-shadows.box-shadow(
         $elevation,
@@ -102,6 +68,9 @@ $var-lookup: (
     height: var(--rmd-list-item-height);
 
     &--focused {
+      // can't use `:focus-visible` here since this is mostly for virtual
+      // keyboard movement for comboboxes. the focus is on the button or textbox
+      // instead of a parent element
       @include utils.keyboard-only {
         @include interaction.set-var(
           background-color,
@@ -122,6 +91,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(min-width, $min-width);
+    @include set-var(spacing, $spacing);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include menu-styles;

package/src/overlay/_overlay.scss

@@ -9,39 +9,34 @@ $z-index: utils.$temporary-element-z-index !default;
 $transition-duration: transition.$linear-duration !default;
 $transition-timing-function: transition.$linear-timing-function !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-overlay-background-color,
-    value: $background-color,
-  ),
-  z-index: (
-    var: --rmd-overlay-z-index,
-    value: $z-index,
-  ),
-);
+$variables: (background-color, z-index);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "overlay 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, "overlay");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "overlay var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(z-index, $z-index);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-overlay {

package/src/portal/PortalContainerProvider.tsx

@@ -6,6 +6,7 @@ import {
   useState,
   type ReactElement,
   type ReactNode,
+  type RefObject,
 } from "react";
 
 /**
@@ -40,7 +41,7 @@ export interface PortalContainerProviderProps {
    * `<div id="rmd-portal-container"></div>` will be added as the last child to
    * the `document.body` and be used as the container element.
    */
-  container?: PortalContainer;
+  container?: PortalContainer | RefObject<PortalContainer>;
   children: ReactNode;
 }
 
@@ -61,6 +62,11 @@ export function PortalContainerProvider(
   const { container, children } = props;
   const [value, setValue] = useState<PortalContainer>(portalContainer);
   useEffect(() => {
+    if (container && "current" in container) {
+      setValue(container.current);
+      return;
+    }
+
     if (typeof container !== "undefined") {
       return;
     }
@@ -82,5 +88,7 @@ export function PortalContainerProvider(
     };
   }, [container]);
 
-  return <Provider value={container ?? value}>{children}</Provider>;
+  const containerValue =
+    (container && "current" in container) || !container ? value : container;
+  return <Provider value={containerValue}>{children}</Provider>;
 }

package/src/portal/__tests__/PortalContainerProvider.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "@jest/globals";
 import { render, screen } from "../../test-utils/index.js";
 
+import { useRef, type ReactElement } from "react";
 import { Portal } from "../Portal.js";
 import {
   PORTAL_CONTAINER_ID,
@@ -58,4 +59,26 @@ describe("PortalContainerProvider", () => {
     expect(container).toContainElement(div2);
     document.body.removeChild(container);
   });
+
+  it("should allow for a ref container", () => {
+    function Test(): ReactElement {
+      const portalContainer = useRef<HTMLDivElement>(null);
+      return (
+        <PortalContainerProvider container={portalContainer}>
+          <div data-testid="container" ref={portalContainer} />
+          <Portal>
+            <div data-testid="portal">
+              This will always be rendered in the portalContainer
+            </div>
+          </Portal>
+        </PortalContainerProvider>
+      );
+    }
+
+    render(<Test />);
+    const container = screen.getByTestId("container");
+    const portal = screen.getByTestId("portal");
+    expect(document.getElementById(PORTAL_CONTAINER_ID)).toBe(null);
+    expect(container).toContainElement(portal);
+  });
 });

package/src/progress/_progress.scss

@@ -206,45 +206,27 @@ $linear-vertical-reverse-short-styles: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-progress-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-progress-color,
-    value: $color,
-  ),
-  circular-size: (
-    var: --rmd-progress-circular-size,
-    value: $circular-size,
-  ),
-  circular-stroke-width: (
-    var: --rmd-progress-circular-width,
-    value: $circular-stroke-width,
-  ),
-  linear-size: (
-    var: --rmd-progress-linear-size,
-    value: $linear-size,
-  ),
+$variables: (
+  background-color,
+  color,
+  circular-size,
+  circular-stroke-width,
+  linear-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "progress 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, "progress");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "progress var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "progress")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -566,6 +548,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-circular {
+    @include set-var(circular-size, $circular-size);
+    @include set-var(circular-stroke-width, $circular-stroke-width);
+  }
+
+  @if not $disable-linear {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(linear-size, $linear-size);
+  }
+}
+
 @mixin styles {
   @if not $disable-circular {
     @include _circular-progress;

package/src/segmented-button/_segmented-button.scss

@@ -59,29 +59,33 @@ $selected-background-color: theme.get-default-color(
 
 $typography-styles: typography.$button-styles !default;
 
-$var-lookup: (
-  outline-width: (
-    var: --rmd-segmented-button-outline-width,
-    value: $outline-width,
-  ),
-  outline-color: (
-    var: --rmd-segmented-button-outline-color,
-    value: $outline-color,
-  ),
-  color: (
-    var: --rmd-segmented-button-color,
-    value: currentcolor,
-  ),
-  selected-background-color: (
-    var: --rmd-segmented-button-selected-background-color,
-    value: $selected-background-color,
-  ),
-  selected-color: (
-    var: --rmd-segmented-button-selected-color,
-    value: $selected-color,
-  ),
+$variables: (
+  outline-width,
+  outline-color,
+  color,
+  selected-background-color,
+  selected-color
 );
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "segmented-button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
+  }
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
 @mixin use-light-theme {
   @if not $disable-everything {
     @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -124,29 +128,14 @@ $var-lookup: (
   }
 }
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "segmented button var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(color, currentcolor);
+    @include set-var(selected-background-color, $selected-background-color);
+    @include set-var(selected-color, $selected-color);
   }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  $var: map.get(
-    utils.validate($var-lookup, $name, "segmented button var"),
-    var
-  );
-
-  #{$var}: #{$value};
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
 }
 
 @mixin styles {

package/src/sheet/_sheet.scss

@@ -30,63 +30,45 @@ $touch-max-height: calc(100% - #{$touch-margin}) !default;
 $recommended-min-height: 3.5rem !default;
 $recommended-max-height: 50% !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-sheet-height,
-    value: null,
-  ),
-  width: (
-    var: --rmd-sheet-width,
-    value: null,
-  ),
-  max-height: (
-    var: --rmd-sheet-max-height,
-    value: null,
-  ),
-  touch-width: (
-    var: --rmd-sheet-touch-width,
-    value: $touch-width,
-  ),
-  touch-max-height: (
-    var: --rmd-sheet-touch-max-height,
-    value: $touch-max-height,
-  ),
-  static-width: (
-    var: --rmd-sheet-static-width,
-    value: $static-width,
-  ),
-  transform-offscreen: (
-    var: --rmd-sheet-transform-offscreen,
-    value: null,
-  ),
-  z-index: (
-    var: --rmd-sheet-z-index,
-    value: $z-index,
-  ),
+$variables: (
+  height,
+  width,
+  max-height,
+  touch-width,
+  touch-max-height,
+  static-width,
+  transform-offscreen,
+  z-index
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "sheet 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, "sheet");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "sheet var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "sheet")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(touch-width, $touch-width);
+    @include set-var(touch-max-height, $touch-max-height);
+    @include set-var(static-width, $static-width);
+    @include set-var(z-index, $z-index);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-sheet {

package/src/sheet/styles.ts

@@ -12,16 +12,15 @@ export type SheetPosition = "top" | "right" | "bottom" | "left";
  * The size to use for sheets that have been positioned left or right. The
  * default supported values are:
  *
- * - none - the size is based on content, but is still limited to the viewport
- *   width so that the horizontal scrolling will not occur within the page. No
- *   limits added to sizing.
- * - touch - the `min-width` is set to be the entire viewport width minus a
- *   touchable area and `max-width` is set to `20rem` and is normally
- *   recommended for mobile devices.
- * - static - the width is set to a static `16rem` and generally used for
+ * - `"none"` - the size is based on content, but is still limited to the
+ *   viewport width so that the horizontal scrolling will not occur within the
+ *   page. No limits added to sizing.
+ * - `"touch"` - the `width` is set to be the entire viewport width minus a
+ *   touchable area and is normally recommended for mobile devices.
+ * - `"static"` - the `width` is set to a static `16rem` and generally used for
  *   landscape tablets and desktops.
- * - media - automatically switches between "touch" and "static" based on css
- *   media queries. (this is the default)
+ * - `"media"` - automatically switches between "touch" and "static" based on
+ *   css media queries. (this is the default)
  */
 export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
 
@@ -29,12 +28,12 @@ export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
  * The size to use for sheets that have been positioned top or bottom. The
  * supported sizes are:
  *
- * - none - the size is based on content and is limited to the viewport
- *   height.
- * - touch - the size is based on content and is limited to the viewport
- *   height with a touchable area to close the sheet.
- * - recommended - the material design recommended sizing that forces a
- *   max-height of 50vh and min-height of 3.5rem
+ * - `"none"` - the size is based on content and is limited to the viewport
+ *   height
+ * - `"touch"` - the size is based on content and is limited to the viewport
+ *   height minus a small touchable area
+ * - `"recommended"` - the material design recommended sizing that forces a
+ *   `max-height` of 50vh and `min-height` of 3.5rem
  */
 export type SheetVerticalSize = "none" | "touch" | "recommended";
 

package/src/snackbar/DefaultToastRenderer.tsx

@@ -61,7 +61,7 @@ export function DefaultToastRenderer(props: ToastRendererProps): ReactElement {
   } = props;
   const {
     closeButtonProps,
-    closeButton = !!closeButtonProps,
+    closeButton = !!closeButtonProps || !!remaining.closeButtonProps,
     onEntered: defaultEntered = noop,
     onExited: defaultExited = noop,
     onMouseEnter: defaultMouseEnter = noop,

package/src/snackbar/Snackbar.tsx

@@ -1,10 +1,5 @@
 "use client";
-import {
-  forwardRef,
-  type AriaRole,
-  type ComponentType,
-  type HTMLAttributes,
-} from "react";
+import { forwardRef, type ComponentType, type HTMLAttributes } from "react";
 import { Portal } from "../portal/Portal.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import {
@@ -24,9 +19,6 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   id?: string;
 
-  /** @defaultValue `"status"` */
-  role?: AriaRole;
-
   /**
    * Set this to the number of toasts that can be visible within the snackbar at
    * the same time. Any toasts added after this value will be added into the
@@ -154,7 +146,6 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
   function Snackbar(props, ref) {
     const {
       id: propId,
-      role = "status",
       className,
       limit = 1,
       position = "bottom",
@@ -168,21 +159,22 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Portal disabled={disablePortal}>
-        <div
-          {...remaining}
-          id={id}
-          ref={ref}
-          role={role}
-          className={snackbar({ position, className })}
-        >
-          {queue.map((toast) => (
-            <RenderToast
-              {...toast}
-              key={toast.toastId}
-              toastDefaults={toastDefaults}
-            />
-          ))}
-        </div>
+        {queue.length > 0 && (
+          <div
+            {...remaining}
+            id={id}
+            ref={ref}
+            className={snackbar({ position, className })}
+          >
+            {queue.map((toast) => (
+              <RenderToast
+                {...toast}
+                key={toast.toastId}
+                toastDefaults={toastDefaults}
+              />
+            ))}
+          </div>
+        )}
       </Portal>
     );
   }

package/src/snackbar/Toast.tsx

@@ -38,7 +38,7 @@ export interface ConfigurableToastProps
   /**
    * Note: This is set while creating the toast.
    *
-   * @defaultValue `visibleTime === null ? "alert" : undefined`
+   * @defaultValue `visibleTime === null ? "alert" : "status"`
    */
   role?: AriaRole;
 
@@ -149,7 +149,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
       actionButton: propActionButton,
       paused,
       visible,
-      closeIcon,
+      closeIcon: propCloseIcon,
       closeButtonProps,
       closeButton = !!closeButtonProps,
       contentProps,
@@ -190,6 +190,11 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
       );
     }
 
+    let closeIcon = propCloseIcon;
+    if (typeof closeButtonProps?.children !== "undefined") {
+      closeIcon = closeButtonProps.children;
+    }
+
     const action = !!actionButton;
     const reordered = stacked && action && closeButton;
     const { elementProps, rendered } = useScaleTransition({

package/src/snackbar/ToastManager.tsx

@@ -15,7 +15,8 @@ export const DEFAULT_TOAST_VISIBLE_TIME = 5000;
  * - `"replace"` - if there is a currently visible toast, it will start the
  *   leave transition and display the newly added toast instead.
  * - `"immediate"` - the same behavior as `"replace"` except that if there was a
- *   currently visible toast, it will be shown once the newly added toast again.
+ *   currently visible toast, the toast will be shown again once the `"immediate"`
+ *   toast is hidden.
  *
  * @remarks \@since 6.0.0 Renamed from `MessagePriority` to `ToastPriority`
  */
@@ -304,7 +305,7 @@ export class ToastManager {
     const {
       toastId = nanoid(),
       visibleTime = DEFAULT_TOAST_VISIBLE_TIME,
-      role = visibleTime === null ? "alert" : undefined,
+      role = visibleTime === null ? "alert" : "status",
       priority = "normal",
       duplicates = "restart",
     } = toast;