@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-LPNHBHS2.mjs → chunk-KY5MMT7Q.mjs}

@@ -1,11 +1,27 @@
-import { Input } from './chunk-WNLUUD5N.mjs';
-import { Textarea } from './chunk-7QZ4XT2P.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { Avatar } from './chunk-FE7PEZTI.mjs';
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { classNames, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  VirtualList
+} from "./chunk-7DUHHRAU.mjs";
+import {
+  Input
+} from "./chunk-WNLUUD5N.mjs";
+import {
+  Textarea
+} from "./chunk-7QZ4XT2P.mjs";
+import {
+  Button
+} from "./chunk-GKJNQUTW.mjs";
+import {
+  Avatar
+} from "./chunk-FE7PEZTI.mjs";
 
+// src/components/ChatWindow.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getChatMessageStatusInfo,
+  formatChatTime
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ChatWindow = ({
   messages = [],
   value,
@@ -30,6 +46,10 @@ var ChatWindow = ({
   allowEmpty = false,
   clearOnSend = true,
   statusVariant: _sv,
+  virtual = false,
+  virtualItemHeight = 88,
+  virtualHeight = 400,
+  autoScrollToBottom = true,
   onChange,
   onSend,
   renderMessage,
@@ -45,7 +65,7 @@ var ChatWindow = ({
   const inputValue = value !== void 0 ? value : innerValue;
   const wrapperClasses = useMemo(
     () => classNames(
-      "tiger-chat-window flex flex-col w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
+      "tiger-chat-window flex flex-col w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
       className
     ),
     [className]
@@ -125,7 +145,7 @@ var ChatWindow = ({
                 "div",
                 {
                   className: classNames(
-                    "rounded-lg px-3 py-2 text-sm break-words",
+                    "rounded-[var(--tiger-radius-md,0.5rem)] px-3 py-2 text-sm break-words",
                     isSelf ? "bg-[var(--tiger-primary,#2563eb)] text-white rounded-tr-none" : "bg-[var(--tiger-surface-muted,#f3f4f6)] text-[var(--tiger-text,#111827)] rounded-tl-none"
                   ),
                   "data-tiger-chat-bubble": true,
@@ -142,10 +162,40 @@ var ChatWindow = ({
     },
     [renderMessage, showAvatar, showName, showTime]
   );
+  const messageListRef = useRef(null);
+  useEffect(() => {
+    if (!autoScrollToBottom) return;
+    const raf = requestAnimationFrame(() => {
+      const el = messageListRef.current;
+      if (!el) return;
+      const target = (virtual ? el.firstElementChild : el) ?? el;
+      target.scrollTop = target.scrollHeight;
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [messages.length, autoScrollToBottom, virtual]);
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-tiger-chat-window": true, ...props, children: [
-    /* @__PURE__ */ jsx(
+    virtual && messages.length > 0 ? /* @__PURE__ */ jsx(
       "div",
       {
+        ref: messageListRef,
+        role: "log",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        "aria-label": messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868",
+        children: /* @__PURE__ */ jsx(
+          VirtualList,
+          {
+            itemCount: messages.length,
+            itemHeight: virtualItemHeight,
+            height: virtualHeight,
+            renderItem: ({ index }) => renderMessageItem(messages[index], index)
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: messageListRef,
         className: "flex-1 overflow-auto p-4 space-y-3",
         role: "log",
         "aria-live": "polite",
@@ -186,4 +236,7 @@ var ChatWindow = ({
 };
 var ChatWindow_default = ChatWindow;
 
-export { ChatWindow, ChatWindow_default };
+export {
+  ChatWindow,
+  ChatWindow_default
+};

package/dist/chunk-KYP7U6FK.js

@@ -0,0 +1,271 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/components/Spotlight.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('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 (_react2.default.isValidElement(icon)) return icon;
+  if (Array.isArray(icon)) return icon;
+  return null;
+}
+var Spotlight = ({
+  open,
+  defaultOpen = false,
+  query,
+  defaultQuery = "",
+  items = EMPTY_ITEMS,
+  title = "Spotlight",
+  placeholder = "Search",
+  emptyText = "No results found",
+  inputAriaLabel,
+  listboxLabel,
+  closeOnSelect = true,
+  mask = true,
+  maskClosable = true,
+  zIndex = 1e3,
+  className,
+  defaultActiveFirstItem = true,
+  filterItem,
+  limit,
+  onOpenChange,
+  onQueryChange,
+  onSelect,
+  style,
+  ...rest
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = _react.useState.call(void 0, defaultOpen);
+  const [uncontrolledQuery, setUncontrolledQuery] = _react.useState.call(void 0, defaultQuery);
+  const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
+  const isOpenControlled = open !== void 0;
+  const isQueryControlled = query !== void 0;
+  const resolvedOpen = isOpenControlled ? Boolean(open) : uncontrolledOpen;
+  const resolvedQuery = isQueryControlled ? String(query) : uncontrolledQuery;
+  const reactId = _react.useId.call(void 0, );
+  const dialogId = `tiger-spotlight-${reactId}`;
+  const titleId = `${dialogId}-title`;
+  const listboxId = `${dialogId}-listbox`;
+  const dialogRef = _react.useRef.call(void 0, null);
+  const inputRef = _react.useRef.call(void 0, null);
+  const previousActiveElementRef = _react.useRef.call(void 0, null);
+  const searchState = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getSpotlightSearchState.call(void 0, items, resolvedQuery, { filterItem, limit }),
+    [items, resolvedQuery, filterItem, limit]
+  );
+  const setOpenValue = _react.useCallback.call(void 0, 
+    (nextOpen) => {
+      if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+      _optionalChain([onOpenChange, 'optionalCall', _ => _(nextOpen)]);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const setQueryValue = _react.useCallback.call(void 0, 
+    (nextQuery) => {
+      if (!isQueryControlled) setUncontrolledQuery(nextQuery);
+      _optionalChain([onQueryChange, 'optionalCall', _2 => _2(nextQuery)]);
+    },
+    [isQueryControlled, onQueryChange]
+  );
+  const closeSpotlight = _react.useCallback.call(void 0, () => {
+    setOpenValue(false);
+  }, [setOpenValue]);
+  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, { enabled: resolvedOpen, onEscape: closeSpotlight });
+  _chunkSTTQ5LXXjs.useBodyScrollLock.call(void 0, { enabled: resolvedOpen });
+  _chunkSTTQ5LXXjs.useFocusTrap.call(void 0, { enabled: resolvedOpen, containerRef: dialogRef });
+  _react.useEffect.call(void 0, () => {
+    if (!resolvedOpen) {
+      _tigercatcore.restoreFocus.call(void 0, previousActiveElementRef.current);
+      return;
+    }
+    previousActiveElementRef.current = _tigercatcore.captureActiveElement.call(void 0, );
+    const timer = window.setTimeout(() => {
+      _tigercatcore.focusFirst.call(void 0, [inputRef.current, dialogRef.current]);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [resolvedOpen]);
+  _react.useEffect.call(void 0, () => {
+    if (!resolvedOpen) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex(
+      _tigercatcore.getInitialPickerActiveIndex.call(void 0, 
+        searchState.flatResults,
+        defaultActiveFirstItem,
+        (result) => result.item.disabled === true
+      )
+    );
+  }, [resolvedOpen, resolvedQuery, items, searchState.flatResults, defaultActiveFirstItem]);
+  const selectItem = _react.useCallback.call(void 0, 
+    (item) => {
+      if (item.disabled) return;
+      _optionalChain([onSelect, 'optionalCall', _3 => _3(item)]);
+      if (closeOnSelect) closeSpotlight();
+    },
+    [closeOnSelect, closeSpotlight, onSelect]
+  );
+  const handleMaskClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, maskClosable)) {
+        closeSpotlight();
+      }
+    },
+    [closeSpotlight, maskClosable]
+  );
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Home":
+      case "End":
+        event.preventDefault();
+        setActiveIndex(
+          (current) => _tigercatcore.getPickerNavigationIndex.call(void 0, 
+            searchState.flatResults,
+            current,
+            event.key,
+            (result) => result.item.disabled === 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 ? _tigercatcore.getPickerOptionId.call(void 0, listboxId, activeResult.flatIndex) : void 0;
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.spotlightRootClasses, style: { zIndex }, "data-tiger-spotlight-root": "", children: [
+    mask && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.spotlightMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: dialogRef,
+        id: dialogId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1,
+        className: _tigercatcore.classNames.call(void 0, _tigercatcore.spotlightPanelClasses, className),
+        style,
+        ...rest,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.spotlightHeaderClasses, children: [
+            title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: titleId, className: _tigercatcore.spotlightTitleClasses, children: title }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                ref: inputRef,
+                value: resolvedQuery,
+                type: "search",
+                className: _tigercatcore.spotlightInputClasses,
+                placeholder,
+                "aria-label": _nullishCoalesce(inputAriaLabel, () => ( placeholder)),
+                autoComplete: "off",
+                ..._tigercatcore.getPickerComboboxAria.call(void 0, {
+                  expanded: true,
+                  listboxId,
+                  activeOptionId
+                }),
+                onChange: (event) => setQueryValue(event.currentTarget.value),
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          searchState.flatResults.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              ..._tigercatcore.getPickerListboxAria.call(void 0, { id: listboxId, label: listboxLabel }),
+              className: _tigercatcore.spotlightListClasses,
+              children: searchState.groups.map((group, groupIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  className: _tigercatcore.spotlightGroupClasses,
+                  role: group.label ? "group" : void 0,
+                  "aria-label": group.label,
+                  children: [
+                    group.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.spotlightGroupLabelClasses, children: group.label }),
+                    group.items.map((result) => {
+                      const active = result.flatIndex === activeIndex;
+                      const shortcutLabel = _tigercatcore.getSpotlightShortcutLabel.call(void 0, result.item.shortcut);
+                      const iconNode = getRenderableIcon(result.item.icon);
+                      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                        "div",
+                        {
+                          id: _tigercatcore.getPickerOptionId.call(void 0, listboxId, result.flatIndex),
+                          ..._tigercatcore.getPickerOptionAria.call(void 0, { selected: active, disabled: result.item.disabled }),
+                          className: _tigercatcore.getSpotlightOptionClasses.call(void 0, active, result.item.disabled === true),
+                          onMouseEnter: () => setActiveIndex(result.flatIndex),
+                          onMouseDown: (event) => event.preventDefault(),
+                          onClick: () => selectItem(result.item),
+                          children: [
+                            iconNode && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0", children: iconNode }),
+                            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate text-sm font-medium", children: result.item.label }),
+                              result.item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate text-xs text-[var(--tiger-spotlight-item-description,var(--tiger-text-muted,#6b7280))]", children: result.item.description })
+                            ] }),
+                            shortcutLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "kbd", { className: "shrink-0 rounded border border-[var(--tiger-spotlight-shortcut-border,var(--tiger-border,#d1d5db))] px-1.5 py-0.5 text-xs text-[var(--tiger-spotlight-shortcut-text,var(--tiger-text-muted,#6b7280))]", children: shortcutLabel })
+                          ]
+                        },
+                        String(result.item.key)
+                      );
+                    })
+                  ]
+                },
+                _nullishCoalesce(group.label, () => ( `group-${groupIndex}`))
+              ))
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.spotlightEmptyClasses, children: emptyText })
+        ]
+      }
+    )
+  ] });
+  return _chunkSTTQ5LXXjs.renderBodyPortal.call(void 0, content);
+};
+var Spotlight_default = Spotlight;
+
+
+
+
+exports.Spotlight = Spotlight; exports.Spotlight_default = Spotlight_default;