@kanso-labs/kanso-ui 0.43.6 → 0.44.0

package/dist/components/list/index.js

@@ -13,6 +13,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { GridList, GridListHeader, GridListItem, GridListLoadMoreItem, GridListSection } from "react-aria-components";
 //#region src/components/list/index.tsx
 const SelectLabelContext = createContext(void 0);
+const RowsActContext = createContext(false);
+const NESTED_CONTROL = "a[href], button, input, label, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [role=\"switch\"]";
 function itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
@@ -24,6 +26,10 @@ function itemContent(children, leading, overline, supporting, trailing, selectLa
 		children
 	}), state.isDisabled ? null : ripple] });
 }
+function landsOnControl(event) {
+	const control = event.target instanceof Element ? event.target.closest(NESTED_CONTROL) : null;
+	return event.currentTarget.contains(control) && control !== event.currentTarget;
+}
 /**
 * The selection checkbox, then whatever the row was given. Its return type is
 * written out rather than inferred: `ReactNode` is a union that includes a
@@ -43,6 +49,10 @@ function leadingFor(state, leading, selectLabel) {
 * `defaultSelectedKeys` to let it keep its own. A list that only responds to
 * a press takes `onAction` on the row instead.
 *
+* A `multiple` list draws a checkbox on every row. A `single` one draws none
+* and marks the chosen row alone, since a checkbox promises a choice that
+* leaves the others standing; `selectionBehavior` overrides either.
+*
 * ListItem is the static row — one row, presenting, on its own. This is the
 * collection that draws the same row and adds selection, keyboard navigation
 * between rows, sections and a load-more sentinel.
@@ -55,55 +65,86 @@ function leadingFor(state, leading, selectLabel) {
 * the element a layout positions.
 */
 function List(t0) {
-	const $ = c(14);
+	const $ = c(23);
 	let T0;
 	let T1;
+	let T2;
+	let props;
+	let selectionBehavior;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		const { selectLabel, ...props } = t0;
-		T1 = SelectLabelContext;
-		t3 = selectLabel;
+		const { selectionBehavior: t5, selectLabel, ...t6 } = t0;
+		selectionBehavior = t5;
+		props = t6;
+		const rowsAct = (props.selectionMode ?? "none") !== "none" || props.onAction !== void 0 || props.dragAndDropHooks?.useDraggableCollectionState !== void 0;
+		T2 = SelectLabelContext;
+		t4 = selectLabel;
+		T1 = RowsActContext;
+		t3 = rowsAct;
 		T0 = GridList;
 		t1 = props;
 		t2 = mergeStatefulStyles(containerClasses, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
+		$[3] = T2;
+		$[4] = props;
+		$[5] = selectionBehavior;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
 	} else {
 		T0 = $[1];
 		T1 = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
+		T2 = $[3];
+		props = $[4];
+		selectionBehavior = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
 	}
-	let t4;
-	if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2) {
-		t4 = /* @__PURE__ */ jsx(T0, {
+	const t5 = selectionBehavior ?? (props.selectionMode === "single" ? "replace" : "toggle");
+	let t6;
+	if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
 			...t1,
-			...t2
+			...t2,
+			selectionBehavior: t5
 		});
-		$[6] = T0;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== T1 || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T1, {
+		$[10] = T0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== T1 || $[16] !== t3 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T1, {
 			value: t3,
-			children: t4
+			children: t6
 		});
-		$[10] = T1;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[15] = T1;
+		$[16] = t3;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== T2 || $[20] !== t4 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T2, {
+			value: t4,
+			children: t7
+		});
+		$[19] = T2;
+		$[20] = t4;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
 }
 /**
 * The row the list shows while it is fetching more. React Aria calls
@@ -166,66 +207,74 @@ function ListLoadMore(t0) {
 * holds, from the state React Aria reports rather than from a prop here.
 */
 function ListRow(t0) {
-	const $ = c(24);
+	const $ = c(27);
 	const { children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props } = t0;
 	const selectLabel = useContext(SelectLabelContext);
+	const acts = useContext(RowsActContext) || props.onAction !== void 0 || props.href !== void 0;
 	let t1;
-	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerLeave || $[3] !== onPointerUp) {
 		t1 = {
 			onContextMenu,
 			onPointerCancel,
-			onPointerDown,
 			onPointerLeave,
 			onPointerUp
 		};
 		$[0] = onContextMenu;
 		$[1] = onPointerCancel;
-		$[2] = onPointerDown;
-		$[3] = onPointerLeave;
-		$[4] = onPointerUp;
-		$[5] = t1;
-	} else t1 = $[5];
-	const ripple = useRipple(true, t1, true);
+		$[2] = onPointerLeave;
+		$[3] = onPointerUp;
+		$[4] = t1;
+	} else t1 = $[4];
+	const ripple = useRipple(acts, t1, true);
 	const T0 = GridListItem;
 	let t2;
