@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/search/SearchAppBar.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { searchAppBarStyles } from "./search-styles.js";
+import { AppBarItems } from "../app-bar/AppBarItems.js";
+import { useAppBarScroll } from "../app-bar/use-app-bar-scroll.js";
+import { SearchAppBarContext } from "./SearchBar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+//#region src/components/search/SearchAppBar.tsx
+/**
+* M3 Expressive app bar with search (Compose's `AppBarWithSearch`): a top bar whose middle
+* is a search bar, with an optional navigation icon and actions.
+*
+* @example
+* <SearchAppBar navigationIcon={<IconButton icon={<MenuIcon />} aria-label="Menu" />}
+*   actions={<Avatar />} scrollBehavior="enter-always">
+*   <SearchBar aria-label="Search" placeholder="Search" leadingIcon={<SearchIcon />} />
+* </SearchAppBar>
+*/
+function SearchAppBar({ children, navigationIcon, actions, scrollBehavior, scrollRef, classNames, className, ref, ...rest }) {
+	const rootRef = useObjectRef(ref);
+	const scroll = useAppBarScroll({
+		behavior: scrollBehavior,
+		rootRef,
+		collapsibleRef: rootRef,
+		scrollRef,
+		twoRows: false
+	});
+	const styles = searchAppBarStyles({ scrolling: scrollBehavior != null });
+	return /* @__PURE__ */ jsx("header", {
+		...rest,
+		ref: rootRef,
+		"data-tokens": mergeDataTokens("md-comp-app-bar", rest),
+		"data-scrolled": scroll.scrolled || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsxs(AppBarItems, { children: [
+			navigationIcon != null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "navigation",
+				className: styles.navigation({ class: classNames?.navigation }),
+				children: navigationIcon
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.search({ class: classNames?.search }),
+				children: /* @__PURE__ */ jsx(SearchAppBarContext, {
+					value: { scrolled: scroll.scrolled },
+					children
+				})
+			}),
+			actions != null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "actions",
+				className: styles.actions({ class: classNames?.actions }),
+				children: actions
+			})
+		] })
+	});
+}
+//#endregion
+export { SearchAppBar };
+
+//# sourceMappingURL=SearchAppBar.js.map

