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

package/src/layout/useLayoutAppBarHeight.ts

@@ -1,9 +1,9 @@
 "use client";
 import type { Ref, RefCallback } from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { DefinedCSSVariableName } from "../theme/types.js";
 import type { CSSVariable } from "../theme/useCSSVariables.js";
-import { useResizeObserver } from "../useResizeObserver.js";
+import { useElementSize } from "../useElementSize.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -74,16 +74,12 @@ export interface LayoutAppBarHeightResult {
 export function useLayoutAppBarHeight(
   ref?: Ref<HTMLDivElement>
 ): LayoutAppBarHeightResult {
-  const [height, setHeight] = useState<number | undefined>();
-  const targetRef = useResizeObserver({
+  const { height, elementRef } = useElementSize({
     ref,
-    onUpdate: useCallback((entry) => {
-      setHeight(entry.borderBoxSize[0].blockSize);
-    }, []),
     disableWidth: true,
   });
   const variables = useMemo<CSSVariable<DefinedCSSVariableName>[]>(() => {
-    if (typeof height !== "number") {
+    if (Number.isNaN(height)) {
       return [];
     }
 
@@ -93,6 +89,6 @@ export function useLayoutAppBarHeight(
   return {
     height,
     variables,
-    appBarRef: targetRef,
+    appBarRef: elementRef,
   };
 }

package/src/link/_link.scss

@@ -26,40 +26,24 @@ $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;
 
-$var-lookup: (
-  color: (
-    var: --rmd-link-color,
-    value: $color,
-  ),
-  visited-color: (
-    var: --rmd-link-visited-color,
-    value: $visited-color,
-  ),
-  hover-color: (
-    var: --rmd-link-hover-color,
-    value: $hover-color,
-  ),
-);
+$variables: (color, visited-color, hover-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "link 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, "link");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "link var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "link")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -80,17 +64,17 @@ $var-lookup: (
   #{$property}: get-var(size) inset get-var(color);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $color);
+    @include set-var(visited-color, $visited-color);
+    @include set-var(hover-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);
 
@@ -104,6 +88,21 @@ $var-lookup: (
         @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);
@@ -128,9 +127,16 @@ $var-lookup: (
 
         &--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`
@@ -148,18 +153,19 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       disableTextChildren = false,
       height: propHeight = "auto",
       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

@@ -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/_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;
@@ -60,77 +62,36 @@ $item-media-large-size: 6.25rem !default;
 
 $item-keyline: 4.5rem !default;
 
-$var-lookup: (
-  horizontal-padding: (
-    var: --rmd-list-padding-h,
-    value: $horizontal-padding,
-  ),
-  vertical-padding: (
-    var: --rmd-list-padding-v,
-    value: $vertical-padding,
-  ),
-  item-keyline: (
-    var: --rmd-list-item-keyline,
-    value: $item-keyline,
-  ),
-  item-horizontal-padding: (
-    var: --rmd-list-item-padding-h,
-    value: $item-horizontal-padding,
-  ),
-  item-vertical-padding: (
-    var: --rmd-list-item-padding-v,
-    value: $item-vertical-padding,
-  ),
-  item-height: (
-    var: --rmd-list-item-height,
-    value: $item-height,
-  ),
-  item-medium-height: (
-    var: --rmd-list-item-medium-height,
-    value: $item-medium-height,
-  ),
-  item-large-height: (
-    var: --rmd-list-item-large-height,
-    value: $item-large-height,
-  ),
-  item-extra-large-height: (
-    var: --rmd-list-item-extra-large-height,
-    value: $item-extra-large-height,
-  ),
-  item-three-line-height: (
-    var: --rmd-list-item-three-line-height,
-    value: $item-three-line-height,
-  ),
-  item-media-size: (
-    var: --rmd-list-item-media-size,
-    value: $item-media-size,
-  ),
-  item-media-spacing: (
-    var: --rmd-list-item-media-spacing,
-    value: $item-media-spacing,
-  ),
-  text-three-line-height: (
-    var: --rmd-list-item-text-three-line-height,
-    value: $item-secondary-text-three-line-max-height,
-  ),
+$variables: (
+  horizontal-padding,
+  vertical-padding,
+  item-keyline,
+  item-horizontal-padding,
+  item-vertical-padding,
+  item-height,
+  item-medium-height,
+  item-large-height,
+  item-extra-large-height,
+  item-multiline-height,
+  item-media-size,
+  item-media-spacing,
+  item-text-multiline-height,
+  item-multiline-clamp
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "list 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, "list");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "list var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "list")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -147,6 +108,42 @@ $var-lookup: (
   );
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(horizontal-padding, $horizontal-padding);
+    @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 {
+      @include set-var(item-medium-height, $item-medium-height);
+    }
+    @if not $disable-large-height {
+      @include set-var(item-large-height, $item-large-height);
+    }
+    @if not $disable-extra-large-height {
+      @include set-var(item-extra-large-height, $item-extra-large-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-multiline-height,
+        $item-secondary-text-multiline-max-height
+      );
+    }
+
+    @if not $disable-item-media {
+      @include set-var(item-media-size, $item-media-size);
+      @include set-var(item-media-spacing, $item-media-spacing);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-list {
@@ -222,9 +219,9 @@ $var-lookup: (
         }
       }
 
-      @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));
         }
       }
 
@@ -241,12 +238,16 @@ $var-lookup: (
           @include theme.theme-use-var(color, text-secondary-color);
         }
 
-        &--clamped {
-          @include typography.line-clamp;
-          @include use-var(max-height, 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/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,5 +1,5 @@
-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.
@@ -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";