@mantine/spotlight/esm/SpotlightSearch.mjs

Command center components for react and Mantine

"use client";
import { spotlightActions } from "./spotlight.store.mjs";
import { useSpotlightContext } from "./Spotlight.context.mjs";
import Spotlight_module_default from "./Spotlight.module.mjs";
import { Input, factory, useProps } from "@mantine/core";
import { jsx } from "react/jsx-runtime";
import { useState } from "react";
//#region packages/@mantine/spotlight/src/SpotlightSearch.tsx
const defaultProps = { size: "lg" };
const SpotlightSearch = factory((props) => {
	const { classNames, styles, onKeyDown, onChange, vars, value, attributes, ...others } = useProps("SpotlightSearch", defaultProps, props);
	const ctx = useSpotlightContext();
	const inputStyles = ctx.getStyles("search");
	const [isComposing, setIsComposing] = useState(false);
	const handleKeyDown = (event) => {
		onKeyDown?.(event);
		if (isComposing) return;
		if (event.nativeEvent.code === "ArrowDown") {
			event.preventDefault();
			spotlightActions.selectNextAction(ctx.store);
		}
		if (event.nativeEvent.code === "ArrowUp") {
			event.preventDefault();
			spotlightActions.selectPreviousAction(ctx.store);
		}
		if (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "NumpadEnter") {
			event.preventDefault();
			spotlightActions.triggerSelectedAction(ctx.store);
		}
	};
	return /* @__PURE__ */ jsx(Input, {
		...inputStyles,
		classNames: [{ input: inputStyles.className }, classNames],
		styles: [{ input: inputStyles.style }, styles],
		...others,
		value: value ?? ctx.query,
		onChange: (event) => {
			ctx.setQuery(event.currentTarget.value);
			onChange?.(event);
		},
		onKeyDown: handleKeyDown,
		onCompositionStart: () => setIsComposing(true),
		onCompositionEnd: () => setIsComposing(false)
	});
});
SpotlightSearch.classes = Spotlight_module_default;
SpotlightSearch.displayName = "@mantine/spotlight/SpotlightSearch";
//#endregion
export { SpotlightSearch };

//# sourceMappingURL=SpotlightSearch.mjs.map