package/dist/components/search/SearchAppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAppBar.js","names":[],"sources":["../../../src/components/search/SearchAppBar.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, ReactNode, RefObject } from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { cn } from '../../utils/cn';\nimport { AppBarItems } from '../app-bar/AppBarItems';\nimport { useAppBarScroll } from '../app-bar/use-app-bar-scroll';\nimport { SearchAppBarContext } from './SearchBar';\nimport { searchAppBarStyles } from './search-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface SearchAppBarClassNames {\n  /** The `<header>` container, merged with `className`. */\n  root?: string;\n  /** The leading slot holding `navigationIcon`. */\n  navigation?: string;\n  /** The area holding the search bar. */\n  search?: string;\n  /** The trailing slot holding `actions`. */\n  actions?: string;\n}\n\ninterface SearchAppBarOwnProps {\n  /** The `SearchBar`. It fills the free space, up to 720px, centred. */\n  children: ReactNode;\n  /** A leading control, e.g. a menu `IconButton`. */\n  navigationIcon?: ReactNode;\n  /** Trailing controls, e.g. an avatar or `IconButton`s. */\n  actions?: ReactNode;\n  /**\n   * Respond to content scrolling under the bar: it sticks to the top and turns\n   * `surface-container` (its search bar `surface-container-highest`); `enter-always` also\n   * hides it on scroll down and brings it back on any scroll up. Leave it out for a static\n   * bar positioned by the consumer.\n   */\n  scrollBehavior?: 'pinned' | 'enter-always';\n  /** The scroll container the bar responds to. Defaults to the window. */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Classes for each part, by slot. */\n  classNames?: SearchAppBarClassNames;\n}\n\nexport type SearchAppBarProps = SearchAppBarOwnProps &\n  Omit<ComponentPropsWithRef<'header'>, keyof SearchAppBarOwnProps>;\n\n/**\n * M3 Expressive app bar with search (Compose's `AppBarWithSearch`): a top bar whose middle\n * is a search bar, with an optional navigation icon and actions.\n *\n * @example\n * <SearchAppBar navigationIcon={<IconButton icon={<MenuIcon />} aria-label=\"Menu\" />}\n *   actions={<Avatar />} scrollBehavior=\"enter-always\">\n *   <SearchBar aria-label=\"Search\" placeholder=\"Search\" leadingIcon={<SearchIcon />} />\n * </SearchAppBar>\n */\nexport function SearchAppBar({\n  children,\n  navigationIcon,\n  actions,\n  scrollBehavior,\n  scrollRef,\n  classNames,\n  className,\n  ref,\n  ...rest\n}: SearchAppBarProps) {\n  const rootRef = useObjectRef(ref);\n  const scroll = useAppBarScroll({\n    behavior: scrollBehavior,\n    rootRef,\n    collapsibleRef: rootRef,\n    scrollRef,\n    twoRows: false,\n  });\n  const styles = searchAppBarStyles({ scrolling: scrollBehavior != null });\n  return (\n    <header\n      {...rest}\n      ref={rootRef}\n      // The app bar's component tokens (app-bar-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-app-bar', rest)}\n      data-scrolled={scroll.scrolled || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <AppBarItems>\n        {navigationIcon != null && (\n          <div\n            data-slot=\"navigation\"\n            className={styles.navigation({ class: classNames?.navigation })}\n          >\n            {navigationIcon}\n          </div>\n        )}\n        <div className={styles.search({ class: classNames?.search })}>\n          <SearchAppBarContext value={{ scrolled: scroll.scrolled }}>\n            {children}\n          </SearchAppBarContext>\n        </div>\n        {actions != null && (\n          <div data-slot=\"actions\" className={styles.actions({ class: classNames?.actions })}>\n            {actions}\n          </div>\n        )}\n      </AppBarItems>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,aAAa,EAC3B,UACA,gBACA,SACA,gBACA,WACA,YACA,WACA,KACA,GAAG,QACiB;CACpB,MAAM,UAAU,aAAa,GAAG;CAChC,MAAM,SAAS,gBAAgB;EAC7B,UAAU;EACV;EACA,gBAAgB;EAChB;EACA,SAAS;CACX,CAAC;CACD,MAAM,SAAS,mBAAmB,EAAE,WAAW,kBAAkB,KAAK,CAAC;CACvE,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,KAAK;EAEL,eAAa,gBAAgB,mBAAmB,IAAI;EACpD,iBAAe,OAAO,YAAY,KAAA;EAClC,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EAEjE,UAAA,qBAAC,aAAD,EAAA,UAAA;GACG,kBAAkB,QACjB,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,OAAO,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IAE7D,UAAA;GACE,CAAA;GAEP,oBAAC,OAAD;IAAK,WAAW,OAAO,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;IACzD,UAAA,oBAAC,qBAAD;KAAqB,OAAO,EAAE,UAAU,OAAO,SAAS;KACrD;IACkB,CAAA;GAClB,CAAA;GACJ,WAAW,QACV,oBAAC,OAAD;IAAK,aAAU;IAAU,WAAW,OAAO,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAC9E,UAAA;GACE,CAAA;EAEI,EAAA,CAAA;CACP,CAAA;AAEZ"}

package/dist/components/search/SearchBar.d.ts

