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

//# sourceMappingURL=SpotlightRoot.cjs.map