@empoleon/spotlight/cjs/SpotlightActionsList.cjs

Command center components for react and Empoleon

'use strict';

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

const defaultProps = {};
const SpotlightActionsList = core.factory(_props => {
  const props = core.useProps("SpotlightActionsList", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["className", "style", "id", "children", "vars", "classNames", "styles", "ref"]);
  const ctx = Spotlight_context.useSpotlightContext();
  const generatedId = `empoleon-${hooks.useId().replace(/:/g, "")}`;
  const listId = local.id || generatedId;
  solidJs.createEffect(() => {
    spotlight_store.spotlightActions.setListId(listId, ctx.store);
    return () => spotlight_store.spotlightActions.setListId("", ctx.store);
  }, []);
  return web.createComponent(core.ScrollArea.Autosize, web.mergeProps(() => ctx.getStyles("actionsList", {
    className: local.className,
    style: local.style,
    classNames: local.classNames,
    styles: local.styles
  }), {
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    type: "scroll",
    scrollbarSize: "var(--spotlight-actions-list-padding)",
    offsetScrollbars: "y",
    id: listId
  }, others, {
    get children() {
      return local.children;
    }
  }));
});
SpotlightActionsList.classes = Spotlight_module;
SpotlightActionsList.displayName = "@empoleon/spotlight/SpotlightActionsList";

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