@empoleon/spotlight/esm/SpotlightSearch.mjs

Command center components for react and Empoleon

import { createComponent, mergeProps } from 'solid-js/web';
import { factory, useProps, Input } from '@empoleon/core';
import { useSpotlightContext } from './Spotlight.context.mjs';
import { spotlightActions } from './spotlight.store.mjs';
import classes from './Spotlight.module.css.mjs';
import { splitProps, createSignal } from 'solid-js';

const defaultProps = {
  size: "lg"
};
const SpotlightSearch = factory(_props => {
  const props = useProps("SpotlightSearch", defaultProps, _props);
  const [local, others] = splitProps(props, ["classNames", "styles", "onKeyDown", "onChange", "vars", "value", "ref"]);
  const ctx = useSpotlightContext();
  const inputStyles = ctx.getStyles("search");
  const [isComposing, setIsComposing] = createSignal(false);
  const handleKeyDown = event => {
    typeof local.onKeyDown === "function" && local.onKeyDown?.(event);
    if (isComposing()) {
      return;
    }
    if (event.code === "ArrowDown") {
      event.preventDefault();
      spotlightActions.selectNextAction(ctx.store);
    }
    if (event.code === "ArrowUp") {
      event.preventDefault();
      spotlightActions.selectPreviousAction(ctx.store);
    }
    if (event.code === "Enter" || event.code === "NumpadEnter") {
      event.preventDefault();
      spotlightActions.triggerSelectedAction(ctx.store);
    }
  };
  return createComponent(Input, mergeProps({
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    get classNames() {
      return [{
        input: inputStyles.className
      }, local.classNames];
    },
    get styles() {
      return [{
        input: inputStyles.style
      }, local.styles];
    }
  }, others, {
    get value() {
      return local.value ?? ctx.query;
    },
    onChange: event => {
      ctx.setQuery(event.currentTarget.value);
      typeof local.onChange === "function" && local.onChange?.(event);
    },
    onKeyDown: handleKeyDown,
    onCompositionStart: () => setIsComposing(true),
    onCompositionEnd: () => setIsComposing(false)
  }));
});
SpotlightSearch.classes = classes;
SpotlightSearch.displayName = "@empoleon/spotlight/SpotlightSearch";

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