alinea/dist/dashboard/view/SearchBox.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/SearchBox.tsx
import { Entry } from "alinea/core";
import { useLocation, useNavigate } from "alinea/dashboard/util/HashRouter";
import { HStack, Stack, fromModule } from "alinea/ui";
import { IcOutlineGridView } from "alinea/ui/icons/IcOutlineGridView";
import { IcOutlineList } from "alinea/ui/icons/IcOutlineList";
import { IcRoundSearch } from "alinea/ui/icons/IcRoundSearch";
import { useLayoutEffect, useMemo, useState } from "react";
import { useFocusList } from "../hook/UseFocusList.js";
import { useLocale } from "../hook/UseLocale.js";
import { useNav } from "../hook/UseNav.js";
import { useRoot } from "../hook/UseRoot.js";
import { useWorkspace } from "../hook/UseWorkspace.js";
import { IconButton } from "./IconButton.js";

// src/dashboard/view/SearchBox.module.scss
var SearchBox_module_default = {
  "root": "alinea-SearchBox",
  "root-label": "alinea-SearchBox-label",
  "rootLabel": "alinea-SearchBox-label",
  "root-label-icon": "alinea-SearchBox-label-icon",
  "rootLabelIcon": "alinea-SearchBox-label-icon",
  "root-label-input": "alinea-SearchBox-label-input",
  "rootLabelInput": "alinea-SearchBox-label-input",
  "root-popover": "alinea-SearchBox-popover",
  "rootPopover": "alinea-SearchBox-popover",
  "root-popover-item": "alinea-SearchBox-popover-item",
  "rootPopoverItem": "alinea-SearchBox-popover-item"
};

// src/dashboard/view/SearchBox.tsx
import { Explorer } from "./explorer/Explorer.js";
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(SearchBox_module_default);
function SearchBox() {
  const nav = useNav();
  const navigate = useNavigate();
  const location = useLocation();
  const { name: workspace } = useWorkspace();
  const { name: root } = useRoot();
  const locale = useLocale();
  const [search, setSearch] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const list = useFocusList({
    onClear: () => setSearch("")
  });
  const cursor = useMemo(() => {
    const terms = search.replace(/,/g, " ").split(" ").filter(Boolean);
    return Entry({ workspace, root }).where(locale ? Entry.locale.is(locale) : true).search(...terms);
  }, [workspace, root, search, locale]);
  const [explorerView, setExplorerView] = useState("row");
  useLayoutEffect(() => {
    setSearch("");
  }, [location]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: styles.root(),
      onFocus: () => {
        setIsOpen(true);
      },
      onBlur: ({ currentTarget, relatedTarget }) => {
        if (currentTarget.contains(relatedTarget))
          return;
        setIsOpen(false);
        list.focusProps.onBlur();
      },
      children: [
        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: styles.root.label(), ...list.focusProps, children: [
          /* @__PURE__ */ jsx(IcRoundSearch, { className: styles.root.label.icon() }),
          /* @__PURE__ */ jsx(
            "input",
            {
              placeholder: "Search",
              value: search,
              onChange: (event) => setSearch(event.target.value),
              className: styles.root.label.input()
            }
          ),
          isOpen && /* @__PURE__ */ jsx(Stack.Right, { children: /* @__PURE__ */ jsxs(HStack, { gap: 10, children: [
            /* @__PURE__ */ jsx(
              IconButton,
              {
                size: 12,
                icon: IcOutlineList,
                active: explorerView === "row",
                onClick: () => setExplorerView("row")
              }
            ),
            /* @__PURE__ */ jsx(
              IconButton,
              {
                size: 12,
                icon: IcOutlineGridView,
                active: explorerView === "thumb",
                onClick: () => setExplorerView("thumb")
              }
            )
          ] }) })
        ] }) }),
        /* @__PURE__ */ jsx(list.Container, { children: isOpen && search && /* @__PURE__ */ jsx("div", { className: styles.root.popover(), children: /* @__PURE__ */ jsx(
          Explorer,
          {
            border: false,
            cursor,
            type: explorerView,
            toggleSelect: (entry) => navigate(nav.entry(entry)),
            max: 25
          }
        ) }) })
      ]
    }
  );
}
export {
  SearchBox
};