@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/select/field-shell.js

@@ -0,0 +1,135 @@
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { ErrorText, FieldErrorIcon, FieldLabel, SupportingText } from "../../primitives/Field.js";
+import { textFieldStyles } from "../text-field/text-field-styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/field-shell.tsx
+function fieldState({ disabled, invalid, focused, hovered }) {
+	if (disabled) return "disabled";
+	if (invalid) return focused ? "error-focus" : hovered ? "error-hover" : "error";
+	return focused ? "focus" : hovered ? "hover" : "rest";
+}
+/** Material Symbols `arrow_drop_down`; it turns over while the menu is open (Compose). */
+function DropdownArrow({ open }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-open": open || void 0,
+		className: "transition-transform [transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)] data-open:rotate-180 motion-reduce:transition-none",
+		children: /* @__PURE__ */ jsx("path", { d: "M480-360 280-560h400L480-360Z" })
+	});
+}
+/**
+* The M3 text field's look for fields that aren't a plain input: the filled or outlined
+* container, floating label, outline notch, active indicator, supporting text and error,
+* with the same tokens and `data-field-state` machine as `TextField`.
+*/
+function FieldShell({ variant, density, label, labelProps, required, state, floated, open, leadingIcon, trailing, trailingAction, errorIcon, errorIconLabel, readOnly = false, children, supportingText, descriptionProps, errorText, errorMessageProps, showError, containerRef, containerProps, onContainerPointerDown, rootProps, rootRef, className, classNames, style, multiline = false }) {
+	const hasLabel = label !== void 0 && label !== null;
+	const styles = textFieldStyles({
+		variant,
+		hasLabel,
+		hasLeadingIcon: Boolean(leadingIcon),
+		hasTrailingIcon: true,
+		multiline
+	});
+	const requiredMark = required ? " *" : null;
+	const showErrorIcon = state.startsWith("error") && errorIcon !== false;
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		ref: rootRef,
+		style,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		"data-tokens": mergeDataTokens("md-comp-text-field", rootProps),
+		"data-variant": variant,
+		...densityAttribute(density),
+		"data-field-state": state,
+		"data-focused": state === "focus" || state === "error-focus" || void 0,
+		"data-invalid": state.startsWith("error") || void 0,
+		"data-disabled": state === "disabled" || void 0,
+		"data-readonly": readOnly || void 0,
+		"data-floated": floated || void 0,
+		"data-open": open || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...containerProps,
+			ref: containerRef,
+			onPointerDown: onContainerPointerDown,
+			"data-slot": "container",
+			className: styles.container({ class: cn("cursor-pointer", classNames?.container) }),
+			children: [
+				variant === "outlined" && /* @__PURE__ */ jsx("fieldset", {
+					"aria-hidden": "true",
+					"data-slot": "outline",
+					className: styles.outline({ class: classNames?.outline }),
+					children: hasLabel && /* @__PURE__ */ jsx("legend", {
+						className: styles.notch(),
+						children: /* @__PURE__ */ jsx("span", {
+							className: styles.notchClip(),
+							children: /* @__PURE__ */ jsxs("span", {
+								className: styles.notchText(),
+								children: [label, requiredMark]
+							})
+						})
+					})
+				}),
+				leadingIcon && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "leading-icon",
+					className: styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) }),
+					children: leadingIcon
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles.field({ class: classNames?.field }),
+					children
+				}),
+				trailingAction ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "trailing-action",
+					className: styles.icon(),
+					children: trailingAction
+				}) : null,
+				showErrorIcon ? /* @__PURE__ */ jsx("span", {
+					className: styles.icon({ class: styles.trailingIcon() }),
+					children: /* @__PURE__ */ jsx(FieldErrorIcon, {
+						label: errorIconLabel,
+						icon: errorIcon,
+						className: styles.errorIcon({ class: classNames?.errorIcon })
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "trailing-icon",
+					className: styles.icon({ class: cn(styles.trailingIcon(), classNames?.trailingIcon) }),
+					children: trailing
+				}),
+				hasLabel && /* @__PURE__ */ jsxs(FieldLabel, {
+					...labelProps,
+					"data-slot": "label",
+					className: styles.label({ class: classNames?.label }),
+					children: [label, requiredMark]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "active-indicator",
+					className: styles.indicator({ class: classNames?.activeIndicator })
+				})
+			]
+		}), (supportingText || showError) && /* @__PURE__ */ jsxs("div", {
+			className: styles.supporting(),
+			children: [supportingText && /* @__PURE__ */ jsx(SupportingText, {
+				...descriptionProps,
+				"data-slot": "supporting-text",
+				className: cn(styles.supportingText({ class: cn(styles.supportingTextColor(), classNames?.supportingText) }), showError && "sr-only"),
+				children: supportingText
+			}), showError && /* @__PURE__ */ jsx(ErrorText, {
+				...errorMessageProps,
+				className: styles.supportingText({ class: classNames?.errorText }),
+				children: errorText
+			})]
+		})]
+	});
+}
+//#endregion
+export { DropdownArrow, FieldShell, fieldState };
+
+//# sourceMappingURL=field-shell.js.map

