@it-corp/vpbank-spotlight/cjs/SpotlightRoot.cjs

Command center components for react and VPbank components

'use client';
'use strict';

var React = require('react');
var vpbankCore = require('@it-corp/vpbank-core');
var vpbankHooks = require('@it-corp/vpbank-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');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const defaultProps = {
  size: 600,
  yOffset: 80,
  zIndex: vpbankCore.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: 400,
  scrollable: false
};
const SpotlightRoot = vpbankCore.factory((_props, ref) => {
  const props = vpbankCore.useProps("SpotlightRoot", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    store,
    children,
    query,
    onQueryChange,
    transitionProps,
    clearQueryOnClose,
    shortcut,
    tagsToIgnore,
    triggerOnContentEditable,
    disabled,
    onSpotlightOpen,
    onSpotlightClose,
    forceOpened,
    closeOnActionTrigger,
    maxHeight,
    scrollable,
    ...others
  } = props;
  const theme = vpbankCore.useMantineTheme();
  const { opened, query: storeQuery } = spotlight_store.useSpotlight(store);
  const _query = query || storeQuery;
  const setQuery = (q) => {
    onQueryChange?.(q);
    spotlight_store.spotlightActions.setQuery(q, store);
  };
  const getStyles = vpbankCore.useStyles({
    name: "Spotlight",
    classes: Spotlight_module,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled
  });
  vpbankHooks.useHotkeys(
    getHotkeys.getHotkeys(shortcut, store),
    tagsToIgnore,
    triggerOnContentEditable
  );
  vpbankHooks.useDidUpdate(() => {
    opened ? onSpotlightOpen?.() : onSpotlightClose?.();
  }, [opened]);
  if (disabled) {
    return null;
  }
  return /* @__PURE__ */ React__default.default.createElement(
    Spotlight_context.SpotlightProvider,
    {
      value: {
        getStyles,
        query: _query,
        setQuery,
        store,
        closeOnActionTrigger
      }
    },
    /* @__PURE__ */ React__default.default.createElement(
      vpbankCore.Modal,
      {
        ref,
        ...others,
        withCloseButton: false,
        opened: opened || !!forceOpened,
        padding: 0,
        onClose: () => spotlight_store.spotlightActions.close(store),
        className,
        style,
        classNames: vpbankCore.resolveClassNames({
          theme,
          classNames: [Spotlight_module, classNames],
          props,
          stylesCtx: void 0
        }),
        styles: vpbankCore.resolveStyles({ theme, styles, props, stylesCtx: void 0 }),
        transitionProps: {
          ...transitionProps,
          onExited: () => {
            clearQueryOnClose && setQuery("");
            spotlight_store.spotlightActions.clearSpotlightState(
              { clearQuery: clearQueryOnClose },
              store
            );
            transitionProps?.onExited?.();
          }
        },
        __vars: {
          "--spotlight-max-height": scrollable ? vpbankCore.rem(maxHeight) : void 0
        },
        __staticSelector: "Spotlight",
        "data-scrollable": scrollable || void 0
      },
      children
    )
  );
});
SpotlightRoot.classes = Spotlight_module;
SpotlightRoot.displayName = "@it-corp/vpbank-spotlight/SpotlightRoot";

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