npm - @react-md/core - Versions diffs - 1.0.0-next.2 → 1.0.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (752) hide show

package/dist/list/_list.scss CHANGED Viewed

@@ -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/dist/list/listItemStyles.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ export interface ListItemClassNameOptions {
     /**
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
     /**
      * @defaultValue `false`
      */
@@ -98,6 +98,14 @@ 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;
 }
 /**
  *

package/dist/list/listItemStyles.js CHANGED Viewed

@@ -5,11 +5,11 @@ const styles = bem("rmd-list-item");
 /**
  * @remarks \@since 6.0.0
  */ export function listItem(options = {}) {
-    const { className, link = false, height = "auto", clickable = true, threeLines = false, disabled = false, disabledOpacity = false, pressedClassName } = options;
+    const { className, link = false, height = "auto", clickable = true, multiline = false, disabled = false, disabledOpacity = false, pressedClassName } = options;
     return cnb(styles({
         link,
         [height]: height !== "auto",
-        "three-lines": threeLines,
+        multiline,
         "disabled-color": disabled && !disabledOpacity,
         "disabled-opacity": disabled && disabledOpacity
     }), cssUtils({
@@ -29,13 +29,13 @@ const styles = bem("rmd-list-item");
  *
  * @remarks \@since 6.0.0
  */ export function listItemAddon(options = {}) {
-    const { type = "icon", position = "middle", className, addonAfter = false, disableCenteredMedia = false } = options;
+    const { type = "icon", position = "middle", className, addonAfter = false, disableCenteredMedia = false, disableBeforeSpacing = false } = options;
     const isMedia = type === "media" || type === "large-media";
     const isAvatar = type === "avatar";
     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/dist/list/listItemStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type {\n ListItemAddonPosition,\n ListItemAddonType,\n ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @remarks \\@since 6.0.0 /\nexport interface ListItemClassNameOptions {\n className?: string;\n /\n @see {@link ListItemHeight}\n * @defaultValue `\"auto\"`\n /\n height?: ListItemHeight;\n\n /\n @defaultValue `false`\n /\n ~~threeLines~~?: boolean;\n\n /\n @defaultValue `false`\n /\n disabled?: boolean;\n\n /\n Note: This does nothing if the `disabled` prop is not enabled.\n \n @defaultValue `false`\n * @remarks \\@since 2.4.3\n /\n disabledOpacity?: boolean;\n\n /\n Set this to `false` if the list item should not gain the interaction\n * states: hover, focus, press, etc. This is kind of like being disabled\n * without the disabled styles being applied.\n \n @defaultValue `true`\n /\n clickable?: boolean;\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface InternalListItemClassNameOptions\n extends ListItemClassNameOptions {\n /\n @defaultValue `false`\n /\n link?: boolean;\n\n /\n This is prop is used internally when integrating with the\n * {@link useElementInteraction} hook.\n /\n pressedClassName?: string;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport function listItem(\n options: InternalListItemClassNameOptions = {}\n): string {\n const {\n className,\n link = false,\n height = \"auto\",\n clickable = true,\n ~~threeLines~~ = false,\n disabled = false,\n disabledOpacity = false,\n pressedClassName,\n } = options;\n\n return cnb(\n styles({\n link,\n [height]: height !== \"auto\",\n ~~\"three-lines\": threeLines~~,\n \"disabled-color\": disabled && !disabledOpacity,\n \"disabled-opacity\": disabled && disabledOpacity,\n }),\n cssUtils({ surface: clickable }),\n pressedClassName,\n className\n );\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemTextClassNameOptions {\n className?: string;\n /\n @defaultValue `false`\n /\n clamped?: boolean;\n\n /\n @defaultValue `false`\n /\n secondary?: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport function listItemText(\n options: ListItemTextClassNameOptions = {}\n): string {\n const { className, secondary = false, clamped = false } = options;\n\n return cnb(\n styles(\"text\", {\n clamped: secondary && clamped,\n secondary,\n }),\n className\n );\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemAddonClassNameOptions {\n className?: string;\n\n /\n The addon type that is used to adjust the spacing styles.\n \n @defaultValue `\"icon\"`\n /\n type?: ListItemAddonType;\n\n /\n The vertical position to use for the addon.\n \n @defaultValue `\"middle\"`\n /\n position?: ListItemAddonPosition;\n\n /\n Boolean if the addon should appear after the `children`.\n \n @defaultValue `false`\n /\n addonAfter?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableCenteredMedia?: boolean;\n}\n\n/\n \n * @remarks \\@since 6.0.0\n */\nexport function listItemAddon(\n options: ListItemAddonClassNameOptions = {}\n): string {\n const {\n type = \"icon\",\n position = \"middle\",\n className,\n addonAfter = false,\n disableCenteredMedia = false,\n } = options;\n\n const isMedia = type === \"media\" \|\| type === \"large-media\";\n const isAvatar = type === \"avatar\";\n\n return cnb(\n styles(\"addon\", {\n [position]: position !== \"middle\",\n before: !addonAfter,\n \"avatar-before\": !addonAfter && isAvatar,\n media: isMedia,\n \"media-large\": type === \"large-media\",\n \"media-centered\": isMedia && !disableCenteredMedia,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","~~threeLines~~","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAOtC,MAAMC,SAASD,IAAI;AAsDnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,~~aAAa~~,KAAK,~~EAClBC~~,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;~~QACrB,eAAeE~~;~~QACf~~,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;~~AA2CA~~;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC7B,~~GAAGjB~~;IAEJ,~~MAAMkB~~,~~UAAUJ~~,SAAS,WAAWA,SAAS;IAC7C,~~MAAMK~~,~~WAAWL~~,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;~~QACzBK~~,QAAQ,~~CAACJ~~;~~QACT~~,iBAAiB,~~CAACA~~,~~cAAcG~~;~~QAChCE~~,OAAOH;QACP,~~eAAeJ~~,SAAS;QACxB,~~kBAAkBI~~,WAAW,~~CAACD~~;IAChC,IACAhB;AAEJ"}
1	+ {"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type {\n ListItemAddonPosition,\n ListItemAddonType,\n ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @remarks \\@since 6.0.0 /\nexport interface ListItemClassNameOptions {\n className?: string;\n /\n @see {@link ListItemHeight}\n * @defaultValue `\"auto\"`\n /\n height?: ListItemHeight;\n\n /\n @defaultValue `false`\n /\n multiline?: boolean;\n\n /\n @defaultValue `false`\n /\n disabled?: boolean;\n\n /\n Note: This does nothing if the `disabled` prop is not enabled.\n \n @defaultValue `false`\n * @remarks \\@since 2.4.3\n /\n disabledOpacity?: boolean;\n\n /\n Set this to `false` if the list item should not gain the interaction\n * states: hover, focus, press, etc. This is kind of like being disabled\n * without the disabled styles being applied.\n \n @defaultValue `true`\n /\n clickable?: boolean;\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface InternalListItemClassNameOptions\n extends ListItemClassNameOptions {\n /\n @defaultValue `false`\n /\n link?: boolean;\n\n /\n This is prop is used internally when integrating with the\n * {@link useElementInteraction} hook.\n /\n pressedClassName?: string;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport function listItem(\n options: InternalListItemClassNameOptions = {}\n): string {\n const {\n className,\n link = false,\n height = \"auto\",\n clickable = true,\n multiline = false,\n disabled = false,\n disabledOpacity = false,\n pressedClassName,\n } = options;\n\n return cnb(\n styles({\n link,\n [height]: height !== \"auto\",\n multiline,\n \"disabled-color\": disabled && !disabledOpacity,\n \"disabled-opacity\": disabled && disabledOpacity,\n }),\n cssUtils({ surface: clickable }),\n pressedClassName,\n className\n );\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemTextClassNameOptions {\n className?: string;\n /\n @defaultValue `false`\n /\n clamped?: boolean;\n\n /\n @defaultValue `false`\n /\n secondary?: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport function listItemText(\n options: ListItemTextClassNameOptions = {}\n): string {\n const { className, secondary = false, clamped = false } = options;\n\n return cnb(\n styles(\"text\", {\n clamped: secondary && clamped,\n secondary,\n }),\n className\n );\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemAddonClassNameOptions {\n className?: string;\n\n /\n The addon type that is used to adjust the spacing styles.\n \n @defaultValue `\"icon\"`\n /\n type?: ListItemAddonType;\n\n /\n The vertical position to use for the addon.\n \n @defaultValue `\"middle\"`\n /\n position?: ListItemAddonPosition;\n\n /\n Boolean if the addon should appear after the `children`.\n \n @defaultValue `false`\n /\n addonAfter?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableCenteredMedia?: boolean;\n\n /\n Set this to `true` to disable the additional spacing applied to the addons\n * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n * value is used instead.\n \n @defaultValue `false`\n /\n disableBeforeSpacing?: boolean;\n}\n\n/\n \n * @remarks \\@since 6.0.0\n */\nexport function listItemAddon(\n options: ListItemAddonClassNameOptions = {}\n): string {\n const {\n type = \"icon\",\n position = \"middle\",\n className,\n addonAfter = false,\n disableCenteredMedia = false,\n disableBeforeSpacing = false,\n } = options;\n\n const isMedia = type === \"media\" \|\| type === \"large-media\";\n const isAvatar = type === \"avatar\";\n\n return cnb(\n styles(\"addon\", {\n [position]: position !== \"middle\",\n before: !disableBeforeSpacing && !addonAfter,\n \"avatar-before\": !disableBeforeSpacing && !addonAfter && isAvatar,\n media: isMedia,\n \"media-large\": type === \"large-media\",\n \"media-centered\": isMedia && !disableCenteredMedia,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","multiline","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","disableBeforeSpacing","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAOtC,MAAMC,SAASD,IAAI;AAsDnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrBE;QACA,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;AAoDA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC5BC,uBAAuB,KAAK,EAC7B,GAAGlB;IAEJ,MAAMmB,UAAUL,SAAS,WAAWA,SAAS;IAC7C,MAAMM,WAAWN,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBM,QAAQ,CAACH,wBAAwB,CAACF;QAClC,iBAAiB,CAACE,wBAAwB,CAACF,cAAcI;QACzDE,OAAOH;QACP,eAAeL,SAAS;QACxB,kBAAkBK,WAAW,CAACF;IAChC,IACAhB;AAEJ"}

package/dist/list/types.d.ts CHANGED Viewed

@@ -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.
  *
@@ -48,6 +48,14 @@ export interface ListItemChildrenAddonProps {
      * @remarks \@since 6.0.0
      */
     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
@@ -165,10 +173,12 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
     secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     /**
      * 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/dist/list/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport type { PropsWithRef } from \"../types.js\";\n\n/*\n The height to apply to the list item.\n \n Conversions:\n \n - height !== \"auto\" -> height\n * - secondaryText or left/right addon is media/media-large -> \"extra-large\"\n * - left/right addon is avatar -> \"large\"\n * - left/right addon is icon -> \"medium\"\n * - no addons and no secondary text -> \"normal\"\n /\nexport type ListItemHeight =\n \| \"auto\"\n \| \"normal\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" \| \"middle\" \| \"bottom\";\nexport type ListItemAddonType = \"icon\" \| \"avatar\" \| \"media\" \| \"large-media\";\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemChildrenAddonProps {\n /\n An optional addon to display to the left of the `primaryText` or\n * `children` and should be used with the `leftAddonType` prop to adjust\n * spacing.\n /\n leftAddon?: ReactNode;\n\n /\n The type of the addon that appears to the left of the `primaryText` or\n * `children`.\n \n @defaultValue `\"icon\"`\n /\n leftAddonType?: ListItemAddonType;\n\n /\n The vertical position the left icon, avatar, media, or large media\n * should be placed.\n \n @defaultValue `\"middle\"`\n /\n leftAddonPosition?: ListItemAddonPosition;\n\n /\n @remarks \\@since 6.0.0\n /\n leftAddonClassName?: string;\n\n /\n Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n \n @defaultValue `leftAddonType === \"media\" \|\| leftAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n /\n leftAddonForceWrap?: boolean;\n\n /\n An optional addon to display to the right of the `primaryText` or\n * `children` and should be used with the `rightAddonType` prop to adjust\n * spacing.\n /\n rightAddon?: ReactNode;\n\n /\n The type of the addon that appears to the right of the `primaryText` or\n * `children`.\n \n @defaultValue `\"icon\"`\n /\n rightAddonType?: ListItemAddonType;\n\n /\n The vertical position the right icon, avatar, media, or large media\n * should be placed.\n \n @defaultValue `\"middle\"`\n /\n rightAddonPosition?: ListItemAddonPosition;\n\n /\n @remarks \\@since 6.0.0\n /\n rightAddonClassName?: string;\n\n /\n Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n \n @defaultValue `rightAddonType === \"media\" \|\| rightAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n /\n rightAddonForceWrap?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableLeftAddonCenteredMedia?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableRightAddonCenteredMedia?: boolean;\n}\n\nexport interface ListItemChildrenProps extends ListItemChildrenAddonProps {\n /\n The main content to display. When the `textChildren` prop is enabled and\n * there is child content, it will be treated as primary text and update the\n * styles automatically.\n /\n children?: ReactNode;\n\n /\n Any additional props that should be passed to the `<span>` surrounding\n * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n \n @remarks \\@since 6.0.0\n /\n textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n /\n An optional className to apply to the `<span>` that surrounds the\n * `primaryText` and optionally `secondaryText` within the list item.\n /\n textClassName?: string;\n\n /\n An optional className to apply to the `<span>` that surrounds the\n * `secondaryText` within the list item.\n /\n secondaryTextClassName?: string;\n\n /\n Set this to `true` if the {@link children} should not automatically be\n * wrapped in the `ListItemText` component.\n \n @remarks \\@since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n * @defaultValue `false`\n /\n disableTextChildren?: boolean;\n\n /\n An optional element that should be rendered as the `primaryText` within the\n * list item. It is most likely easier to use the `children` prop instead, but\n * this allows you to create more complex components with the `ListItem` since\n * you can provided `children` and have the styles for the `primaryText` still\n * applied. By default, this will only allow one line of text and add ellipsis\n * for any text overflow.\n /\n primaryText?: ReactNode;\n\n /\n An optional element that should be rendered as the `secondaryText` within\n * the list item. By default, this will only span one line and add ellipsis\n * for overflow.\n /\n secondaryText?: ReactNode;\n\n /\n Any additional props that should be passed to the `<span>` surrounding\n * the {@link secondaryText}.\n \n @remarks \\@since 6.0.0\n /\n secondaryTextProps?: PropsWithRef<\n HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n >;\n\n /\n Set this to `true` to allow the {@link secondaryText} to span multiple\n * lines and use the CSS clamp after two lines of text are visible.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n * @defaultValue `false`\n */\n ~~threeLines~~?: boolean;\n}\n"],"names":[],"mappings":"~~AAmIA~~,~~WAyEC~~"}
1	+ {"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/*\n The height to apply to the list item.\n \n Conversions:\n \n - height !== \"auto\" -> height\n * - secondaryText or left/right addon is media/media-large -> \"extra-large\"\n * - left/right addon is avatar -> \"large\"\n * - left/right addon is icon -> \"medium\"\n * - no addons and no secondary text -> \"normal\"\n /\nexport type ListItemHeight =\n \| \"auto\"\n \| \"normal\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" \| \"middle\" \| \"bottom\";\nexport type ListItemAddonType = \"icon\" \| \"avatar\" \| \"media\" \| \"large-media\";\n\n/* @remarks \\@since 6.0.0 /\nexport interface ListItemChildrenAddonProps {\n /\n An optional addon to display to the left of the `primaryText` or\n * `children` and should be used with the `leftAddonType` prop to adjust\n * spacing.\n /\n leftAddon?: ReactNode;\n\n /\n The type of the addon that appears to the left of the `primaryText` or\n * `children`.\n \n @defaultValue `\"icon\"`\n /\n leftAddonType?: ListItemAddonType;\n\n /\n The vertical position the left icon, avatar, media, or large media\n * should be placed.\n \n @defaultValue `\"middle\"`\n /\n leftAddonPosition?: ListItemAddonPosition;\n\n /\n @remarks \\@since 6.0.0\n /\n leftAddonClassName?: string;\n\n /\n Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n \n @defaultValue `leftAddonType === \"media\" \|\| leftAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n /\n leftAddonForceWrap?: boolean;\n\n /\n Set this to `true` to disable the additional spacing applied to the addons\n * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n * value is used instead.\n \n @defaultValue `false`\n /\n disableLeftAddonSpacing?: boolean;\n\n /\n An optional addon to display to the right of the `primaryText` or\n * `children` and should be used with the `rightAddonType` prop to adjust\n * spacing.\n /\n rightAddon?: ReactNode;\n\n /\n The type of the addon that appears to the right of the `primaryText` or\n * `children`.\n \n @defaultValue `\"icon\"`\n /\n rightAddonType?: ListItemAddonType;\n\n /\n The vertical position the right icon, avatar, media, or large media\n * should be placed.\n \n @defaultValue `\"middle\"`\n /\n rightAddonPosition?: ListItemAddonPosition;\n\n /\n @remarks \\@since 6.0.0\n /\n rightAddonClassName?: string;\n\n /\n Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n \n @defaultValue `rightAddonType === \"media\" \|\| rightAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n /\n rightAddonForceWrap?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableLeftAddonCenteredMedia?: boolean;\n\n /\n The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n \n When this is set to `true`, the flex styles will not be applied.\n \n @defaultValue `false`\n * @remarks \\@since 6.0.0\n /\n disableRightAddonCenteredMedia?: boolean;\n}\n\nexport interface ListItemChildrenProps extends ListItemChildrenAddonProps {\n /\n The main content to display. When the `textChildren` prop is enabled and\n * there is child content, it will be treated as primary text and update the\n * styles automatically.\n /\n children?: ReactNode;\n\n /\n Any additional props that should be passed to the `<span>` surrounding\n * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n \n @remarks \\@since 6.0.0\n /\n textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n /\n An optional className to apply to the `<span>` that surrounds the\n * `primaryText` and optionally `secondaryText` within the list item.\n /\n textClassName?: string;\n\n /\n An optional className to apply to the `<span>` that surrounds the\n * `secondaryText` within the list item.\n /\n secondaryTextClassName?: string;\n\n /\n Set this to `true` if the {@link children} should not automatically be\n * wrapped in the `ListItemText` component.\n \n @remarks \\@since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n * @defaultValue `false`\n /\n disableTextChildren?: boolean;\n\n /\n An optional element that should be rendered as the `primaryText` within the\n * list item. It is most likely easier to use the `children` prop instead, but\n * this allows you to create more complex components with the `ListItem` since\n * you can provided `children` and have the styles for the `primaryText` still\n * applied. By default, this will only allow one line of text and add ellipsis\n * for any text overflow.\n /\n primaryText?: ReactNode;\n\n /\n An optional element that should be rendered as the `secondaryText` within\n * the list item. By default, this will only span one line and add ellipsis\n * for overflow.\n /\n secondaryText?: ReactNode;\n\n /\n Any additional props that should be passed to the `<span>` surrounding\n * the {@link secondaryText}.\n \n @remarks \\@since 6.0.0\n /\n secondaryTextProps?: PropsWithRef<\n HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n >;\n\n /\n Set this to `true` to allow the {@link secondaryText} to span multiple\n * lines and use the CSS clamp after two lines of text are visible. The number\n * of lines can be configured by `core.$list-item-multiline-clamp` or\n * `@include core.list-set-var(item-multiline-clamp, $new-value)`.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n * @defaultValue `false`\n */\n multiline?: boolean;\n}\n"],"names":[],"mappings":"AA4IA,WA2EC"}

package/dist/menu/Menu.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type CSSProperties, type HTMLAttributes } from "react";
-import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.jsx";
+import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.js";
 import { type ListElement, type ListProps } from "../list/List.js";
 import { type GetDefaultFocusedIndex } from "../movement/types.js";
 import { type CalculateFixedPositionOptions } from "../positioning/types.js";

package/dist/menu/Menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useEffect,\n useRef,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.jsx\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n useFixedPositioning,\n type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n useScaleTransition,\n type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n MenuConfigurationProvider,\n useMenuConfiguration,\n type MenuConfiguration,\n type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string \| number;\n \"--rmd-menu-spacing\"?: string \| number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @remarks \\@since 5.0.0 /\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" \| \"vertical\" \| \"nodeRef\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /\n @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n /\n temporary?: boolean;\n\n /\n @defaultValue `false`\n /\n disablePortal?: boolean;\n\n /\n Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n \n @defaultValue `false`\n /\n disableElevation?: boolean;\n\n /\n @defaultValue `false`\n /\n disableTransition?: boolean;\n\n /\n @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n /\n transformOrigin?: boolean;\n\n /\n Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n \n @defaultValue `false`\n /\n closeOnScroll?: boolean;\n\n /\n Boolean if the page should no longer be scrollable while the menu is\n * visible.\n \n @defaultValue `false`\n /\n preventScroll?: boolean;\n\n /\n Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n \n @defaultValue `false`\n /\n closeOnResize?: boolean;\n\n /* @see {@link FixedPositioningOptions.getFixedPositionOptions} /\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/\n @remarks\n * \\@since 5.1.0\n * \\@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n /\nexport interface MenuListConvenienceProps {\n /\n An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n /\n listStyle?: CSSProperties;\n\n /\n An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n /\n listClassName?: string;\n\n /\n Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n /\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /\n This can be used to apply additional props to the `Menu` component.\n \n Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n \n @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n /\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n \| \"children\"\n \| \"fixedTo\"\n \| \"visible\"\n \| \"onRequestClose\"\n \| \"getDefaultFocusedIndex\"\n >,\n HTMLDivElement\n >;\n\n /\n Convenience prop to apply custom style to the `Menu` component.\n /\n menuStyle?: CSSProperties;\n\n /\n Convenience prop to apply custom class name to the `Menu` component.\n /\n menuClassName?: string;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" \| \"onResize\"\n>;\n\n/\n @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n /\nexport interface MenuProps\n extends HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose(): void;\n\n /\n @defaultValue `\"menu-\" + useId()`\n /\n id?: string;\n\n /\n This is used to set the default focus index when the menu is visible.\n \n @internal\n /\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /\n Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n /\n menuStyle?: CSSProperties;\n\n /\n Custom class name that should be applied only while not rendered within a\n * sheet.\n /\n menuClassName?: string;\n\n /\n @internal\n \n This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n /\n floating?: FloatingActionButtonPosition;\n}\n\n/\n Client Component\n \n This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n \n @see The `useContextMenu` hook for an example.\n \n @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true \|\| (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExited() {\n onExited();\n entered.current = false;\n },\n onExiting,\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled \|\|\n cancelUnmountFocus.current \|\|\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks } = useFixedPositioning({\n ...transitionOptions,\n onEnter,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible \|\| closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n nodeRef: ref,\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet \|\| disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n onExit,\n onExiting: transitionOptions.onExiting,\n exitedHidden: true,\n ...callbacks,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) \|\|\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet \|\| (propDisablePortal ?? disablePortal)}>\n {(rendered \|\| isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n useEffect,\n useRef,\n type CSSProperties,\n type HTMLAttributes,\n} from \"react\";\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n useFixedPositioning,\n type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n useScaleTransition,\n type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n MenuConfigurationProvider,\n useMenuConfiguration,\n type MenuConfiguration,\n type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string \| number;\n \"--rmd-menu-spacing\"?: string \| number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @remarks \\@since 5.0.0 /\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" \| \"vertical\" \| \"nodeRef\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /\n @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n /\n temporary?: boolean;\n\n /\n @defaultValue `false`\n /\n disablePortal?: boolean;\n\n /\n Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n \n @defaultValue `false`\n /\n disableElevation?: boolean;\n\n /\n @defaultValue `false`\n /\n disableTransition?: boolean;\n\n /\n @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n /\n transformOrigin?: boolean;\n\n /\n Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n \n @defaultValue `false`\n /\n closeOnScroll?: boolean;\n\n /\n Boolean if the page should no longer be scrollable while the menu is\n * visible.\n \n @defaultValue `false`\n /\n preventScroll?: boolean;\n\n /\n Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n \n @defaultValue `false`\n /\n closeOnResize?: boolean;\n\n /* @see {@link FixedPositioningOptions.getFixedPositionOptions} /\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/\n @remarks\n * \\@since 5.1.0\n * \\@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n /\nexport interface MenuListConvenienceProps {\n /\n An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n /\n listStyle?: CSSProperties;\n\n /\n An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n /\n listClassName?: string;\n\n /\n Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n /\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /\n This can be used to apply additional props to the `Menu` component.\n \n Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n \n @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n /\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n \| \"children\"\n \| \"fixedTo\"\n \| \"visible\"\n \| \"onRequestClose\"\n \| \"getDefaultFocusedIndex\"\n >,\n HTMLDivElement\n >;\n\n /\n Convenience prop to apply custom style to the `Menu` component.\n /\n menuStyle?: CSSProperties;\n\n /\n Convenience prop to apply custom class name to the `Menu` component.\n /\n menuClassName?: string;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" \| \"onResize\"\n>;\n\n/\n @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n /\nexport interface MenuProps\n extends HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose(): void;\n\n /\n @defaultValue `\"menu-\" + useId()`\n /\n id?: string;\n\n /\n This is used to set the default focus index when the menu is visible.\n \n @internal\n /\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /\n Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n /\n menuStyle?: CSSProperties;\n\n /\n Custom class name that should be applied only while not rendered within a\n * sheet.\n /\n menuClassName?: string;\n\n /\n @internal\n \n This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n /\n floating?: FloatingActionButtonPosition;\n}\n\n/\n Client Component\n \n This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n \n @see The `useContextMenu` hook for an example.\n \n @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true \|\| (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExited() {\n onExited();\n entered.current = false;\n },\n onExiting,\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled \|\|\n cancelUnmountFocus.current \|\|\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks } = useFixedPositioning({\n ...transitionOptions,\n onEnter,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible \|\| closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n nodeRef: ref,\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet \|\| disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n onExit,\n onExiting: transitionOptions.onExiting,\n exitedHidden: true,\n ...callbacks,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) \|\|\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet \|\| (propDisablePortal ?? disablePortal)}>\n {(rendered \|\| isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}

package/dist/menu/_menu.scss CHANGED Viewed

@@ -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,
@@ -82,6 +68,9 @@ $variables: (background-color, color, min-width, 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/dist/portal/PortalContainerProvider.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type RefObject } from "react";
 /**
  * @internal
  * @remarks \@since 6.0.0
@@ -17,7 +17,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;
 }
 /**

package/dist/portal/PortalContainerProvider.js CHANGED Viewed

@@ -27,6 +27,10 @@ const { Provider } = context;
     const { container, children } = props;
     const [value, setValue] = useState(portalContainer);
     useEffect(()=>{
+        if (container && "current" in container) {
+            setValue(container.current);
+            return;
+        }
         if (typeof container !== "undefined") {
             return;
         }
@@ -46,8 +50,9 @@ const { Provider } = context;
     }, [
         container
     ]);
+    const containerValue = container && "current" in container || !container ? value : container;
     return /*#__PURE__*/ _jsx(Provider, {
-        value: container ?? value,
+        value: containerValue,
         children: children
     });
 }

package/dist/portal/PortalContainerProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\n/*\n @internal\n * @remarks \\@since 6.0.0\n /\nexport type PortalContainer = Element \| DocumentFragment \| null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/\n @internal\n * @remarks \\@since 6.0.0\n /\nexport function usePortalContainer(): PortalContainer {\n return useContext(context);\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface PortalContainerProviderProps {\n /\n An optional container element to use. When this is `undefined`, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n /\n container?: PortalContainer;\n children: ReactNode;\n}\n\n/\n Client Component\n \n This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n \n @see {@link Portal}\n * @remarks \\@since 6.0.0\n */\nexport function PortalContainerProvider(\n props: PortalContainerProviderProps\n): ReactElement {\n const { container, children } = props;\n const [value, setValue] = useState<PortalContainer>(portalContainer);\n useEffect(() => {\n if (typeof container !== \"undefined\") {\n return;\n }\n\n if (!portalContainer) {\n portalContainer = document.createElement(\"div\");\n portalContainer.id = PORTAL_CONTAINER_ID;\n }\n if (!document.body.contains(portalContainer)) {\n document.body.appendChild(portalContainer);\n }\n\n setValue(portalContainer);\n\n return () => {\n if (portalContainer && document.body.contains(portalContainer)) {\n document.body.removeChild(portalContainer);\n }\n };\n }, [container]);\n\n return <Provider value={~~container ?? value~~}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","createElement","id","contains","appendChild","removeChild"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,~~QAGH~~,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAI,~~OAAOc~~,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,~~SAASY~~,aAAa,CAAC;~~YACzCf~~,~~gBAAgBgB~~,EAAE,~~GAAGjB~~;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,~~CAACa~~,QAAQ,~~CAACjB~~,kBAAkB;YAC5CG,SAASC,IAAI,~~CAACc~~,WAAW,~~CAAClB~~;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,~~CAACa~~,QAAQ,~~CAACjB~~,kBAAkB;gBAC9DG,SAASC,IAAI,~~CAACe~~,WAAW,~~CAACnB~~;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,qBAAO,KAACJ;QAASM,~~OAAOF,aAAaE~~;~~kBAAQD~~;;~~AAC/C~~"}
1	+ {"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n type RefObject,\n} from \"react\";\n\n/*\n @internal\n * @remarks \\@since 6.0.0\n /\nexport type PortalContainer = Element \| DocumentFragment \| null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/\n @internal\n * @remarks \\@since 6.0.0\n /\nexport function usePortalContainer(): PortalContainer {\n return useContext(context);\n}\n\n/* @remarks \\@since 6.0.0 /\nexport interface PortalContainerProviderProps {\n /\n An optional container element to use. When this is `undefined`, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n /\n container?: PortalContainer \| RefObject<PortalContainer>;\n children: ReactNode;\n}\n\n/\n Client Component\n \n This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n \n @see {@link Portal}\n * @remarks \\@since 6.0.0\n */\nexport function PortalContainerProvider(\n props: PortalContainerProviderProps\n): ReactElement {\n const { container, children } = props;\n const [value, setValue] = useState<PortalContainer>(portalContainer);\n useEffect(() => {\n if (container && \"current\" in container) {\n setValue(container.current);\n return;\n }\n\n if (typeof container !== \"undefined\") {\n return;\n }\n\n if (!portalContainer) {\n portalContainer = document.createElement(\"div\");\n portalContainer.id = PORTAL_CONTAINER_ID;\n }\n if (!document.body.contains(portalContainer)) {\n document.body.appendChild(portalContainer);\n }\n\n setValue(portalContainer);\n\n return () => {\n if (portalContainer && document.body.contains(portalContainer)) {\n document.body.removeChild(portalContainer);\n }\n };\n }, [container]);\n\n const containerValue =\n (container && \"current\" in container) \|\| !container ? value : container;\n return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAIH,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}

package/dist/sheet/styles.d.ts CHANGED Viewed

@@ -6,28 +6,27 @@ 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";
 /**
  * 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";
 /** @remarks \@since 6.0.0 */

package/dist/sheet/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-sheet\");\n\n/*\n The location that the sheet should be located within the viewport.\n /\nexport type SheetPosition = \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n\n/\n The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n \n - none - the size is based on content, but is still limited to the ~~viewport~~\n * width so that the horizontal scrolling will not occur within the page. No\n * limits added to sizing.\n * - touch - the `~~min-~~width` is set to be the entire viewport width minus a\n * touchable area and ~~`max-width`~~ is ~~set to `20rem` and is~~ normally\n * recommended for mobile devices.\n * - static - the width is set to a static `16rem` and generally used for\n * landscape tablets and desktops.\n * - media - automatically switches between \"touch\" and \"static\" based on ~~css~~\n * media queries. (this is the default)\n /\nexport type SheetHorizontalSize = \"none\" \| \"media\" \| \"touch\" \| \"static\";\n\n/\n The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n \n - none - the size is based on content and is limited to the viewport\n * height.\n * - touch - the size is based on content and is limited to the viewport\n * height ~~with~~ a touchable area ~~to close the sheet.\~~n * - recommended - the material design recommended sizing that forces a\n * max-height of 50vh and min-height of 3.5rem\n /\nexport type SheetVerticalSize = \"none\" \| \"touch\" \| \"recommended\";\n\n/* @remarks \\@since 6.0.0 /\nexport interface BaseSheetClassNameOptions {\n className?: string;\n\n /\n @defaultValue `\"left\"`\n /\n position?: SheetPosition;\n\n /\n @defaultValue `\"media\"`\n /\n horizontalSize?: SheetHorizontalSize;\n\n /\n @defaultValue `\"recommended\"`\n /\n verticalSize?: SheetVerticalSize;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n offscreen?: boolean;\n disableOverlay?: boolean;\n}\n\n/* @remarks \\@since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n const {\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n offscreen = false,\n disableOverlay,\n className,\n } = options;\n const horizontal = position === \"left\" \|\| position === \"right\";\n\n return cnb(\n styles({\n horizontal,\n vertical: !horizontal,\n raised: !disableOverlay,\n offscreen,\n [position]: true,\n \"media-width\": horizontal && horizontalSize === \"media\",\n \"touch-width\": horizontal && horizontalSize === \"touch\",\n \"static-width\": horizontal && horizontalSize === \"static\",\n \"viewport-height\": !horizontal && verticalSize === \"none\",\n \"touchable-height\": !horizontal && verticalSize === \"touch\",\n \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","disableOverlay","className","horizontal","vertical","raised"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;~~AAkEnB~~,2BAA2B,GAC3B,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,cAAc,EACdC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOL,IACLE,OAAO;QACLS;QACAC,UAAU,CAACD;QACXE,QAAQ,CAACJ;QACTD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}
1	+ {"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-sheet\");\n\n/*\n The location that the sheet should be located within the viewport.\n /\nexport type SheetPosition = \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n\n/\n The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n \n - `\"none\"` - the size is based on content, but is still limited to the\n * viewport width so that the horizontal scrolling will not occur within the\n * page. No limits added to sizing.\n * - `\"touch\"` - the `width` is set to be the entire viewport width minus a\n * touchable area and is normally recommended for mobile devices.\n * - `\"static\"` - the `width` is set to a static `16rem` and generally used for\n * landscape tablets and desktops.\n * - `\"media\"` - automatically switches between \"touch\" and \"static\" based on\n * css media queries. (this is the default)\n /\nexport type SheetHorizontalSize = \"none\" \| \"media\" \| \"touch\" \| \"static\";\n\n/\n The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n \n - `\"none\"` - the size is based on content and is limited to the viewport\n * height\n * - `\"touch\"` - the size is based on content and is limited to the viewport\n * height minus a small touchable area\n * - `\"recommended\"` - the material design recommended sizing that forces a\n * `max-height` of 50vh and `min-height` of 3.5rem\n /\nexport type SheetVerticalSize = \"none\" \| \"touch\" \| \"recommended\";\n\n/* @remarks \\@since 6.0.0 /\nexport interface BaseSheetClassNameOptions {\n className?: string;\n\n /\n @defaultValue `\"left\"`\n /\n position?: SheetPosition;\n\n /\n @defaultValue `\"media\"`\n /\n horizontalSize?: SheetHorizontalSize;\n\n /\n @defaultValue `\"recommended\"`\n /\n verticalSize?: SheetVerticalSize;\n}\n\n/\n @remarks \\@since 6.0.0\n * @internal\n /\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n offscreen?: boolean;\n disableOverlay?: boolean;\n}\n\n/* @remarks \\@since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n const {\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n offscreen = false,\n disableOverlay,\n className,\n } = options;\n const horizontal = position === \"left\" \|\| position === \"right\";\n\n return cnb(\n styles({\n horizontal,\n vertical: !horizontal,\n raised: !disableOverlay,\n offscreen,\n [position]: true,\n \"media-width\": horizontal && horizontalSize === \"media\",\n \"touch-width\": horizontal && horizontalSize === \"touch\",\n \"static-width\": horizontal && horizontalSize === \"static\",\n \"viewport-height\": !horizontal && verticalSize === \"none\",\n \"touchable-height\": !horizontal && verticalSize === \"touch\",\n \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","disableOverlay","className","horizontal","vertical","raised"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiEnB,2BAA2B,GAC3B,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,cAAc,EACdC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOL,IACLE,OAAO;QACLS;QACAC,UAAU,CAACD;QACXE,QAAQ,CAACJ;QACTD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}

package/dist/table/TableCheckbox.d.ts CHANGED Viewed

@@ -44,8 +44,9 @@ export interface TableCheckboxProps extends TableCheckboxTdHTMLAttributes, Table
     checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;
 }
 /**
- * **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/dist/table/TableCheckbox.js CHANGED Viewed

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Checkbox } from "../form/Checkbox.js";
@@ -6,8 +7,9 @@ const noop = ()=>{
 // do nothing
 };
 /**
- * **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