package/dist/components/select/field-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-shell.js","names":[],"sources":["../../../src/components/select/field-shell.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode, Ref } from 'react';\nimport { ErrorText, FieldErrorIcon, FieldLabel, SupportingText } from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { textFieldStyles, type TextFieldVariant } from '../text-field/text-field-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** The text field's one state at a time, in priority order (see text-field-styles). */\nexport type FieldState =\n  'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\nexport function fieldState({\n  disabled,\n  invalid,\n  focused,\n  hovered,\n}: {\n  disabled: boolean;\n  invalid: boolean;\n  focused: boolean;\n  hovered: boolean;\n}): FieldState {\n  if (disabled) return 'disabled';\n  if (invalid) return focused ? 'error-focus' : hovered ? 'error-hover' : 'error';\n  return focused ? 'focus' : hovered ? 'hover' : 'rest';\n}\n\n/** Material Symbols `arrow_drop_down`; it turns over while the menu is open (Compose). */\nexport function DropdownArrow({ open }: { open: boolean }) {\n  return (\n    <svg\n      viewBox=\"0 -960 960 960\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      data-open={open || undefined}\n      className=\"transition-transform [transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)] data-open:rotate-180 motion-reduce:transition-none\"\n    >\n      <path d=\"M480-360 280-560h400L480-360Z\" />\n    </svg>\n  );\n}\n\nexport interface FieldShellClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, value and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The row holding the field's value (the button, or the chips and input). */\n  field?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing box holding the arrow (and the error icon). */\n  trailingIcon?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\nexport interface FieldShellProps {\n  variant: TextFieldVariant;\n  /** The field's own density; left out, it inherits the theme's. */\n  density?: Density | undefined;\n  label: ReactNode;\n  labelProps: HTMLAttributes<HTMLElement>;\n  required?: boolean | undefined;\n  state: FieldState;\n  /** The label sits above the content (a value, a placeholder, focus or an open menu). */\n  floated: boolean;\n  open: boolean;\n  leadingIcon?: ReactNode;\n  /** The arrow, or a button holding it. */\n  trailing: ReactNode;\n  /**\n   * An icon button just before the error icon and `trailing` (the Autocomplete's clear\n   * button), in its own 48px box beside the value row like a text field's trailing icon, so\n   * it never makes the field taller than its 56px container.\n   */\n  trailingAction?: ReactNode;\n  /**\n   * The icon shown before `trailing` while the field is invalid (M3 strongly recommends one);\n   * `undefined` for the default `error` icon, `false` for none.\n   */\n  errorIcon?: ReactNode | false;\n  /** The error icon's accessible name (M3: \"Error\"). */\n  errorIconLabel: string;\n  readOnly?: boolean | undefined;\n  /** What the field holds: the Select's button or the Autocomplete's chips and input. */\n  children: ReactNode;\n  supportingText?: ReactNode;\n  descriptionProps: HTMLAttributes<HTMLElement>;\n  errorText?: ReactNode;\n  errorMessageProps: HTMLAttributes<HTMLElement>;\n  showError: boolean;\n  containerRef?: Ref<HTMLDivElement>;\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  onContainerPointerDown?: (event: PointerEvent<HTMLDivElement>) => void;\n  rootProps?: Record<string, unknown>;\n  rootRef?: Ref<HTMLDivElement>;\n  className?: string | undefined;\n  classNames?: FieldShellClassNames | undefined;\n  style?: CSSProperties | undefined;\n  /** Grows with the content (input chips), instead of the field's fixed 56px row. */\n  multiline?: boolean;\n}\n\n/**\n * The M3 text field's look for fields that aren't a plain input: the filled or outlined\n * container, floating label, outline notch, active indicator, supporting text and error,\n * with the same tokens and `data-field-state` machine as `TextField`.\n */\nexport function FieldShell({\n  variant,\n  density,\n  label,\n  labelProps,\n  required,\n  state,\n  floated,\n  open,\n  leadingIcon,\n  trailing,\n  trailingAction,\n  errorIcon,\n  errorIconLabel,\n  readOnly = false,\n  children,\n  supportingText,\n  descriptionProps,\n  errorText,\n  errorMessageProps,\n  showError,\n  containerRef,\n  containerProps,\n  onContainerPointerDown,\n  rootProps,\n  rootRef,\n  className,\n  classNames,\n  style,\n  multiline = false,\n}: FieldShellProps) {\n  const hasLabel = label !== undefined && label !== null;\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: true,\n    multiline,\n  });\n  // Part of the accessible name (M3); the notch's copy is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const showErrorIcon = state.startsWith('error') && errorIcon !== false;\n\n  return (\n    <div\n      {...rootProps}\n      ref={rootRef}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootProps)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={state === 'focus' || state === 'error-focus' || undefined}\n      data-invalid={state.startsWith('error') || undefined}\n      data-disabled={state === 'disabled' || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n      data-open={open || undefined}\n    >\n      <div\n        {...containerProps}\n        ref={containerRef}\n        onPointerDown={onContainerPointerDown}\n        data-slot=\"container\"\n        className={styles.container({ class: cn('cursor-pointer', classNames?.container) })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field({ class: classNames?.field })}>{children}</div>\n        {trailingAction ? (\n          <span data-slot=\"trailing-action\" className={styles.icon()}>\n            {trailingAction}\n          </span>\n        ) : null}\n        {showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={errorIconLabel}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        <span\n          data-slot=\"trailing-icon\"\n          className={styles.icon({ class: cn(styles.trailingIcon(), classNames?.trailingIcon) })}\n        >\n          {trailing}\n        </span>\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({ class: classNames?.errorText })}\n            >\n              {errorText}\n            </ErrorText>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/select/option-list.d.ts

