@it-corp/vpbank-spotlight/cjs/SpotlightAction.cjs

Command center components for react and VPbank components

'use client';
'use strict';

var React = require('react');
var vpbankCore = require('@it-corp/vpbank-core');
var Spotlight_context = require('./Spotlight.context.cjs');
var spotlight_store = require('./spotlight.store.cjs');
var Spotlight_module = require('./Spotlight.module.css.cjs');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const defaultProps = {
  dimmedSections: true,
  highlightQuery: false
};
const SpotlightAction = vpbankCore.factory(
  (_props, ref) => {
    const props = vpbankCore.useProps("SpotlightAction", defaultProps, _props);
    const {
      className,
      style,
      classNames,
      styles,
      id,
      description,
      label,
      leftSection,
      rightSection,
      children,
      dimmedSections,
      highlightQuery,
      highlightColor,
      closeSpotlightOnTrigger,
      onClick,
      onMouseDown,
      keywords,
      vars,
      ...others
    } = props;
    const ctx = Spotlight_context.useSpotlightContext();
    const stylesApi = { classNames, styles };
    const labelNode = highlightQuery && typeof label === "string" ? /* @__PURE__ */ React__default.default.createElement(
      vpbankCore.Highlight,
      {
        component: "span",
        highlight: ctx.query,
        color: highlightColor,
        ...ctx.getStyles("actionLabel", stylesApi)
      },
      label
    ) : /* @__PURE__ */ React__default.default.createElement("span", { ...ctx.getStyles("actionLabel", stylesApi) }, label);
    return /* @__PURE__ */ React__default.default.createElement(
      vpbankCore.UnstyledButton,
      {
        ref,
        "data-action": true,
        ...ctx.getStyles("action", { className, style, ...stylesApi }),
        ...others,
        onMouseDown: (event) => {
          event.preventDefault();
          onMouseDown?.(event);
        },
        onClick: (event) => {
          onClick?.(event);
          if (closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) {
            spotlight_store.spotlightActions.close(ctx.store);
          }
        },
        tabIndex: -1
      },
      children || /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, leftSection && /* @__PURE__ */ React__default.default.createElement(
        vpbankCore.Box,
        {
          component: "span",
          mod: { position: "left", dimmed: dimmedSections },
          ...ctx.getStyles("actionSection", stylesApi)
        },
        leftSection
      ), /* @__PURE__ */ React__default.default.createElement("span", { ...ctx.getStyles("actionBody", stylesApi) }, labelNode, /* @__PURE__ */ React__default.default.createElement("span", { ...ctx.getStyles("actionDescription", stylesApi) }, description)), rightSection && /* @__PURE__ */ React__default.default.createElement(
        vpbankCore.Box,
        {
          component: "span",
          mod: { position: "right", dimmed: dimmedSections },
          ...ctx.getStyles("actionSection", stylesApi)
        },
        rightSection
      ))
    );
  }
);
SpotlightAction.classes = Spotlight_module;
SpotlightAction.displayName = "@it-corp/vpbank-spotlight/SpotlightAction";

exports.SpotlightAction = SpotlightAction;
//# sourceMappingURL=SpotlightAction.cjs.map