@mantine/spotlight
Version:
Command center components for react and Mantine
80 lines (79 loc) • 2.6 kB
JavaScript
"use client";
import { spotlightActions } from "./spotlight.store.mjs";
import { useSpotlightContext } from "./Spotlight.context.mjs";
import Spotlight_module_default from "./Spotlight.module.mjs";
import { Box, Highlight, UnstyledButton, factory, useProps } from "@mantine/core";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/spotlight/src/SpotlightAction.tsx
const defaultProps = {
dimmedSections: true,
highlightQuery: false
};
const SpotlightAction = factory((_props) => {
const { className, style, classNames, styles, id, description, label, leftSection, rightSection, children, dimmedSections, highlightQuery, highlightColor, closeSpotlightOnTrigger, onClick, onMouseDown, keywords, vars, ...others } = useProps("SpotlightAction", defaultProps, _props);
const ctx = useSpotlightContext();
const stylesApi = {
classNames,
styles
};
const labelNode = highlightQuery && typeof label === "string" ? /* @__PURE__ */ jsx(Highlight, {
component: "span",
highlight: ctx.query,
color: highlightColor,
...ctx.getStyles("actionLabel", stylesApi),
children: label
}) : /* @__PURE__ */ jsx("span", {
...ctx.getStyles("actionLabel", stylesApi),
children: label
});
return /* @__PURE__ */ jsx(UnstyledButton, {
"data-action": true,
...ctx.getStyles("action", {
className,
style,
...stylesApi
}),
...others,
onMouseDown: (event) => {
event.preventDefault();
onMouseDown?.(event);
},
onClick: (event) => {
onClick?.(event);
if (closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) spotlightActions.close(ctx.store);
},
tabIndex: -1,
children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
leftSection && /* @__PURE__ */ jsx(Box, {
component: "span",
mod: {
position: "left",
dimmed: dimmedSections
},
...ctx.getStyles("actionSection", stylesApi),
children: leftSection
}),
/* @__PURE__ */ jsxs("span", {
...ctx.getStyles("actionBody", stylesApi),
children: [labelNode, /* @__PURE__ */ jsx("span", {
...ctx.getStyles("actionDescription", stylesApi),
children: description
})]
}),
rightSection && /* @__PURE__ */ jsx(Box, {
component: "span",
mod: {
position: "right",
dimmed: dimmedSections
},
...ctx.getStyles("actionSection", stylesApi),
children: rightSection
})
] })
});
});
SpotlightAction.classes = Spotlight_module_default;
SpotlightAction.displayName = "@mantine/spotlight/SpotlightAction";
//#endregion
export { SpotlightAction };
//# sourceMappingURL=SpotlightAction.mjs.map