@kanso-labs/kanso-ui 0.26.6 → 0.28.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListItemProps","children","className","T","leading","style","supporting","trailing","Omit","ListLoadMoreProps","label","ListProps","selectLabel","ListSectionProps","header","itemContent","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","textValue","textOf","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows 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};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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 on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListLoadMoreProps","Omit","label","ListProps","T","className","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","textValue","textOf","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\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 function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows 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};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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 on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport default List;"],"mappings":"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"}

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

@@ -8,6 +8,12 @@ type ListBoxItemProps$1<T extends object = object> = {
   className?: ListBoxItemProps<T>['className'];
   /** Content before the headline: an avatar, an icon, a checkbox. */
   leading?: ReactNode;
+  /**
+   * A line above the headline, in the page's label-small and the same muted
+   * role the supporting line takes — a category, a date, a status. Given
+   * alongside `supporting` it makes the row the page's three-line item.
+   */
+  overline?: ReactNode;
   /** A function may compute the style from the option's render state. */
   style?: ListBoxItemProps<T>['style'];
   /** A second line under the headline, in the muted role. */
@@ -23,7 +29,7 @@ type ListBoxLoadMoreProps = Omit<ListBoxLoadMoreItemProps, 'children'> & {
    */
   label?: string;
 };
-type ListBoxProps$1<T extends object> = Omit<ListBoxProps<T>, 'className' | 'style'> & {
+type ListBoxProps$1<T extends object = object> = Omit<ListBoxProps<T>, 'className' | 'style'> & {
   /** A function may compute the class from the list's render state. */
   className?: ListBoxProps<T>['className'];
   /** A function may compute the style from the list's render state. */
@@ -67,7 +73,7 @@ declare namespace ListBox$1 {
  * `supporting` under it, and `trailing`. Give every option an `id` — that is
  * the key selection is reported by.
  */
-declare function ListBoxItem$1<T extends object = object>({ children, leading, supporting, textValue, trailing, ...props }: ListBoxItemProps$1<T>): import("react").JSX.Element;
+declare function ListBoxItem$1<T extends object = object>({ children, leading, overline, supporting, textValue, trailing, ...props }: ListBoxItemProps$1<T>): import("react").JSX.Element;
 /**
  * The row the list shows while it is fetching more. React Aria calls
  * `onLoadMore` when this comes into view, and draws it only while

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

@@ -7,11 +7,12 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Header, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection } from "react-aria-components";
 //#region src/components/list-box/index.tsx
-function itemContent(children, leading, supporting, trailing) {
+function itemContent(children, leading, overline, supporting, trailing) {
 	return (state) => /* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading,
+		overline,
 		supporting,
 		trailing,
 		children
@@ -31,21 +32,21 @@ function itemContent(children, leading, supporting, trailing) {
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
 */
-function ListBox$1(props$1) {
+function ListBox$1(props$3) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props$1) {
-		t0 = mergeStatefulStyles(props(collectionStyles.container), props$1);
-		$[0] = props$1;
+	if ($[0] !== props$3) {
+		t0 = mergeStatefulStyles(props(collectionStyles.container), props$3);
+		$[0] = props$3;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props$1 || $[3] !== t0) {
+	if ($[2] !== props$3 || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(ListBox, {
-			...props$1,
+			...props$3,
 			...t0
 		});
-		$[2] = props$1;
+		$[2] = props$3;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -57,73 +58,78 @@ function ListBox$1(props$1) {
 * the key selection is reported by.
 */
 function ListBoxItem$1(t0) {
-	const $ = c(23);
+	const $ = c(25);
 	let T0;
 	let children;
 	let leading;
+	let overline;
 	let supporting;
 	let t1;
 	let t2;
 	let t3;
 	let trailing;
 	if ($[0] !== t0) {
-		const { children: t4, leading: t5, supporting: t6, textValue, trailing: t7, ...props } = t0;
+		const { children: t4, leading: t5, overline: t6, supporting: t7, textValue, trailing: t8, ...props } = t0;
 		children = t4;
 		leading = t5;
-		supporting = t6;
-		trailing = t7;
+		overline = t6;
+		supporting = t7;
+		trailing = t8;
 		T0 = ListBoxItem;
-		if ($[9] !== children || $[10] !== textValue) {
+		if ($[10] !== children || $[11] !== textValue) {
 			t1 = textValue ?? textOf(children);
-			$[9] = children;
-			$[10] = textValue;
-			$[11] = t1;
-		} else t1 = $[11];
+			$[10] = children;
+			$[11] = textValue;
+			$[12] = t1;
+		} else t1 = $[12];
 		t2 = props;
-		t3 = mergeStatefulStyles(rowItemStyles(supporting), props);
+		t3 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
 		$[3] = leading;
-		$[4] = supporting;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = trailing;
+		$[4] = overline;
+		$[5] = supporting;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = trailing;
 	} else {
 		T0 = $[1];
 		children = $[2];
 		leading = $[3];
-		supporting = $[4];
-		t1 = $[5];
-		t2 = $[6];
-		t3 = $[7];
-		trailing = $[8];
+		overline = $[4];
+		supporting = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		trailing = $[9];
 	}
 	let t4;
-	if ($[12] !== children || $[13] !== leading || $[14] !== supporting || $[15] !== trailing) {
-		t4 = itemContent(children, leading, supporting, trailing);
-		$[12] = children;
-		$[13] = leading;
-		$[14] = supporting;
-		$[15] = trailing;
-		$[16] = t4;
-	} else t4 = $[16];
+	if ($[13] !== children || $[14] !== leading || $[15] !== overline || $[16] !== supporting || $[17] !== trailing) {
+		t4 = itemContent(children, leading, overline, supporting, trailing);
+		$[13] = children;
+		$[14] = leading;
+		$[15] = overline;
+		$[16] = supporting;
+		$[17] = trailing;
+		$[18] = t4;
+	} else t4 = $[18];
 	let t5;
-	if ($[17] !== T0 || $[18] !== t1 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
+	if ($[19] !== T0 || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			textValue: t1,
 			...t2,
 			...t3,
 			children: t4
 		});
-		$[17] = T0;
-		$[18] = t1;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
+		$[19] = T0;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
 	return t5;
 }
 /**
@@ -138,11 +144,11 @@ function ListBoxLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$2 } = t0;
+		const { label: t3, ...props$1 } = t0;
 		label = t3 === void 0 ? "Loading more" : t3;
 		T0 = ListBoxLoadMoreItem;
-		t1 = props$2;
-		t2 = mergeStyles(props(collectionStyles.loading), props$2);
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.loading), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -190,12 +196,12 @@ function ListBoxSection$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$3 } = t0;
+		const { children: t3, header: t4, ...props$2 } = t0;
 		children = t3;
 		header = t4;
 		T0 = ListBoxSection;
-		t1 = props$3;
-		t2 = mergeStyles(props(collectionStyles.section), props$3);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.section), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","state","isDisabled","isSelected","props","$","_c","t0","container","t1","T0","t2","t3","t4","t5","t6","textValue","t7","textOf","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option'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 — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\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} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options 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};\n\n// What the option 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// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","state","isDisabled","isSelected","props","$","_c","t0","container","t1","T0","t2","t3","t4","t5","t6","t7","textValue","t8","textOf","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option'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 — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\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 function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\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} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options 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};\n\n// What the option 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// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}

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

@@ -19,6 +19,15 @@ type ListDetailProps = {
    * Controlled, with no uncontrolled fallback: the layout cannot know that an
    * item was selected or that the reader went back, so holding that state
    * here would only ever be wrong.
+   *
+   * **Moving focus into the revealed pane comes with flipping this.** The
+   * pane being left is hidden outright, so a keyboard or screen reader inside
+   * it lands on the body and the next Tab starts from the top of the page.
+   * The same reason this prop is controlled is why the move is not made here:
+   * only the call site knows whether a key, a pointer or the history put it
+   * in that state, and what inside the pane to send focus to. Both panes hold
+   * nodes it supplied, so it has something to aim at — a heading given
+   * `tabIndex={-1}`, or a ref it already holds.
    * @default 'list'
    */
   showing?: 'detail' | 'list';
@@ -34,6 +43,11 @@ type ListDetailProps = {
  * The panes are written to the DOM in the order they are shown, which is what
  * Material Design asks of co-planar panes: focus order has to match the
  * arrangement on screen.
+ *
+ * Below the expanded breakpoint 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.
  */
 declare function ListDetail({ detail, list, render, showing, ...props }: ListDetailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

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

@@ -14,6 +14,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * The panes are written to the DOM in the order they are shown, which is what
 * Material Design asks of co-planar panes: focus order has to match the
 * arrangement on screen.
+*
+* Below the expanded breakpoint 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.
 */
 function ListDetail(t0) {
 	const $ = c(26);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import 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 { media, 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\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, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\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   * @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 * 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 */\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\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import 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 { media, 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\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, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\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 * 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 * Below the expanded breakpoint 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\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\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

@@ -34,7 +34,7 @@ type ListItemProps = {
  * here is the element around them — a `<div>` that presents, or a `<button>`
  * that ripples — and the props that fill the slots.
  */
-declare function ListItem({ children, interactive, leading, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ children, interactive, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion
 export { type ListItemProps, ListItem as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -19,55 +19,74 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * that ripples — and the props that fill the slots.
 */
 function ListItem(t0) {
-	const $ = c(12);
-	const { children, interactive: t1, leading, overline, supporting, trailing, ...props$1 } = t0;
+	const $ = c(19);
+	const { children, interactive: t1, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props$1 } = t0;
 	const interactive = t1 === void 0 ? false : t1;
-	const ripple = useRipple(interactive);
+	let t2;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t2 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t2;
+	} else t2 = $[6];
+	const ripple = useRipple(interactive, t2);
 	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
 	const twoLine = extraLines === 1;
 	const threeLine = extraLines === 2;
-	let t2;
-	if ($[0] !== children || $[1] !== leading || $[2] !== overline || $[3] !== supporting || $[4] !== trailing) {
-		t2 = /* @__PURE__ */ jsx(RowContent, {
+	let t3;
+	if ($[7] !== children || $[8] !== leading || $[9] !== overline || $[10] !== supporting || $[11] !== trailing) {
+		t3 = /* @__PURE__ */ jsx(RowContent, {
 			leading,
 			overline,
 			supporting,
 			trailing,
 			children
 		});
-		$[0] = children;
-		$[1] = leading;
-		$[2] = overline;
-		$[3] = supporting;
-		$[4] = trailing;
-		$[5] = t2;
-	} else t2 = $[5];
-	const content = t2;
+		$[7] = children;
+		$[8] = leading;
+		$[9] = overline;
+		$[10] = supporting;
+		$[11] = trailing;
+		$[12] = t3;
+	} else t3 = $[12];
+	const content = t3;
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props$1,
+		...ripple.handlers,
 		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: content
 	});
-	const t3 = "button";
-	const t4 = ripple.handlers;
-	const t5 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1);
-	let t6;
-	if ($[6] !== content || $[7] !== props$1 || $[8] !== ripple.handlers || $[9] !== ripple.surface || $[10] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("button", {
-			type: t3,
-			...t4,
-			...props$1,
+	const t4 = "button";
+	const t5 = ripple.handlers;
+	const t6 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1);
+	let t7;
+	if ($[13] !== content || $[14] !== props$1 || $[15] !== ripple.handlers || $[16] !== ripple.surface || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("button", {
+			type: t4,
 			...t5,
+			...props$1,
+			...t6,
 			children: [content, ripple.surface]
 		});
-		$[6] = content;
-		$[7] = props$1;
-		$[8] = ripple.handlers;
-		$[9] = ripple.surface;
-		$[10] = t5;
-		$[11] = t6;
-	} else t6 = $[11];
-	return t6;
+		$[13] = content;
+		$[14] = props$1;
+		$[15] = ripple.handlers;
+		$[16] = ripple.surface;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
 }
 //#endregion
 export { ListItem as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","props","undefined","ripple","extraLines","twoLine","threeLine","t2","content","base","list","t3","t4","handlers","t5","t6","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\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   * @default false\n   */\n  interactive?: 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\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  leading,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\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 = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,SAAAe,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAV,UAAAC,aAAAU,IAAAT,SAAAC,UAAAC,YAAAC,UAAA,GAAAO,YAAAJ;CAEhB,MAAAP,cAAAU,OAAAE,KAAAA,IAAA,QAAAF;CAOA,MAAAG,SAAenB,UAA6BM,WAAW;CAWvD,MAAAc,cAAoBZ,aAAaU,KAAAA,IAAb,IAAA,MAAmCT,eAAeS,KAAAA,IAAf,IAAA;CACvD,MAAAG,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAT,EAAA,OAAAT,YAAAS,EAAA,OAAAP,WAAAO,EAAA,OAAAN,YAAAM,EAAA,OAAAL,cAAAK,EAAA,OAAAJ,UAAA;EACnBa,KAAA,oBAAC,YAAD;GAAqBhB;GAAmBC;GAAsBC;GAAsBC;GAC/FL;EADsB,CAAA;EAEZS,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAFf,MAAAU,UAAgBD;CAGhB,IAAI,CAACjB,aAAW,OACP,oBAAA,OAAA;EAEC,GAFQW;EAAK,GAAMd,YAAYJ,MAAaG,UAASuB,MAAOvB,UAASwB,MAAOL,WAAWnB,UAASmB,SAAUC,aAAapB,UAASoB,SAAU,GAAGL,OAAK;EACrJO,UAAAA;CACG,CAAA;CAEU,MAAAG,KAAA;CAAa,MAAAC,KAAAT,OAAMU;CAA0B,MAAAC,KAAA3B,YAAYJ,MAAaG,UAASuB,MAAOvB,UAASwB,MAAOxB,UAASI,aAAce,WAAWnB,UAASmB,SAAUC,aAAapB,UAASoB,SAAU,GAAGL,OAAK;CAAC,IAAAc;CAAA,IAAAjB,EAAA,OAAAU,WAAAV,EAAA,OAAAG,WAAAH,EAAA,OAAAK,OAAAU,YAAAf,EAAA,OAAAK,OAAAa,WAAAlB,EAAA,QAAAgB,IAAA;EAAjNC,KAAA,qBAAA,UAAA;GAAa,MAAAJ;GAAQ,GAAKC;GAAe,GAAMX;GAAK,GAAMa;GAA1D,UAAA,CACFN,SACAL,OAAMa,OACA;;EAAAlB,EAAA,KAAAU;EAAAV,EAAA,KAAAG;EAAAH,EAAA,KAAAK,OAAAU;EAAAf,EAAA,KAAAK,OAAAa;EAAAlB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAHJiB;AAGI"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t2","ripple","extraLines","twoLine","threeLine","t3","content","handlers","base","list","t4","t5","t6","t7","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\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   * @default false\n   */\n  interactive?: 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\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  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\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  const ripple = useRipple<HTMLElement>(interactive, {\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 = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,SAAAe,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAV,UAAAC,aAAAU,IAAAT,SAAAU,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAd,UAAAC,YAAAC,UAAA,GAAAa,YAAAV;CAEhB,MAAAP,cAAAU,OAAAQ,KAAAA,IAAA,QAAAR;CAAmB,IAAAS;CAAA,IAAAX,EAAA,OAAAG,WAAAH,EAAA,OAAAI,iBAAAJ,EAAA,OAAAK,mBAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAO,kBAAAP,EAAA,OAAAQ,aAAA;EAwBgCG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOnD;EAACR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAPD,MAAAY,SAAe1B,UAAuBM,aAAamB,EAOlD;CAWD,MAAAE,cAAoBnB,aAAagB,KAAAA,IAAb,IAAA,MAAmCf,eAAee,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAhB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,WAAAO,EAAA,OAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBoB,KAAA,oBAAC,YAAD;GAAqBvB;GAAmBC;GAAsBC;GAAsBC;GAC/FL;EADsB,CAAA;EAEZS,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAFf,MAAAiB,UAAgBD;CAGhB,IAAI,CAACxB,aAAW,OACP,oBAAA,OAAA;EAEC,GAFQiB;EAAK,GAAMG,OAAMM;EAAS,GAAM7B,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAON,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;EAC1KQ,UAAAA;CACG,CAAA;CAEU,MAAAI,KAAA;CAAa,MAAAC,KAAAV,OAAMM;CAA0B,MAAAK,KAAAlC,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAOhC,UAASI,aAAcsB,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;CAAC,IAAAe;CAAA,IAAAxB,EAAA,QAAAiB,WAAAjB,EAAA,QAAAS,WAAAT,EAAA,QAAAY,OAAAM,YAAAlB,EAAA,QAAAY,OAAAa,WAAAzB,EAAA,QAAAuB,IAAA;EAAjNC,KAAA,qBAAA,UAAA;GAAa,MAAAH;GAAQ,GAAKC;GAAe,GAAMb;GAAK,GAAMc;GAA1D,UAAA,CACFN,SACAL,OAAMa,OACA;;EAAAzB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAS;EAAAT,EAAA,MAAAY,OAAAM;EAAAlB,EAAA,MAAAY,OAAAa;EAAAzB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,OAHJwB;AAGI"}