@@ -0,0 +1,81 @@
+import { Density } from "../../tokens/density.js";
+import { JSX, ReactElement, ReactNode, RefObject } from "react";
+import "react-aria";
+import { Key as Key$1, OverlayTriggerState } from "react-stately";
+//#region src/components/select/option-list.d.ts
+/** Props of an option in a `Select` or `Autocomplete`; the React `key` identifies it. */
+export interface OptionItemProps {
+  /** The label. */
+  children: ReactNode;
+  /** Plain-text label for typeahead, filtering and the field, when `children` isn't a string. */
+  textValue?: string;
+  /** Icon (or avatar, flag…) before the label. */
+  leadingIcon?: ReactNode;
+  /** Second line of text. */
+  description?: ReactNode;
+  /** Short text at the end, e.g. a dialling code or a count. */
+  trailing?: ReactNode;
+  /** Accessible name when the label isn't plain text. */
+  'aria-label'?: string;
+}
+/** A group of options with an optional heading. */
+export interface OptionSectionProps {
+  /** Heading shown above the options. */
+  title?: ReactNode;
+  /** Accessible name for the group when it has no `title`. */
+  'aria-label'?: string;
+  children: ReactElement<OptionItemProps> | ReactElement<OptionItemProps>[];
+}
+/** An option in a `Select` (a React Stately collection item: identify it with `key`). */
+export declare const SelectItem: (props: OptionItemProps) => JSX.Element;
+/** A group of options in a `Select`, under an optional heading. */
+export declare const SelectSection: (props: OptionSectionProps) => JSX.Element;
+/** An option in an `Autocomplete` (a React Stately collection item: identify it with `key`). */
+export declare const AutocompleteItem: (props: OptionItemProps) => JSX.Element;
+/** A group of options in an `Autocomplete`, under an optional heading. */
+export declare const AutocompleteSection: (props: OptionSectionProps) => JSX.Element;
+export interface OptionListClassNames {
+  /** The list's surface. */
+  list?: string;
+  /** Each option. */
+  item?: string;
+  /** Each option's leading icon, or the check shown on a chosen option. */
+  icon?: string;
+  /** Each option's `description` line. */
+  description?: string;
+  /** Each option's `trailing` text. */
+  trailing?: string;
+  /** Each section's heading. */
+  heading?: string;
+  /** The divider between sections. */
+  divider?: string;
+  /** The text shown when no option matches. */
+  empty?: string;
+}
+/**
+ * The list's popover: anchored to the field, at least as wide as it (Compose's
+ * `exposedDropdownSize`), above it when there's no room below, with the menu's open and
+ * close motion: revealed from the field's edge as it fades in (M3 motion avoids scale). `nonModal` keeps an `Autocomplete`'s input usable while it's open.
+ */
+export declare function OptionPopover({ state, triggerRef, popoverRef, nonModal, onPressOutside, minWidth, density, children }: {
+  /** The open state the popover follows (from React Stately's `useOverlayTriggerState`). */
+  state: OverlayTriggerState;
+  /** The field the popover is placed under and matches the width of. */
+  triggerRef: RefObject<HTMLElement | null>;
+  /** Ref to the popover's surface. */
+  popoverRef: RefObject<HTMLDivElement | null>;
+  /**
+   * Keeps the page interactive while open (no underlay, focus stays in the field), as an
+   * editable field's menu needs. @default false
+   */
+  nonModal?: boolean;
+  /** The least width, when the field is narrower (a searchable menu needs room to type). */
+  minWidth?: number;
+  /** A press outside the menu and the field closes it (modal menus only). */
+  onPressOutside?: (() => void) | undefined;
+  /** The field's own density, which its menu takes; left out, the theme's. */
+  density?: Density | undefined;
+  children: ReactNode;
+}): JSX.Element | null;
+//#endregion
+//# sourceMappingURL=option-list.d.ts.map

package/dist/components/select/option-list.js

