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

package/dist/list/ListItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/ListItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { listItem, type ListItemClassNameOptions } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\nexport interface ListItemLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ListItemClassNameOptions,\n    ListItemChildrenProps {\n  /** @defaultValue `\"a\"` */\n  as?: CustomLinkComponent;\n\n  /**\n   * This should only be used if the {@link as} {@link CustomLinkComponent}\n   * accepts a `to` prop instead of {@link href}.\n   */\n  to?: string;\n\n  /**\n   * The link's href. Either this or the {@link to} prop **should** be provided.\n   */\n  href?: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * @defaultValue `disabled ? -1 : undefined`\n   */\n  tabIndex?: number;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItemLink` should be used to render links within the `List` component.\n */\nexport const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  function ListItemLink(props, ref) {\n    const {\n      as: Link = \"a\",\n      to,\n      href,\n      className,\n      liProps,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight = \"auto\",\n      leftAddon,\n      leftAddonType = \"icon\",\n      leftAddonPosition = \"middle\",\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType = \"icon\",\n      rightAddonPosition = \"middle\",\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonCenteredMedia = false,\n      disableRightAddonCenteredMedia = false,\n      threeLines = false,\n      disabled = false,\n      disabledOpacity = false,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      role,\n      tabIndex = disabled || role === \"menuitem\" ? -1 : undefined,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li {...liProps} role=\"none\">\n        <Link\n          ref={ref}\n          {...remaining}\n          {...handlers}\n          role={role}\n          className={listItem({\n            className,\n            link: true,\n            height,\n            disabled,\n            disabledOpacity,\n            threeLines,\n            pressedClassName,\n          })}\n          // TODO: Figure out a better type for the CustomLinkComponent to fix this\n          to={to as string}\n          href={href as string}\n          tabIndex={tabIndex}\n        >\n          <ListItemChildren\n            threeLines={threeLines}\n            textClassName={textClassName}\n            secondaryTextClassName={secondaryTextClassName}\n            disableTextChildren={disableTextChildren}\n            primaryText={primaryText}\n            textProps={textProps}\n            secondaryText={secondaryText}\n            secondaryTextProps={secondaryTextProps}\n            leftAddon={leftAddon}\n            leftAddonType={leftAddonType}\n            leftAddonPosition={leftAddonPosition}\n            leftAddonClassName={leftAddonClassName}\n            leftAddonForceWrap={leftAddonForceWrap}\n            rightAddon={rightAddon}\n            rightAddonType={rightAddonType}\n            rightAddonPosition={rightAddonPosition}\n            rightAddonClassName={rightAddonClassName}\n            rightAddonForceWrap={rightAddonForceWrap}\n            disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n            disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n          >\n            {children}\n          </ListItemChildren>\n          {ripples}\n        </Link>\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItemLink","props","ref","as","Link","to","href","className","liProps","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","threeLines","disabled","disabledOpacity","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","role","tabIndex","undefined","children","propChildren","remaining","pressedClassName","ripples","handlers","li","link"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAGxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,QAAQ,QAAuC,sBAAsB;AAiC9E;;;;CAIC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,OAAO,GAAG,EACdC,EAAE,EACFC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,aAAa,MAAM,EAC3BC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,gCAAgC,KAAK,EACrCC,iCAAiC,KAAK,EACtCC,aAAa,KAAK,EAClBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,IAAI,EACJC,WAAWd,YAAYa,SAAS,aAAa,CAAC,IAAIE,SAAS,EAC3DC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGhD;IAEJ,MAAM,EAAEiD,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGzD,sBAAsB;QACpEsC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAZ;IACF;IACA,MAAMgB,WAAWnD,0BACfoD,cACA,CAACjC;IAGH,MAAMC,SAASlB,kBAAkB;QAC/BkB,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,KAACwC;QAAI,GAAG7C,OAAO;QAAEoC,MAAK;kBACpB,cAAA,MAACxC;YACCF,KAAKA;YACJ,GAAG+C,SAAS;YACZ,GAAGG,QAAQ;YACZR,MAAMA;YACNrC,WAAWR,SAAS;gBAClBQ;gBACA+C,MAAM;gBACNtC;gBACAe;gBACAC;gBACAF;gBACAoB;YACF;YACA,yEAAyE;YACzE7C,IAAIA;YACJC,MAAMA;YACNuC,UAAUA;;8BAEV,KAAChD;oBACCiC,YAAYA;oBACZpB,eAAeA;oBACfC,wBAAwBA;oBACxBI,qBAAqBA;oBACrBH,aAAaA;oBACbH,WAAWA;oBACXI,eAAeA;oBACfC,oBAAoBA;oBACpBI,WAAWA;oBACXC,eAAeA;oBACfC,mBAAmBA;oBACnBC,oBAAoBA;oBACpBC,oBAAoBA;oBACpBC,YAAYA;oBACZC,gBAAgBA;oBAChBC,oBAAoBA;oBACpBC,qBAAqBA;oBACrBC,qBAAqBA;oBACrBC,+BAA+BA;oBAC/BC,gCAAgCA;8BAE/BkB;;gBAEFI;;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/list/ListItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { listItem, type ListItemClassNameOptions } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\nexport interface ListItemLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ListItemClassNameOptions,\n    ListItemChildrenProps {\n  /** @defaultValue `\"a\"` */\n  as?: CustomLinkComponent;\n\n  /**\n   * This should only be used if the {@link as} {@link CustomLinkComponent}\n   * accepts a `to` prop instead of {@link href}.\n   */\n  to?: string;\n\n  /**\n   * The link's href. Either this or the {@link to} prop **should** be provided.\n   */\n  href?: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * @defaultValue `disabled ? -1 : undefined`\n   */\n  tabIndex?: number;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItemLink` should be used to render links within the `List` component.\n */\nexport const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  function ListItemLink(props, ref) {\n    const {\n      as: Link = \"a\",\n      to,\n      href,\n      className,\n      liProps,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight = \"auto\",\n      leftAddon,\n      leftAddonType = \"icon\",\n      leftAddonPosition = \"middle\",\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType = \"icon\",\n      rightAddonPosition = \"middle\",\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonCenteredMedia = false,\n      disableRightAddonCenteredMedia = false,\n      multiline = false,\n      disabled = false,\n      disabledOpacity = false,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      role,\n      tabIndex = disabled || role === \"menuitem\" ? -1 : undefined,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li {...liProps} role=\"none\">\n        <Link\n          ref={ref}\n          {...remaining}\n          {...handlers}\n          role={role}\n          className={listItem({\n            className,\n            link: true,\n            height,\n            disabled,\n            disabledOpacity,\n            multiline,\n            pressedClassName,\n          })}\n          // TODO: Figure out a better type for the CustomLinkComponent to fix this\n          to={to as string}\n          href={href as string}\n          tabIndex={tabIndex}\n        >\n          <ListItemChildren\n            multiline={multiline}\n            textClassName={textClassName}\n            secondaryTextClassName={secondaryTextClassName}\n            disableTextChildren={disableTextChildren}\n            primaryText={primaryText}\n            textProps={textProps}\n            secondaryText={secondaryText}\n            secondaryTextProps={secondaryTextProps}\n            leftAddon={leftAddon}\n            leftAddonType={leftAddonType}\n            leftAddonPosition={leftAddonPosition}\n            leftAddonClassName={leftAddonClassName}\n            leftAddonForceWrap={leftAddonForceWrap}\n            rightAddon={rightAddon}\n            rightAddonType={rightAddonType}\n            rightAddonPosition={rightAddonPosition}\n            rightAddonClassName={rightAddonClassName}\n            rightAddonForceWrap={rightAddonForceWrap}\n            disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n            disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n          >\n            {children}\n          </ListItemChildren>\n          {ripples}\n        </Link>\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItemLink","props","ref","as","Link","to","href","className","liProps","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disabledOpacity","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","role","tabIndex","undefined","children","propChildren","remaining","pressedClassName","ripples","handlers","li","link"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAGxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,QAAQ,QAAuC,sBAAsB;AAiC9E;;;;CAIC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,OAAO,GAAG,EACdC,EAAE,EACFC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,aAAa,MAAM,EAC3BC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,gCAAgC,KAAK,EACrCC,iCAAiC,KAAK,EACtCC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,IAAI,EACJC,WAAWd,YAAYa,SAAS,aAAa,CAAC,IAAIE,SAAS,EAC3DC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGhD;IAEJ,MAAM,EAAEiD,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGzD,sBAAsB;QACpEsC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAZ;IACF;IACA,MAAMgB,WAAWnD,0BACfoD,cACA,CAACjC;IAGH,MAAMC,SAASlB,kBAAkB;QAC/BkB,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,KAACwC;QAAI,GAAG7C,OAAO;QAAEoC,MAAK;kBACpB,cAAA,MAACxC;YACCF,KAAKA;YACJ,GAAG+C,SAAS;YACZ,GAAGG,QAAQ;YACZR,MAAMA;YACNrC,WAAWR,SAAS;gBAClBQ;gBACA+C,MAAM;gBACNtC;gBACAe;gBACAC;gBACAF;gBACAoB;YACF;YACA,yEAAyE;YACzE7C,IAAIA;YACJC,MAAMA;YACNuC,UAAUA;;8BAEV,KAAChD;oBACCiC,WAAWA;oBACXpB,eAAeA;oBACfC,wBAAwBA;oBACxBI,qBAAqBA;oBACrBH,aAAaA;oBACbH,WAAWA;oBACXI,eAAeA;oBACfC,oBAAoBA;oBACpBI,WAAWA;oBACXC,eAAeA;oBACfC,mBAAmBA;oBACnBC,oBAAoBA;oBACpBC,oBAAoBA;oBACpBC,YAAYA;oBACZC,gBAAgBA;oBAChBC,oBAAoBA;oBACpBC,qBAAqBA;oBACrBC,qBAAqBA;oBACrBC,+BAA+BA;oBAC/BC,gCAAgCA;8BAE/BkB;;gBAEFI;;;;AAIT,GACA"}

package/dist/list/_list.scss

@@ -17,14 +17,15 @@ $disable-item-media-large: false !default;
 $disable-medium-height: false !default;
 $disable-large-height: false !default;
 $disable-extra-large-height: false !default;
-$disable-three-line-height: false !default;
+$disable-multiline-clamp: false !default;
+$disable-multiline-height: true !default;
 $disable-item-link-styles: false !default;
 
 $disable-subheader: false !default;
 $disable-subheader-inset: false !default;
 
 $item-secondary-text-line-height: 1.42857 !default;
-$item-secondary-text-three-line-max-height: 3rem !default;
+$item-secondary-text-multiline-max-height: 3rem !default;
 
 $vertical-padding: 0.5rem !default;
 $dense-vertical-padding: 0.25rem !default;
@@ -51,8 +52,9 @@ $item-large-height: 4rem !default;
 $item-dense-large-height: 3.5rem !default;
 $item-extra-large-height: 4.5rem !default;
 $item-dense-extra-large-height: 4rem !default;
-$item-three-line-height: 5.5rem !default;
-$item-dense-three-line-height: 5rem !default;
+$item-multiline-clamp: 2 !default;
+$item-multiline-height: 5.5rem !default;
+$item-dense-multiline-height: 5rem !default;
 
 $item-media-spacing: 1rem !default;
 $item-media-size: 3.5rem !default;
@@ -60,77 +62,36 @@ $item-media-large-size: 6.25rem !default;
 
 $item-keyline: 4.5rem !default;
 
-$var-lookup: (
-  horizontal-padding: (
-    var: --rmd-list-padding-h,
-    value: $horizontal-padding,
-  ),
-  vertical-padding: (
-    var: --rmd-list-padding-v,
-    value: $vertical-padding,
-  ),
-  item-keyline: (
-    var: --rmd-list-item-keyline,
-    value: $item-keyline,
-  ),
-  item-horizontal-padding: (
-    var: --rmd-list-item-padding-h,
-    value: $item-horizontal-padding,
-  ),
-  item-vertical-padding: (
-    var: --rmd-list-item-padding-v,
-    value: $item-vertical-padding,
-  ),
-  item-height: (
-    var: --rmd-list-item-height,
-    value: $item-height,
-  ),
-  item-medium-height: (
-    var: --rmd-list-item-medium-height,
-    value: $item-medium-height,
-  ),
-  item-large-height: (
-    var: --rmd-list-item-large-height,
-    value: $item-large-height,
-  ),
-  item-extra-large-height: (
-    var: --rmd-list-item-extra-large-height,
-    value: $item-extra-large-height,
-  ),
-  item-three-line-height: (
-    var: --rmd-list-item-three-line-height,
-    value: $item-three-line-height,
-  ),
-  item-media-size: (
-    var: --rmd-list-item-media-size,
-    value: $item-media-size,
-  ),
-  item-media-spacing: (
-    var: --rmd-list-item-media-spacing,
-    value: $item-media-spacing,
-  ),
-  text-three-line-height: (
-    var: --rmd-list-item-text-three-line-height,
-    value: $item-secondary-text-three-line-max-height,
-  ),
+$variables: (
+  horizontal-padding,
+  vertical-padding,
+  item-keyline,
+  item-horizontal-padding,
+  item-vertical-padding,
+  item-height,
+  item-medium-height,
+  item-large-height,
+  item-extra-large-height,
+  item-multiline-height,
+  item-media-size,
+  item-media-spacing,
+  item-text-multiline-height,
+  item-multiline-clamp
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "list var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "list");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "list var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "list")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -147,6 +108,42 @@ $var-lookup: (
   );
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(horizontal-padding, $horizontal-padding);
+    @include set-var(vertical-padding, $vertical-padding);
+    @include set-var(item-horizontal-padding, $item-horizontal-padding);
+    @include set-var(item-vertical-padding, $item-vertical-padding);
+    @include set-var(item-keyline, $item-keyline);
+
+    @include set-var(item-height, $item-height);
+    @if not $disable-medium-height {
+      @include set-var(item-medium-height, $item-medium-height);
+    }
+    @if not $disable-large-height {
+      @include set-var(item-large-height, $item-large-height);
+    }
+    @if not $disable-extra-large-height {
+      @include set-var(item-extra-large-height, $item-extra-large-height);
+    }
+    @if not $disable-multiline-clamp {
+      @include set-var(item-multiline-clamp, $item-multiline-clamp);
+    }
+    @if not $disable-multiline-height {
+      @include set-var(item-multiline-height, $item-multiline-height);
+      @include set-var(
+        item-text-multiline-height,
+        $item-secondary-text-multiline-max-height
+      );
+    }
+
+    @if not $disable-item-media {
+      @include set-var(item-media-size, $item-media-size);
+      @include set-var(item-media-spacing, $item-media-spacing);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-list {
@@ -222,9 +219,9 @@ $var-lookup: (
         }
       }
 
-      @if not $disable-three-line-height {
-        &--three-lines {
-          @include set-var(item-height, get-var(item-three-line-height));
+      @if not $disable-multiline-height {
+        &--multiline {
+          @include set-var(item-height, get-var(item-multiline-height));
         }
       }
 
@@ -241,12 +238,16 @@ $var-lookup: (
           @include theme.theme-use-var(color, text-secondary-color);
         }
 
-        &--clamped {
-          @include typography.line-clamp;
-          @include use-var(max-height, text-three-line-height);
+        @if not $disable-multiline-clamp {
+          &--clamped {
+            @include typography.line-clamp(get-var(item-multiline-clamp));
+            @if not $disable-multiline-height {
+              @include use-var(max-height, item-text-multiline-height);
+            }
 
-          line-height: $item-secondary-text-line-height;
-          white-space: normal;
+            line-height: $item-secondary-text-line-height;
+            white-space: normal;
+          }
         }
       }
 

package/dist/list/listItemStyles.d.ts

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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\" -&gt; height\n * - secondaryText or left/right addon is media/media-large  -&gt; \"extra-large\"\n * - left/right addon is avatar -&gt; \"large\"\n * - left/right addon is icon -&gt; \"medium\"\n * - no addons and no secondary text -&gt; \"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"}
+{"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\" -&gt; height\n * - secondaryText or left/right addon is media/media-large  -&gt; \"extra-large\"\n * - left/right addon is avatar -&gt; \"large\"\n * - left/right addon is icon -&gt; \"medium\"\n * - no addons and no secondary text -&gt; \"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

@@ -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

@@ -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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"}
+{"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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,SAAS,EACTC,MAAM,QAGD,QAAQ;AAEf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,sBAAsB,QAAQ,gDAAgD;AAEvF,SAASC,UAAU,QAAQ,sCAAsC;AAEjE,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SACEC,mBAAmB,QAEd,wCAAwC;AAC/C,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SACEC,kBAAkB,QAEb,sCAAsC;AAE7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,yBAAyB,EACzBC,oBAAoB,QAGf,iCAAiC;AACxC,SAASC,SAAS,QAAwC,iBAAiB;AAC3E,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAW9C,MAAMC,OAAO;AACX,aAAa;AACf;AA2MA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,qBAAOlB,WAClB,SAASkB,KAAKC,KAAK,EAAEC,OAAO;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,OAAO,MAAM,EACbC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,aAAaC,YAAY,EACzBC,aAAaC,YAAY,EACzBC,eAAeC,cAAc,EAC7BC,eAAeC,cAAc,EAC7BC,mBAAmBC,kBAAkB,EACrCC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,mBAAmB,KAAK,EACxBC,YAAY,IAAI,EAChBC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,SAAS,EACTC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,aAAatC,IAAI,EACjBuC,YAAYvC,IAAI,EAChBwC,MAAM,EACNC,SAAS,EACTC,WAAW1C,IAAI,EACf2C,YAAY3C,IAAI,EAChB4C,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,MAAM,EACNC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,kBAAkB,IAAI,EACtBC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,uBAAuB,EACvBC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjB,GAAGC,WACJ,GAAGnE;IACJ,MAAM,EAAE,cAAcoE,SAAS,EAAE,mBAAmBC,cAAc,EAAE,GAClErE;IAEF,MAAME,KAAKX,aAAaY,QAAQ;IAChC,MAAM,EACJmE,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EACjB,GAAGhF;IACJ,MAAM,EACJY,UAAU,EACVE,WAAW,EACXE,WAAW,EACXE,aAAa,EACbE,aAAa,EACbE,iBAAiB,EAClB,GAAGzB,qBAAqBO;IACzB,MAAM,EAAE6E,OAAO,EAAE,GAAG3F;IACpB,MAAM4F,UACJhE,kBAAkB,QAASA,kBAAkB,WAAW+D;IAE1D,MAAME,UAAUhG,OAAO;IACvB,MAAMiG,qBAAqBjG,OAAO;IAClC,MAAMkG,qBAAqB;QACzBD,mBAAmBE,OAAO,GAAG;QAC7BpC;IACF;IACA,MAAMqC,OAAOlG;IACb,MAAMmG,QAAQD,SAAS;IAEvB,MAAM,EAAEE,aAAa,EAAEC,iBAAiB,EAAE,GAAGtG,kBAAkB;QAC7DuG,SAAStF;QACTuF,UAAU3C;QACVJ,WAAUgD,KAAK;YACbhD,UAAUgD;YAEV,kEAAkE;YAClE,oBAAoB;YACpB,IAAIX,SAAS;gBACX;YACF;YAEA,OAAQW,MAAMC,GAAG;gBACf,KAAK;oBACH,iEAAiE;oBACjE,+BAA+B;oBAC/BD,MAAME,eAAe;oBACrBf;oBACA9B;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,iDAAiD;oBACjD2C,MAAMG,cAAc;oBAEpB,IAAI,CAACpB,UAAU;wBACb,4DAA4D;wBAC5DiB,MAAME,eAAe;oBACvB;oBACAf;oBACA9B;oBACA;gBACF,KAAK;oBACH,IAAI,CAACwB,QAAQE,YAAYhE,YAAY;wBACnCiF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB9C;oBACF;oBACA;gBACF,KAAK;oBACH,IAAI,CAACwB,QAAQE,YAAY,CAAChE,YAAY;wBACpCiF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB9C;oBACF;oBACA;YACJ;QACF;QACAV,YAAWyD,SAAS;YAClBzD,WAAWyD;YACXd,QAAQG,OAAO,GAAG;QACpB;QACA7C,WAAUwD,SAAS;YACjBxD,UAAUwD;YACVd,QAAQG,OAAO,GAAG;YAClBF,mBAAmBE,OAAO,GAAG;YAC7BR,gBAAgBQ,OAAO,GAAG;QAC5B;QACA1C;YACEA;YACAuC,QAAQG,OAAO,GAAG;QACpB;QACA3C;QACA2B;QACA4B,qBAAoBC,IAAI;YACtB,IAAIzF,SAAS,WAAW;gBACtB,OAAO,CAACwE;YACV;YAEA,IAAIiB,SAAS,YAAY;gBACvB,OAAOjB;YACT;YAEA,MAAMkB,kBAAkBZ,SAAST,gBAAgBO,OAAO,KAAK;YAC7D,IAAIa,SAAS,SAAS;gBACpB,OAAOC;YACT;YAEA,OACEA,mBACAhB,mBAAmBE,OAAO,IACzBZ,QAAQ,CAAC,CAACG,YAAYvE,OAAOuE;QAElC;IACF;IAEA,MAAM,EAAEwB,GAAG,EAAE7F,KAAK,EAAE8F,SAAS,EAAE,GAAG9G,oBAAoB;QACpD,GAAGkG,iBAAiB;QACpBnD;QACA/B,OAAO0E,UAAUzE,YAAYkB;QAC7BK;QACAoB,QAAQnD,iBAAiB;YACvBmD;YACAuB;YACAxB;YACAyB,UAAU,CAACF,QAAQE;YACnBhE;QACF;QACA4C;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAoC,UAAUlD,gBAAgBgC,qBAAqBmB;QAC/CC,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAK1D,OAAO,IAAIK,eAAe;gBAClC+B;YACF;QACF;IACF;IACA,MAAM,EAAEuB,QAAQ,EAAExC,aAAa,EAAEyC,YAAY,EAAE,GAAGnH,mBAAmB;QACnEiG,SAASU;QACTpE,WAAWjD,IAAI,CAACkG,WAAWtD,eAAeK;QAC1C6E,cAAc7D;QACd8D,UAAU,CAACnG;QACXkB;QACAK,SAAS+C,WAAWZ,oBAAoB,IAAInC;QAC5CD;QACAE;QACAC;QACAC;QACAI;QACAC,WAAW+C,kBAAkB/C,SAAS;QACtCqE,cAAc;QACd,GAAGV,SAAS;IACd;IACA7G,cAAcwD,WAAWM;IAEzB,2EAA2E;IAC3E,yEAAyE;IACzE,qEAAqE;IACrE,MAAM0D,OAAO9H,OAAO+D;IACpBhE,UAAU;QACR+H,KAAK3B,OAAO,GAAGpC;IACjB;IACAhE,UAAU;QACR,IAAI,CAAC+D,SAAS;YACZ;QACF;QAEA,MAAMiE,WAAW,CAACrB;YAChB,uDAAuD;YACvD,IAAI,CAACV,QAAQG,OAAO,EAAE;gBACpB;YACF;YAEA,wEAAwE;YACxE,wEAAwE;YACxE,mEAAmE;YACnEF,mBAAmBE,OAAO,GACxB,CAAEO,CAAAA,MAAMsB,MAAM,YAAYC,WAAU,KACpC,CAACvB,MAAMsB,MAAM,CAACE,OAAO,CAAC,CAAC,OAAO,EAAE3G,KAAK,EAAE,CAAC;YAE1C,8DAA8D;YAC9DuG,KAAK3B,OAAO;YACZN;QACF;QAEA,0EAA0E;QAC1E,wDAAwD;QACxD,MAAMsC,QAAQC,OAAOC,qBAAqB,CAAC;YACzCD,OAAOE,gBAAgB,CAAC,SAASP;QACnC;QAEA,OAAO;YACLK,OAAOG,oBAAoB,CAACJ;YAC5BC,OAAOI,mBAAmB,CAAC,SAAST;QACtC;IACF,GAAG;QAAClC;QAAkBtE;QAAMuC;KAAQ;IAEpC,qBACE,KAACrD;QACCgB,YAAYA;QACZM,eAAeA;QACfF,aAAaA;QACbF,aAAaA;QACbM,eAAeA;QACfE,mBAAmBA;kBAEnB,cAAA,KAACxB;YACC8H,cAAYpD;YACZqD,mBAAiBpD;YACjBqD,QAAQhH;YACRiH,QAAQ/G;YACRgH,UAAU5G;YACV6G,cAAc3G;YACd2B,SAASA;YACTiF,SAAShD;YACThC,gBAAgBA;YAChB1C,OAAOiB;YACPQ,WAAWP;YACX0C,eAAeC;YACfvC,WAAWA;YACXwC,mBAAmBA;YAClB,GAAG9C,UAAU;sBAEd,cAAA,KAACjC;gBAAO4I,UAAUjD,WAAYb,CAAAA,qBAAqBD,aAAY;0BAC5D,AAACwC,CAAAA,YAAY1B,OAAM,mBAClB,KAACnF;oBACE,GAAGwE,SAAS;oBACZ,GAAGsC,YAAY;oBACf,GAAGpB,aAAa;oBACjBnF,IAAIA;oBACJI,MAAMA;oBACNF,OAAO0E,UAAUzE,YAAYD;oBAC7B0E,SAASA;oBACTnD,UAAUA;oBACVnB,YAAYA;oBACZkC,WAAWA;oBACXC,WAAWA;oBACXC,eAAeA;oBACfnB,kBAAkBA;oBAClBuD,oBAAoBA;8BAEnBzE;;;;;AAOf,GACA"}