@mantine/spotlight
Version:
Command center components for react and Mantine
80 lines (79 loc) • 2.94 kB
JavaScript
"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");
//#region packages/@mantine/spotlight/src/SpotlightAction.tsx
const defaultProps = {
dimmedSections: true,
highlightQuery: false
};
const SpotlightAction = (0, _mantine_core.factory)((_props) => {
const { className, style, classNames, styles, id, description, label, leftSection, rightSection, children, dimmedSections, highlightQuery, highlightColor, closeSpotlightOnTrigger, onClick, onMouseDown, keywords, vars, ...others } = (0, _mantine_core.useProps)("SpotlightAction", defaultProps, _props);
const ctx = require_Spotlight_context.useSpotlightContext();
const stylesApi = {
classNames,
styles
};
const labelNode = highlightQuery && typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Highlight, {
component: "span",
highlight: ctx.query,
color: highlightColor,
...ctx.getStyles("actionLabel", stylesApi),
children: label
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("actionLabel", stylesApi),
children: label
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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) require_spotlight_store.spotlightActions.close(ctx.store);
},
tabIndex: -1,
children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
component: "span",
mod: {
position: "left",
dimmed: dimmedSections
},
...ctx.getStyles("actionSection", stylesApi),
children: leftSection
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
...ctx.getStyles("actionBody", stylesApi),
children: [labelNode, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
...ctx.getStyles("actionDescription", stylesApi),
children: description
})]
}),
rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
component: "span",
mod: {
position: "right",
dimmed: dimmedSections
},
...ctx.getStyles("actionSection", stylesApi),
children: rightSection
})
] })
});
});
SpotlightAction.classes = require_Spotlight_module.default;
SpotlightAction.displayName = "@mantine/spotlight/SpotlightAction";
//#endregion
exports.SpotlightAction = SpotlightAction;
//# sourceMappingURL=SpotlightAction.cjs.map