@it-corp/vpbank-spotlight/esm/SpotlightAction.mjs

Command center components for react and VPbank components

'use client';
import React from 'react';
import { factory, useProps, Highlight, UnstyledButton, Box } from '@it-corp/vpbank-core';
import { useSpotlightContext } from './Spotlight.context.mjs';
import { spotlightActions } from './spotlight.store.mjs';
import classes from './Spotlight.module.css.mjs';

const defaultProps = {
  dimmedSections: true,
  highlightQuery: false
};
const SpotlightAction = factory(
  (_props, ref) => {
    const props = 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 = useSpotlightContext();
    const stylesApi = { classNames, styles };
    const labelNode = highlightQuery && typeof label === "string" ? /* @__PURE__ */ React.createElement(
      Highlight,
      {
        component: "span",
        highlight: ctx.query,
        color: highlightColor,
        ...ctx.getStyles("actionLabel", stylesApi)
      },
      label
    ) : /* @__PURE__ */ React.createElement("span", { ...ctx.getStyles("actionLabel", stylesApi) }, label);
    return /* @__PURE__ */ React.createElement(
      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) {
            spotlightActions.close(ctx.store);
          }
        },
        tabIndex: -1
      },
      children || /* @__PURE__ */ React.createElement(React.Fragment, null, leftSection && /* @__PURE__ */ React.createElement(
        Box,
        {
          component: "span",
          mod: { position: "left", dimmed: dimmedSections },
          ...ctx.getStyles("actionSection", stylesApi)
        },
        leftSection
      ), /* @__PURE__ */ React.createElement("span", { ...ctx.getStyles("actionBody", stylesApi) }, labelNode, /* @__PURE__ */ React.createElement("span", { ...ctx.getStyles("actionDescription", stylesApi) }, description)), rightSection && /* @__PURE__ */ React.createElement(
        Box,
        {
          component: "span",
          mod: { position: "right", dimmed: dimmedSections },
          ...ctx.getStyles("actionSection", stylesApi)
        },
        rightSection
      ))
    );
  }
);
SpotlightAction.classes = classes;
SpotlightAction.displayName = "@it-corp/vpbank-spotlight/SpotlightAction";

export { SpotlightAction };
//# sourceMappingURL=SpotlightAction.mjs.map