@kanso-labs/kanso-ui 0.34.0 → 0.34.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x16fbrrb\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","popup","t11","t12","t13","ComboBoxBox","isInvalid","multiple","state","chosen","selectedItems","length","ComboToggle","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input on its line, through React Aria's\n// `ComboBoxValue`, with the label floated over them. For a field that draws\n// each of them as a removable chip, the coverage plan has TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x16fbrrb\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input on its line when more than one\n * may be chosen. The chrome's `FieldValue` is the styled element and React\n * Aria's `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue>\n      <RACComboBoxValue className=\"xb3r6kr xlyipyv xuxw1ft\" />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <ComboBoxBox boxRef={boxRef} floatingLabel={floatingLabel} isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leadingIcon={leadingIcon} multiple={props.selectionMode === 'multiple'} variant={variant} />\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The box and what it holds. Its own component so it can read React Aria's\n * state for what is chosen: with more than one option allowed, the input is\n * empty while options are chosen, so it cannot be what says the field holds\n * something. The box is told instead, and the label floats over the chosen\n * options rather than resting on them. Otherwise the box reads the input, as\n * it does for one option, which is what floats the label on typed text.\n */\nfunction ComboBoxBox({\n  boxRef,\n  floatingLabel,\n  isDisabled,\n  isInvalid,\n  label,\n  leadingIcon,\n  multiple,\n  variant\n}: {\n  boxRef: RefObject<HTMLDivElement | null>;\n  floatingLabel: boolean;\n  isDisabled: boolean;\n  isInvalid: boolean | undefined;\n  label: string;\n  leadingIcon: ReactNode;\n  multiple: boolean;\n  variant: FieldVariant;\n}) {\n  const state = useContext(ComboBoxStateContext);\n  const chosen = multiple && (state?.selectedItems.length ?? 0) > 0;\n  return <FieldBox floatingLabel={floatingLabel}\n  // React Aria's `TextField` hands its group the field's disabled and\n  // invalid state through context; its `ComboBox` does not, so the box\n  // is told outright or its label and its underline never turn.\n  isDisabled={isDisabled} isInvalid={isInvalid} isPopulated={chosen ? true : undefined} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n      {multiple ? <span className=\"xpr5407 xrvj5dj xuptkxw\">\n          <ChosenValues />\n          <FieldInput />\n        </span> : <FieldInput />}\n    </FieldBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

package/dist/components/disclosure/index.js

@@ -1,11 +1,12 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { useRipple } from "../../hooks/useRipple.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { useContext } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 //#region src/components/disclosure/index.tsx
 const styles = { header: {
@@ -83,49 +84,54 @@ function Disclosure$1(t0) {
 * slots with a chevron in the trailing one.
 */
 function DisclosureHeader(t0) {
-	const $ = c(13);
+	const $ = c(15);
 	const { children, headingLevel: t1, leading, supporting } = t0;
 	const headingLevel = t1 === void 0 ? 3 : t1;
 	const state = useContext(DisclosureStateContext);
+	const ripple = useRipple();
 	let t2;
 	if ($[0] !== supporting) {
 		t2 = headerClassName(supporting);
 		$[0] = supporting;
 		$[1] = t2;
 	} else t2 = $[1];
-	const t3 = state?.isExpanded === true;
-	let t4;
-	if ($[2] !== children || $[3] !== leading || $[4] !== supporting || $[5] !== t3) {
-		t4 = headerContent(children, leading, supporting, t3);
+	const t3 = ripple.handlers;
+	const t4 = state?.isExpanded === true;
+	let t5;
+	if ($[2] !== children || $[3] !== leading || $[4] !== ripple.surface || $[5] !== supporting || $[6] !== t4) {
+		t5 = headerContent(children, leading, supporting, t4, ripple.surface);
 		$[2] = children;
 		$[3] = leading;
-		$[4] = supporting;
-		$[5] = t3;
+		$[4] = ripple.surface;
+		$[5] = supporting;
 		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== t2 || $[8] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Button, {
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== ripple.handlers || $[9] !== t2 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Button, {
 			className: t2,
 			slot: "trigger",
-			children: t4
+			...t3,
+			children: t5
 		});
-		$[7] = t2;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== headingLevel || $[11] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Heading, {
+		$[8] = ripple.handlers;
+		$[9] = t2;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== headingLevel || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Heading, {
 			level: headingLevel,
 			className: "x1qlqyl8 x1pd3egz x1ghz6dp",
-			children: t5
+			children: t6
 		});
-		$[10] = headingLevel;
-		$[11] = t5;
-		$[12] = t6;
-	} else t6 = $[12];
-	return t6;
+		$[12] = headingLevel;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
 }
 /**
 * What the section shows while it is open. Its content lines up with the
@@ -185,14 +191,14 @@ function DisclosurePanel$1(t0) {
 function headerClassName(supporting) {
 	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== void 0 && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? "";
 }
-function headerContent(children, leading, supporting, isExpanded) {
-	return (state) => /* @__PURE__ */ jsx(RowContent, {
+function headerContent(children, leading, supporting, isExpanded, ripple) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		leading,
 		supporting,
 		trailing: chevronFor(isExpanded),
 		children
-	});
+	}), state.isDisabled ? null : ripple] });
 }
 Disclosure$1.Header = DisclosureHeader;
 Disclosure$1.Panel = DisclosurePanel$1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DisclosurePanelProps","RACDisclosurePanelProps","DisclosureProps","RACDisclosureProps","stylex","useContext","DisclosureStateContext","Button","RACButton","Disclosure","RACDisclosure","DisclosurePanel","RACDisclosurePanel","Heading","RACHeading","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","colors","motion","spacing","styles","header","kzqmXN","k9WMMc","$$css","DisclosureHeaderProps","children","headingLevel","leading","supporting","Omit","className","style","chevronFor","isExpanded","t0","$","_c","T0","t1","t2","t3","props","DisclosureHeader","undefined","state","headerClassName","t4","headerContent","t5","t6","Symbol","for","0","1","isDisabled","base","list","interactive","twoLine","disabled","Header","Panel"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\">\n        {headerContent(children, leading, supporting, state?.isExpanded === true)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header 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 the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\n// No overline, and so no three-line header. The row takes the list\n// variant's metrics because a header looks like a list row, but what it\n// follows is its own page, and that page gives a headline and a supporting\n// line — the three-line item belongs to the lists page, which `List.Item`\n// and `ListBox.Item` draw.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n      {children}\n    </RowContent>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","DisclosurePanelProps","RACDisclosurePanelProps","DisclosureProps","RACDisclosureProps","stylex","useContext","DisclosureStateContext","Button","RACButton","Disclosure","RACDisclosure","DisclosurePanel","RACDisclosurePanel","Heading","RACHeading","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","colors","motion","spacing","styles","header","kzqmXN","k9WMMc","$$css","DisclosureHeaderProps","children","headingLevel","leading","supporting","Omit","className","style","chevronFor","isExpanded","t0","$","_c","T0","t1","t2","t3","props","DisclosureHeader","undefined","state","ripple","headerClassName","handlers","t4","t5","surface","headerContent","t6","t7","Symbol","for","0","1","isDisabled","base","list","interactive","twoLine","disabled","Header","Panel"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  // The press ripple a list's rows draw, since this is the same row. It is a\n  // button, which hears its own click, so the press ends there as Button's\n  // does, and a keyboard press draws one too.\n  const ripple = useRipple<FocusableElement>();\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\" {...ripple.handlers}>\n        {headerContent(children, leading, supporting, state?.isExpanded === true, ripple.surface)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header 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 the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\n// No overline, and so no three-line header. The row takes the list\n// variant's metrics because a header looks like a list row, but what it\n// follows is its own page, and that page gives a headline and a supporting\n// line — the three-line item belongs to the lists page, which `List.Item`\n// and `ListBox.Item` draw.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean, ripple: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <>\n      <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AASA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAArB,OAAA8C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR3D,iBAAiBwD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAhD;EAAgBiD,KAAA/C,aAAayD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4BhE,MAAaW,OAAMC,MAAOP,MAAK4D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAevD,OAAMY,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA/C,oBAAoByD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}
