@empoleon/spotlight/esm/Spotlight.mjs

Command center components for react and Empoleon

import { createComponent, mergeProps, memo } from 'solid-js/web';
import { splitProps, For } from 'solid-js';
import { getDefaultZIndex, factory, useProps } from '@empoleon/core';
import { useUncontrolled } from '@empoleon/hooks';
import { defaultSpotlightFilter } from './default-spotlight-filter.mjs';
import { isActionsGroup } from './is-actions-group.mjs';
import { limitActions } from './limit-actions.mjs';
import { spotlightStore, spotlight } from './spotlight.store.mjs';
import { SpotlightAction } from './SpotlightAction.mjs';
import { SpotlightActionsGroup } from './SpotlightActionsGroup.mjs';
import { SpotlightActionsList } from './SpotlightActionsList.mjs';
import { SpotlightEmpty } from './SpotlightEmpty.mjs';
import { SpotlightFooter } from './SpotlightFooter.mjs';
import { SpotlightRoot } from './SpotlightRoot.mjs';
import { SpotlightSearch } from './SpotlightSearch.mjs';
import classes from './Spotlight.module.css.mjs';

const defaultProps = {
  size: 600,
  yOffset: "80px",
  limit: Infinity,
  zIndex: getDefaultZIndex("max"),
  overlayProps: {
    backgroundOpacity: 0.35,
    blur: 7
  },
  transitionProps: {
    duration: 200,
    transition: "pop"
  },
  store: spotlightStore,
  filter: defaultSpotlightFilter,
  clearQueryOnClose: true,
  closeOnActionTrigger: true,
  shortcut: "mod + K",
  highlightQuery: false
};
const Spotlight = factory(_props => {
  const props = useProps("Spotlight", defaultProps, _props);
  const [local, others] = splitProps(props, ["searchProps", "filter", "query", "onQueryChange", "actions", "nothingFound", "highlightQuery", "limit", "ref"]);
  const [_query, setQuery] = useUncontrolled({
    value: () => local.query,
    defaultValue: "",
    finalValue: "",
    onChange: local.onQueryChange
  });
  const filteredActions = () => createComponent(For, {
    get each() {
      return limitActions(local.filter(_query(), local.actions), local.limit);
    },
    children: item => {
      if (isActionsGroup(item)) {
        return createComponent(SpotlightActionsGroup, {
          get label() {
            return item.group;
          },
          get children() {
            return createComponent(For, {
              get each() {
                return item.actions;
              },
              children: _ref => {
                let {
                  id,
                  ...actionData
                } = _ref;
                return createComponent(SpotlightAction, mergeProps({
                  get highlightQuery() {
                    return local.highlightQuery;
                  }
                }, actionData));
              }
            });
          }
        });
      }
      return createComponent(SpotlightAction, mergeProps({
        get highlightQuery() {
          return local.highlightQuery;
        }
      }, item));
    }
  });
  return createComponent(SpotlightRoot, mergeProps(others, {
    get query() {
      return _query();
    },
    onQueryChange: setQuery,
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    get children() {
      return [createComponent(SpotlightSearch, mergeProps(() => local.searchProps)), createComponent(SpotlightActionsList, {
        get children() {
          return [memo(() => filteredActions()), memo(() => memo(() => !!(filteredActions.length === 0 && local.nothingFound))() && createComponent(SpotlightEmpty, {
            get children() {
              return local.nothingFound;
            }
          }))];
        }
      })];
    }
  }));
});
Spotlight.classes = classes;
Spotlight.displayName = "@empoleon/spotlight/Spotlight";
Spotlight.Search = SpotlightSearch;
Spotlight.ActionsList = SpotlightActionsList;
Spotlight.Action = SpotlightAction;
Spotlight.Empty = SpotlightEmpty;
Spotlight.ActionsGroup = SpotlightActionsGroup;
Spotlight.Footer = SpotlightFooter;
Spotlight.Root = SpotlightRoot;
Spotlight.open = spotlight.open;
Spotlight.close = spotlight.close;
Spotlight.toggle = spotlight.toggle;

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