@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-EK7R3MIN.mjs

@@ -0,0 +1,365 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderBodyPortal,
+  useBodyScrollLock,
+  useEscapeKey,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Spotlight.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  captureActiveElement,
+  classNames,
+  findSpotlightShortcutItem,
+  focusFirst,
+  getEmptyLabels,
+  getInitialPickerActiveIndex,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  getSpotlightLabels,
+  getSpotlightOptionClasses,
+  getSpotlightSearchState,
+  getSpotlightShortcutLabel,
+  isSpotlightToggleHotkey,
+  mergeTigerLocale,
+  restoreFocus,
+  shouldCloseOnMaskClick,
+  spotlightEmptyClasses,
+  spotlightGroupClasses,
+  spotlightGroupLabelClasses,
+  spotlightHeaderClasses,
+  spotlightInputClasses,
+  spotlightItemDescriptionClasses,
+  spotlightListClasses,
+  spotlightMaskClasses,
+  spotlightPanelClasses,
+  spotlightRootClasses,
+  spotlightShortcutClasses,
+  spotlightTitleClasses,
+  OVERLAY_Z_INDEX
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_ITEMS = [];
+function getRenderableIcon(icon) {
+  if (icon === null || icon === void 0) return null;
+  if (typeof icon === "string" || typeof icon === "number") return icon;
+  if (React.isValidElement(icon)) return icon;
+  if (Array.isArray(icon)) return icon;
+  return null;
+}
+var Spotlight = forwardRef(function Spotlight2({
+  open,
+  defaultOpen = false,
+  query,
+  defaultQuery = "",
+  items = EMPTY_ITEMS,
+  title,
+  placeholder,
+  emptyText,
+  locale,
+  inputAriaLabel,
+  listboxLabel,
+  closeOnSelect = true,
+  mask = true,
+  maskClosable = true,
+  zIndex = OVERLAY_Z_INDEX.modal,
+  className,
+  defaultActiveFirstItem = true,
+  filterItem,
+  limit,
+  hotkey = true,
+  onOpenChange,
+  onQueryChange,
+  onSelect,
+  icon,
+  style,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = getSpotlightLabels(mergedLocale);
+  const emptyLabels = getEmptyLabels(mergedLocale);
+  const resolvedTitle = title === void 0 ? labels.title : title;
+  const placeholderText = placeholder ?? labels.placeholder;
+  const emptyMessage = emptyText ?? emptyLabels.noResults;
+  const [resolvedOpen, setOpenValue] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen ?? false,
+    onChange: onOpenChange
+  });
+  const [resolvedQuery, setQueryValue] = useControlledState({
+    value: query,
+    defaultValue: defaultQuery ?? "",
+    onChange: onQueryChange
+  });
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const reactId = useId();
+  const dialogId = `tiger-spotlight-${reactId}`;
+  const titleId = `${dialogId}-title`;
+  const listboxId = `${dialogId}-listbox`;
+  const overlayHostId = `${dialogId}-overlay-host`;
+  const rootRef = useRef(null);
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const searchState = useMemo(
+    () => getSpotlightSearchState(items, resolvedQuery, { filterItem, limit }),
+    [items, resolvedQuery, filterItem, limit]
+  );
+  const closeSpotlight = useCallback(() => {
+    setOpenValue(false);
+  }, [setOpenValue]);
+  const openSpotlight = useCallback(() => {
+    setOpenValue(true);
+  }, [setOpenValue]);
+  const toggleSpotlight = useCallback(() => {
+    setOpenValue((current) => !current);
+  }, [setOpenValue]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: openSpotlight,
+      close: closeSpotlight,
+      toggle: toggleSpotlight
+    }),
+    [closeSpotlight, openSpotlight, toggleSpotlight]
+  );
+  useEscapeKey({ enabled: resolvedOpen, onEscape: closeSpotlight, layerRef: rootRef });
+  useBodyScrollLock({ enabled: resolvedOpen });
+  useFocusTrap({ enabled: resolvedOpen, containerRef: rootRef, inert: true });
+  useEffect(() => {
+    if (hotkey === false) return;
+    const onKeyDown = (event) => {
+      if (!isSpotlightToggleHotkey(event, hotkey)) return;
+      event.preventDefault();
+      toggleSpotlight();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [hotkey, toggleSpotlight]);
+  useEffect(() => {
+    if (!resolvedOpen) {
+      restoreFocus(previousActiveElementRef.current);
+      return;
+    }
+    previousActiveElementRef.current = captureActiveElement();
+    const timer = window.setTimeout(() => {
+      focusFirst([inputRef.current, dialogRef.current]);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [resolvedOpen]);
+  useEffect(() => {
+    if (!resolvedOpen) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex(
+      getInitialPickerActiveIndex(
+        searchState.flatResults,
+        defaultActiveFirstItem,
+        (result) => result.item.disabled === true
+      )
+    );
+  }, [resolvedOpen, resolvedQuery, items, searchState.flatResults, defaultActiveFirstItem]);
+  useEffect(() => {
+    if (!resolvedOpen || activeIndex < 0) return;
+    const option = document.getElementById(getPickerOptionId(listboxId, activeIndex));
+    option?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, listboxId, resolvedOpen]);
+  const selectItem = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(item);
+      if (closeOnSelect) closeSpotlight();
+    },
+    [closeOnSelect, closeSpotlight, onSelect]
+  );
+  useEffect(() => {
+    if (!resolvedOpen) return;
+    const onKeyDown = (event) => {
+      const item = findSpotlightShortcutItem(event, items);
+      if (!item) return;
+      event.preventDefault();
+      selectItem(item);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [items, resolvedOpen, selectItem]);
+  const handleMaskClick = useCallback(
+    (event) => {
+      if (shouldCloseOnMaskClick(event, maskClosable)) {
+        closeSpotlight();
+      }
+    },
+    [closeSpotlight, maskClosable]
+  );
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Home":
+      case "End":
+        event.preventDefault();
+        setActiveIndex(
+          (current) => getPickerNavigationIndex(
+            searchState.flatResults,
+            current,
+            event.key,
+            (result) => result.item.disabled === true,
+            { wrap: true }
+          )
+        );
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const result = searchState.flatResults[activeIndex];
+        if (result) selectItem(result.item);
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        closeSpotlight();
+        break;
+    }
+  };
+  if (!resolvedOpen) return null;
+  const activeResult = searchState.flatResults[activeIndex];
+  const activeOptionId = activeResult ? getPickerOptionId(listboxId, activeResult.flatIndex) : void 0;
+  const showTitle = Boolean(resolvedTitle);
+  const renderOption = (result) => {
+    const active = result.flatIndex === activeIndex;
+    const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
+    const iconNode = icon?.(result.item) ?? getRenderableIcon(result.item.icon);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: getPickerOptionId(listboxId, result.flatIndex),
+        ...getPickerOptionAria({ selected: false, disabled: result.item.disabled }),
+        className: getSpotlightOptionClasses(active, result.item.disabled === true),
+        onMouseEnter: () => {
+          if (result.item.disabled) return;
+          setActiveIndex(result.flatIndex);
+        },
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => selectItem(result.item),
+        children: [
+          iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: result.item.label }),
+            result.item.description && /* @__PURE__ */ jsx("span", { className: spotlightItemDescriptionClasses, children: result.item.description })
+          ] }),
+          shortcutLabel && /* @__PURE__ */ jsx("kbd", { className: spotlightShortcutClasses, children: shortcutLabel })
+        ]
+      },
+      String(result.item.key)
+    );
+  };
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: spotlightRootClasses,
+      style: { zIndex },
+      "data-tiger-spotlight-root": "",
+      "data-tiger-overlay-layer": "",
+      children: [
+        mask && /* @__PURE__ */ jsx("div", { className: spotlightMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...rest,
+            ref: dialogRef,
+            id: dialogId,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": showTitle ? titleId : void 0,
+            "aria-label": showTitle ? void 0 : labels.title,
+            "aria-owns": overlayHostId,
+            tabIndex: -1,
+            className: classNames(spotlightPanelClasses, className),
+            style,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: spotlightHeaderClasses, children: [
+                showTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: spotlightTitleClasses, children: resolvedTitle }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    value: resolvedQuery,
+                    type: "search",
+                    className: spotlightInputClasses,
+                    placeholder: placeholderText,
+                    "aria-label": inputAriaLabel ?? placeholderText,
+                    autoComplete: "off",
+                    ...getPickerComboboxAria({
+                      expanded: true,
+                      listboxId,
+                      activeOptionId,
+                      autocomplete: "list"
+                    }),
+                    onChange: (event) => setQueryValue(event.currentTarget.value),
+                    onKeyDown: handleKeyDown
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  ...getPickerListboxAria({ id: listboxId, label: listboxLabel }),
+                  className: spotlightListClasses,
+                  children: searchState.groups.map(
+                    (group, groupIndex) => group.label ? /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: spotlightGroupClasses,
+                        role: "group",
+                        "aria-label": group.label,
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: spotlightGroupLabelClasses, "aria-hidden": "true", children: group.label }),
+                          group.items.map(renderOption)
+                        ]
+                      },
+                      group.label
+                    ) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderOption) }, group.label ?? `group-${groupIndex}`)
+                  )
+                }
+              ),
+              searchState.flatResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: spotlightEmptyClasses, children: emptyMessage }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { id: overlayHostId, className: "contents", "data-tiger-overlay-host": "" })
+      ]
+    }
+  );
+  return renderBodyPortal(content);
+});
+var Spotlight_default = Spotlight;
+
+export {
+  Spotlight,
+  Spotlight_default
+};