@it-corp/vpbank-spotlight/cjs/SpotlightSearch.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 = {
  size: "lg"
};
const SpotlightSearch = vpbankCore.factory((props, ref) => {
  const { classNames, styles, onKeyDown, onChange, vars, value, ...others } = vpbankCore.useProps("SpotlightSearch", defaultProps, props);
  const ctx = Spotlight_context.useSpotlightContext();
  const inputStyles = ctx.getStyles("search");
  const [isComposing, setIsComposing] = React__default.default.useState(false);
  const handleKeyDown = (event) => {
    onKeyDown?.(event);
    if (isComposing)
      return;
    if (event.nativeEvent.code === "ArrowDown") {
      event.preventDefault();
      spotlight_store.spotlightActions.selectNextAction(ctx.store);
    }
    if (event.nativeEvent.code === "ArrowUp") {
      event.preventDefault();
      spotlight_store.spotlightActions.selectPreviousAction(ctx.store);
    }
    if (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "NumpadEnter") {
      event.preventDefault();
      spotlight_store.spotlightActions.triggerSelectedAction(ctx.store);
    }
  };
  return /* @__PURE__ */ React__default.default.createElement(
    vpbankCore.Input,
    {
      ref,
      classNames: [{ input: inputStyles.className }, classNames],
      styles: [{ input: inputStyles.style }, styles],
      ...others,
      value: value ?? ctx.query,
      onChange: (event) => {
        ctx.setQuery(event.currentTarget.value);
        onChange?.(event);
      },
      onKeyDown: handleKeyDown,
      onCompositionStart: () => setIsComposing(true),
      onCompositionEnd: () => setIsComposing(false)
    }
  );
});
SpotlightSearch.classes = Spotlight_module;
SpotlightSearch.displayName = "@it-corp/vpbank-spotlight/SpotlightSearch";

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