@empoleon/spotlight/esm/SpotlightRoot.mjs

Command center components for react and Empoleon

import { createComponent, mergeProps } from 'solid-js/web';
import { splitProps, createEffect, on } from 'solid-js';
import { getDefaultZIndex, factory, useProps, useEmpoleonTheme, useStyles, Modal, rem, resolveStyles, resolveClassNames } from '@empoleon/core';
import { useHotkeys } from '@empoleon/hooks';
import { getHotkeys } from './get-hotkeys.mjs';
import { SpotlightProvider } from './Spotlight.context.mjs';
import { spotlightStore, useSpotlight, spotlightActions } from './spotlight.store.mjs';
import classes from './Spotlight.module.css.mjs';

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

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