@mantine/spotlight/esm/SpotlightRoot.mjs

Command center components for react and Mantine

"use client";
import { spotlightActions, spotlightStore, useSpotlight } from "./spotlight.store.mjs";
import { SpotlightProvider } from "./Spotlight.context.mjs";
import Spotlight_module_default from "./Spotlight.module.mjs";
import { getHotkeys } from "./get-hotkeys.mjs";
import { useDidUpdate, useHotkeys } from "@mantine/hooks";
import { Modal, factory, getDefaultZIndex, rem, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/spotlight/src/SpotlightRoot.tsx
const defaultProps = {
	size: 600,
	yOffset: 80,
	zIndex: getDefaultZIndex("max"),
	overlayProps: {
		backgroundOpacity: .35,
		blur: 7
	},
	transitionProps: {
		duration: 200,
		transition: "pop"
	},
	store: spotlightStore,
	clearQueryOnClose: true,
	closeOnActionTrigger: true,
	shortcut: "mod + K",
	maxHeight: 400
};
const SpotlightRoot = factory((_props) => {
	const props = useProps("SpotlightRoot", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, store, children, query, onQueryChange, transitionProps, clearQueryOnClose, shortcut, tagsToIgnore, triggerOnContentEditable, disabled, onSpotlightOpen, onSpotlightClose, forceOpened, closeOnActionTrigger, maxHeight, scrollable, attributes, ...others } = props;
	const { opened, query: storeQuery } = useSpotlight(store);
	const _query = typeof query === "string" ? query : storeQuery;
	const setQuery = (q) => {
		onQueryChange?.(q);
		spotlightActions.setQuery(q, store);
	};
	const getStyles = useStyles({
		name: "Spotlight",
		classes: Spotlight_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes
	});
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	useHotkeys(getHotkeys(shortcut, store), tagsToIgnore, triggerOnContentEditable);
	useDidUpdate(() => {
		opened ? onSpotlightOpen?.() : onSpotlightClose?.();
	}, [opened]);
	if (disabled) return null;
	return /* @__PURE__ */ jsx(SpotlightProvider, {
		value: {
			getStyles,
			query: _query,
			setQuery,
			store,
			closeOnActionTrigger
		},
		children: /* @__PURE__ */ jsx(Modal, {
			...others,
			withCloseButton: false,
			opened: opened || !!forceOpened,
			padding: 0,
			onClose: () => spotlightActions.close(store),
			className,
			style,
			classNames: resolvedClassNames,
			styles: resolvedStyles,
			attributes,
			transitionProps: {
				...transitionProps,
				onExited: () => {
					clearQueryOnClose && setQuery("");
					spotlightActions.clearSpotlightState({ clearQuery: clearQueryOnClose }, store);
					transitionProps?.onExited?.();
				}
			},
			__vars: { "--spotlight-max-height": scrollable ? rem(maxHeight) : void 0 },
			__staticSelector: "Spotlight",
			"data-scrollable": scrollable || void 0,
			children
		})
	});
});
SpotlightRoot.classes = Spotlight_module_default;
SpotlightRoot.displayName = "@mantine/spotlight/SpotlightRoot";
//#endregion
export { SpotlightRoot };

//# sourceMappingURL=SpotlightRoot.mjs.map