@expcat/tigercat-react 2.0.4 → 2.1.0

package/dist/chunk-SEOG5AGS.mjs

@@ -0,0 +1,72 @@
+// src/components/Highlight.tsx
+import React, { forwardRef, isValidElement } from "react";
+import {
+  getHighlightMarkClasses,
+  getHighlightRootClasses,
+  getHighlightSegments,
+  resolveHighlightText
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function flattenReactText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    let out = "";
+    for (const item of node) out += flattenReactText(item);
+    return out;
+  }
+  if (isValidElement(node)) {
+    const props = node.props;
+    return flattenReactText(props.children);
+  }
+  return "";
+}
+var Highlight = forwardRef(
+  ({
+    text,
+    keywords,
+    caseSensitive = false,
+    global = true,
+    highlightClassName,
+    highlightStyle,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const source = resolveHighlightText(text, flattenReactText(children));
+    const segments = getHighlightSegments(source, keywords, { caseSensitive, global });
+    const markClasses = getHighlightMarkClasses(highlightClassName);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-highlight": "",
+        "data-highlight-case-sensitive": caseSensitive ? "true" : "false",
+        "data-highlight-global": global ? "true" : "false",
+        className: getHighlightRootClasses(className),
+        style,
+        ...rest,
+        children: segments.map(
+          (segment) => segment.highlighted ? /* @__PURE__ */ jsx(
+            "mark",
+            {
+              className: markClasses,
+              style: highlightStyle,
+              "data-highlight-mark": "",
+              children: segment.text
+            },
+            `mark-${segment.start}-${segment.end}`
+          ) : /* @__PURE__ */ jsx(React.Fragment, { children: segment.text }, `text-${segment.start}-${segment.end}`)
+        )
+      }
+    );
+  }
+);
+Highlight.displayName = "Highlight";
+var Highlight_default = Highlight;
+
+export {
+  Highlight,
+  Highlight_default
+};

package/dist/chunk-TQ6RIFWR.mjs

