@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-3QNIFKVF.mjs

@@ -1,232 +0,0 @@
-// src/components/Anchor.tsx
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef
-} from "react";
-import {
-  classNames,
-  getAnchorWrapperClasses,
-  getAnchorInkContainerClasses,
-  getAnchorInkActiveClasses,
-  getAnchorLinkClasses,
-  getAnchorLinkListClasses,
-  createAnchorObserver,
-  createProgrammaticScrollLock,
-  scrollToAnchor
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AnchorContext = createContext(null);
-function useAnchorContext() {
-  return useContext(AnchorContext);
-}
-var AnchorLink = ({
-  href,
-  title,
-  target,
-  className,
-  children,
-  ...props
-}) => {
-  const anchorContext = useAnchorContext();
-  const register = anchorContext?.registerLink;
-  const unregister = anchorContext?.unregisterLink;
-  useEffect(() => {
-    if (href) {
-      register?.(href);
-    }
-    return () => {
-      unregister?.(href);
-    };
-  }, [href, register, unregister]);
-  const handleClick = (event) => {
-    event.preventDefault();
-    anchorContext?.handleLinkClick(href, event);
-  };
-  const linkClasses = useMemo(() => {
-    const isActive = anchorContext?.activeLink === href;
-    return classNames(getAnchorLinkClasses(isActive, className));
-  }, [anchorContext?.activeLink, href, className]);
-  const hasNestedLinks = React.Children.toArray(children).some(
-    (child) => React.isValidElement(child) && child.type === AnchorLink
-  );
-  if (hasNestedLinks) {
-    return /* @__PURE__ */ jsxs("div", { className: "anchor-link-wrapper", children: [
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href,
-          target,
-          className: linkClasses,
-          "data-anchor-href": href,
-          onClick: handleClick,
-          ...props,
-          children: title
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "pl-3 mt-1 space-y-1", children })
-    ] });
-  }
-  const content = children ?? title;
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      target,
-      className: linkClasses,
-      "data-anchor-href": href,
-      onClick: handleClick,
-      ...props,
-      children: content
-    }
-  );
-};
-var Anchor = ({
-  affix = true,
-  bounds = 5,
-  offsetTop = 0,
-  showInkInFixed = false,
-  targetOffset,
-  getCurrentAnchor,
-  getContainer = () => window,
-  direction = "vertical",
-  className,
-  style,
-  onClick,
-  onChange,
-  children
-}) => {
-  const [activeLink, setActiveLink] = useState("");
-  const [links, setLinks] = useState([]);
-  const anchorRef = useRef(null);
-  const inkRef = useRef(null);
-  const getContainerRef = useRef(getContainer);
-  getContainerRef.current = getContainer;
-  const scrollLockRef = useRef(createProgrammaticScrollLock(() => getContainerRef.current()));
-  const getCurrentAnchorRef = useRef(getCurrentAnchor);
-  getCurrentAnchorRef.current = getCurrentAnchor;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const scrollOffset = useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
-  const registerLink = useCallback((href) => {
-    setLinks((prevLinks) => {
-      if (href && !prevLinks.includes(href)) {
-        return [...prevLinks, href];
-      }
-      return prevLinks;
-    });
-  }, []);
-  const unregisterLink = useCallback((href) => {
-    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
-  }, []);
-  const scrollTo = useCallback(
-    (href) => {
-      const container = getContainerRef.current();
-      scrollToAnchor(href, container, scrollOffset);
-    },
-    [scrollOffset]
-  );
-  const handleLinkClick = useCallback(
-    (href, event) => {
-      onClick?.(event, href);
-      scrollLockRef.current.lock();
-      setActiveLink(href);
-      scrollTo(href);
-    },
-    [onClick, scrollTo]
-  );
-  useEffect(() => {
-    let stop = null;
-    const timeoutId = setTimeout(() => {
-      const container = getContainerRef.current();
-      const root = container === window ? null : container;
-      stop = createAnchorObserver(links, {
-        offsetTop: scrollOffset,
-        bounds,
-        root,
-        onChange: (newActiveLink) => {
-          if (scrollLockRef.current.isLocked()) return;
-          const finalActiveLink = getCurrentAnchorRef.current ? getCurrentAnchorRef.current(newActiveLink) : newActiveLink;
-          setActiveLink((prev) => {
-            if (finalActiveLink !== prev) {
-              onChangeRef.current?.(finalActiveLink);
-              return finalActiveLink;
-            }
-            return prev;
-          });
-        }
-      });
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      stop?.();
-    };
-  }, [bounds, links, scrollOffset]);
-  useEffect(() => {
-    return () => {
-      scrollLockRef.current.dispose();
-    };
-  }, []);
-  useEffect(() => {
-    if (!inkRef.current || !anchorRef.current || !activeLink) {
-      return;
-    }
-    const activeLinkElement = anchorRef.current.querySelector(
-      `[data-anchor-href="${activeLink}"]`
-    );
-    if (!activeLinkElement) {
-      return;
-    }
-    const anchorRect = anchorRef.current.getBoundingClientRect();
-    const linkRect = activeLinkElement.getBoundingClientRect();
-    if (direction === "vertical") {
-      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
-      inkRef.current.style.height = `${linkRect.height}px`;
-    } else {
-      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
-      inkRef.current.style.width = `${linkRect.width}px`;
-    }
-  }, [activeLink, direction]);
-  const wrapperClasses = useMemo(
-    () => classNames(getAnchorWrapperClasses(affix, className)),
-    [affix, className]
-  );
-  const inkContainerClasses = useMemo(() => getAnchorInkContainerClasses(direction), [direction]);
-  const inkActiveClasses = useMemo(() => getAnchorInkActiveClasses(direction), [direction]);
-  const linkListClasses = useMemo(() => getAnchorLinkListClasses(direction), [direction]);
-  const showInk = useMemo(() => !affix || showInkInFixed, [affix, showInkInFixed]);
-  const wrapperStyle = useMemo(() => {
-    const baseStyle = {};
-    if (affix && offsetTop > 0) {
-      baseStyle.top = `${offsetTop}px`;
-    }
-    return { ...baseStyle, ...style };
-  }, [affix, offsetTop, style]);
-  const contextValue = useMemo(
-    () => ({
-      activeLink,
-      direction,
-      registerLink,
-      unregisterLink,
-      handleLinkClick,
-      scrollTo
-    }),
-    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
-  );
-  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
-    showInk && /* @__PURE__ */ jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
-    /* @__PURE__ */ jsx("div", { className: linkListClasses, children })
-  ] }) });
-};
-var Anchor_default = Anchor;
-
-export {
-  useAnchorContext,
-  AnchorLink,
-  Anchor,
-  Anchor_default
-};

