@kanso-labs/kanso-ui 0.44.0 → 0.45.0

package/dist/components/list-detail/index.js

@@ -26,7 +26,40 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * While only one pane fits, the pane that is not showing is hidden
 * outright, so focus inside it is dropped when `showing` changes. The call
 * site that changed it is what puts focus in the pane it revealed — see the
-* prop.
+* prop. `flushSync` commits the swap before focus moves, since a pane that is
+* still hidden cannot take it:
+*
+* ```tsx
+* const [showing, setShowing] = useState<'detail' | 'list'>('list')
+* const heading = useRef<HTMLHeadingElement>(null)
+* const opener = useRef<HTMLElement>(null)
+*
+* function open(event: MouseEvent<HTMLElement>) {
+*   opener.current = event.currentTarget
+*   flushSync(() => setShowing('detail'))
+*   heading.current?.focus()
+* }
+*
+* function back() {
+*   flushSync(() => setShowing('list'))
+*   opener.current?.focus()
+* }
+*
+* <ListDetail
+*   detail={
+*     <>
+*       <Button onPress={back} variant="text">Back</Button>
+*       <h2 ref={heading} tabIndex={-1}>Headline</h2>
+*     </>
+*   }
+*   list={
+*     <ListItem interactive onClick={open}>
+*       First item
+*     </ListItem>
+*   }
+*   showing={showing}
+* />
+* ```
 */
 function ListDetail(t0) {
 	const $ = c(26);

package/dist/components/list-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","container","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName","_c"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { container, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n//\n// **The breakpoints are the layout's own width, not the window's.** The root\n// is a query container, and both panes ask it through `container` rather than\n// `media`: a list-detail beside a navigation drawer, or inside a sheet, has\n// less room than the window, and laying two panes out by the window's width\n// squeezed the detail to a sliver. The thresholds are still Material Design's\n// window size classes, compared against the room the layout is given.\n//\n// That is also why the root is a flex row rather than a grid. A container\n// query reaches the container's descendants and never the container itself,\n// so the root cannot change its own tracks by its width; the panes size\n// themselves instead.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, while the layout is narrower than\n   * the expanded breakpoint. Both are shown once it is that wide, where this\n   * is ignored. The width is the layout's own rather than the window's.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   *\n   * **Moving focus into the revealed pane comes with flipping this.** The\n   * pane being left is hidden outright, so a keyboard or screen reader inside\n   * it lands on the body and the next Tab starts from the top of the page.\n   * The same reason this prop is controlled is why the move is not made here:\n   * only the call site knows whether a key, a pointer or the history put it\n   * in that state, and what inside the pane to send focus to. Both panes hold\n   * nodes it supplied, so it has something to aim at — a heading given\n   * `tabIndex={-1}`, or a ref it already holds.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * The breakpoints are compared against the layout's own width, not the\n * window's, so a list-detail beside a navigation drawer or inside a sheet\n * shows one pane until it has the room for two. It takes that width from\n * its parent and none from its panes, so in a parent that shrinks to fit\n * what it holds — an inline-flex row, a float, a flex item with no basis —\n * give it a width of its own.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n *\n * While only one pane fits, the pane that is not showing is hidden\n * outright, so focus inside it is dropped when `showing` changes. The call\n * site that changed it is what puts focus in the pane it revealed — see the\n * prop.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k xsfcrho x1s85apg\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k xsfcrho x1s85apg\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 x12h1iku x78zum5 xj2l1yv\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","container","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName","_c"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { container, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n//\n// **The breakpoints are the layout's own width, not the window's.** The root\n// is a query container, and both panes ask it through `container` rather than\n// `media`: a list-detail beside a navigation drawer, or inside a sheet, has\n// less room than the window, and laying two panes out by the window's width\n// squeezed the detail to a sliver. The thresholds are still Material Design's\n// window size classes, compared against the room the layout is given.\n//\n// That is also why the root is a flex row rather than a grid. A container\n// query reaches the container's descendants and never the container itself,\n// so the root cannot change its own tracks by its width; the panes size\n// themselves instead.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, while the layout is narrower than\n   * the expanded breakpoint. Both are shown once it is that wide, where this\n   * is ignored. The width is the layout's own rather than the window's.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   *\n   * **Moving focus into the revealed pane comes with flipping this.** The\n   * pane being left is hidden outright, so a keyboard or screen reader inside\n   * it lands on the body and the next Tab starts from the top of the page.\n   * The same reason this prop is controlled is why the move is not made here:\n   * only the call site knows whether a key, a pointer or the history put it\n   * in that state, and what inside the pane to send focus to. Both panes hold\n   * nodes it supplied, so it has something to aim at — a heading given\n   * `tabIndex={-1}`, or a ref it already holds.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * The breakpoints are compared against the layout's own width, not the\n * window's, so a list-detail beside a navigation drawer or inside a sheet\n * shows one pane until it has the room for two. It takes that width from\n * its parent and none from its panes, so in a parent that shrinks to fit\n * what it holds — an inline-flex row, a float, a flex item with no basis —\n * give it a width of its own.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n *\n * While only one pane fits, the pane that is not showing is hidden\n * outright, so focus inside it is dropped when `showing` changes. The call\n * site that changed it is what puts focus in the pane it revealed — see the\n * prop. `flushSync` commits the swap before focus moves, since a pane that is\n * still hidden cannot take it:\n *\n * ```tsx\n * const [showing, setShowing] = useState<'detail' | 'list'>('list')\n * const heading = useRef<HTMLHeadingElement>(null)\n * const opener = useRef<HTMLElement>(null)\n *\n * function open(event: MouseEvent<HTMLElement>) {\n *   opener.current = event.currentTarget\n *   flushSync(() => setShowing('detail'))\n *   heading.current?.focus()\n * }\n *\n * function back() {\n *   flushSync(() => setShowing('list'))\n *   opener.current?.focus()\n * }\n *\n * <ListDetail\n *   detail={\n *     <>\n *       <Button onPress={back} variant=\"text\">Back</Button>\n *       <h2 ref={heading} tabIndex={-1}>Headline</h2>\n *     </>\n *   }\n *   list={\n *     <ListItem interactive onClick={open}>\n *       First item\n *     </ListItem>\n *   }\n *   showing={showing}\n * />\n * ```\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k xsfcrho x1s85apg\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k xsfcrho x1s85apg\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 x12h1iku x78zum5 xj2l1yv\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}

package/dist/components/list-item/index.d.ts

@@ -11,6 +11,13 @@ type ListItemProps = {
    * handlers. A row that only presents is a `<div>` that cannot be focused or
    * operated from the keyboard, so a handler on it would answer a mouse and
    * nothing else.
+   *
+   * An interactive row's slots hold content and never a control. The row is
+   * one button, and a checkbox, a switch, a link or a button inside it is
+   * invalid HTML: axe reports it as nested interactive content, and React
+   * warns as well when the control is itself a button. A row that carries a
+   * control is a presenting row, or a `List.Item`, whose rows are built to
+   * hold them.
    * @default false
    */
   interactive?: boolean;
@@ -24,7 +31,10 @@ type ListItemProps = {
    * @default false
    */
   isDisabled?: boolean;
-  /** Content before the headline: an avatar, an icon, a checkbox. */
+  /**
+   * Content before the headline: an avatar, an icon, or on a row that is not
+   * `interactive`, a checkbox.
+   */
   leading?: ReactNode;
   /**
    * A line above the headline, in the page's label-small and the same muted
@@ -34,7 +44,10 @@ type ListItemProps = {
   overline?: ReactNode;
   /** A second line under the headline, in the muted role. */
   supporting?: ReactNode;
-  /** Content after the headline, such as an amount or a control. */
+  /**
+   * Content after the headline, such as an amount, or on a row that is not
+   * `interactive`, a control.
+   */
   trailing?: ReactNode;
 } & HTMLAttributes<HTMLElement> & ({
   interactive: true;
@@ -58,6 +71,12 @@ type ListItemProps = {
  * the row module's in `src/row`, shared with every collection item; what is
  * here is the element around them — a `<div>` that presents, or a `<button>`
  * that ripples — and the props that fill the slots.
+ *
+ * ```tsx
+ * <ListItem leading={<Avatar name="Ada Lovelace" />} supporting="Supporting line">
+ *   Headline
+ * </ListItem>
+ * ```
  */
 declare function ListItem({ children, interactive, isDisabled, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, ref, supporting, trailing, ...props }: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>): import("react").JSX.Element;
 //#endregion

package/dist/components/list-item/index.js

@@ -20,6 +20,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the row module's in `src/row`, shared with every collection item; what is
 * here is the element around them — a `<div>` that presents, or a `<button>`
 * that ripples — and the props that fill the slots.
+*
+* ```tsx
+* <ListItem leading={<Avatar name="Ada Lovelace" />} supporting="Supporting line">
+*   Headline
+* </ListItem>
+* ```
 */
 function ListItem(t0) {
 	const $ = c(24);

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","hasContent","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ListItem","t0","$","t1","t2","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","interactiveLayers","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { hasContent } from '../../render/content';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   *\n   * Only an interactive row takes `onClick`, `onContextMenu` and the pointer\n   * handlers. A row that only presents is a `<div>` that cannot be focused or\n   * operated from the keyboard, so a handler on it would answer a mouse and\n   * nothing else.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement> &\n// The handlers a press delivers, which a row that only presents refuses:\n// with no role, no `tabIndex` and no key handler, it would run them for a\n// pointer alone. `never` rather than leaving them out, since an omitted key\n// is still accepted from the `HTMLAttributes` beside it.\n({\n  interactive: true;\n} | {\n  interactive?: false;\n  onClick?: never;\n  onContextMenu?: never;\n  onPointerCancel?: never;\n  onPointerDown?: never;\n  onPointerLeave?: never;\n  onPointerUp?: never;\n});\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","stylex","useRipple","hasContent","refCallback","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ListItem","t0","$","t1","t2","ref","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","forwarded","t5","content","handlers","base","list","disabled","t6","t7","t8","interactiveLayers","t9","surface","_c","props","stylex.props"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { hasContent } from '../../render/content';\nimport { refCallback } from '../../render/ref';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   *\n   * Only an interactive row takes `onClick`, `onContextMenu` and the pointer\n   * handlers. A row that only presents is a `<div>` that cannot be focused or\n   * operated from the keyboard, so a handler on it would answer a mouse and\n   * nothing else.\n   *\n   * An interactive row's slots hold content and never a control. The row is\n   * one button, and a checkbox, a switch, a link or a button inside it is\n   * invalid HTML: axe reports it as nested interactive content, and React\n   * warns as well when the control is itself a button. A row that carries a\n   * control is a presenting row, or a `List.Item`, whose rows are built to\n   * hold them.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Content before the headline: an avatar, an icon, or on a row that is not\n   * `interactive`, a checkbox.\n   */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /**\n   * Content after the headline, such as an amount, or on a row that is not\n   * `interactive`, a control.\n   */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement> &\n// The handlers a press delivers, which a row that only presents refuses:\n// with no role, no `tabIndex` and no key handler, it would run them for a\n// pointer alone. `never` rather than leaving them out, since an omitted key\n// is still accepted from the `HTMLAttributes` beside it.\n({\n  interactive: true;\n} | {\n  interactive?: false;\n  onClick?: never;\n  onContextMenu?: never;\n  onPointerCancel?: never;\n  onPointerDown?: never;\n  onPointerLeave?: never;\n  onPointerUp?: never;\n});\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n *\n * ```tsx\n * <ListItem leading={<Avatar name=\"Ada Lovelace\" />} supporting=\"Supporting line\">\n *   Headline\n * </ListItem>\n * ```\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  ref,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps & RefAttributes<HTMLButtonElement | HTMLDivElement>) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n\n  // A presenting row is a <div> and an interactive one a <button>, so the\n  // ref is typed as either and handed to each as the callback both accept —\n  // see src/render/ref.ts.\n  const forwarded = refCallback(ref);\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover, focus and\n  // pressed layers and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} ref={forwarded} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} ref={forwarded} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, rowStyles.interactiveLayers, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":"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"}

package/dist/components/menu/index.d.ts

@@ -72,8 +72,9 @@ type MenuItemProps$1<T extends object = object> = {
   /** Content before the label, usually an icon. */
   leading?: ReactNode;
   /**
-   * The keystroke that runs the item, drawn as a keycap at the end. Goes
-   * through React Aria's keyboard slot, so a screen reader announces it
+   * The keystroke that runs the item, at the end of the row. Pass a `Keycap`
+   * to draw it as one; a string is set as plain text in the muted role. Either
+   * goes through React Aria's keyboard slot, so a screen reader announces it
    * apart from the label rather than reading the two as one name. It takes
    * the item's colour while the item is selected or disabled, and so does a
    * `Keycap` inside it, its rule included.
@@ -138,11 +139,13 @@ type MenuSubmenuProps = {
  * ```tsx
  * <Menu>
  *   <Button>Open</Button>
- *   <Menu.Content aria-label="Label">
+ *   <Menu.Content>
  *     <Menu.Item id="first">First item</Menu.Item>
  *   </Menu.Content>
  * </Menu>
  * ```
+ *
+ * The trigger's text names the menu, so the button is where a label goes.
  */
 declare function Menu$1({ children, ...props }: MenuProps$1): import("react").JSX.Element;
 declare namespace Menu$1 {

package/dist/components/menu/index.js

@@ -65,11 +65,13 @@ function itemStyles(state) {
 * ```tsx
 * <Menu>
 *   <Button>Open</Button>
-*   <Menu.Content aria-label="Label">
+*   <Menu.Content>
 *     <Menu.Item id="first">First item</Menu.Item>
 *   </Menu.Content>
 * </Menu>
 * ```
+*
+* The trigger's text names the menu, so the button is where a label goes.
 */
 function Menu$1(t0) {
 	const $ = c(6);

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","useContext","useEffect","useRef","AutocompleteStateContext","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionEmpty","CollectionLoadMore","CollectionStatus","textOf","CheckGlyph","ChevronEndGlyph","useRipple","KeycapToneContext","RowContent","rowStyles","supportingTone","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","shortcut","kMwMTN","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","renderEmptyState","T","search","side","MenuSide","sideOffset","style","Omit","children","leading","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","emptyState","itemContent","ripple","state","check","isSelected","undefined","hasLeading","isDisabled","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","t2","surfaceStyles","t3","t4","t5","t6","SEARCH_CONTROL","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","SearchSlot","autocomplete","latest","current","Symbol","for","querySelector","focus","setInputValue","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useEffect, useRef } from 'react';\nimport { AutocompleteStateContext, Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionEmpty, CollectionLoadMore, CollectionStatus } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { CheckGlyph, ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { KeycapToneContext } from '../../keycap/context';\nimport { RowContent } from '../../row';\nimport { rowStyles, supportingTone } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected, with a check beside the label. The container alone sits as close\n// as 1.1:1 to the surface, so the check is what carries the selection for a\n// reader who cannot tell the two apart. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n// The shortcut's colour follows the item's state as the supporting line's\n// does, through the same `supportingTone`, and a selected or disabled item\n// hands a keycap inside it the `inherit` tone, so the keycap follows too.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  shortcut: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * What the menu shows when nothing is in it — after a search that matched\n   * nothing, usually. Left out, it is a muted row saying \"No results\" in the\n   * I18nProvider's locale, which the surface also announces, so the menu\n   * keeps a row's height rather than shrinking to its search bar. One of the\n   * call site's own replaces the announcement as well as the row.\n   */\n  renderEmptyState?: RACMenuProps<T>['renderEmptyState'];\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper. The bar takes focus as the\n   * menu opens, however it was opened, so typing filters straight away,\n   * and its query is cleared as the menu closes, so a reopened menu shows\n   * every item.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`. `start` and `end` follow the\n   * writing direction, as a submenu does; `left` and `right` stay put in\n   * either.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'renderEmptyState' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name. It takes\n   * the item's colour while the item is selected or disabled, and so does a\n   * `Keycap` inside it, its rule included.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// The default empty state, at module scope so every menu hands React Aria\n// the same function.\nfunction emptyState() {\n  return <CollectionEmpty variant=\"menu\" />;\n}\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides three things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, the check on a\n// selected item, and the supporting line's colour, which the row module takes\n// from whether the row is selected or disabled.\n//\n// The check takes the leading slot where the item has leading content, in\n// place of it, and comes at the end of the row where it has none. Either way\n// the label stays where it was, so choosing an item moves nothing in the\n// menu. Hidden from the tree, since React Aria's `aria-checked` already says\n// the item is chosen.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => {\n    const check = state.isSelected ? <CheckGlyph className=\"xxk0z11 x9f619 x2lah0s xvy4d1p\" /> : undefined;\n    const hasLeading = leading !== undefined && leading !== null;\n    return <>\n        <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={hasLeading ? check ?? leading : undefined} trailing={trailingOf(state, shortcut, trailing, hasLeading ? undefined : check)} variant=\"menu\">\n          <Text slot=\"label\">{children}</Text>\n        </RowContent>\n        {state.isDisabled ? null : ripple}\n      </>;\n  };\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56. A label longer than the surface's 280dp still wraps, and\n// breaks inside a word that is wider than that, rather than running out of\n// the surface and under the shortcut — the shared row's rule, which nothing\n// here truncates.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n *\n * A menu with nothing in it shows a muted \"No results\" row in place of its\n * items, and says so through a status on the surface, which is what a search\n * that matches nothing leaves; pass `renderEmptyState` to draw something\n * else.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      <CollectionStatus>\n        {search === undefined ? null : <SearchSlot>{search}</SearchSlot>}\n        <RACMenu<T> renderEmptyState={emptyState} {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n      </CollectionStatus>\n    </RACPopover>;\n}\n\n// What a press on the search slot focuses: its field's own control.\nconst SEARCH_CONTROL = 'input, textarea, [contenteditable=\"true\"]';\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label,\n  ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n/**\n * The search bar above a menu's items, mounted only while the menu is open.\n *\n * Its field takes focus as it mounts. React Aria's popover otherwise took\n * focus itself whenever a pointer opened the menu, so typing went nowhere\n * and only a keyboard's Enter happened to land in the field. Mounted before\n * the items, so the popover finds focus already inside it and leaves it.\n *\n * The query is cleared as it unmounts. The `Autocomplete` that filters the\n * items wraps this whole part and outlives the popover, so its query did\n * too: a menu filtered, used and reopened came back filtered.\n */\nfunction SearchSlot({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const autocomplete = useContext(AutocompleteStateContext);\n  // The latest state, for the cleanup below to clear: the state object is a\n  // new one on every render, and the effect that mounts the bar runs once.\n  const latest = useRef(autocomplete);\n  useEffect(() => {\n    latest.current = autocomplete;\n  });\n  useEffect(() => {\n    ref.current?.querySelector<HTMLElement>(SEARCH_CONTROL)?.focus();\n    return () => {\n      latest.current?.setInputValue('');\n    };\n  }, []);\n  return <div ref={ref} className=\"x9f619 xqf7pud xn60lsn\">\n      {children}\n    </div>;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode, check: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined && check === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard {...stylex.props(styles.shortcut, supportingTone('menu', state))}>\n          <KeycapToneContext value={state.isDisabled || state.isSelected ? 'inherit' : 'neutral'}>\n            {shortcut}\n          </KeycapToneContext>\n        </Keyboard>}\n      {check}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ComponentProps","ReactElement","ReactNode","RefAttributes","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","useContext","useEffect","useRef","AutocompleteStateContext","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionEmpty","CollectionLoadMore","CollectionStatus","textOf","CheckGlyph","ChevronEndGlyph","useRipple","KeycapToneContext","RowContent","rowStyles","supportingTone","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","shortcut","kMwMTN","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","renderEmptyState","T","search","side","MenuSide","sideOffset","style","Omit","children","leading","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","emptyState","itemContent","ripple","state","check","isSelected","undefined","hasLeading","isDisabled","trailingOf","itemStyles","props","base","menu","selectedMenu","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","t0","$","t1","MenuContent","ref","t2","surfaceStyles","t3","t4","t5","t6","SEARCH_CONTROL","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","SearchSlot","autocomplete","latest","current","Symbol","for","querySelector","focus","setInputValue","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu","stylex.props","Menu","_c","RACMenuTrigger","RACMenu","RACPopover","MenuItem","RACMenuItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","Separator","RACSubmenuTrigger"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useEffect, useRef } from 'react';\nimport { AutocompleteStateContext, Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionEmpty, CollectionLoadMore, CollectionStatus } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { CheckGlyph, ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { KeycapToneContext } from '../../keycap/context';\nimport { RowContent } from '../../row';\nimport { rowStyles, supportingTone } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected, with a check beside the label. The container alone sits as close\n// as 1.1:1 to the surface, so the check is what carries the selection for a\n// reader who cannot tell the two apart. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n// The shortcut's colour follows the item's state as the supporting line's\n// does, through the same `supportingTone`, and a selected or disabled item\n// hands a keycap inside it the `inherit` tone, so the keycap follows too.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  shortcut: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /**\n   * Where the menu lines up along that side. Left out, a menu lines up with\n   * the start of its trigger, and a submenu with the top of the item that\n   * opens it.\n   */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the container of the `ThemeScope`\n   * around it, which keeps the menu on that scope's tokens, or to the end of\n   * `<body>` where there is none. A subtree themed through the `themeScope`\n   * class has no container of its own, so point this inside it, or the menu\n   * renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * What the menu shows when nothing is in it — after a search that matched\n   * nothing, usually. Left out, it is a muted row saying \"No results\" in the\n   * I18nProvider's locale, which the surface also announces, so the menu\n   * keeps a row's height rather than shrinking to its search bar. One of the\n   * call site's own replaces the announcement as well as the row.\n   */\n  renderEmptyState?: RACMenuProps<T>['renderEmptyState'];\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper. The bar takes focus as the\n   * menu opens, however it was opened, so typing filters straight away,\n   * and its query is cleared as the menu closes, so a reopened menu shows\n   * every item.\n   */\n  search?: ReactNode;\n  /**\n   * Which side of the trigger the menu opens on. Left out, a menu opens below\n   * its trigger and a submenu at the inline end of the item that opens it,\n   * where the item's chevron points — the places React Aria gives each.\n   * Given `align` alone, the side is `bottom`. `start` and `end` follow the\n   * writing direction, as a submenu does; `left` and `right` stay put in\n   * either.\n   */\n  side?: MenuSide;\n  /**\n   * How far the menu sits from the trigger, in pixels. Left out, React Aria's:\n   * 8, or 0 for a menu opened with `trigger=\"contextMenu\"`.\n   */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'renderEmptyState' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, at the end of the row. Pass a `Keycap`\n   * to draw it as one; a string is set as plain text in the muted role. Either\n   * goes through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name. It takes\n   * the item's colour while the item is selected or disabled, and so does a\n   * `Keycap` inside it, its rule included.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// The default empty state, at module scope so every menu hands React Aria\n// the same function.\nfunction emptyState() {\n  return <CollectionEmpty variant=\"menu\" />;\n}\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides three things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, the check on a\n// selected item, and the supporting line's colour, which the row module takes\n// from whether the row is selected or disabled.\n//\n// The check takes the leading slot where the item has leading content, in\n// place of it, and comes at the end of the row where it has none. Either way\n// the label stays where it was, so choosing an item moves nothing in the\n// menu. Hidden from the tree, since React Aria's `aria-checked` already says\n// the item is chosen.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => {\n    const check = state.isSelected ? <CheckGlyph className=\"xxk0z11 x9f619 x2lah0s xvy4d1p\" /> : undefined;\n    const hasLeading = leading !== undefined && leading !== null;\n    return <>\n        <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={hasLeading ? check ?? leading : undefined} trailing={trailingOf(state, shortcut, trailing, hasLeading ? undefined : check)} variant=\"menu\">\n          <Text slot=\"label\">{children}</Text>\n        </RowContent>\n        {state.isDisabled ? null : ripple}\n      </>;\n  };\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled item, so nothing has to outrank them.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56. A label longer than the surface's 280dp still wraps, and\n// breaks inside a word that is wider than that, rather than running out of\n// the surface and under the shortcut — the shared row's rule, which nothing\n// here truncates.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, state.isSelected && rowStyles.selectedMenu, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content>\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n *\n * The trigger's text names the menu, so the button is where a label goes.\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n *\n * The placement and the offsets are passed on only where the call site gives\n * them. React Aria hands the popover a placement of its own through context —\n * below the trigger for a menu, at the item's inline end for a submenu — and\n * a prop set here replaces it, so a default written here opened every\n * submenu below its item, over the rest of the menu it came from.\n *\n * A menu with nothing in it shows a muted \"No results\" row in place of its\n * items, and says so through a status on the surface, which is what a search\n * that matches nothing leaves; pass `renderEmptyState` to draw something\n * else.\n */\nfunction MenuContent<T extends object = object>({\n  align,\n  alignOffset,\n  className,\n  container,\n  ref,\n  search,\n  side,\n  sideOffset,\n  style,\n  ...props\n}: MenuContentProps<T> & RefAttributes<HTMLElement>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={side === undefined && align === undefined ? undefined : placementOf(side ?? 'bottom', align ?? 'start')}\n  // The surface, where the call site's class and style land, rather than\n  // the menu inside it, which takes the rest of the props.\n  ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      <CollectionStatus>\n        {search === undefined ? null : <SearchSlot>{search}</SearchSlot>}\n        <RACMenu<T> renderEmptyState={emptyState} {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n      </CollectionStatus>\n    </RACPopover>;\n}\n\n// What a press on the search slot focuses: its field's own control.\nconst SEARCH_CONTROL = 'input, textarea, [contenteditable=\"true\"]';\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label,\n  ...props\n}: MenuLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore diameter=\"20px\" label={label} />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T> & RefAttributes<HTMLElement>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n/**\n * The search bar above a menu's items, mounted only while the menu is open.\n *\n * Its field takes focus as it mounts. React Aria's popover otherwise took\n * focus itself whenever a pointer opened the menu, so typing went nowhere\n * and only a keyboard's Enter happened to land in the field. Mounted before\n * the items, so the popover finds focus already inside it and leaves it.\n *\n * The query is cleared as it unmounts. The `Autocomplete` that filters the\n * items wraps this whole part and outlives the popover, so its query did\n * too: a menu filtered, used and reopened came back filtered.\n */\nfunction SearchSlot({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const autocomplete = useContext(AutocompleteStateContext);\n  // The latest state, for the cleanup below to clear: the state object is a\n  // new one on every render, and the effect that mounts the bar runs once.\n  const latest = useRef(autocomplete);\n  useEffect(() => {\n    latest.current = autocomplete;\n  });\n  useEffect(() => {\n    ref.current?.querySelector<HTMLElement>(SEARCH_CONTROL)?.focus();\n    return () => {\n      latest.current?.setInputValue('');\n    };\n  }, []);\n  return <div ref={ref} className=\"x9f619 xqf7pud xn60lsn\">\n      {children}\n    </div>;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode, check: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined && check === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard {...stylex.props(styles.shortcut, supportingTone('menu', state))}>\n          <KeycapToneContext value={state.isDisabled || state.isSelected ? 'inherit' : 'neutral'}>\n            {shortcut}\n          </KeycapToneContext>\n        </Keyboard>}\n      {check}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport { MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };\nexport default Menu;"],"mappings":"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"}

package/dist/components/meter/index.d.ts

@@ -39,6 +39,10 @@ type MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;
  * reach for ProgressIndicator instead — a meter has no indeterminate state,
  * because a measurement always has a value.
  *
+ * ```tsx
+ * <Meter label="Label" maxValue={5} value={3} />
+ * ```
+ *
  * The call site's `className` and `style` land on the meter as a whole,
  * which is the element a layout positions.
  */

package/dist/components/meter/index.js

@@ -15,6 +15,10 @@ import { Meter } from "react-aria-components";
 * reach for ProgressIndicator instead — a meter has no indeterminate state,
 * because a measurement always has a value.
 *
+* ```tsx
+* <Meter label="Label" maxValue={5} value={3} />
+* ```
+*
 * The call site's `className` and `style` land on the meter as a whole,
 * which is the element a layout positions.
 */

package/dist/components/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","CheckCircleGlyph","ErrorGlyph","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","statusOf","valueText","percentage","Meter","_c","props","RACMeter","stylex.props"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { CheckCircleGlyph, ErrorGlyph } from '../../glyphs';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// Colour alone does not carry it. The two roles are drawn from the same\n// tone of their palettes, as error is, so their bars are equally light —\n// 1.00:1 in the light theme — and a reader who cannot tell red from green\n// sees two bars of one colour, while forced colours paint both in\n// `Highlight`. So each draws a glyph before the value as well: an\n// exclamation mark in a filled circle for `negative` and a check in one for\n// `positive`, at the chips page's 18dp beside label-large text, in the\n// tone's own colour. The circles are one outline with a different mark\n// inside, which is what tells them apart in grey and under a forced palette.\n// No Material Design page draws a meter, so the glyph is this library's;\n// it is hidden from a screen reader, which hears the label and the value\n// instead, and the tone's JSDoc says to state the status there.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track\n   * in its secondary container so a column of meters still shares one\n   * track. Each also draws a glyph before the value, an exclamation mark\n   * for `negative` and a check for `positive`, so the tone reads without\n   * its colour. A screen reader hears neither, so say the status in `label`\n   * or `valueLabel` as well.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps & RefAttributes<HTMLDivElement>) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} status={statusOf(tone)} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\n\n// The glyph a tone draws before the value — see the comment at the top.\nfunction statusOf(tone: MeterTone) {\n  if (tone === 'negative') {\n    return <ErrorGlyph className=\"xamitd3 xmix8c7 x9f619 x2lah0s x1xp8n7a x12gp0t\" />;\n  }\n  if (tone === 'positive') {\n    return <CheckCircleGlyph className=\"xamitd3 xmix8c7 x9f619 x2lah0s x1xp8n7a x4no3js\" />;\n  }\n  return undefined;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoGA,SAAAQ,QAAAkB,IAAA;CAAA,MAAAC,IAAA1B,EAAA,EAAA;CAAA,IAAA2B;CAAA,IAAAR;CAAA,IAAAC;CAAA,IAAAQ;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAa,IAAAC,UAAAC,IAAAC,UAAAC,IAAAhB,WAAAiB,IAAAf,MAAAgB,IAAA,GAAAC,YAAAd;EAAAN,QAAAa;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAhB,YAAAiB,OAAAG,KAAAA,IAAA,OAAAH;EACAf,OAAAgB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAnB;EAAmByB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBT,MAAaQ,gBAAe2B,IAAK,GAAGF,OAAK;EAACb,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAJ;CAAA,OAAA;EAAAK,KAAAD,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIU,KAAAU,aAAavB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHN,EAAA,MAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFNQ;AAEM;AAOf,SAASQ,aAAavB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQqB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBxB;EAAO,QAAQyB,SAAStB,IAAI;EAAG,OAAOF,YAAYuB,MAAME,YAAYL,KAAAA;CAAU,CAAA,GACtG,oBAAC,eAAD;EAAe,YAAYG,MAAMG;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ;AAGA,SAASsB,SAAStB,MAAiB;CACjC,IAAIA,SAAS,YACX,OAAO,oBAAC,YAAD,EAAY,WAAU,kDAAiD,CAAA;CAEhF,IAAIA,SAAS,YACX,OAAO,oBAAC,kBAAD,EAAkB,WAAU,kDAAiD,CAAA;AAGxF"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","CheckCircleGlyph","ErrorGlyph","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","statusOf","valueText","percentage","Meter","_c","props","RACMeter","stylex.props"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { CheckCircleGlyph, ErrorGlyph } from '../../glyphs';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// Colour alone does not carry it. The two roles are drawn from the same\n// tone of their palettes, as error is, so their bars are equally light —\n// 1.00:1 in the light theme — and a reader who cannot tell red from green\n// sees two bars of one colour, while forced colours paint both in\n// `Highlight`. So each draws a glyph before the value as well: an\n// exclamation mark in a filled circle for `negative` and a check in one for\n// `positive`, at the chips page's 18dp beside label-large text, in the\n// tone's own colour. The circles are one outline with a different mark\n// inside, which is what tells them apart in grey and under a forced palette.\n// No Material Design page draws a meter, so the glyph is this library's;\n// it is hidden from a screen reader, which hears the label and the value\n// instead, and the tone's JSDoc says to state the status there.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track\n   * in its secondary container so a column of meters still shares one\n   * track. Each also draws a glyph before the value, an exclamation mark\n   * for `negative` and a check for `positive`, so the tone reads without\n   * its colour. A screen reader hears neither, so say the status in `label`\n   * or `valueLabel` as well.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * ```tsx\n * <Meter label=\"Label\" maxValue={5} value={3} />\n * ```\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps & RefAttributes<HTMLDivElement>) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} status={statusOf(tone)} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\n\n// The glyph a tone draws before the value — see the comment at the top.\nfunction statusOf(tone: MeterTone) {\n  if (tone === 'negative') {\n    return <ErrorGlyph className=\"xamitd3 xmix8c7 x9f619 x2lah0s x1xp8n7a x12gp0t\" />;\n  }\n  if (tone === 'positive') {\n    return <CheckCircleGlyph className=\"xamitd3 xmix8c7 x9f619 x2lah0s x1xp8n7a x4no3js\" />;\n  }\n  return undefined;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAAQ,QAAAkB,IAAA;CAAA,MAAAC,IAAA1B,EAAA,EAAA;CAAA,IAAA2B;CAAA,IAAAR;CAAA,IAAAC;CAAA,IAAAQ;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAa,IAAAC,UAAAC,IAAAC,UAAAC,IAAAhB,WAAAiB,IAAAf,MAAAgB,IAAA,GAAAC,YAAAd;EAAAN,QAAAa;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAhB,YAAAiB,OAAAG,KAAAA,IAAA,OAAAH;EACAf,OAAAgB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAnB;EAAmByB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBT,MAAaQ,gBAAe2B,IAAK,GAAGF,OAAK;EAACb,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAJ;CAAA,OAAA;EAAAK,KAAAD,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIU,KAAAU,aAAavB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAC,MAAAD,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHN,EAAA,MAAAC;EAAAD,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFNQ;AAEM;AAOf,SAASQ,aAAavB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQqB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBxB;EAAO,QAAQyB,SAAStB,IAAI;EAAG,OAAOF,YAAYuB,MAAME,YAAYL,KAAAA;CAAU,CAAA,GACtG,oBAAC,eAAD;EAAe,YAAYG,MAAMG;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ;AAGA,SAASsB,SAAStB,MAAiB;CACjC,IAAIA,SAAS,YACX,OAAO,oBAAC,YAAD,EAAY,WAAU,kDAAiD,CAAA;CAEhF,IAAIA,SAAS,YACX,OAAO,oBAAC,kBAAD,EAAkB,WAAU,kDAAiD,CAAA;AAGxF"}

package/dist/components/navigation-bar/index.d.ts

@@ -14,14 +14,26 @@ type NavigationBarProps = RenderComponentProps<'nav'> & {
 /**
  * The bar of three to five top-level destinations a compact window keeps at
  * its bottom edge. Each destination is a link, so it routes through React
- * Aria's `RouterProvider` when the app has one.
+ * Aria's `RouterProvider` when the app has one. The bar is a navigation
+ * landmark, so name it with `aria-label`, and give a badge its words in
+ * `badgeLabel`, since the badge itself is hidden from assistive technology.
+ *
+ * Its form follows the window. Below 600px each destination is vertical, its
+ * icon over its label, and the destinations share the bar's width; from 600px
+ * each is a horizontal pill, once the window is wide enough for every label
+ * to show whole.
  *
  * ```tsx
  * <NavigationBar aria-label="Label" selectedRoute="/first">
  *   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
  *     First item
  *   </NavigationBar.Item>
- *   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+ *   <NavigationBar.Item
+ *     badge={3}
+ *     badgeLabel="3 new"
+ *     href="/second"
+ *     icon={<SecondIcon />}
+ *   >
  *     Second item
  *   </NavigationBar.Item>
  *   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>

package/dist/components/navigation-bar/index.js

@@ -20,14 +20,26 @@ const HORIZONTAL = "(width >= 600px)";
 /**
 * The bar of three to five top-level destinations a compact window keeps at
 * its bottom edge. Each destination is a link, so it routes through React
-* Aria's `RouterProvider` when the app has one.
+* Aria's `RouterProvider` when the app has one. The bar is a navigation
+* landmark, so name it with `aria-label`, and give a badge its words in
+* `badgeLabel`, since the badge itself is hidden from assistive technology.
+*
+* Its form follows the window. Below 600px each destination is vertical, its
+* icon over its label, and the destinations share the bar's width; from 600px
+* each is a horizontal pill, once the window is wide enough for every label
+* to show whole.
 *
 * ```tsx
 * <NavigationBar aria-label="Label" selectedRoute="/first">
 *   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
 *     First item
 *   </NavigationBar.Item>
-*   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+*   <NavigationBar.Item
+*     badge={3}
+*     badgeLabel="3 new"
+*     href="/second"
+*     icon={<SecondIcon />}
+*   >
 *     Second item
 *   </NavigationBar.Item>
 *   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>