@@ -0,0 +1,135 @@
+// src/components/Marquee.tsx
+import { forwardRef, useCallback, useState } from "react";
+import {
+  getMarqueeContentClasses,
+  getMarqueeRootClasses,
+  getMarqueeTrackClasses,
+  getMarqueeTrackStyle,
+  injectMarqueeStyles,
+  isMarqueeFocusInside,
+  isMarqueePaused,
+  resolveMarqueeAriaLabel,
+  resolveMarqueeDirection,
+  resolveMarqueePauseOnHover,
+  resolveMarqueeRepeat
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Marquee = forwardRef(
+  ({
+    direction,
+    duration,
+    pauseOnHover,
+    gap,
+    repeat,
+    ariaLabel,
+    className,
+    style,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) => {
+    injectMarqueeStyles();
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const resolvedDirection = resolveMarqueeDirection(direction);
+    const resolvedPauseOnHover = resolveMarqueePauseOnHover(pauseOnHover);
+    const copies = resolveMarqueeRepeat(repeat);
+    const paused = isMarqueePaused({
+      pauseOnHover: resolvedPauseOnHover,
+      hovered,
+      focused
+    });
+    const { "aria-label": ariaLabelAttr, ...domProps } = rest;
+    const resolvedAriaLabel = resolveMarqueeAriaLabel(
+      typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
+    );
+    const handleMouseEnter = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setHovered(true);
+        onMouseEnter?.(event);
+      },
+      [onMouseEnter, resolvedPauseOnHover]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setHovered(false);
+        onMouseLeave?.(event);
+      },
+      [onMouseLeave, resolvedPauseOnHover]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setFocused(true);
+        onFocus?.(event);
+      },
+      [onFocus, resolvedPauseOnHover]
+    );
+    const handleBlur = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+          setFocused(false);
+        }
+        onBlur?.(event);
+      },
+      [onBlur, resolvedPauseOnHover]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...domProps,
+        ref,
+        role: "region",
+        "aria-label": resolvedAriaLabel,
+        "data-marquee": "",
+        "data-marquee-direction": resolvedDirection,
+        "data-marquee-paused": paused ? "true" : "false",
+        "data-marquee-pause-on-hover": resolvedPauseOnHover ? "true" : "false",
+        className: getMarqueeRootClasses({
+          direction: resolvedDirection,
+          pauseOnHover: resolvedPauseOnHover,
+          repeat: copies,
+          className
+        }),
+        style,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-marquee-track": "",
+            className: getMarqueeTrackClasses(resolvedDirection),
+            style: getMarqueeTrackStyle({ duration, gap, repeat: copies }),
+            children: Array.from({ length: copies }, (_, index) => {
+              const clone = index > 0;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getMarqueeContentClasses({
+                    direction: resolvedDirection,
+                    clone
+                  }),
+                  "data-marquee-content": "",
+                  ...clone ? { "data-marquee-clone": "", "aria-hidden": true } : {},
+                  children
+                },
+                clone ? `clone-${index}` : "content"
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+var Marquee_default = Marquee;
+
+export {
+  Marquee,
+  Marquee_default
+};

package/dist/chunk-U4M3DC2P.mjs

@@ -0,0 +1,48 @@
+// src/components/LoadingBarRoot.ts
+var loadingBarModulePromise = null;
+var pendingCommands = [];
+var resolvedApi = null;
+function loadLoadingBarModule() {
+  loadingBarModulePromise ??= import("./components/LoadingBar.mjs");
+  return loadingBarModulePromise;
+}
+function applyCommand(api, command) {
+  if (command.type === "start") {
+    api.start(command.options);
+    return;
+  }
+  api[command.type]();
+}
+function enqueue(command) {
+  if (resolvedApi) {
+    applyCommand(resolvedApi, command);
+    return;
+  }
+  pendingCommands.push(command);
+  void loadLoadingBarModule().then(({ LoadingBar: LoadingBar2 }) => {
+    resolvedApi = LoadingBar2;
+    const queue = pendingCommands;
+    pendingCommands = [];
+    for (const item of queue) {
+      applyCommand(LoadingBar2, item);
+    }
+  });
+}
+var LoadingBar = {
+  start(options) {
+    enqueue({ type: "start", options });
+  },
+  finish() {
+    enqueue({ type: "finish" });
+  },
+  error() {
+    enqueue({ type: "error" });
+  },
+  clear() {
+    enqueue({ type: "clear" });
+  }
+};
+
+export {
+  LoadingBar
+};

package/dist/{chunk-YIB6ZXZF.mjs → chunk-UETARXIK.mjs}

@@ -23,10 +23,15 @@ import {
   flattenCascaderOptions,
   filterCascaderOptions,
   isCascaderOptionExpandable,
+  getCascaderVirtualItemHeight,
+  getCascaderVirtualRange,
+  getCascaderVirtualAlignScrollTop,
+  CASCADER_DEFAULT_LIST_HEIGHT,
   getPickerComboboxAria,
   getPickerListboxAria,
   getPickerOptionAria,
   getPickerTriggerKeyAction,
+  getPickerNavigationIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
@@ -50,10 +55,90 @@ var CASCADER_KEYS = /* @__PURE__ */ new Set([
   "changeOnSelect",
   "separator",
   "emptyText",
+  "virtual",
+  "listHeight",
   "className",
   "locale"
 ]);
 var EMPTY_CASCADER_VALUE = [];
+function selectedIndexInColumn(options, selectedValue) {
+  if (selectedValue === void 0) return -1;
+  return options.findIndex((option) => option.value === selectedValue);
+}
+var VirtualCascaderList = ({
+  items,
+  size,
+  listHeight,
+  activeIndex,
+  onActiveIndexChange,
+  className,
+  listboxProps,
+  renderItem
+}) => {
+  const itemHeight = getCascaderVirtualItemHeight(size);
+  const itemCount = items.length;
+  const clampedActiveIndex = activeIndex >= 0 && activeIndex < itemCount ? activeIndex : -1;
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(
+    () => getCascaderVirtualAlignScrollTop(0, clampedActiveIndex, itemHeight, listHeight)
+  );
+  const maxScrollTop = Math.max(0, itemCount * itemHeight - listHeight);
+  const effectiveScrollTop = Math.min(Math.max(0, scrollTop), maxScrollTop);
+  const { startIndex, endIndex, totalHeight } = getCascaderVirtualRange(
+    effectiveScrollTop,
+    listHeight,
+    itemCount,
+    itemHeight
+  );
+  const fromIndex = itemCount <= 0 ? 0 : Math.min(startIndex, endIndex, itemCount - 1);
+  const toIndex = itemCount <= 0 ? -1 : Math.min(endIndex, itemCount - 1);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (el.scrollTop !== effectiveScrollTop) el.scrollTop = effectiveScrollTop;
+  }, [effectiveScrollTop]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || clampedActiveIndex < 0) return;
+    const next = getCascaderVirtualAlignScrollTop(
+      el.scrollTop,
+      clampedActiveIndex,
+      itemHeight,
+      listHeight
+    );
+    if (next !== el.scrollTop) {
+      el.scrollTop = next;
+      setScrollTop(next);
+    }
+  }, [clampedActiveIndex, itemHeight, listHeight]);
+  const visible = [];
+  if (fromIndex <= toIndex) {
+    for (let i = fromIndex; i <= toIndex; i++) {
+      visible.push(renderItem(items[i], i));
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-tiger-cascader-virtual": "",
+      tabIndex: 0,
+      className,
+      style: { maxHeight: `${listHeight}px`, overflowY: "auto" },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      onKeyDown: (e) => {
+        if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        onActiveIndexChange(getPickerNavigationIndex(items, clampedActiveIndex, e.key));
+      },
+      ...listboxProps,
+      children: /* @__PURE__ */ jsx("div", { style: { height: `${totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${fromIndex * itemHeight}px)` }, children: visible }) })
+    }
+  );
+};
 var Cascader = (props) => {
   const {
     options = [],
@@ -71,6 +156,8 @@ var Cascader = (props) => {
     changeOnSelect = false,
     separator = " / ",
     emptyText,
+    virtual = false,
+    listHeight = CASCADER_DEFAULT_LIST_HEIGHT,
     className,
     locale
   } = props;
@@ -89,6 +176,13 @@ var Cascader = (props) => {
   const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
   const searchQuery = searchValue ?? uncontrolledSearchValue;
   const [activePath, setActivePath] = useState([]);
+  const [columnActiveIndices, setColumnActiveIndices] = useState([]);
+  const [searchActiveIndex, setSearchActiveIndex] = useState(-1);
+  const [indexedSearchQuery, setIndexedSearchQuery] = useState(searchQuery);
+  if (indexedSearchQuery !== searchQuery) {
+    setIndexedSearchQuery(searchQuery);
+    setSearchActiveIndex(-1);
+  }
   const wasOpenRef = useRef(false);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
@@ -135,6 +229,8 @@ var Cascader = (props) => {
   useEffect(() => {
     if (!isOpen) {
       wasOpenRef.current = false;
+      setColumnActiveIndices([]);
+      setSearchActiveIndex(-1);
       return;
     }
     if (wasOpenRef.current) return;
@@ -142,6 +238,17 @@ var Cascader = (props) => {
     setActivePath(value ? [...value] : []);
     updateSearchValue("");
   }, [isOpen, updateSearchValue, value]);
+  useEffect(() => {
+    if (!virtual || !isOpen) return;
+    setColumnActiveIndices(
+      (prev) => columns.map((col, i) => {
+        if (prev[i] !== void 0 && prev[i] >= 0 && prev[i] < col.options.length) {
+          return prev[i];
+        }
+        return selectedIndexInColumn(col.options, col.selectedValue);
+      })
+    );
+  }, [virtual, isOpen, columns]);
   const toggleOpen = useCallback(() => {
     if (disabled) return;
     setIsOpen((prev) => !prev);
@@ -149,9 +256,17 @@ var Cascader = (props) => {
   const handleOptionClick = useCallback(
     (option, level) => {
       if (option.disabled) return;
+      const optionIndex = columns[level]?.options.findIndex((item) => item.value === option.value);
       const newPath = activePath.slice(0, level);
       newPath.push(option.value);
       setActivePath(newPath);
+      if (optionIndex !== void 0 && optionIndex >= 0) {
+        setColumnActiveIndices((prev) => {
+          const next = prev.slice();
+          next[level] = optionIndex;
+          return next;
+        });
+      }
       const hasChildren = isCascaderOptionExpandable(option);
       if (!hasChildren) {
         onChange?.(newPath);
@@ -160,16 +275,24 @@ var Cascader = (props) => {
         onChange?.(newPath);
       }
     },
-    [activePath, onChange, changeOnSelect]
+    [activePath, onChange, changeOnSelect, columns]
   );
   const handleOptionHover = useCallback(
     (option, level) => {
+      const optionIndex = columns[level]?.options.findIndex((item) => item.value === option.value);
+      if (optionIndex !== void 0 && optionIndex >= 0 && !option.disabled) {
+        setColumnActiveIndices((prev) => {
+          const next = prev.slice();
+          next[level] = optionIndex;
+          return next;
+        });
+      }
       if (expandTrigger !== "hover" || option.disabled) return;
       const newPath = activePath.slice(0, level);
       newPath.push(option.value);
       setActivePath(newPath);
     },
-    [expandTrigger, activePath]
+    [expandTrigger, activePath, columns]
   );
   const handleSearchResultClick = useCallback(
     (valuePath, itemDisabled) => {
@@ -298,14 +421,46 @@ var Cascader = (props) => {
                 "No results found",
                 emptyText,
                 mergedLocale?.common?.emptyText
-              ) }) : /* @__PURE__ */ jsx(
+              ) }) : virtual ? /* @__PURE__ */ jsx(
+                VirtualCascaderList,
+                {
+                  items: searchResults,
+                  size,
+                  listHeight,
+                  activeIndex: searchActiveIndex,
+                  onActiveIndexChange: setSearchActiveIndex,
+                  listboxProps: getPickerListboxAria({ id: listboxId }),
+                  renderItem: (item, index) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-option-index": index,
+                      className: classNames(
+                        cascaderSearchResultClasses,
+                        item.disabled && "opacity-50 cursor-not-allowed"
+                      ),
+                      ...getPickerOptionAria({
+                        selected: value?.join(",") === item.valuePath.join(","),
+                        disabled: item.disabled
+                      }),
+                      onMouseEnter: () => {
+                        if (!item.disabled) setSearchActiveIndex(index);
+                      },
+                      onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
+                      children: typeof searchable === "object" && searchable.render ? searchable.render(searchQuery, item.path) : item.label
+                    },
+                    item.valuePath.join(",")
+                  )
+                },
+                searchQuery
+              ) : /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "max-h-64 overflow-auto",
                   ...getPickerListboxAria({ id: listboxId }),
-                  children: searchResults.map((item) => /* @__PURE__ */ jsx(
+                  children: searchResults.map((item, index) => /* @__PURE__ */ jsx(
                     "div",
                     {
+                      "data-option-index": index,
                       className: classNames(
                         cascaderSearchResultClasses,
                         item.disabled && "opacity-50 cursor-not-allowed"
@@ -323,55 +478,87 @@ var Cascader = (props) => {
               )
             ) : (
               // Cascading columns
-              /* @__PURE__ */ jsx("div", { className: "flex", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cascaderColumnClasses,
-                  ...getPickerListboxAria({
-                    id: colIndex === 0 ? listboxId : void 0,
-                    label: `Level ${colIndex + 1}`
-                  }),
-                  "aria-label": `Level ${colIndex + 1}`,
-                  children: col.options.map((option) => {
-                    const isSelected = col.selectedValue === option.value;
-                    const hasChildren = isCascaderOptionExpandable(option);
-                    return /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
-                        ...getPickerOptionAria({
-                          selected: isSelected,
-                          disabled: !!option.disabled
-                        }),
-                        onClick: () => handleOptionClick(option, colIndex),
-                        onMouseEnter: () => handleOptionHover(option, colIndex),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
-                          hasChildren && /* @__PURE__ */ jsx(
-                            "svg",
-                            {
-                              className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
-                              xmlns: "http://www.w3.org/2000/svg",
-                              viewBox: "0 0 20 20",
-                              fill: "currentColor",
-                              children: /* @__PURE__ */ jsx(
-                                "path",
-                                {
-                                  fillRule: "evenodd",
-                                  d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
-                                  clipRule: "evenodd"
-                                }
-                              )
-                            }
-                          )
-                        ]
+              /* @__PURE__ */ jsx("div", { className: "flex", children: columns.map((col, colIndex) => {
+                const listboxProps = getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                });
+                const renderColumnOption = (option, optionIndex) => {
+                  const isSelected = col.selectedValue === option.value;
+                  const hasChildren = isCascaderOptionExpandable(option);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "data-option-index": optionIndex,
+                      className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
+                      ...getPickerOptionAria({
+                        selected: isSelected,
+                        disabled: !!option.disabled
+                      }),
+                      onClick: () => handleOptionClick(option, colIndex),
+                      onMouseEnter: () => handleOptionHover(option, colIndex),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                        hasChildren && /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            viewBox: "0 0 20 20",
+                            fill: "currentColor",
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    option.value
+                  );
+                };
+                if (virtual) {
+                  return /* @__PURE__ */ jsx(
+                    VirtualCascaderList,
+                    {
+                      items: col.options,
+                      size,
+                      listHeight,
+                      activeIndex: columnActiveIndices[colIndex] ?? -1,
+                      onActiveIndexChange: (index) => {
+                        setColumnActiveIndices((prev) => {
+                          const next = prev.slice();
+                          next[colIndex] = index;
+                          return next;
+                        });
                       },
-                      option.value
-                    );
-                  })
-                },
-                colIndex
-              )) })
+                      className: cascaderColumnClasses,
+                      listboxProps: {
+                        ...listboxProps,
+                        "aria-label": `Level ${colIndex + 1}`
+                      },
+                      renderItem: renderColumnOption
+                    },
+                    colIndex
+                  );
+                }
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cascaderColumnClasses,
+                    ...listboxProps,
+                    "aria-label": `Level ${colIndex + 1}`,
+                    children: col.options.map(
+                      (option, optionIndex) => renderColumnOption(option, optionIndex)
+                    )
+                  },
+                  colIndex
+                );
+              }) })
             )
           ]
         }