@it-corp/vpbank-spotlight/esm/Spotlight.mjs

Command center components for react and VPbank components

'use client';
import React from 'react';
import { getDefaultZIndex, factory, useProps } from '@it-corp/vpbank-core';
import { useUncontrolled } from '@it-corp/vpbank-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: 80,
  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, ref) => {
  const props = useProps("Spotlight", defaultProps, _props);
  const {
    searchProps,
    filter,
    query,
    onQueryChange,
    actions,
    nothingFound,
    highlightQuery,
    limit,
    ...others
  } = props;
  const [_query, setQuery] = useUncontrolled({
    value: query,
    defaultValue: "",
    finalValue: "",
    onChange: onQueryChange
  });
  const filteredActions = limitActions(filter(_query, actions), limit).map(
    (item) => {
      if (isActionsGroup(item)) {
        const items = item.actions.map(({ id, ...actionData }) => /* @__PURE__ */ React.createElement(
          SpotlightAction,
          {
            key: id,
            highlightQuery,
            ...actionData
          }
        ));
        return /* @__PURE__ */ React.createElement(SpotlightActionsGroup, { key: item.group, label: item.group }, items);
      }
      return /* @__PURE__ */ React.createElement(
        SpotlightAction,
        {
          key: item.id,
          highlightQuery,
          ...item
        }
      );
    }
  );
  return /* @__PURE__ */ React.createElement(
    SpotlightRoot,
    {
      ...others,
      query: _query,
      onQueryChange: setQuery,
      ref
    },
    /* @__PURE__ */ React.createElement(SpotlightSearch, { ...searchProps }),
    /* @__PURE__ */ React.createElement(SpotlightActionsList, null, filteredActions, filteredActions.length === 0 && nothingFound && /* @__PURE__ */ React.createElement(SpotlightEmpty, null, nothingFound))
  );
});
Spotlight.classes = classes;
Spotlight.displayName = "@it-corp/vpbank-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