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

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,170 +108,212 @@ $var-lookup: (
   );
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-list {
-      @include utils.map-to-styles($typography-styles);
-      @include divider.set-var(inset, get-var(item-keyline));
-
-      list-style: none;
-      margin: 0;
-      padding: get-var(vertical-padding) get-var(horizontal-padding);
-
-      @if not $disable-horizontal {
-        &--horizontal {
-          display: flex;
-          flex-wrap: nowrap;
-          max-width: 100%;
-          overflow: auto;
-          padding: get-var(horizontal-padding) get-var(vertical-padding);
-        }
-      }
+    @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
+      );
     }
 
-    .rmd-list-item {
-      @include use-var(min-height, item-height);
+    @if not $disable-item-media {
+      @include set-var(item-media-size, $item-media-size);
+      @include set-var(item-media-spacing, $item-media-spacing);
+    }
+  }
+}
 
-      align-items: center;
-      display: flex;
-      padding: get-var(item-vertical-padding) get-var(item-horizontal-padding);
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(list, $disable-layer) {
+      .rmd-list {
+        @include utils.map-to-styles($typography-styles);
+        @include divider.set-var(inset, get-var(item-keyline));
 
-      &--clickable {
-        @include interaction.surface(
-          $disabled-selector: '&[aria-disabled="true"]'
-        );
-      }
+        list-style: none;
+        margin: 0;
+        padding: get-var(vertical-padding) get-var(horizontal-padding);
 
-      @if not $disable-item-link-styles {
-        &--link {
-          color: inherit;
-          text-decoration: none;
+        @if not $disable-horizontal {
+          &--horizontal {
+            display: flex;
+            flex-wrap: nowrap;
+            max-width: 100%;
+            overflow: auto;
+            padding: get-var(horizontal-padding) get-var(vertical-padding);
+          }
         }
       }
 
-      @if not $disable-item-disabled-color {
-        &--disabled-color {
-          @include theme.theme-set-var(
-            text-secondary-color,
-            theme.theme-get-var(text-disabled-color)
+      .rmd-list-item {
+        @include use-var(min-height, item-height);
+
+        align-items: center;
+        display: flex;
+        padding: get-var(item-vertical-padding) get-var(item-horizontal-padding);
+
+        &--clickable {
+          @include interaction.surface(
+            $disabled-selector: '&[aria-disabled="true"]'
           );
-          @include theme.theme-use-var(color, text-disabled-color);
         }
-      }
 
-      @if not $disable-item-disabled-opacity {
-        &--disabled-opacity {
-          opacity: $item-disabled-opacity;
+        @if not $disable-item-link-styles {
+          &--link {
+            color: inherit;
+            text-decoration: none;
+          }
         }
-      }
 
-      @if not $disable-medium-height {
-        &--medium {
-          @include set-var(item-height, get-var(item-medium-height));
+        @if not $disable-item-disabled-color {
+          &--disabled-color {
+            @include theme.theme-set-var(
+              text-secondary-color,
+              theme.theme-get-var(text-disabled-color)
+            );
+            @include theme.theme-use-var(color, text-disabled-color);
+          }
         }
-      }
 
-      @if not $disable-large-height {
-        &--large {
-          @include set-var(item-height, get-var(item-large-height));
+        @if not $disable-item-disabled-opacity {
+          &--disabled-opacity {
+            opacity: $item-disabled-opacity;
+          }
         }
-      }
 
-      @if not $disable-extra-large-height {
-        &--extra-large {
-          @include set-var(item-height, get-var(item-extra-large-height));
+        @if not $disable-medium-height {
+          &--medium {
+            @include set-var(item-height, get-var(item-medium-height));
+          }
         }
-      }
 
-      @if not $disable-three-line-height {
-        &--three-lines {
-          @include set-var(item-height, get-var(item-three-line-height));
+        @if not $disable-large-height {
+          &--large {
+            @include set-var(item-height, get-var(item-large-height));
+          }
         }
-      }
 
-      &__text {
-        @include typography.text-overflow;
-        @include utils.rtl {
-          margin-left: auto;
+        @if not $disable-extra-large-height {
+          &--extra-large {
+            @include set-var(item-height, get-var(item-extra-large-height));
+          }
         }
 
-        display: block;
-        flex-grow: 1;
-
-        &--secondary {
-          @include theme.theme-use-var(color, text-secondary-color);
+        @if not $disable-multiline-height {
+          &--multiline {
+            @include set-var(item-height, get-var(item-multiline-height));
+          }
         }
 
-        &--clamped {
-          @include typography.line-clamp;
-          @include use-var(max-height, text-three-line-height);
+        &__text {
+          @include typography.text-overflow;
+          @include utils.rtl {
+            margin-left: auto;
+          }
 
-          line-height: $item-secondary-text-line-height;
-          white-space: normal;
-        }
-      }
+          display: block;
+          flex-grow: 1;
 
-      &__addon {
-        flex-shrink: 0;
+          &--secondary {
+            @include theme.theme-use-var(color, text-secondary-color);
+          }
 
-        &--top {
-          align-self: flex-start;
-        }
+          @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);
+              }
 
-        &--bottom {
-          align-self: flex-end;
+              line-height: $item-secondary-text-line-height;
+              white-space: normal;
+            }
+          }
         }
 
-        &--before {
-          @include _addon-spacing(icon.get-var(size));
-        }
+        &__addon {
+          flex-shrink: 0;
 
-        @if not $disable-item-avatar {
-          &--avatar-before {
-            @include _addon-spacing(avatar.get-var(size));
+          &--top {
+            align-self: flex-start;
           }
-        }
 
-        @if not $disable-item-media {
-          &--media {
-            @include icon.set-var(spacing, get-var(item-media-spacing));
-            @include use-var(width, item-media-size);
+          &--bottom {
+            align-self: flex-end;
           }
 
-          &--media-centered {
-            align-items: center;
-            display: flex;
-            justify-content: center;
+          &--before {
+            @include _addon-spacing(icon.get-var(size));
+          }
+
+          @if not $disable-item-avatar {
+            &--avatar-before {
+              @include _addon-spacing(avatar.get-var(size));
+            }
           }
 
-          @if not $disable-item-media-large {
-            &--media-large {
-              @include set-var(item-media-size, $item-media-large-size);
+          @if not $disable-item-media {
+            &--media {
+              @include icon.set-var(spacing, get-var(item-media-spacing));
+              @include use-var(width, item-media-size);
+            }
+
+            &--media-centered {
+              align-items: center;
+              display: flex;
+              justify-content: center;
+            }
+
+            @if not $disable-item-media-large {
+              &--media-large {
+                @include set-var(item-media-size, $item-media-large-size);
+              }
             }
           }
         }
       }
-    }
 
-    @if not $disable-subheader {
-      .rmd-list-subheader {
-        @include utils.map-to-styles(typography.$subtitle-2-styles);
-        @include theme.theme-use-var(color, text-secondary-color);
-        @include use-var(height, item-height);
+      @if not $disable-subheader {
+        .rmd-list-subheader {
+          @include utils.map-to-styles(typography.$subtitle-2-styles);
+          @include theme.theme-use-var(color, text-secondary-color);
+          @include use-var(height, item-height);
 
-        align-items: center;
-        display: flex;
-        padding: get-var(item-vertical-padding)
-          get-var(item-horizontal-padding);
-
-        @if not $disable-subheader-inset {
-          &--inset {
-            @include utils.rtl {
-              @include use-var(padding-left, item-horizontal-padding);
-              @include use-var(padding-right, item-keyline);
-            }
+          align-items: center;
+          display: flex;
+          padding: get-var(item-vertical-padding)
+            get-var(item-horizontal-padding);
 
-            @include use-var(padding-left, item-keyline);
+          @if not $disable-subheader-inset {
+            &--inset {
+              @include utils.rtl {
+                @include use-var(padding-left, item-horizontal-padding);
+                @include use-var(padding-right, item-keyline);
+              }
+
+              @include use-var(padding-left, item-keyline);
+            }
           }
         }
       }

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
@@ -129,7 +138,14 @@ export interface ListItemChildrenAddonProps {
   disableRightAddonCenteredMedia?: boolean;
 }
 
-export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
+/**
+ * Note: This interface was added since there are components that replace the
+ * {@link ListItemChildrenAddonProps} with renamed versions but should still
+ * support everything for rendering text.
+ *
+ * @remarks \@since 6.0.0
+ */
+export interface ListItemChildrenTextProps {
   /**
    * The main content to display. When the `textChildren` prop is enabled and
    * there is child content, it will be treated as primary text and update the
@@ -196,10 +212,16 @@ 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;
 }
+
+export interface ListItemChildrenProps
+  extends ListItemChildrenTextProps,
+    ListItemChildrenAddonProps {}

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";
@@ -26,6 +26,7 @@ import {
 } from "../transition/useScaleTransition.js";
 import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import {
   MenuConfigurationProvider,
   useMenuConfiguration,
@@ -449,7 +450,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       },
     });
 
-    const { ref, style, callbacks } = useFixedPositioning({
+    const { ref, style, callbacks, updateStyle } = useFixedPositioning({
       ...transitionOptions,
       onEnter,
       style: isSheet ? propStyle : menuStyle,
@@ -539,6 +540,13 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
         window.removeEventListener("click", callback);
       };
     }, [disableHoverMode, role, visible]);
+    useIsomorphicLayoutEffect(() => {
+      if (!visible) {
+        return;
+      }
+
+      updateStyle();
+    }, [updateStyle, children, visible]);
 
     return (
       <MenuConfigurationProvider