@@ -0,0 +1,291 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { useM3Spring } from "../../motion/use-m3-spring.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { LazyLoadingIndicator } from "../loading-indicator/lazy-loading-indicator.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
+import { useTypeaheadDelegate } from "../../utils/typeahead.js";
+import { useRevealEntering } from "../menu/use-reveal-entering.js";
+import { menuStyles, persistentScrollbar } from "../menu/menu-styles.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animate, useReducedMotion } from "motion/react";
+import { DismissButton, mergeProps, useHover, useListBox, useListBoxSection, useOption, usePopover } from "react-aria";
+import { Item, Section } from "react-stately";
+//#region src/components/select/option-list.tsx
+/** An option in a `Select` (a React Stately collection item: identify it with `key`). */
+const SelectItem = Item;
+/** A group of options in a `Select`, under an optional heading. */
+const SelectSection = Section;
+/** An option in an `Autocomplete` (a React Stately collection item: identify it with `key`). */
+const AutocompleteItem = Item;
+/** A group of options in an `Autocomplete`, under an optional heading. */
+const AutocompleteSection = Section;
+/** Material Symbols `check`, shown on chosen options (as M3 menus show selection). */
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
+});
+/**
+* The options of a `Select` or `Autocomplete`, drawn exactly as the library's M3 menu: its
+* surface, 44px items (4px less per density step), `tertiary-container` for chosen options
+* with a check, sections with headings and dividers, state layers and the inset focus ring.
+*/
+function OptionList({ listBoxProps, state, listBoxRef, emptyLabel, loading = false, loadingLabel, isBlocked, embedded = false, animateFiltering = false, classNames }) {
+	const typeaheadDelegate = useTypeaheadDelegate(state, listBoxRef);
+	const { listBoxProps: props } = useListBox({
+		...listBoxProps,
+		keyboardDelegate: listBoxProps.keyboardDelegate ?? typeaheadDelegate,
+		shouldFocusWrap: true
+	}, state, listBoxRef);
+	useFilterMotion(listBoxRef, state.collection, animateFiltering);
+	const menu = menuStyles({
+		variant: "standard",
+		groupPosition: "only"
+	});
+	const nodes = [...state.collection];
+	const isEmpty = ![...state.collection.getKeys()].some((key) => state.collection.getItem(key)?.type === "item");
+	const itemKeys = [...state.collection.getKeys()].filter((key) => state.collection.getItem(key)?.type === "item");
+	const first = nodes[0];
+	const itemOptions = {
+		state,
+		isBlocked,
+		topKey: first?.type === "section" && first.rendered ? null : itemKeys[0],
+		bottomKey: loading ? null : itemKeys.at(-1),
+		classNames
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-tokens": "md-comp-menus",
+		"data-variant": "standard",
+		className: cn(!embedded && menu.group(), "flex max-h-[inherit] min-h-0 flex-col overflow-hidden", classNames?.list),
+		children: [/* @__PURE__ */ jsx("ul", {
+			...props,
+			ref: listBoxRef,
+			className: cn("min-h-0 flex-1 overflow-y-auto outline-none", persistentScrollbar),
+			children: nodes.map((node, index) => node.type === "section" ? /* @__PURE__ */ jsx(OptionSection, {
+				section: node,
+				divided: index > 0,
+				...itemOptions
+			}, node.key) : /* @__PURE__ */ jsx(OptionItem, {
+				item: node,
+				...itemOptions
+			}, node.key))
+		}), loading && loadingLabel ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[calc(44px+var(--md-sys-density,0)*4px)] items-center justify-center",
+			children: /* @__PURE__ */ jsx(LazyLoadingIndicator, {
+				"aria-label": loadingLabel,
+				className: "size-[36px]"
+			})
+		}) : isEmpty ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: cn("px-[12px] py-[12px] text-label-large text-on-surface-variant", classNames?.empty),
+			children: emptyLabel
+		}) : null]
+	});
+}
+/**
+* FLIP for a filtered list: after the options change, each one still there starts where it
+* was and springs to its new place (default spatial spring). Positions are read only when
+* the collection changes; nothing moves under reduced motion.
+*/
+function useFilterMotion(listRef, collection, enabled) {
+	const spring = useM3Spring("spatial", "default");
+	const reducedMotion = useReducedMotion();
+	const positions = useRef(/* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (!enabled || !list) return;
+		const previous = positions.current;
+		const next = /* @__PURE__ */ new Map();
+		for (const item of list.querySelectorAll("[role=\"option\"][data-key]")) {
+			const key = item.dataset.key;
+			const top = item.offsetTop;
+			next.set(key, top);
+			const from = previous.get(key);
+			if (from === void 0 || from === top || reducedMotion) continue;
+			animate(item, { y: [from - top, 0] }, spring);
+		}
+		positions.current = next;
+	}, [
+		collection,
+		enabled,
+		listRef,
+		reducedMotion,
+		spring
+	]);
+}
+function OptionSection({ section, divided, ...itemOptions }) {
+	const { state, classNames } = itemOptions;
+	const { itemProps, headingProps, groupProps } = useListBoxSection({
+		heading: section.rendered,
+		"aria-label": section["aria-label"]
+	});
+	const menu = menuStyles({ variant: "standard" });
+	return /* @__PURE__ */ jsxs("li", {
+		...itemProps,
+		children: [
+			divided ? /* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				className: cn("mx-[8px] my-[calc(4px+var(--md-sys-density,0)*1px)] h-px bg-outline-variant", classNames?.divider)
+			}) : null,
+			section.rendered ? /* @__PURE__ */ jsx("span", {
+				...headingProps,
+				className: menu.heading({ class: classNames?.heading }),
+				children: section.rendered
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				...groupProps,
+				children: [...state.collection.getChildren(section.key)].map((item) => /* @__PURE__ */ jsx(OptionItem, {
+					item,
+					...itemOptions
+				}, item.key))
+			})
+		]
+	});
+}
+function OptionItem({ item, state, isBlocked, topKey, bottomKey, classNames }) {
+	const ref = useRef(null);
+	const { optionProps, isSelected, isFocusVisible } = useOption({ key: item.key }, state, ref);
+	const isDisabled = state.selectionManager.disabledKeys.has(item.key) || (isBlocked?.(item.key) ?? false);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { leadingIcon, description, trailing } = item.props;
+	const menu = menuStyles({
+		variant: "standard",
+		hasDescription: Boolean(description),
+		itemTop: item.key === topKey ? "nested" : "plain",
+		itemBottom: item.key === bottomKey ? "nested" : "plain"
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		...mergeProps(optionProps, hoverProps),
+		ref,
+		"aria-disabled": isDisabled || void 0,
+		"data-key": String(item.key),
+		"data-tokens": "md-comp-menus",
+		"data-variant": "standard",
+		className: menu.item({ class: classNames?.item }),
+		"data-selected": isSelected || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-hovered": isHovered && !isDisabled || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		children: [
+			leadingIcon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: menu.icon({ class: classNames?.icon }),
+				children: isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : leadingIcon
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: menu.selectedIcon(),
+				children: /* @__PURE__ */ jsx("span", {
+					className: menu.selectedIconInner(),
+					children: /* @__PURE__ */ jsx("span", {
+						className: menu.icon({ class: classNames?.icon }),
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: menu.text(),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: item.rendered
+				}), description ? /* @__PURE__ */ jsx("span", {
+					className: menu.description({ class: classNames?.description }),
+					children: description
+				}) : null]
+			}),
+			trailing ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: menu.trailing({ class: cn("tabular-nums", classNames?.trailing) }),
+				children: trailing
+			}) : null
+		]
+	});
+}
+/**
+* The list's popover: anchored to the field, at least as wide as it (Compose's
+* `exposedDropdownSize`), above it when there's no room below, with the menu's open and
+* close motion: revealed from the field's edge as it fades in (M3 motion avoids scale). `nonModal` keeps an `Autocomplete`'s input usable while it's open.
+*/
+function OptionPopover({ state, triggerRef, popoverRef, nonModal = false, onPressOutside, minWidth = 0, density, children }) {
+	const { isPresent, isExiting, exitProps } = usePresence(state.isOpen);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		disableFocusManagement: nonModal,
+		density,
+		children: /* @__PURE__ */ jsx(PopoverBody, {
+			state,
+			triggerRef,
+			popoverRef,
+			isNonModal: nonModal,
+			isExiting,
+			exitProps,
+			onPressOutside,
+			minWidth,
+			children
+		})
+	});
+}
+function PopoverBody({ state, triggerRef, popoverRef, isNonModal, isExiting, exitProps, onPressOutside, minWidth, children }) {
+	const { popoverProps, underlayProps, placement } = usePopover({
+		triggerRef,
+		popoverRef,
+		placement: "bottom start",
+		offset: 4,
+		isNonModal
+	}, state);
+	const revealRef = useRef(null);
+	const entering = useRevealEntering(placement, revealRef);
+	const [width, setWidth] = useState();
+	useLayoutEffect(() => {
+		setWidth(triggerRef.current?.getBoundingClientRect().width);
+	}, [triggerRef]);
+	useEffect(() => {
+		if (isNonModal || !onPressOutside) return;
+		const onPointerDown = (event) => {
+			if (popoverRef.current?.contains(event.target)) return;
+			const field = triggerRef.current?.getBoundingClientRect();
+			if (!(field !== void 0 && event.clientX >= field.left && event.clientX <= field.right && event.clientY >= field.top && event.clientY <= field.bottom)) onPressOutside();
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		return () => document.removeEventListener("pointerdown", onPointerDown, true);
+	}, [
+		isNonModal,
+		onPressOutside,
+		popoverRef,
+		triggerRef
+	]);
+	const menu = menuStyles();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isNonModal ? null : /* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		className: "fixed inset-0"
+	}), /* @__PURE__ */ jsxs("div", {
+		...popoverProps,
+		ref: popoverRef,
+		style: {
+			...popoverProps.style,
+			minWidth: Math.max(width ?? 0, minWidth)
+		},
+		className: cn(menu.popover(), "flex max-w-[min(560px,calc(100vw-32px))] flex-col"),
+		children: [
+			isNonModal ? null : /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+			/* @__PURE__ */ jsx("div", {
+				...exitProps,
+				ref: revealRef,
+				"data-entering": entering || void 0,
+				"data-exiting": isExiting || void 0,
+				"data-placement": placement ?? void 0,
+				className: cn(menu.reveal(), "min-h-0 w-auto"),
+				children
+			}),
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+		]
+	})] });
+}
+//#endregion
+export { AutocompleteItem, AutocompleteSection, FOCUSABLE_DISABLED_OPTIONS, OptionList, OptionPopover, SelectItem, SelectSection };
+
+//# sourceMappingURL=option-list.js.map