-	if ($[6] !== children || $[7] !== textValue) {
+	if ($[5] !== children || $[6] !== textValue) {
 		t2 = textValue ?? textOf(children);
-		$[6] = children;
-		$[7] = textValue;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[5] = children;
+		$[6] = textValue;
+		$[7] = t2;
+	} else t2 = $[7];
 	const t3 = ripple.handlers;
-	const t4 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
-	let t5;
-	if ($[9] !== children || $[10] !== leading || $[11] !== overline || $[12] !== ripple.surface || $[13] !== selectLabel || $[14] !== supporting || $[15] !== trailing) {
-		t5 = itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface);
-		$[9] = children;
-		$[10] = leading;
-		$[11] = overline;
-		$[12] = ripple.surface;
-		$[13] = selectLabel;
-		$[14] = supporting;
-		$[15] = trailing;
-		$[16] = t5;
-	} else t5 = $[16];
+	let t4;
+	if ($[8] !== onPointerDown || $[9] !== ripple.handlers.onPointerDown) {
+		t4 = startsRipple(ripple.handlers.onPointerDown, onPointerDown);
+		$[8] = onPointerDown;
+		$[9] = ripple.handlers.onPointerDown;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
 	let t6;
-	if ($[17] !== T0 || $[18] !== props || $[19] !== ripple.handlers || $[20] !== t2 || $[21] !== t4 || $[22] !== t5) {
-		t6 = /* @__PURE__ */ jsx(T0, {
+	if ($[11] !== children || $[12] !== leading || $[13] !== overline || $[14] !== ripple.surface || $[15] !== selectLabel || $[16] !== supporting || $[17] !== trailing) {
+		t6 = itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface);
+		$[11] = children;
+		$[12] = leading;
+		$[13] = overline;
+		$[14] = ripple.surface;
+		$[15] = selectLabel;
+		$[16] = supporting;
+		$[17] = trailing;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== T0 || $[20] !== props || $[21] !== ripple.handlers || $[22] !== t2 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
 			textValue: t2,
 			...t3,
+			onPointerDown: t4,
 			...props,
-			...t4,
-			children: t5
+			...t5,
+			children: t6
 		});
-		$[17] = T0;
-		$[18] = props;
-		$[19] = ripple.handlers;
-		$[20] = t2;
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
-	return t6;
+		$[19] = T0;
+		$[20] = props;
+		$[21] = ripple.handlers;
+		$[22] = t2;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
+	return t7;
 }
 /**
 * A named group of rows. `header` names it, and is what a screen reader
@@ -283,6 +332,12 @@ function ListSection(t0) {
 	} else t4 = $[13];
 	return t4;
 }
+function startsRipple(ripple, own) {
+	return (event) => {
+		if (!landsOnControl(event)) ripple?.(event);
+		own?.(event);
+	};
+}
 List.Item = ListRow;
 List.LoadMore = ListLoadMore;
 List.Section = ListSection;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","ListLoadMoreProps","Omit","label","ListProps","className","T","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","T0","T1","t1","t2","t3","props","t4","t5","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListSection","section","Item","LoadMore","Section","_c","RACGridList","props","RACGridListLoadMoreItem","stylex.props","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\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. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\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   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\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   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'style'>;\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 | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\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 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 row, so nothing has to outrank them.\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 | undefined): 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,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(containerClasses, props)} />\n    </SelectLabelContext>;\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,\n  ...props\n}: ListLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACGridListLoadMoreItem>;\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 ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T> & RefAttributes<HTMLDivElement>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own. The call site's pointer handlers are handed to the\n  // hook to merge, for the reason ListItem gives. React Aria keeps a row's\n  // clicks for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\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> & RefAttributes<HTMLDivElement>) {\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}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","PointerEvent","PointerEventHandler","ReactNode","RefAttributes","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","containerClasses","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","undefined","RowsActContext","NESTED_CONTROL","ListLoadMoreProps","Omit","label","ListProps","className","T","selectionBehavior","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","landsOnControl","event","HTMLDivElement","control","target","Element","closest","currentTarget","contains","selectionMode","List","t0","$","T0","T1","T2","props","t1","t2","t3","t4","t5","t6","rowsAct","onAction","dragAndDropHooks","useDraggableCollectionState","t7","t8","ListLoadMore","loading","ListRow","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","acts","href","handlers","startsRipple","surface","ListSection","section","own","Item","LoadMore","Section","_c","RACGridList","props","RACGridListLoadMoreItem","stylex.props","RACGridListItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["'use client';\n\nimport type { PointerEvent, PointerEventHandler, ReactNode, RefAttributes } 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, containerClasses, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\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. Undefined unless the list is given one, which\n// leaves the name React Aria gives in the reader's locale.\nconst SelectLabelContext = createContext<string | undefined>(undefined);\n\n// Whether the list makes every row act on a press: it selects, it has an\n// `onAction` of its own, or its rows drag. A row given an `onAction` or an\n// `href` acts whatever this says. A context for the reason SelectLabelContext\n// is one: it is the list's to decide, and a row reads it rather than taking\n// it again as a prop.\nconst RowsActContext = createContext(false);\n\n// What a press inside a row leaves to the element it lands on: a control of\n// the row's own content, which answers the press itself. A label is in the\n// list because a native checkbox or radio is pressed through the label\n// around it. React Aria's own controls, this library's Switch and Checkbox\n// among them, stop the pointerdown of a press they take, so the row never\n// hears one.\nconst NESTED_CONTROL = 'a[href], button, input, label, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [role=\"switch\"]';\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   * Left out, it is the word for it in the I18nProvider's locale — \"Loading\n   * more\" in English.\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * How a press selects. `toggle` draws a checkbox on every row, and a press\n   * adds that row to the selection or takes it out. `replace` draws none, a\n   * press makes that row the selection, and the arrow keys carry the\n   * selection with the focus; where rows also take an action, a click\n   * selects and a double click acts. Left out, a `single` list replaces and\n   * any other toggles, since a single choice drawn as checkboxes unticks one\n   * box whenever another is ticked.\n   */\n  selectionBehavior?: RACGridListProps<T>['selectionBehavior'];\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   * Left out, React Aria names it in the reader's locale — \"Select\" in\n   * English.\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n} & Omit<RACGridListProps<T>, 'className' | 'selectionBehavior' | 'style'>;\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 | undefined, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// Whether a press on the row began on a control inside it rather than on the\n// row itself. `contains` answers false for no control at all, and true for\n// the row itself, which the second half rules out.\nfunction landsOnControl(event: PointerEvent<HTMLDivElement>) {\n  const control = event.target instanceof Element ? event.target.closest(NESTED_CONTROL) : null;\n  return event.currentTarget.contains(control) && control !== event.currentTarget;\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 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 row, so nothing has to outrank them.\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 | undefined): 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 * A `multiple` list draws a checkbox on every row. A `single` one draws none\n * and marks the chosen row alone, since a checkbox promises a choice that\n * leaves the others standing; `selectionBehavior` overrides either.\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  selectionBehavior,\n  selectLabel,\n  ...props\n}: ListProps<T> & RefAttributes<HTMLDivElement>) {\n  // React Aria's own reading of a draggable collection: hooks that can build\n  // the drag state.\n  const rowsAct = (props.selectionMode ?? 'none') !== 'none' || props.onAction !== undefined || props.dragAndDropHooks?.useDraggableCollectionState !== undefined;\n  return <SelectLabelContext value={selectLabel}>\n      <RowsActContext value={rowsAct}>\n        <RACGridList {...props} {...mergeStatefulStyles(containerClasses, props)}\n      // React Aria's own default is `toggle` in every mode. Read with `??`\n      // rather than placed before the spread, so a wrapper forwarding an\n      // unset prop still gets the default.\n      selectionBehavior={selectionBehavior ?? (props.selectionMode === 'single' ? 'replace' : 'toggle')} />\n      </RowsActContext>\n    </SelectLabelContext>;\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,\n  ...props\n}: ListLoadMoreProps & RefAttributes<HTMLDivElement>) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore diameter=\"24px\" label={label} />\n    </RACGridListLoadMoreItem>;\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 ListRow<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T> & RefAttributes<HTMLDivElement>) {\n  const selectLabel = useContext(SelectLabelContext);\n  const acts = useContext(RowsActContext) || props.onAction !== undefined || props.href !== undefined;\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own, and only on a row a press acts on, as ListItem draws\n  // it only on an interactive one: a row that does nothing on a press should\n  // not look as though it did. The call site's pointer handlers are handed to\n  // the hook to merge, for the reason ListItem gives, apart from the press\n  // itself, which `startsRipple` hands on. React Aria keeps a row's clicks\n  // for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(acts, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} onPointerDown={startsRipple(ripple.handlers.onPointerDown, onPointerDown)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\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> & RefAttributes<HTMLDivElement>) {\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// The row's press: the ripple's, unless it lands on a control inside the\n// row, which answers it itself — a trailing button pressed spread the row's\n// ripple across the whole row. The call site's own handler runs either way,\n// after the ripple's, as the hook orders the two. Built by a call rather than\n// written at the prop, for the reason `itemContent` gives.\nfunction startsRipple(ripple: PointerEventHandler<HTMLDivElement> | undefined, own: PointerEventHandler<HTMLDivElement> | undefined) {\n  return (event: PointerEvent<HTMLDivElement>) => {\n    if (!landsOnControl(event)) {\n      ripple?.(event);\n    }\n    own?.(event);\n  };\n}\nList.Item = ListRow;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport { ListLoadMore, ListRow, ListSection };\nexport default List;"],"mappings":"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"}

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

@@ -13,8 +13,9 @@ type ListDetailProps = {
    */
   list?: ReactNode;
   /**
-   * Which pane to show while only one fits, below the expanded breakpoint.
-   * Both are shown from expanded up, where this is ignored.
+   * Which pane to show while only one fits, while the layout is narrower than
+   * the expanded breakpoint. Both are shown once it is that wide, where this
+   * is ignored. The width is the layout's own rather than the window's.
    *
    * Controlled, with no uncontrolled fallback: the layout cannot know that an
    * item was selected or that the reader went back, so holding that state
@@ -36,6 +37,13 @@ type ListDetailProps = {
  * Material Design's list-detail layout: a fixed list pane beside a flexible
  * detail pane, collapsing to one pane at a time below the expanded breakpoint.
  *
+ * The breakpoints are compared against the layout's own width, not the
+ * window's, so a list-detail beside a navigation drawer or inside a sheet
+ * shows one pane until it has the room for two. It takes that width from
+ * its parent and none from its panes, so in a parent that shrinks to fit
+ * what it holds — an inline-flex row, a float, a flex item with no basis —
+ * give it a width of its own.
+ *
  * Layout only — neither pane paints a surface of its own, so what goes inside
  * them is composed at the call site. `render` swaps the container's element,
  * for a layout that should be a `<main>` rather than a `<div>`.
@@ -44,7 +52,7 @@ type ListDetailProps = {
  * 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
+ * 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.

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

@@ -8,6 +8,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Material Design's list-detail layout: a fixed list pane beside a flexible
 * detail pane, collapsing to one pane at a time below the expanded breakpoint.
 *
+* The breakpoints are compared against the layout's own width, not the
+* window's, so a list-detail beside a navigation drawer or inside a sheet
+* shows one pane until it has the room for two. It takes that width from
+* its parent and none from its panes, so in a parent that shrinks to fit
+* what it holds — an inline-flex row, a float, a flex item with no basis —
+* give it a width of its own.
+*
 * Layout only — neither pane paints a surface of its own, so what goes inside
 * them is composed at the call site. `render` swaps the container's element,
 * for a layout that should be a `<main>` rather than a `<div>`.
@@ -16,7 +23,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * 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
+* 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.
@@ -39,8 +46,8 @@ function ListDetail(t0) {
 		let t8;
 		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 			t8 = {
-				0: { className: "x9f619 xeuugli" },
-				1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
+				0: { className: "x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k" },
+				1: { className: "x9f619 xeuugli x1kk7mra x7v35i x1r8uery x11pqzan x1iyjqo2 x1fllpej xs83m0k xsfcrho x1s85apg" }
 			};
 			$[7] = t8;
 		} else t8 = $[7];
@@ -58,8 +65,8 @@ function ListDetail(t0) {
 		let t11;
 		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 			t11 = {
-				0: { className: "x9f619 xeuugli" },
-				1: { className: "x9f619 xeuugli x1s85apg x9a4l8x" }
+				0: { className: "x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k" },
+				1: { className: "x9f619 xeuugli x1r8uery x1iyjqo2 xs83m0k xsfcrho x1s85apg" }
 			};
 			$[11] = t11;
 		} else t11 = $[11];
@@ -80,7 +87,7 @@ function ListDetail(t0) {
 			$[16] = t13;
 			$[17] = t2;
 		} else t2 = $[17];
-		t3 = mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5" }, props);
+		t3 = mergeStyles({ className: "x9f619 x12h1iku x78zum5 xj2l1yv" }, props);
 		$[0] = t0;
 		$[1] = render;
 		$[2] = t1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","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 { 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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"}
+{"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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"}

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

@@ -6,6 +6,11 @@ type ListItemProps = {
   /**
    * Renders a `<button>` that ripples and tints on hover, for a row that is
    * itself pressable. Leave it off for a row that only presents.
+   *
+   * Only an interactive row takes `onClick`, `onContextMenu` and the pointer
+   * 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.
    * @default false
    */
   interactive?: boolean;
@@ -31,7 +36,17 @@ type ListItemProps = {
   supporting?: ReactNode;
   /** Content after the headline, such as an amount or a control. */
   trailing?: ReactNode;
-} & HTMLAttributes<HTMLElement>;
+} & HTMLAttributes<HTMLElement> & ({
+  interactive: true;
+} | {
+  interactive?: false;
+  onClick?: never;
+  onContextMenu?: never;
+  onPointerCancel?: never;
+  onPointerDown?: never;
+  onPointerLeave?: never;
+  onPointerUp?: never;
+});
 /**
  * A static row: the row every list draws, on its own, as the lists spec page
  * gives it — a 56px one-line container, a body-large headline and a

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","ListItem","t0","$","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","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   * @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\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   * @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":";;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAA2B,SAAAC,IAAA;CAAA,MAAAC,IAAA5B,EAAA,EAAA;CAAkB,MAAA,EAAAY,UAAAC,aAAAgB,IAAAf,YAAAgB,IAAAf,SAAAK,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAT,UAAAe,KAAAd,YAAAC,UAAA,GAAAc,YAAAL;CAEhB,MAAAd,cAAAgB,OAAAI,KAAAA,IAAA,QAAAJ;CACA,MAAAf,aAAAgB,OAAAG,KAAAA,IAAA,QAAAH;CAAkB,IAAAI;CAAA,IAAAN,EAAA,OAAAR,WAAAQ,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,mBAAAM,EAAA,OAAAL,iBAAAK,EAAA,OAAAJ,kBAAAI,EAAA,OAAAH,aAAA;EA8BgDS,KAAA;GAAAd;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOlE;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAPD,MAAAO,SAAe9B,UAAuBQ,eAAA,CAAgBC,YAAYoB,EAOjE;CAWD,MAAAE,cAAoB9B,WAAWU,QAAgB,IAA3B,IAAA,MAAiCV,WAAWW,UAAkB,IAA7B,IAAA;CACrD,MAAAoB,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAX,EAAA,OAAAG,KAAA;EAKjBQ,KAAAhC,YAAYwB,GAAG;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAlC,MAAAY,YAAkBD;CAAiB,IAAAE;CAAA,IAAAb,EAAA,OAAAhB,YAAAgB,EAAA,QAAAd,cAAAc,EAAA,QAAAb,WAAAa,EAAA,QAAAZ,YAAAY,EAAA,QAAAX,cAAAW,EAAA,QAAAV,UAAA;EACnBuB,KAAA,oBAAC,YAAD;GAAwB3B;GAAqBC;GAAmBC;GAAsBC;GAAsBC;GACvHN;EADsB,CAAA;EAEZgB,EAAA,KAAAhB;EAAAgB,EAAA,MAAAd;EAAAc,EAAA,MAAAb;EAAAa,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAV;EAAAU,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAFf,MAAAc,UAAgBD;CAQhB,IAAI,CAAC5B,aAAW,OACP,oBAAA,OAAA;EAAoB,iBAAAC,cAAAmB,KAAAA;EAA8BO,KAAAA;EAAS,GAAMR;EAAK,GAAMG,OAAMQ;EAAS,GAAMjC,YAAYN,MAAaK,UAASmC,MAAOnC,UAASoC,MAAOR,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASqC,QAAS,GAAGd,OAAK;EACpQU,UAAAA;CACG,CAAA;CAEgD,MAAAK,KAAA;CAAa,MAAAC,KAAAb,OAAMQ;CAA0B,MAAAM,KAAAvC,YAAYN,MAAaK,UAASmC,MAAOnC,UAASoC,MAAOpC,UAASI,aAAcJ,UAASyC,mBAAoBb,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASqC,QAAS,GAAGd,OAAK;CAAC,IAAAmB;CAAA,IAAAvB,EAAA,QAAAc,WAAAd,EAAA,QAAAY,aAAAZ,EAAA,QAAAd,cAAAc,EAAA,QAAAI,WAAAJ,EAAA,QAAAO,OAAAQ,YAAAf,EAAA,QAAAO,OAAAiB,WAAAxB,EAAA,QAAAqB,IAAA;EAAtTE,KAAA,qBAAA,UAAA;GAAkBrC,UAAAA;GAAiB0B,KAAAA;GAAgB,MAAAO;GAAQ,GAAKC;GAAe,GAAMhB;GAAK,GAAMiB;GAAhG,UAAA,CACFP,SACAP,OAAMiB,OACA;;EAAAxB,EAAA,MAAAc;EAAAd,EAAA,MAAAY;EAAAZ,EAAA,MAAAd;EAAAc,EAAA,MAAAI;EAAAJ,EAAA,MAAAO,OAAAQ;EAAAf,EAAA,MAAAO,OAAAiB;EAAAxB,EAAA,MAAAqB;EAAArB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,OAHJuB;AAGI"}

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

@@ -51,7 +51,9 @@ type MenuContentProps<T extends object = object> = {
    * Which side of the trigger the menu opens on. Left out, a menu opens below
    * its trigger and a submenu at the inline end of the item that opens it,
    * where the item's chevron points — the places React Aria gives each.
-   * Given `align` alone, the side is `bottom`.
+   * Given `align` alone, the side is `bottom`. `start` and `end` follow the
+   * writing direction, as a submenu does; `left` and `right` stay put in
+   * either.
    */
   side?: MenuSide;
   /**
@@ -72,7 +74,9 @@ type MenuItemProps$1<T extends object = object> = {
   /**
    * 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
-   * apart from the label rather than reading the two as one name.
+   * 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.
    */
   shortcut?: ReactNode;
   /** A function may compute the style from the item's render state. */