+{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// No Material Design page draws an inline link. The nearest component is the\n// text button, whose label is the same primary role on no container, and this\n// takes that, with the disabled treatment every page gives content: on\n// surface at the disabled-content opacity. What belongs to a control standing\n// on its own is left out — the button's height, padding, type and state\n// layer. A link takes its size and face from the sentence it sits in, and\n// says it can be followed with its underline instead, which is this\n// component's own: a 1px rule in 45% of the primary role, or in the outline\n// role under `inherit`, turning fully primary on hover.\n\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AAoBA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAArB,OAAA8C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR3D,iBAAiBwD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAhD;EAAgBiD,KAAA/C,aAAayD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4BhE,MAAaW,OAAMC,MAAOP,MAAK4D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAevD,OAAMY,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA/C,oBAAoByD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}

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

@@ -86,7 +86,7 @@ declare namespace List {
  * A list that selects with checkboxes draws one before whatever `leading`
  * holds, from the state React Aria reports rather than from a prop here.
  */
-declare function ListItem<T extends object = object>({ children, leading, overline, supporting, textValue, trailing, ...props }: ListRowProps<T>): import("react").JSX.Element;
+declare function ListItem<T extends object = object>({ children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props }: ListRowProps<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/index.js

@@ -1,6 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { useRipple } from "../../hooks/useRipple.js";
 import Checkbox from "../checkbox/index.js";
+import { textOf } from "../../collection/text.js";
 import { CollectionLoadMore } from "../../collection/index.js";
 import { collectionStyles, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
@@ -10,8 +12,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("Select");
-function itemContent(children, leading, overline, supporting, trailing, selectLabel) {
-	return (state) => /* @__PURE__ */ jsx(RowContent, {
+function itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading: leadingFor(state, leading, selectLabel),
@@ -19,7 +21,7 @@ function itemContent(children, leading, overline, supporting, trailing, selectLa
 		supporting,
 		trailing,
 		children
-	});
+	}), state.isDisabled ? null : ripple] });
 }
 /**
 * The selection checkbox, then whatever the row was given. Its return type is
@@ -59,13 +61,13 @@ function List(t0) {
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { selectLabel: t4, ...props$1 } = t0;
+		const { selectLabel: t4, ...props$3 } = t0;
 		const selectLabel = t4 === void 0 ? "Select" : t4;
 		T1 = SelectLabelContext;
 		t3 = selectLabel;
 		T0 = GridList;
-		t1 = props$1;
-		t2 = mergeStatefulStyles(props(collectionStyles.container), props$1);
+		t1 = props$3;
+		t2 = mergeStatefulStyles(props(collectionStyles.container), props$3);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -112,45 +114,66 @@ function List(t0) {
 * holds, from the state React Aria reports rather than from a prop here.
 */
 function ListItem(t0) {
-	const $ = c(16);
-	const { children, leading, overline, supporting, textValue, trailing, ...props } = t0;
+	const $ = c(24);
+	const { children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props } = t0;
 	const selectLabel = useContext(SelectLabelContext);
-	const T0 = GridListItem;
 	let t1;
-	if ($[0] !== children || $[1] !== textValue) {
-		t1 = textValue ?? textOf(children);
-		$[0] = children;
-		$[1] = textValue;
-		$[2] = t1;
-	} else t1 = $[2];
-	const t2 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
-	let t3;
-	if ($[3] !== children || $[4] !== leading || $[5] !== overline || $[6] !== selectLabel || $[7] !== supporting || $[8] !== trailing) {
-		t3 = itemContent(children, leading, overline, supporting, trailing, selectLabel);
-		$[3] = children;
-		$[4] = leading;
-		$[5] = overline;
-		$[6] = selectLabel;
-		$[7] = supporting;
-		$[8] = trailing;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== T0 || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
-			textValue: t1,
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== 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);
+	const T0 = GridListItem;
+	let t2;
+	if ($[6] !== children || $[7] !== textValue) {
+		t2 = textValue ?? textOf(children);
+		$[6] = children;
+		$[7] = textValue;
+		$[8] = t2;
+	} else t2 = $[8];
+	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 t6;
+	if ($[17] !== T0 || $[18] !== props || $[19] !== ripple.handlers || $[20] !== t2 || $[21] !== t4 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			textValue: t2,
+			...t3,
 			...props,
-			...t2,
-			children: t3
+			...t4,
+			children: t5
 		});
-		$[10] = T0;
-		$[11] = props;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+		$[17] = T0;
+		$[18] = props;
+		$[19] = ripple.handlers;
+		$[20] = t2;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
 }
 /**
 * The row the list shows while it is fetching more. React Aria calls
@@ -164,11 +187,11 @@ function ListLoadMore(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 = GridListLoadMoreItem;
-		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;
@@ -216,12 +239,12 @@ function ListSection(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 = GridListSection;
-		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;
@@ -260,9 +283,6 @@ function ListSection(t0) {
 	} else t4 = $[13];
 	return t4;
 }
-function textOf(children) {
-	return typeof children === "string" ? children : void 0;
-}
 List.Item = ListItem;
 List.LoadMore = ListLoadMore;
 List.Section = ListSection;

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","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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"}
+{"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","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListLoadMoreProps","Omit","label","ListProps","T","className","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","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 { 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.\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, 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 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  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\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 * 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}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport default List;"],"mappings":"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"}