package/dist/components/select/option-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-list.js","names":["Overlay"],"sources":["../../../src/components/select/option-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type JSX,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { animate, useReducedMotion } from 'motion/react';\nimport {\n  DismissButton,\n  mergeProps,\n  useHover,\n  useListBox,\n  useListBoxSection,\n  useOption,\n  usePopover,\n  type AriaListBoxOptions,\n} from 'react-aria';\nimport {\n  Item,\n  Section,\n  type Key,\n  type ListState,\n  type Node,\n  type OverlayTriggerState,\n} from 'react-stately';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { Overlay } from '../../primitives/Overlay';\nimport { usePresence } from '../../primitives/use-presence';\nimport type { Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { useTypeaheadDelegate } from '../../utils/typeahead';\nimport { LazyLoadingIndicator } from '../loading-indicator/lazy-loading-indicator';\nimport { menuStyles, persistentScrollbar } from '../menu/menu-styles';\nimport { useRevealEntering } from '../menu/use-reveal-entering';\n\nexport { FOCUSABLE_DISABLED_OPTIONS } from '../../utils/focusable-disabled';\n\n/** Props of an option in a `Select` or `Autocomplete`; the React `key` identifies it. */\nexport interface OptionItemProps {\n  /** The label. */\n  children: ReactNode;\n  /** Plain-text label for typeahead, filtering and the field, when `children` isn't a string. */\n  textValue?: string;\n  /** Icon (or avatar, flag…) before the label. */\n  leadingIcon?: ReactNode;\n  /** Second line of text. */\n  description?: ReactNode;\n  /** Short text at the end, e.g. a dialling code or a count. */\n  trailing?: ReactNode;\n  /** Accessible name when the label isn't plain text. */\n  'aria-label'?: string;\n}\n\n/** A group of options with an optional heading. */\nexport interface OptionSectionProps {\n  /** Heading shown above the options. */\n  title?: ReactNode;\n  /** Accessible name for the group when it has no `title`. */\n  'aria-label'?: string;\n  children: ReactElement<OptionItemProps> | ReactElement<OptionItemProps>[];\n}\n\n/** An option in a `Select` (a React Stately collection item: identify it with `key`). */\nexport const SelectItem = Item as unknown as (props: OptionItemProps) => JSX.Element;\n/** A group of options in a `Select`, under an optional heading. */\nexport const SelectSection = Section as unknown as (props: OptionSectionProps) => JSX.Element;\n/** An option in an `Autocomplete` (a React Stately collection item: identify it with `key`). */\nexport const AutocompleteItem = Item as unknown as (props: OptionItemProps) => JSX.Element;\n/** A group of options in an `Autocomplete`, under an optional heading. */\nexport const AutocompleteSection = Section as unknown as (props: OptionSectionProps) => JSX.Element;\n\nexport interface OptionListClassNames {\n  /** The list's surface. */\n  list?: string;\n  /** Each option. */\n  item?: string;\n  /** Each option's leading icon, or the check shown on a chosen option. */\n  icon?: string;\n  /** Each option's `description` line. */\n  description?: string;\n  /** Each option's `trailing` text. */\n  trailing?: string;\n  /** Each section's heading. */\n  heading?: string;\n  /** The divider between sections. */\n  divider?: string;\n  /** The text shown when no option matches. */\n  empty?: string;\n}\n\n/** Material Symbols `check`, shown on chosen options (as M3 menus show selection). */\nconst CheckIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n  </svg>\n);\n\n/**\n * The options of a `Select` or `Autocomplete`, drawn exactly as the library's M3 menu: its\n * surface, 44px items (4px less per density step), `tertiary-container` for chosen options\n * with a check, sections with headings and dividers, state layers and the inset focus ring.\n */\nexport function OptionList<T>({\n  listBoxProps,\n  state,\n  listBoxRef,\n  emptyLabel,\n  loading = false,\n  loadingLabel,\n  isBlocked,\n  embedded = false,\n  animateFiltering = false,\n  classNames,\n}: {\n  listBoxProps: AriaListBoxOptions<T>;\n  state: ListState<T>;\n  listBoxRef: RefObject<HTMLUListElement | null>;\n  /** Shown when there are no options (e.g. nothing matches the search). */\n  emptyLabel: ReactNode;\n  loading?: boolean;\n  /** The loading indicator's name; needed with `loading`. */\n  loadingLabel?: string;\n  /** Options that can't be chosen right now (`maxSelections` reached). */\n  isBlocked?: ((key: Key) => boolean) | undefined;\n  /** Inside a surface of its own (a sheet, or the search list's panel): no menu panel. */\n  embedded?: boolean;\n  /**\n   * The list filters as someone types: options that stay ease into their new places (M3:\n   * \"Menu items ease into their new position as the menu is filtered\").\n   */\n  animateFiltering?: boolean;\n  classNames?: OptionListClassNames | undefined;\n}) {\n  // M3: a letter moves focus to the next option starting with it.\n  const typeaheadDelegate = useTypeaheadDelegate(state, listBoxRef);\n  const { listBoxProps: props } = useListBox(\n    {\n      ...listBoxProps,\n      keyboardDelegate: listBoxProps.keyboardDelegate ?? typeaheadDelegate,\n      // The arrow keys wrap at the ends, as in menus and lists.\n      shouldFocusWrap: true,\n    },\n    state,\n    listBoxRef,\n  );\n  useFilterMotion(listBoxRef, state.collection, animateFiltering);\n  const menu = menuStyles({ variant: 'standard', groupPosition: 'only' });\n  const nodes = [...state.collection];\n  // Options, not sections: a section left with no matches doesn't count.\n  const isEmpty = ![...state.collection.getKeys()].some(\n    (key) => state.collection.getItem(key)?.type === 'item',\n  );\n  // As in Menu, an item touching the panel's 16px corner takes 12px (16 − the 4px padding):\n  // the first item, unless a heading sits above it, and the last, unless a loading or empty\n  // row sits below it.\n  const itemKeys = [...state.collection.getKeys()].filter(\n    (key) => state.collection.getItem(key)?.type === 'item',\n  );\n  const first = nodes[0];\n  const topKey = first?.type === 'section' && first.rendered ? null : itemKeys[0];\n  const bottomKey = loading ? null : itemKeys.at(-1);\n  const itemOptions = { state, isBlocked, topKey, bottomKey, classNames };\n\n  return (\n    <div\n      // The menu's component tokens (menu-tokens.ts), whose styles the list shares.\n      data-tokens=\"md-comp-menus\"\n      data-variant=\"standard\"\n      className={cn(\n        !embedded && menu.group(),\n        'flex max-h-[inherit] min-h-0 flex-col overflow-hidden',\n        classNames?.list,\n      )}\n    >\n      <ul\n        {...props}\n        ref={listBoxRef}\n        className={cn('min-h-0 flex-1 overflow-y-auto outline-none', persistentScrollbar)}\n      >\n        {nodes.map((node, index) =>\n          node.type === 'section' ? (\n            <OptionSection key={node.key} section={node} divided={index > 0} {...itemOptions} />\n          ) : (\n            <OptionItem key={node.key} item={node} {...itemOptions} />\n          ),\n        )}\n      </ul>\n      {loading && loadingLabel ? (\n        <div className=\"flex min-h-[calc(44px+var(--md-sys-density,0)*4px)] items-center justify-center\">\n          <LazyLoadingIndicator aria-label={loadingLabel} className=\"size-[36px]\" />\n        </div>\n      ) : isEmpty ? (\n        <p\n          role=\"status\"\n          className={cn(\n            'px-[12px] py-[12px] text-label-large text-on-surface-variant',\n            classNames?.empty,\n          )}\n        >\n          {emptyLabel}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * FLIP for a filtered list: after the options change, each one still there starts where it\n * was and springs to its new place (default spatial spring). Positions are read only when\n * the collection changes; nothing moves under reduced motion.\n */\nfunction useFilterMotion(\n  listRef: RefObject<HTMLUListElement | null>,\n  collection: unknown,\n  enabled: boolean,\n) {\n  const spring = useM3Spring('spatial', 'default');\n  const reducedMotion = useReducedMotion();\n  const positions = useRef(new Map<string, number>());\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!enabled || !list) return;\n    const previous = positions.current;\n    const next = new Map<string, number>();\n    for (const item of list.querySelectorAll<HTMLElement>('[role=\"option\"][data-key]')) {\n      const key = item.dataset.key!;\n      // offsetTop ignores transforms, so a moving option reports where it lands.\n      const top = item.offsetTop;\n      next.set(key, top);\n      const from = previous.get(key);\n      if (from === undefined || from === top || reducedMotion) continue;\n      animate(item, { y: [from - top, 0] }, spring);\n    }\n    positions.current = next;\n  }, [collection, enabled, listRef, reducedMotion, spring]);\n}\n\ninterface ItemOptions<T> {\n  state: ListState<T>;\n  isBlocked: ((key: Key) => boolean) | undefined;\n  /** The item at the panel's top edge, if any. */\n  topKey: Key | null | undefined;\n  /** The item at the panel's bottom edge, if any. */\n  bottomKey: Key | null | undefined;\n  classNames: OptionListClassNames | undefined;\n}\n\nfunction OptionSection<T>({\n  section,\n  divided,\n  ...itemOptions\n}: ItemOptions<T> & { section: Node<T>; divided: boolean }) {\n  const { state, classNames } = itemOptions;\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: section.rendered,\n    'aria-label': section['aria-label'],\n  });\n  const menu = menuStyles({ variant: 'standard' });\n  return (\n    <li {...itemProps}>\n      {divided ? (\n        <div\n          role=\"presentation\"\n          className={cn(\n            'mx-[8px] my-[calc(4px+var(--md-sys-density,0)*1px)] h-px bg-outline-variant',\n            classNames?.divider,\n          )}\n        />\n      ) : null}\n      {section.rendered ? (\n        <span {...headingProps} className={menu.heading({ class: classNames?.heading })}>\n          {section.rendered}\n        </span>\n      ) : null}\n      <ul {...groupProps}>\n        {[...state.collection.getChildren!(section.key)].map((item) => (\n          <OptionItem key={item.key} item={item} {...itemOptions} />\n        ))}\n      </ul>\n    </li>\n  );\n}\n\nfunction OptionItem<T>({\n  item,\n  state,\n  isBlocked,\n  topKey,\n  bottomKey,\n  classNames,\n}: ItemOptions<T> & { item: Node<T> }) {\n  const ref = useRef<HTMLLIElement>(null);\n  // Disabled options keep focus (the state's `disabledBehavior: 'selection'`), so React Aria\n  // treats them as enabled; they're marked disabled here, and the state (`disabledKeys`) or\n  // the selection cap (blocked options) turns their choice away.\n  const { optionProps, isSelected, isFocusVisible } = useOption({ key: item.key }, state, ref);\n  const isDisabled =\n    state.selectionManager.disabledKeys.has(item.key) || (isBlocked?.(item.key) ?? false);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { leadingIcon, description, trailing } = item.props as OptionItemProps;\n  const menu = menuStyles({\n    variant: 'standard',\n    hasDescription: Boolean(description),\n    itemTop: item.key === topKey ? 'nested' : 'plain',\n    itemBottom: item.key === bottomKey ? 'nested' : 'plain',\n  });\n\n  return (\n    <li\n      {...mergeProps(optionProps, hoverProps)}\n      ref={ref}\n      aria-disabled={isDisabled || undefined}\n      data-key={String(item.key)}\n      data-tokens=\"md-comp-menus\"\n      data-variant=\"standard\"\n      className={menu.item({ class: classNames?.item })}\n      data-selected={isSelected || undefined}\n      data-disabled={isDisabled || undefined}\n      data-hovered={(isHovered && !isDisabled) || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      {leadingIcon ? (\n        <span aria-hidden=\"true\" className={menu.icon({ class: classNames?.icon })}>\n          {isSelected ? <CheckIcon /> : leadingIcon}\n        </span>\n      ) : (\n        <span aria-hidden=\"true\" className={menu.selectedIcon()}>\n          <span className={menu.selectedIconInner()}>\n            <span className={menu.icon({ class: classNames?.icon })}>\n              <CheckIcon />\n            </span>\n          </span>\n        </span>\n      )}\n      <span className={menu.text()}>\n        <span className=\"truncate\">{item.rendered}</span>\n        {description ? (\n          <span className={menu.description({ class: classNames?.description })}>\n            {description}\n          </span>\n        ) : null}\n      </span>\n      {trailing ? (\n        <span\n          aria-hidden=\"true\"\n          className={menu.trailing({ class: cn('tabular-nums', classNames?.trailing) })}\n        >\n          {trailing}\n        </span>\n      ) : null}\n    </li>\n  );\n}\n\n/**\n * The list's popover: anchored to the field, at least as wide as it (Compose's\n * `exposedDropdownSize`), above it when there's no room below, with the menu's open and\n * close motion: revealed from the field's edge as it fades in (M3 motion avoids scale). `nonModal` keeps an `Autocomplete`'s input usable while it's open.\n */\nexport function OptionPopover({\n  state,\n  triggerRef,\n  popoverRef,\n  nonModal = false,\n  onPressOutside,\n  minWidth = 0,\n  density,\n  children,\n}: {\n  /** The open state the popover follows (from React Stately's `useOverlayTriggerState`). */\n  state: OverlayTriggerState;\n  /** The field the popover is placed under and matches the width of. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** Ref to the popover's surface. */\n  popoverRef: RefObject<HTMLDivElement | null>;\n  /**\n   * Keeps the page interactive while open (no underlay, focus stays in the field), as an\n   * editable field's menu needs. @default false\n   */\n  nonModal?: boolean;\n  /** The least width, when the field is narrower (a searchable menu needs room to type). */\n  minWidth?: number;\n  /** A press outside the menu and the field closes it (modal menus only). */\n  onPressOutside?: (() => void) | undefined;\n  /** The field's own density, which its menu takes; left out, the theme's. */\n  density?: Density | undefined;\n  children: ReactNode;\n}) {\n  const { isPresent, isExiting, exitProps } = usePresence(state.isOpen);\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting} disableFocusManagement={nonModal} density={density}>\n      <PopoverBody\n        state={state}\n        triggerRef={triggerRef}\n        popoverRef={popoverRef}\n        isNonModal={nonModal}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        onPressOutside={onPressOutside}\n        minWidth={minWidth}\n      >\n        {children}\n      </PopoverBody>\n    </Overlay>\n  );\n}\n\nfunction PopoverBody({\n  state,\n  triggerRef,\n  popoverRef,\n  isNonModal,\n  isExiting,\n  exitProps,\n  onPressOutside,\n  minWidth,\n  children,\n}: {\n  state: OverlayTriggerState;\n  triggerRef: RefObject<HTMLElement | null>;\n  popoverRef: RefObject<HTMLDivElement | null>;\n  isNonModal: boolean;\n  minWidth: number;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  onPressOutside: (() => void) | undefined;\n  children: ReactNode;\n}) {\n  const { popoverProps, underlayProps, placement } = usePopover(\n    { triggerRef, popoverRef, placement: 'bottom start', offset: 4, isNonModal },\n    state,\n  );\n  const revealRef = useRef<HTMLDivElement>(null);\n  const entering = useRevealEntering(placement, revealRef);\n  // As wide as the field (Compose's `exposedDropdownSize`), measured when it opens.\n  const [width, setWidth] = useState<number>();\n  useLayoutEffect(() => {\n    setWidth(triggerRef.current?.getBoundingClientRect().width);\n  }, [triggerRef]);\n  // React Aria makes the page around a modal popover inert, so a press outside lands on\n  // `<body>` whatever is under it; its position tells a press on the field from one away.\n  // Listened to in the capture phase: the popover stops the press once it has closed.\n  useEffect(() => {\n    if (isNonModal || !onPressOutside) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (popoverRef.current?.contains(event.target as globalThis.Node)) return;\n      const field = triggerRef.current?.getBoundingClientRect();\n      const onField =\n        field !== undefined &&\n        event.clientX >= field.left &&\n        event.clientX <= field.right &&\n        event.clientY >= field.top &&\n        event.clientY <= field.bottom;\n      if (!onField) onPressOutside();\n    };\n    document.addEventListener('pointerdown', onPointerDown, true);\n    return () => document.removeEventListener('pointerdown', onPointerDown, true);\n  }, [isNonModal, onPressOutside, popoverRef, triggerRef]);\n  const menu = menuStyles();\n\n  return (\n    <>\n      {isNonModal ? null : <div {...underlayProps} className=\"fixed inset-0\" />}\n      <div\n        {...popoverProps}\n        ref={popoverRef}\n        style={{ ...popoverProps.style, minWidth: Math.max(width ?? 0, minWidth) }}\n        className={cn(menu.popover(), 'flex max-w-[min(560px,calc(100vw-32px))] flex-col')}\n      >\n        {isNonModal ? null : <DismissButton onDismiss={state.close} />}\n        <div\n          {...exitProps}\n          ref={revealRef}\n          data-entering={entering || undefined}\n          data-exiting={isExiting || undefined}\n          data-placement={placement ?? undefined}\n          // The menu's reveal keeps its content's width (`w-max`); the option list fills the\n          // popover instead, which is at least as wide as the field.\n          className={cn(menu.reveal(), 'min-h-0 w-auto')}\n        >\n          {children}\n        </div>\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}