package/dist/chunk-5P5M656V.mjs

@@ -1,81 +0,0 @@
-// src/components/Skeleton.tsx
-import {
-  classNames,
-  getParagraphRowWidth,
-  getSkeletonClasses,
-  getSkeletonDimensions
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var Skeleton = ({
-  variant = "text",
-  animation = "pulse",
-  width,
-  height,
-  shape = "circle",
-  rows = 1,
-  paragraph = false,
-  className,
-  style,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-hidden": ariaHidden,
-  ...divProps
-}) => {
-  const visualClasses = getSkeletonClasses(variant, animation, shape);
-  const dimensions = getSkeletonDimensions(variant, width, height);
-  const computedAriaHidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? void 0 : true);
-  if (variant === "text" && rows > 1) {
-    const rowElements = [];
-    for (let i = 0; i < rows; i++) {
-      const rowStyle = {
-        height: dimensions.height
-      };
-      if (paragraph) {
-        rowStyle.width = getParagraphRowWidth(i, rows);
-      } else if (dimensions.width) {
-        rowStyle.width = dimensions.width;
-      }
-      rowElements.push(
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(visualClasses, i < rows - 1 && "mb-2"),
-            style: rowStyle
-          },
-          i
-        )
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...divProps,
-        className: classNames("flex flex-col", className),
-        style,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-hidden": computedAriaHidden,
-        children: rowElements
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...divProps,
-      className: classNames(visualClasses, className),
-      style: {
-        ...style,
-        ...dimensions.width ? { width: dimensions.width } : void 0,
-        height: dimensions.height
-      },
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-hidden": computedAriaHidden
-    }
-  );
-};
-
-export {
-  Skeleton
-};

package/dist/chunk-5SEMRHBD.mjs