@@ -0,0 +1,147 @@
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/components/search/SearchBar.d.ts
+/** What a search bar's icons can depend on. */
+export interface SearchBarIconState {
+  expanded: boolean;
+  /** Collapses the search view, e.g. from a back button. */
+  collapse: () => void;
+  /**
+   * The view in effect (`auto` resolved for the window), so a back button can show in the
+   * full-screen view only.
+   */
+  view: 'docked' | 'full-screen';
+}
+type SearchBarIcon = ReactNode | ((state: SearchBarIconState) => ReactNode);
+export interface SearchBarClassNames {
+  /** The outer container, merged with `className`. */
+  root?: string;
+  /** The pill around the icons and the input (collapsed and expanded). */
+  field?: string;
+  /** The text input (collapsed and expanded). */
+  input?: string;
+  /** The leading icon slot. */
+  leading?: string;
+  /** The trailing icon slot. */
+  trailing?: string;
+  /** The scrim behind the docked view. */
+  scrim?: string;
+  /** The expanded view: the docked panel or the full-screen surface. */
+  view?: string;
+  /** The expanded content: the docked dropdown or the full-screen content area. */
+  content?: string;
+}
+type Naming = {
+  /** Accessible name for the search bar and its input. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the search bar and its input. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+/**
+ * Attributes for the search inputs, e.g. `aria-keyshortcuts`, `aria-describedby`,
+ * `enterKeyHint`, `autoComplete`, `spellCheck`, `inputMode` or event handlers. The bar owns
+ * its value, name, role and popup state, so those keys are left out; an `id` or `name`
+ * would be duplicated, since the bar renders a second input while expanded.
+ */
+export type SearchBarInputProps = Omit<ComponentProps<'input'>, 'ref' | 'id' | 'name' | 'type' | 'role' | 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'className' | 'children' | 'dangerouslySetInnerHTML' | 'inert' | 'aria-label' | 'aria-labelledby' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls' | 'aria-hidden'> & {
+  [data: `data-${string}`]: string | number | boolean | undefined;
+};
+interface SearchBarOwnProps extends WrapperRootDOMProps {
+  /** The root element's id. */
+  id?: string;
+  /**
+   * The ids of elements that describe the search, for both inputs (the bar's and the open
+   * view's), before any `inputProps['aria-describedby']`.
+   */
+  'aria-describedby'?: string;
+  /** The id of an element with more details about the search, for both inputs. */
+  'aria-details'?: string;
+  /** Controlled query. */
+  value?: string;
+  /** Initial query when uncontrolled. @default "" */
+  defaultValue?: string;
+  /** Called with the query as it changes. */
+  onChange?: (value: string) => void;
+  /**
+   * Called with the query when the user presses Enter (the keyboard's search action) in the
+   * open search view. Enter in the collapsed bar opens the view.
+   */
+  onSubmit?: (value: string) => void;
+  /** Controlled expansion of the search view. */
+  expanded?: boolean;
+  /** Whether the search view starts expanded (uncontrolled). @default false */
+  defaultExpanded?: boolean;
+  /** Called when the search view expands or collapses. */
+  onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * How the bar expands: `docked`, a dropdown below it over a scrim; `full-screen`, a view
+   * that fills the window; `auto`, full screen on compact windows (below 600px wide) and
+   * docked on larger ones, as M3 recommends ("Full-screen layout: Default for compact
+   * breakpoints"; docked is "Best for medium and expanded windows"). It follows the window
+   * as it resizes.
+   * @default "auto"
+   */
+  view?: SearchBarView;
+  /** Hint text shown in the empty input, e.g. "Search mail". */
+  placeholder?: string;
+  /** Leading icon, e.g. a search icon, or a back button while expanded. */
+  leadingIcon?: SearchBarIcon;
+  /**
+   * Trailing content: one or two icon buttons (e.g. voice search and a clear button), or an
+   * avatar (an `img`, drawn at 30px) with up to one icon button (M3).
+   */
+  trailingIcon?: SearchBarIcon;
+  /**
+   * Centre the placeholder and the query while the bar is collapsed (M3's search app bar
+   * supports centred text). @default "start"
+   */
+  textAlign?: 'start' | 'center';
+  /**
+   * What screen readers hear when the suggestions or results change while the view is open
+   * (M3: "the screen reader must announce the change"), e.g. "5 results". Announced
+   * politely whenever it changes.
+   */
+  resultsAnnouncement?: string;
+  /**
+   * The expanded content: suggestions or results, usually a list. ↓ from the input moves
+   * focus into it.
+   */
+  children?: ReactNode;
+  /** The input element (collapsed, or expanded while the view is open). */
+  inputRef?: Ref<HTMLInputElement>;
+  /**
+   * Attributes for both inputs, the collapsed one and the expanded view's. They replace the
+   * bar's defaults (`enterKeyHint="search"`, `autoComplete="off"`, `spellCheck={false}`);
+   * event handlers run before the bar's own, and the bar's role, name, value and popup state
+   * always win.
+   */
+  inputProps?: SearchBarInputProps;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: SearchBarClassNames;
+  /** `data-*` attributes, like the other DOM attributes, go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+export type SearchBarProps = SearchBarOwnProps & Naming;
+/** How a {@link SearchBar} expands. */
+export type SearchBarView = 'auto' | 'docked' | 'full-screen';
+/**
+ * M3 Expressive search bar: a 56px pill that expands into a search view, either a dropdown
+ * below the bar (docked) or a full-screen view, holding suggestions or results. Pressing
+ * the bar, typing into it or ↓ expands it; Escape, a press outside or `collapse()` closes it.
+ *
+ * @example
+ * <SearchBar aria-label="Search mail" placeholder="Search mail" leadingIcon={<SearchIcon />}
+ *   value={query} onChange={setQuery} onSubmit={search}>
+ *   <SuggestionList … />
+ * </SearchBar>
+ */
+export declare function SearchBar(props: SearchBarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/search/SearchBar.js

@@ -0,0 +1,412 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ButtonContext, standardIconButtons } from "../button/ButtonContext.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { COMPACT_WINDOW, useMediaQuery } from "../date-picker/use-media-query.js";
+import { searchBarStyles } from "./search-styles.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import { mergeProps, mergeRefs, useDialog, useFocusRing, useModalOverlay, useObjectRef } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/search/SearchBar.tsx
+/** Set by `SearchAppBar` for the search bar inside it. */
+const SearchAppBarContext = createContext(null);
+/** The search bar's maximum width (M3). */
+const MAX_WIDTH = 720;
+/** The focused search bar's height (M3: "Search bar container Height 56dp"). */
+const FIELD_HEIGHT = 56;
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+/**
+* M3 Expressive search bar: a 56px pill that expands into a search view, either a dropdown
+* below the bar (docked) or a full-screen view, holding suggestions or results. Pressing
+* the bar, typing into it or ↓ expands it; Escape, a press outside or `collapse()` closes it.
+*
+* @example
+* <SearchBar aria-label="Search mail" placeholder="Search mail" leadingIcon={<SearchIcon />}
+*   value={query} onChange={setQuery} onSubmit={search}>
+*   <SuggestionList … />
+* </SearchBar>
+*/
+function SearchBar(props) {
+	const { value, defaultValue, onChange, onSubmit, expanded, defaultExpanded, onExpandedChange, view: requestedView = "auto", placeholder, leadingIcon, trailingIcon, textAlign = "start", resultsAnnouncement, children, inputRef, inputProps: consumerInputProps, ref, className, style, classNames, ...rest } = props;
+	const { "aria-label": label, "aria-labelledby": labelledBy } = props;
+	const compact = useMediaQuery(COMPACT_WINDOW);
+	const view = requestedView === "auto" ? compact ? "full-screen" : "docked" : requestedView;
+	const [query, setQuery] = useControlledState(value, defaultValue ?? "", onChange);
+	const state = useOverlayTriggerState({
+		isOpen: expanded,
+		defaultOpen: defaultExpanded,
+		onOpenChange: onExpandedChange
+	});
+	const appBar = useContext(SearchAppBarContext);
+	const rootRef = useObjectRef(ref);
+	const [rect, setRect] = useState(null);
+	const reduceMotion = useReducedMotion();
+	const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, reduceMotion ? "opacity" : "--m3-search-progress");
+	const collapsedRef = useRef(null);
+	const collapsedInputRef = useMemo(() => mergeRefs(collapsedRef, isPresent ? void 0 : inputRef), [isPresent, inputRef]);
+	const restoreRef = useRef(null);
+	useLayoutEffect(() => {
+		const doc = collapsedRef.current?.ownerDocument;
+		if (!state.isOpen || !doc) return;
+		const active = doc.activeElement;
+		restoreRef.current = active instanceof HTMLElement && active !== doc.body ? active : null;
+	}, [state.isOpen]);
+	useEffect(() => {
+		const collapsed = collapsedRef.current;
+		if (!isExiting || !collapsed) return;
+		if (!collapsed.ownerDocument.activeElement?.closest("[data-exiting]")) return;
+		const previous = restoreRef.current;
+		(previous?.isConnected && !previous.closest("[data-exiting]") ? previous : collapsed).focus({ preventScroll: true });
+	}, [isExiting]);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!state.isOpen || !root) return;
+		const box = root.getBoundingClientRect();
+		setRect({
+			top: box.top,
+			left: box.left,
+			right: box.right,
+			bottom: box.bottom,
+			width: box.width,
+			height: box.height,
+			rtl: getComputedStyle(root).direction === "rtl"
+		});
+	}, [state.isOpen, rootRef]);
+	const iconState = {
+		expanded: state.isOpen,
+		collapse: state.close,
+		view
+	};
+	const leading = typeof leadingIcon === "function" ? leadingIcon(iconState) : leadingIcon;
+	const trailing = typeof trailingIcon === "function" ? trailingIcon(iconState) : trailingIcon;
+	const styles = searchBarStyles({
+		inAppBar: appBar != null,
+		hasLeading: leading != null,
+		hasTrailing: trailing != null
+	});
+	const { root: data, rest: own } = splitRootProps(rest, { wrapper: true });
+	const { "aria-describedby": describedBy, "aria-details": details } = own;
+	const describedByInput = [describedBy, consumerInputProps?.["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	const collapsedTone = appBar ? appBar.scrolled ? "scrolled" : "appBar" : "default";
+	const field = (input, tone) => /* @__PURE__ */ jsx(SearchField, {
+		className: searchBarStyles({ tone }).field({ class: classNames?.field }),
+		leading: leading != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": "leading",
+			className: styles.leading({ class: classNames?.leading }),
+			children: leading
+		}),
+		trailing: trailing != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": "trailing",
+			className: styles.trailing({ class: classNames?.trailing }),
+			children: trailing
+		}),
+		children: input
+	});
+	const sharedInputProps = (handlers) => ({
+		...mergeProps({
+			enterKeyHint: "search",
+			autoComplete: "off",
+			spellCheck: false,
+			"aria-details": details,
+			...pickDescriptionAria(own)
+		}, consumerInputProps, { "aria-describedby": describedByInput }, handlers),
+		id: void 0,
+		name: void 0,
+		role: void 0,
+		type: "search",
+		value: query,
+		placeholder,
+		"aria-label": label,
+		"aria-labelledby": label == null ? labelledBy : void 0
+	});
+	const inputClass = (align) => searchBarStyles({
+		hasLeading: leading != null,
+		hasTrailing: trailing != null,
+		textAlign: align
+	}).input({ class: classNames?.input });
+	const submitOnEnter = (event) => {
+		if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			onSubmit?.(query);
+			return true;
+		}
+		return false;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		id: own.id,
+		ref: rootRef,
+		style,
+		"data-expanded": state.isOpen || void 0,
+		"data-view": view,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [field(/* @__PURE__ */ jsx("input", {
+			...sharedInputProps({
+				onChange: (event) => {
+					const next = event.target.value;
+					if (next.length > query.length) state.open();
+					setQuery(next);
+				},
+				onClick: state.open,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" && !event.nativeEvent.isComposing || event.key === "ArrowDown") {
+						event.preventDefault();
+						state.open();
+					}
+				}
+			}),
+			"data-slot": "input",
+			className: inputClass(textAlign),
+			ref: collapsedInputRef,
+			inert: state.isOpen,
+			"aria-hidden": state.isOpen || void 0,
+			role: "combobox",
+			"aria-expanded": state.isOpen,
+			"aria-haspopup": "dialog"
+		}), collapsedTone), isPresent && rect && /* @__PURE__ */ jsx(Overlay$1, {
+			exiting: isExiting,
+			children: /* @__PURE__ */ jsx(SearchView, {
+				view,
+				state,
+				rect,
+				animateHeight: !reduceMotion,
+				isExiting,
+				exitProps,
+				label,
+				labelledBy,
+				classNames,
+				styles,
+				resultsAnnouncement,
+				field: (contentRef) => field(/* @__PURE__ */ jsx(ExpandedInput, {
+					...sharedInputProps({
+						onChange: (event) => setQuery(event.target.value),
+						onKeyDown: (event) => {
+							if (submitOnEnter(event)) {
+								contentRef.current?.focus();
+								return;
+							}
+							if (event.key === "ArrowDown") {
+								const first = contentRef.current?.querySelector(FOCUSABLE);
+								if (first) {
+									event.preventDefault();
+									first.focus();
+								}
+							}
+						}
+					}),
+					"data-slot": "input",
+					className: inputClass("start"),
+					inputRef,
+					open: state.isOpen
+				}), "default"),
+				children
+			})
+		})]
+	});
+}
+function SearchField({ className, leading, trailing, children }) {
+	const { isFocusVisible, focusProps } = useFocusRing({
+		within: true,
+		isTextInput: true
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...focusProps,
+		"data-tokens": "md-comp-search-bar",
+		"data-focus-visible": isFocusVisible || void 0,
+		className,
+		children: /* @__PURE__ */ jsxs(ButtonContext, {
+			value: standardIconButtons,
+			children: [
+				leading,
+				children,
+				trailing
+			]
+		})
+	});
+}
+function ExpandedInput({ inputRef, open, ...props }) {
+	const ref = useObjectRef(inputRef);
+	useEffect(() => {
+		const input = ref.current;
+		if (!input || !open) return;
+		input.focus({ preventScroll: true });
+		input.setSelectionRange(input.value.length, input.value.length);
+	}, [ref, open]);
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		ref
+	});
+}
+function SearchView({ view, state, rect, animateHeight, isExiting, exitProps, label, labelledBy, classNames, styles, field, resultsAnnouncement, children }) {
+	const panelRef = useRef(null);
+	const contentRef = useRef(null);
+	const contentSizeRef = useRef(null);
+	useContentHeight(contentRef, contentSizeRef, view === "docked" && animateHeight && children != null);
+	const { modalProps, underlayProps } = useModalOverlay({ isDismissable: !isExiting }, state, panelRef);
+	const { dialogProps } = useDialog({
+		"aria-label": label,
+		"aria-labelledby": label == null ? labelledBy : void 0
+	}, panelRef);
+	const exiting = isExiting || void 0;
+	const panelProps = mergeProps(modalProps, dialogProps, { tabIndex: -1 });
+	if (view === "full-screen") {
+		const vars = {
+			"--m3-search-top": `${rect.top}px`,
+			"--m3-search-left": `${rect.left}px`,
+			"--m3-search-right": `${window.innerWidth - rect.right}px`,
+			"--m3-search-bottom": `${window.innerHeight - rect.bottom}px`,
+			"--m3-search-start": `${rect.rtl ? window.innerWidth - rect.right : rect.left}px`,
+			"--m3-search-width": `${rect.width}px`,
+			"--m3-search-height": `${rect.height}px`
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			...panelProps,
+			...exitProps,
+			ref: panelRef,
+			style: vars,
+			"data-tokens": "md-comp-search-view",
+			"data-view": "full-screen",
+			"data-exiting": exiting,
+			className: styles.fullScreenPanel({ class: classNames?.view }),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-exiting": exiting,
+					className: styles.fullScreenHeader(),
+					children: field(contentRef)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: contentRef,
+					tabIndex: -1,
+					"data-exiting": exiting,
+					className: styles.fullScreenContent({ class: classNames?.content }),
+					children
+				}),
+				/* @__PURE__ */ jsx(LiveStatus, { message: resultsAnnouncement })
+			]
+		});
+	}
+	const width = Math.min(rect.width + 24, Math.max(rect.width, MAX_WIDTH));
+	const grow = (width - rect.width) / 2;
+	const left = Math.max(0, Math.min(rect.left - grow, window.innerWidth - width));
+	const top = Math.max(0, rect.top + (rect.height - FIELD_HEIGHT) / 2);
+	const dockedVars = {
+		"--m3-search-top": `${rect.top}px`,
+		"--m3-search-left": `${rect.left}px`,
+		"--m3-search-width": `${rect.width}px`,
+		"--m3-search-height": `${rect.height}px`,
+		"--m3-search-dx": `${left - rect.left}px`,
+		"--m3-search-dy": `${top - rect.top}px`,
+		"--m3-search-dw": `${Math.min(width, window.innerWidth) - rect.width}px`,
+		"--m3-search-dh": `${FIELD_HEIGHT - rect.height}px`
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		...exitProps,
+		"aria-hidden": "true",
+		"data-exiting": exiting,
+		className: styles.scrim({ class: classNames?.scrim })
+	}), /* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		"data-exiting": exiting,
+		className: styles.underlay(),
+		children: /* @__PURE__ */ jsxs("div", {
+			...panelProps,
+			...exitProps,
+			ref: panelRef,
+			style: dockedVars,
+			"data-exiting": exiting,
+			className: styles.dockedPanel({ class: classNames?.view }),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: styles.dockedHeader(),
+					children: field(contentRef)
+				}),
+				children != null && /* @__PURE__ */ jsx("div", {
+					ref: contentRef,
+					tabIndex: -1,
+					"data-tokens": "md-comp-search-view",
+					"data-view": "docked",
+					"data-exiting": exiting,
+					className: styles.dropdown({ class: classNames?.content }),
+					children: /* @__PURE__ */ jsx("div", {
+						ref: contentSizeRef,
+						className: "flow-root",
+						children
+					})
+				}),
+				/* @__PURE__ */ jsx(LiveStatus, { message: resultsAnnouncement })
+			]
+		})
+	})] });
+}
+/**
+* Keeps `--m3-search-content-height` on the dropdown at its content's height (plus the
+* dropdown's own padding and borders), so the dropdown's height animates as the results
+* change instead of jumping. While that height animates the dropdown doesn't scroll
+* (`data-resizing`), so a scrollbar never flashes in and rewraps the content.
+*/
+function useContentHeight(dropdownRef, contentRef, enabled) {
+	useLayoutEffect(() => {
+		const dropdown = dropdownRef.current;
+		const content = contentRef.current;
+		if (!enabled || !dropdown || !content) return;
+		let measured = NaN;
+		const measure = () => {
+			const style = getComputedStyle(dropdown);
+			const frame = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+			const height = content.getBoundingClientRect().height + frame;
+			if (Math.abs(height - measured) < .5) return;
+			measured = height;
+			dropdown.style.setProperty("--m3-search-content-height", `${height}px`);
+		};
+		const resizing = (on) => (event) => {
+			if (event.target !== dropdown || event.propertyName !== "height") return;
+			if (on) dropdown.dataset.resizing = "";
+			else delete dropdown.dataset.resizing;
+		};
+		const start = resizing(true);
+		const end = resizing(false);
+		measure();
+		dropdown.addEventListener("transitionrun", start);
+		dropdown.addEventListener("transitionend", end);
+		dropdown.addEventListener("transitioncancel", end);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		observer?.observe(content);
+		return () => {
+			observer?.disconnect();
+			dropdown.removeEventListener("transitionrun", start);
+			dropdown.removeEventListener("transitionend", end);
+			dropdown.removeEventListener("transitioncancel", end);
+			dropdown.style.removeProperty("--m3-search-content-height");
+			delete dropdown.dataset.resizing;
+		};
+	}, [
+		dropdownRef,
+		contentRef,
+		enabled
+	]);
+}
+/**
+* A polite live region inside the search view. It starts empty and takes the message a
+* moment later, so the first one is announced too, and again whenever it changes.
+*/
+function LiveStatus({ message }) {
+	const [text, setText] = useState("");
+	useEffect(() => {
+		const timer = setTimeout(() => setText(message ?? ""), 150);
+		return () => clearTimeout(timer);
+	}, [message]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		className: "sr-only",
+		children: text
+	});
+}
+//#endregion
+export { SearchAppBarContext, SearchBar };
+
+//# sourceMappingURL=SearchBar.js.map