@mantine/spotlight/cjs/SpotlightSearch.cjs

Command center components for react and Mantine

"use client";
const require_spotlight_store = require("./spotlight.store.cjs");
const require_Spotlight_context = require("./Spotlight.context.cjs");
const require_Spotlight_module = require("./Spotlight.module.cjs");
let _mantine_core = require("@mantine/core");
let react_jsx_runtime = require("react/jsx-runtime");
let react = require("react");
//#region packages/@mantine/spotlight/src/SpotlightSearch.tsx
const defaultProps = { size: "lg" };
const SpotlightSearch = (0, _mantine_core.factory)((props) => {
	const { classNames, styles, onKeyDown, onChange, vars, value, attributes, ...others } = (0, _mantine_core.useProps)("SpotlightSearch", defaultProps, props);
	const ctx = require_Spotlight_context.useSpotlightContext();
	const inputStyles = ctx.getStyles("search");
	const [isComposing, setIsComposing] = (0, react.useState)(false);
	const handleKeyDown = (event) => {
		onKeyDown?.(event);
		if (isComposing) return;
		if (event.nativeEvent.code === "ArrowDown") {
			event.preventDefault();
			require_spotlight_store.spotlightActions.selectNextAction(ctx.store);
		}
		if (event.nativeEvent.code === "ArrowUp") {
			event.preventDefault();
			require_spotlight_store.spotlightActions.selectPreviousAction(ctx.store);
		}
		if (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "NumpadEnter") {
			event.preventDefault();
			require_spotlight_store.spotlightActions.triggerSelectedAction(ctx.store);
		}
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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 = require_Spotlight_module.default;
SpotlightSearch.displayName = "@mantine/spotlight/SpotlightSearch";
//#endregion
exports.SpotlightSearch = SpotlightSearch;

//# sourceMappingURL=SpotlightSearch.cjs.map