@empoleon/spotlight/cjs/SpotlightRoot.cjs

Command center components for react and Empoleon

'use strict';

var web = require('solid-js/web');
var solidJs = require('solid-js');
var core = require('@empoleon/core');
var hooks = require('@empoleon/hooks');
var getHotkeys = require('./get-hotkeys.cjs');
var Spotlight_context = require('./Spotlight.context.cjs');
var spotlight_store = require('./spotlight.store.cjs');
var Spotlight_module = require('./Spotlight.module.css.cjs');

const defaultProps = {
  size: 600,
  yOffset: "80px",
  zIndex: core.getDefaultZIndex("max"),
  overlayProps: {
    backgroundOpacity: 0.35,
    blur: 7
  },
  transitionProps: {
    duration: 200,
    transition: "pop"
  },
  store: spotlight_store.spotlightStore,
  clearQueryOnClose: true,
  closeOnActionTrigger: true,
  shortcut: "mod + K",
  maxHeight: "400px",
  scrollable: false
};
const SpotlightRoot = core.factory(_props => {
  const props = core.useProps("SpotlightRoot", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "store", "children", "query", "onQueryChange", "transitionProps", "clearQueryOnClose", "shortcut", "tagsToIgnore", "triggerOnContentEditable", "disabled", "onSpotlightOpen", "onSpotlightClose", "forceOpened", "closeOnActionTrigger", "maxHeight", "scrollable", "ref"]);
  const theme = core.useEmpoleonTheme();
  const spotlightState = spotlight_store.useSpotlight(local.store);
  const opened = () => spotlightState().opened;
  const storeQuery = () => spotlightState().query;
  const _query = () => local.query || storeQuery();
  const setQuery = q => {
    local.onQueryChange?.(q);
    spotlight_store.spotlightActions.setQuery(q, local.store);
  };
  const getStyles = core.useStyles({
    name: "Spotlight",
    classes: Spotlight_module,
    props,
    className: local.className,
    style: local.style,
    classNames: local.classNames,
    styles: local.styles,
    unstyled: local.unstyled
  });
  hooks.useHotkeys(getHotkeys.getHotkeys(local.shortcut, local.store), local.tagsToIgnore, local.triggerOnContentEditable);
  solidJs.createEffect(solidJs.on(opened, isOpened => {
    isOpened ? local.onSpotlightOpen?.() : local.onSpotlightClose?.();
  }));
  return web.createComponent(Spotlight_context.SpotlightProvider, {
    get value() {
      return {
        getStyles,
        query: _query(),
        setQuery,
        store: local.store,
        closeOnActionTrigger: local.closeOnActionTrigger
      };
    },
    get children() {
      return web.createComponent(core.Modal, web.mergeProps({
        ref(r$) {
          var _ref$ = local.ref;
          typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
        }
      }, others, {
        withCloseButton: false,
        get opened() {
          return opened() || !!local.forceOpened;
        },
        padding: 0,
        onClose: () => spotlight_store.spotlightActions.close(local.store),
        get className() {
          return local.className;
        },
        get style() {
          return local.style;
        },
        get classNames() {
          return core.resolveClassNames({
            theme,
            classNames: [Spotlight_module, local.classNames],
            props,
            stylesCtx: void 0
          });
        },
        get styles() {
          return core.resolveStyles({
            theme,
            styles: local.styles,
            props,
            stylesCtx: void 0
          });
        },
        get transitionProps() {
          return {
            ...local.transitionProps,
            onExited: () => {
              local.clearQueryOnClose && setQuery("");
              spotlight_store.spotlightActions.clearSpotlightState({
                clearQuery: local.clearQueryOnClose
              }, local.store);
              local.transitionProps?.onExited?.();
            }
          };
        },
        get __vars() {
          return {
            "--spotlight-max-height": local.scrollable ? core.rem(local.maxHeight) : void 0
          };
        },
        __staticSelector: "Spotlight",
        get ["data-scrollable"]() {
          return local.scrollable || void 0;
        },
        get children() {
          return local.children;
        }
      }));
    }
  });
});
SpotlightRoot.classes = Spotlight_module;
SpotlightRoot.displayName = "@empoleon/spotlight/SpotlightRoot";

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