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

package/src/link/_link.scss

@@ -26,7 +26,7 @@ $skip-to-main-styles: (
   z-index: $skip-to-main-z-index,
 ) !default;
 $skip-to-main-active-styles: (
-  outline: 0.25rem dashed #000,
+  outline: 0.25rem dashed currentcolor,
 ) !default;
 
 $variables: (color, visited-color, hover-color);
@@ -75,14 +75,6 @@ $variables: (color, visited-color, hover-color);
 @mixin styles {
   @if not $disable-everything {
     .rmd-link {
-      // can't use the normal @include interaction.surface since links are
-      // rendered inline and the `::before`/`::after` pseudo selectors only work
-      // nicely with block-like elements
-      @include utils.keyboard-only {
-        &:focus {
-          @include interaction.focus-styles($disable-background: true);
-        }
-      }
       @include interaction.outline($outline-offset: false);
       @include use-var(color);
 
@@ -96,6 +88,21 @@ $variables: (color, visited-color, hover-color);
         @include set-var(color, get-var(hover-color));
       }
 
+      // can't use the normal @include interaction.surface since links are
+      // rendered inline and the `::before`/`::after` pseudo selectors only work
+      // nicely with block-like elements
+      @if utils.$disable-focus-visible {
+        @include utils.keyboard-only {
+          &:focus {
+            @include interaction.focus-styles($disable-background: true);
+          }
+        }
+      } @else {
+        &:focus-visible {
+          @include interaction.focus-styles($disable-background: true);
+        }
+      }
+
       @if not $disable-flex {
         &--flex {
           @include icon.use-var(gap, spacing);
@@ -120,9 +127,16 @@ $variables: (color, visited-color, hover-color);
 
         &--skip-styled {
           @include utils.map-to-styles($skip-to-main-styles);
-          @include utils.keyboard-only {
-            &:focus,
-            &:active {
+
+          @if utils.$disable-focus-visible {
+            @include utils.keyboard-only {
+              &:focus,
+              &:active {
+                @include utils.map-to-styles($skip-to-main-active-styles);
+              }
+            }
+          } @else {
+            &:focus-visible {
               @include utils.map-to-styles($skip-to-main-active-styles);
             }
           }

package/src/list/ListItem.tsx

@@ -16,13 +16,18 @@ declare module "react" {
     "--rmd-list-item-medium-height"?: string | number;
     "--rmd-list-item-large-height"?: string | number;
     "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-three-line-height"?: string | number;
+    "--rmd-list-item-multiline-clamp"?: string | number;
+    "--rmd-list-item-multiline-height"?: string | number;
     "--rmd-list-item-media-size"?: string | number;
     "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-three-line-height"?: string | number;
+    "--rmd-list-item-text-multiline-height"?: string | number;
   }
 }
 
+/**
+ * @remarks \@since 6.0.0 Renamed `threeLines` to `multiline` since it can
+ * support more than three lines of text.
+ */
 export interface ListItemProps
   extends HTMLAttributes<HTMLLIElement>,
     ListItemChildrenProps {
@@ -45,7 +50,7 @@ export interface ListItemProps
   /**
    * @defaultValue `false`
    */
-  threeLines?: boolean;
+  multiline?: boolean;
 
   /**
    * @defaultValue `false`
@@ -146,20 +151,21 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       secondaryText,
       secondaryTextProps,
       disableTextChildren = false,
-      height: propHeight = "auto",
+      height: propHeight,
       leftAddon,
-      leftAddonType = "icon",
-      leftAddonPosition = "middle",
+      leftAddonType,
+      leftAddonPosition,
       leftAddonClassName,
       leftAddonForceWrap,
       rightAddon,
-      rightAddonType = "icon",
-      rightAddonPosition = "middle",
+      rightAddonType,
+      rightAddonPosition,
       rightAddonClassName,
       rightAddonForceWrap,
-      disableLeftAddonCenteredMedia = false,
-      disableRightAddonCenteredMedia = false,
-      threeLines = false,
+      disableLeftAddonSpacing,
+      disableLeftAddonCenteredMedia,
+      disableRightAddonCenteredMedia,
+      multiline = false,
       disabled = false,
       disabledOpacity = false,
       role = "button",
@@ -226,13 +232,13 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           height,
           disabled,
           disabledOpacity,
-          threeLines,
+          multiline,
           clickable: !presentational,
           pressedClassName,
         })}
       >
         <ListItemChildren
-          threeLines={threeLines}
+          multiline={multiline}
           textClassName={textClassName}
           secondaryTextClassName={secondaryTextClassName}
           disableTextChildren={disableTextChildren}
@@ -250,6 +256,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           rightAddonPosition={rightAddonPosition}
           rightAddonClassName={rightAddonClassName}
           rightAddonForceWrap={rightAddonForceWrap}
+          disableLeftAddonSpacing={disableLeftAddonSpacing}
           disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}
           disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}
         >

package/src/list/ListItemAddon.tsx

@@ -35,11 +35,12 @@ export function ListItemAddon(props: ListItemAddonProps): ReactElement {
     className,
     children,
     addon,
-    addonAfter = false,
+    addonAfter,
     type = "icon",
-    position = "middle",
+    position,
     forceAddonWrap,
-    disableCenteredMedia = false,
+    disableCenteredMedia,
+    disableBeforeSpacing,
     ...remaining
   } = props;
 
@@ -55,6 +56,7 @@ export function ListItemAddon(props: ListItemAddonProps): ReactElement {
         position,
         className,
         addonAfter,
+        disableBeforeSpacing,
         disableCenteredMedia,
       })}
       iconAfter={addonAfter}

package/src/list/ListItemChildren.tsx

@@ -41,7 +41,7 @@ import { type ListItemChildrenProps } from "./types.js";
  */
 export function ListItemChildren(props: ListItemChildrenProps): ReactElement {
   const {
-    threeLines,
+    multiline,
     textProps,
     textClassName,
     secondaryTextClassName,
@@ -54,6 +54,7 @@ export function ListItemChildren(props: ListItemChildrenProps): ReactElement {
     leftAddonPosition = "middle",
     leftAddonClassName,
     leftAddonForceWrap,
+    disableLeftAddonSpacing,
     disableLeftAddonCenteredMedia,
     rightAddon,
     rightAddonType = "icon",
@@ -75,7 +76,7 @@ export function ListItemChildren(props: ListItemChildrenProps): ReactElement {
         className={textClassName}
         secondaryText={secondaryText}
         secondaryTextProps={secondaryTextProps}
-        secondaryTextClamped={threeLines}
+        secondaryTextClamped={multiline}
         secondaryTextClassName={secondaryTextClassName}
       >
         {(!disableTextChildren && children) || primaryText}
@@ -90,6 +91,7 @@ export function ListItemChildren(props: ListItemChildrenProps): ReactElement {
       position={leftAddonPosition}
       className={leftAddonClassName}
       forceAddonWrap={leftAddonForceWrap}
+      disableBeforeSpacing={disableLeftAddonSpacing}
       disableCenteredMedia={disableLeftAddonCenteredMedia}
     >
       {children}

package/src/list/ListItemLink.tsx

@@ -63,7 +63,7 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
       secondaryText,
       secondaryTextProps,
       disableTextChildren = false,
-      height: propHeight = "auto",
+      height: propHeight,
       leftAddon,
       leftAddonType = "icon",
       leftAddonPosition = "middle",
@@ -76,7 +76,7 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
       rightAddonForceWrap,
       disableLeftAddonCenteredMedia = false,
       disableRightAddonCenteredMedia = false,
-      threeLines = false,
+      multiline = false,
       disabled = false,
       disabledOpacity = false,
       onBlur,
@@ -137,7 +137,7 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
             height,
             disabled,
             disabledOpacity,
-            threeLines,
+            multiline,
             pressedClassName,
           })}
           // TODO: Figure out a better type for the CustomLinkComponent to fix this
@@ -146,7 +146,7 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
           tabIndex={tabIndex}
         >
           <ListItemChildren
-            threeLines={threeLines}
+            multiline={multiline}
             textClassName={textClassName}
             secondaryTextClassName={secondaryTextClassName}
             disableTextChildren={disableTextChildren}

package/src/list/__tests__/ListItem.tsx

@@ -227,7 +227,7 @@ describe("ListItem", () => {
         rightAddonType="icon"
         rightAddonPosition="bottom"
         secondaryText="Secondary Text!"
-        threeLines
+        multiline
       />
     );
     expect(item).toMatchSnapshot();

package/src/list/__tests__/__snapshots__/ListItem.tsx.snap

@@ -280,7 +280,7 @@ exports[`ListItem should update the height based on the provided addons and rend
 
 exports[`ListItem should update the height based on the provided addons and render correctly 9`] = `
 <li
-  class="rmd-list-item rmd-list-item--extra-large rmd-list-item--three-lines rmd-interaction-surface"
+  class="rmd-list-item rmd-list-item--extra-large rmd-list-item--multiline rmd-interaction-surface"
   role="button"
   tabindex="0"
 >

package/src/list/__tests__/getListItemHeight.ts

@@ -2,12 +2,12 @@ import { describe, expect, it } from "@jest/globals";
 import { getListItemHeight } from "../getListItemHeight.js";
 
 describe("getListItemHeight", () => {
-  it('should return "normal" if no addons are provided when the height is omitted or set to "auto"', () => {
+  it('should return "normal" if no addons are provided when the height is omitted', () => {
     expect(getListItemHeight({})).toBe("normal");
-    expect(getListItemHeight({ height: "auto" })).toBe("normal");
   });
 
   it("should return the height if it was provided", () => {
+    expect(getListItemHeight({ height: "auto" })).toBe("auto");
     expect(getListItemHeight({ height: "normal" })).toBe("normal");
     expect(getListItemHeight({ height: "normal", leftAddon: "Addon" })).toBe(
       "normal"

package/src/list/_list.scss

@@ -17,14 +17,15 @@ $disable-item-media-large: false !default;
 $disable-medium-height: false !default;
 $disable-large-height: false !default;
 $disable-extra-large-height: false !default;
-$disable-three-line-height: false !default;
+$disable-multiline-clamp: false !default;
+$disable-multiline-height: true !default;
 $disable-item-link-styles: false !default;
 
 $disable-subheader: false !default;
 $disable-subheader-inset: false !default;
 
 $item-secondary-text-line-height: 1.42857 !default;
-$item-secondary-text-three-line-max-height: 3rem !default;
+$item-secondary-text-multiline-max-height: 3rem !default;
 
 $vertical-padding: 0.5rem !default;
 $dense-vertical-padding: 0.25rem !default;
@@ -51,8 +52,9 @@ $item-large-height: 4rem !default;
 $item-dense-large-height: 3.5rem !default;
 $item-extra-large-height: 4.5rem !default;
 $item-dense-extra-large-height: 4rem !default;
-$item-three-line-height: 5.5rem !default;
-$item-dense-three-line-height: 5rem !default;
+$item-multiline-clamp: 2 !default;
+$item-multiline-height: 5.5rem !default;
+$item-dense-multiline-height: 5rem !default;
 
 $item-media-spacing: 1rem !default;
 $item-media-size: 3.5rem !default;
@@ -70,10 +72,11 @@ $variables: (
   item-medium-height,
   item-large-height,
   item-extra-large-height,
-  item-three-line-height,
+  item-multiline-height,
   item-media-size,
   item-media-spacing,
-  item-text-three-line-height
+  item-text-multiline-height,
+  item-multiline-clamp
 );
 
 @function get-var($name, $fallback: null) {
@@ -111,6 +114,7 @@ $variables: (
     @include set-var(vertical-padding, $vertical-padding);
     @include set-var(item-horizontal-padding, $item-horizontal-padding);
     @include set-var(item-vertical-padding, $item-vertical-padding);
+    @include set-var(item-keyline, $item-keyline);
 
     @include set-var(item-height, $item-height);
     @if not $disable-medium-height {
@@ -122,11 +126,14 @@ $variables: (
     @if not $disable-extra-large-height {
       @include set-var(item-extra-large-height, $item-extra-large-height);
     }
-    @if not $disable-three-line-height {
-      @include set-var(item-three-line-height, $item-three-line-height);
+    @if not $disable-multiline-clamp {
+      @include set-var(item-multiline-clamp, $item-multiline-clamp);
+    }
+    @if not $disable-multiline-height {
+      @include set-var(item-multiline-height, $item-multiline-height);
       @include set-var(
-        item-text-three-line-height,
-        $item-secondary-text-three-line-max-height
+        item-text-multiline-height,
+        $item-secondary-text-multiline-max-height
       );
     }
 
@@ -212,9 +219,9 @@ $variables: (
         }
       }
 
-      @if not $disable-three-line-height {
-        &--three-lines {
-          @include set-var(item-height, get-var(item-three-line-height));
+      @if not $disable-multiline-height {
+        &--multiline {
+          @include set-var(item-height, get-var(item-multiline-height));
         }
       }
 
@@ -231,12 +238,16 @@ $variables: (
           @include theme.theme-use-var(color, text-secondary-color);
         }
 
-        &--clamped {
-          @include typography.line-clamp;
-          @include use-var(max-height, item-text-three-line-height);
+        @if not $disable-multiline-clamp {
+          &--clamped {
+            @include typography.line-clamp(get-var(item-multiline-clamp));
+            @if not $disable-multiline-height {
+              @include use-var(max-height, item-text-multiline-height);
+            }
 
-          line-height: $item-secondary-text-line-height;
-          white-space: normal;
+            line-height: $item-secondary-text-line-height;
+            white-space: normal;
+          }
         }
       }
 

package/src/list/getListItemHeight.ts

@@ -15,7 +15,6 @@ export interface ListItemHeightOptions
   > {
   /**
    * @see {@link ListItemHeight}
-   * @defaultValue `"auto"`
    */
   height?: ListItemHeight;
 }
@@ -31,7 +30,7 @@ export function getListItemHeight(
   options: ListItemHeightOptions = {}
 ): ListItemHeight {
   const {
-    height = "auto",
+    height,
     leftAddon,
     leftAddonType = "icon",
     rightAddon,
@@ -39,7 +38,7 @@ export function getListItemHeight(
     secondaryText,
   } = options;
 
-  if (height !== "auto") {
+  if (height) {
     return height;
   }
 

package/src/list/listItemStyles.ts

@@ -21,7 +21,7 @@ export interface ListItemClassNameOptions {
   /**
    * @defaultValue `false`
    */
-  threeLines?: boolean;
+  multiline?: boolean;
 
   /**
    * @defaultValue `false`
@@ -72,7 +72,7 @@ export function listItem(
     link = false,
     height = "auto",
     clickable = true,
-    threeLines = false,
+    multiline = false,
     disabled = false,
     disabledOpacity = false,
     pressedClassName,
@@ -82,7 +82,7 @@ export function listItem(
     styles({
       link,
       [height]: height !== "auto",
-      "three-lines": threeLines,
+      multiline,
       "disabled-color": disabled && !disabledOpacity,
       "disabled-opacity": disabled && disabledOpacity,
     }),
@@ -162,6 +162,15 @@ export interface ListItemAddonClassNameOptions {
    * @remarks \@since 6.0.0
    */
   disableCenteredMedia?: boolean;
+
+  /**
+   * Set this to `true` to disable the additional spacing applied to the addons
+   * that appear before the `children` and the normal `--rmd-text-icon-spacing`
+   * value is used instead.
+   *
+   * @defaultValue `false`
+   */
+  disableBeforeSpacing?: boolean;
 }
 
 /**
@@ -177,6 +186,7 @@ export function listItemAddon(
     className,
     addonAfter = false,
     disableCenteredMedia = false,
+    disableBeforeSpacing = false,
   } = options;
 
   const isMedia = type === "media" || type === "large-media";
@@ -185,8 +195,8 @@ export function listItemAddon(
   return cnb(
     styles("addon", {
       [position]: position !== "middle",
-      before: !addonAfter,
-      "avatar-before": !addonAfter && isAvatar,
+      before: !disableBeforeSpacing && !addonAfter,
+      "avatar-before": !disableBeforeSpacing && !addonAfter && isAvatar,
       media: isMedia,
       "media-large": type === "large-media",
       "media-centered": isMedia && !disableCenteredMedia,

package/src/list/types.ts

@@ -1,12 +1,12 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import type { PropsWithRef } from "../types.js";
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PropsWithRef } from "../types.js";
 
 /**
  * The height to apply to the list item.
  *
  * Conversions:
  *
- * - height !== "auto" -> height
+ * - height !== undefined && height !== "auto" -> height
  * - secondaryText or left/right addon is media/media-large  -> "extra-large"
  * - left/right addon is avatar -> "large"
  * - left/right addon is icon -> "medium"
@@ -61,6 +61,15 @@ export interface ListItemChildrenAddonProps {
    */
   leftAddonForceWrap?: boolean;
 
+  /**
+   * Set this to `true` to disable the additional spacing applied to the addons
+   * that appear before the `children` and the normal `--rmd-text-icon-spacing`
+   * value is used instead.
+   *
+   * @defaultValue `false`
+   */
+  disableLeftAddonSpacing?: boolean;
+
   /**
    * An optional addon to display to the right of the `primaryText` or
    * `children` and should be used with the `rightAddonType` prop to adjust
@@ -196,10 +205,12 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
 
   /**
    * Set this to `true` to allow the {@link secondaryText} to span multiple
-   * lines and use the CSS clamp after two lines of text are visible.
+   * lines and use the CSS clamp after two lines of text are visible. The number
+   * of lines can be configured by `core.$list-item-multiline-clamp` or
+   * `@include core.list-set-var(item-multiline-clamp, $new-value)`.
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}
    * @defaultValue `false`
    */
-  threeLines?: boolean;
+  multiline?: boolean;
 }

package/src/menu/Menu.tsx

@@ -7,7 +7,7 @@ import {
   type CSSProperties,
   type HTMLAttributes,
 } from "react";
-import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.jsx";
+import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.js";
 import { useFocusContainer } from "../focus/useFocusContainer.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { type ListElement, type ListProps } from "../list/List.js";

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;
@@ -46,19 +45,6 @@ $variables: (background-color, color, min-width, spacing);
     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,
@@ -79,9 +65,10 @@ $variables: (background-color, color, min-width, spacing);
   .rmd-menu-item {
     @include icon.set-var(spacing, get-var(spacing));
 
-    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,

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);
+  });
 });