@@ -1,327 +0,0 @@
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/FileManager.tsx
-import { useCallback, useMemo, useRef, useState } from "react";
-import {
-  classNames,
-  getFileManagerContainerClasses,
-  getFileItemClasses,
-  deriveFileManagerModel,
-  toggleFileSelection,
-  resolveFileOpen,
-  sliceBreadcrumbPath,
-  toFileDragItem,
-  applyFileDragReorder,
-  formatFileSizeLabel,
-  getFileManagerLabels,
-  fileManagerToolbarClasses,
-  fileManagerBreadcrumbClasses,
-  fileManagerBreadcrumbItemClasses,
-  fileManagerBreadcrumbSeparatorClasses,
-  fileManagerContentClasses,
-  fileManagerItemIconClasses,
-  fileManagerItemNameClasses,
-  fileManagerItemMetaClasses,
-  fileManagerEmptyClasses,
-  fileManagerLoadingClasses,
-  fileManagerSearchClasses,
-  resolveLocaleText,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FileManager = ({
-  files = [],
-  viewMode = "list",
-  selectedKeys,
-  defaultSelectedKeys,
-  multiple = false,
-  columns,
-  sortField = "name",
-  sortOrder = "asc",
-  currentPath = [],
-  showHidden = false,
-  draggable = false,
-  loading = false,
-  emptyText,
-  searchable = false,
-  searchText = "",
-  className,
-  onSelect,
-  onOpen,
-  onNavigate,
-  onSelectedKeysChange,
-  onCurrentPathChange,
-  onSearchTextChange,
-  onReorder,
-  renderIcon,
-  locale
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const [localSearch, setLocalSearch] = useState(searchText);
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const contentRef = useRef(null);
-  const dragFromIndex = useRef(null);
-  const labels = useMemo(() => getFileManagerLabels(mergedLocale), [mergedLocale]);
-  const [keys, setKeys] = useControlledState(
-    selectedKeys,
-    defaultSelectedKeys ?? [],
-    onSelectedKeysChange
-  );
-  const metaColumns = columns ?? ["size", "modified"];
-  const showSizeColumn = metaColumns.includes("size");
-  const showModifiedColumn = metaColumns.includes("modified");
-  const showTypeColumn = metaColumns.includes("type");
-  const model = useMemo(
-    () => deriveFileManagerModel({
-      files,
-      currentPath,
-      selectedKeys: keys,
-      sortField,
-      sortOrder,
-      showHidden,
-      searchText: localSearch || searchText
-    }),
-    [files, currentPath, keys, sortField, sortOrder, showHidden, localSearch, searchText]
-  );
-  const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
-  const handleSelect = useCallback(
-    (item) => {
-      if (item.disabled) return;
-      onSelect?.(item);
-      setKeys(toggleFileSelection(keys, item.key, multiple));
-    },
-    [keys, multiple, onSelect, setKeys]
-  );
-  const handleOpen = useCallback(
-    (item) => {
-      const result = resolveFileOpen(item, currentPath);
-      if (!result) return;
-      if (result.type === "navigate") {
-        onCurrentPathChange?.(result.path);
-        onNavigate?.(result.path);
-      } else {
-        onOpen?.(result.item);
-      }
-    },
-    [currentPath, onOpen, onNavigate, onCurrentPathChange]
-  );
-  const navigateToBreadcrumb = useCallback(
-    (index) => {
-      const newPath = sliceBreadcrumbPath(currentPath, index);
-      onCurrentPathChange?.(newPath);
-      onNavigate?.(newPath);
-    },
-    [currentPath, onNavigate, onCurrentPathChange]
-  );
-  const breadcrumbItems = [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: fileManagerBreadcrumbItemClasses,
-        onClick: () => navigateToBreadcrumb(0),
-        children: labels.rootText
-      },
-      "root"
-    ),
-    ...currentPath.flatMap((seg, i) => [
-      /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbSeparatorClasses, children: "/" }, `sep-${i}`),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: fileManagerBreadcrumbItemClasses,
-          onClick: () => navigateToBreadcrumb(i + 1),
-          children: seg
-        },
-        `path-${i}`
-      )
-    ])
-  ];
-  const contentClass = viewMode === "grid" ? `${fileManagerContentClasses} grid grid-cols-4 gap-2` : fileManagerContentClasses;
-  const firstEnabledIndex = model.processedItems.findIndex((item) => !item.disabled);
-  const focusedItem = focusedIndex >= 0 && !model.processedItems[focusedIndex]?.disabled ? focusedIndex : firstEnabledIndex;
-  const focusItemAt = useCallback((index) => {
-    requestAnimationFrame(() => {
-      contentRef.current?.querySelector(`[data-option-index="${index}"]`)?.focus();
-    });
-  }, []);
-  const moveFocus = useCallback(
-    (current, direction) => {
-      if (model.processedItems.length === 0) return;
-      let next = current;
-      for (let i = 0; i < model.processedItems.length; i += 1) {
-        next = (next + direction + model.processedItems.length) % model.processedItems.length;
-        if (!model.processedItems[next]?.disabled) {
-          setFocusedIndex(next);
-          focusItemAt(next);
-          return;
-        }
-      }
-    },
-    [focusItemAt, model.processedItems]
-  );
-  const handleItemKeyDown = useCallback(
-    (event, item, index) => {
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowRight":
-          event.preventDefault();
-          moveFocus(index, 1);
-          return;
-        case "ArrowUp":
-        case "ArrowLeft":
-          event.preventDefault();
-          moveFocus(index, -1);
-          return;
-        case "Home":
-          event.preventDefault();
-          if (firstEnabledIndex >= 0) {
-            setFocusedIndex(firstEnabledIndex);
-            focusItemAt(firstEnabledIndex);
-          }
-          return;
-        case "End": {
-          event.preventDefault();
-          let lastEnabledIndex = -1;
-          for (let next = model.processedItems.length - 1; next >= 0; next -= 1) {
-            if (!model.processedItems[next]?.disabled) {
-              lastEnabledIndex = next;
-              break;
-            }
-          }
-          if (lastEnabledIndex >= 0) {
-            setFocusedIndex(lastEnabledIndex);
-            focusItemAt(lastEnabledIndex);
-          }
-          return;
-        }
-        case " ":
-          event.preventDefault();
-          handleSelect(item);
-          return;
-        case "Enter":
-          event.preventDefault();
-          handleSelect(item);
-          handleOpen(item);
-          return;
-        default:
-          return;
-      }
-    },
-    [firstEnabledIndex, focusItemAt, handleOpen, handleSelect, model.processedItems, moveFocus]
-  );
-  const handleDragStart = useCallback(
-    (event, item, index) => {
-      if (!draggable || item.disabled) return;
-      dragFromIndex.current = index;
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", String(toFileDragItem(item, index).id));
-    },
-    [draggable]
-  );
-  const handleDragOver = useCallback(
-    (event) => {
-      if (!draggable || dragFromIndex.current === null) return;
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "move";
-    },
-    [draggable]
-  );
-  const handleDrop = useCallback(
-    (event, toIndex) => {
-      if (!draggable) return;
-      const fromIndex = dragFromIndex.current;
-      dragFromIndex.current = null;
-      if (fromIndex === null || fromIndex === toIndex) return;
-      event.preventDefault();
-      const items = model.processedItems;
-      const reordered = applyFileDragReorder(items, {
-        item: toFileDragItem(items[fromIndex], fromIndex),
-        fromIndex,
-        toIndex,
-        fromContainerId: "",
-        toContainerId: ""
-      });
-      onReorder?.(reordered, fromIndex, toIndex);
-    },
-    [draggable, model.processedItems, onReorder]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: classNames(containerClasses), children: [
-    /* @__PURE__ */ jsxs("div", { className: fileManagerToolbarClasses, children: [
-      /* @__PURE__ */ jsx("nav", { className: fileManagerBreadcrumbClasses, "aria-label": "File path", children: breadcrumbItems }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-      searchable && /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          className: fileManagerSearchClasses,
-          placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
-          value: localSearch,
-          onChange: (e) => {
-            setLocalSearch(e.target.value);
-            onSearchTextChange?.(e.target.value);
-          }
-        }
-      )
-    ] }),
-    model.processedItems.length > 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: contentClass,
-        role: "listbox",
-        "aria-multiselectable": multiple,
-        children: model.processedItems.map((item, index) => {
-          const isSelected = model.selectedSet.has(item.key);
-          const itemClass = getFileItemClasses(viewMode, isSelected);
-          const dragItem = draggable && !item.disabled ? toFileDragItem(item, index) : void 0;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: itemClass,
-              role: "option",
-              "aria-selected": isSelected,
-              tabIndex: !item.disabled && index === focusedItem ? 0 : -1,
-              "data-option-index": index,
-              "data-disabled": item.disabled || void 0,
-              "data-drag-id": dragItem?.id,
-              onFocus: () => {
-                if (!item.disabled) setFocusedIndex(index);
-              },
-              onKeyDown: (event) => handleItemKeyDown(event, item, index),
-              onClick: () => handleSelect(item),
-              onDoubleClick: () => handleOpen(item),
-              draggable: draggable && !item.disabled,
-              onDragStart: (event) => handleDragStart(event, item, index),
-              onDragOver: handleDragOver,
-              onDrop: (event) => handleDrop(event, index),
-              children: [
-                renderIcon ? renderIcon(item) : /* @__PURE__ */ jsx("span", { className: fileManagerItemIconClasses, "aria-hidden": "true", children: item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}" }),
-                /* @__PURE__ */ jsx("span", { className: fileManagerItemNameClasses, children: item.name }),
-                viewMode === "list" && showTypeColumn && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: item.extension ?? item.type }),
-                viewMode === "list" && showSizeColumn && item.size !== void 0 && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: formatFileSizeLabel(item.size) }),
-                viewMode === "list" && showModifiedColumn && item.modified && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: item.modified })
-              ]
-            },
-            item.key
-          );
-        })
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: fileManagerEmptyClasses, children: resolveLocaleText("Empty folder", emptyText, mergedLocale?.common?.emptyText) }),
-    loading && /* @__PURE__ */ jsx("div", { className: fileManagerLoadingClasses, children: resolveLocaleText("Loading...", mergedLocale?.common?.loadingText) })
-  ] });
-};
-var FileManager_default = FileManager;
-
-export {
-  FileManager,
-  FileManager_default
-};