@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-QUF2UX52.mjs

@@ -0,0 +1,343 @@
+import {
+  useDrag
+} from "./chunk-REJVXLW5.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FileManager.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getFileManagerContainerClasses,
+  getFileItemClasses,
+  getFileManagerContentClasses,
+  getFileManagerGridStyle,
+  deriveFileManagerModel,
+  toggleFileSelection,
+  resolveFileOpen,
+  buildFileBreadcrumb,
+  applyFileManagerReorder,
+  clampFileManagerFocusIndex,
+  resolveFileManagerItemKeydown,
+  resolveFileItemExtension,
+  resolveFileItemIcon,
+  toFileDragItem,
+  formatFileSizeLabel,
+  getFileManagerLabels,
+  DEFAULT_FILE_COLUMNS,
+  DEFAULT_FILE_GRID_COLUMNS,
+  EMPTY_FILE_ITEMS,
+  EMPTY_FILE_PATH,
+  fileManagerToolbarClasses,
+  fileManagerBreadcrumbClasses,
+  fileManagerBreadcrumbListClasses,
+  fileManagerBreadcrumbItemClasses,
+  fileManagerBreadcrumbCurrentClasses,
+  fileManagerBreadcrumbSeparatorClasses,
+  fileManagerItemIconClasses,
+  fileManagerItemNameClasses,
+  fileManagerItemMetaClasses,
+  fileManagerEmptyClasses,
+  fileManagerLoadingClasses,
+  fileManagerSearchClasses,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileManager = ({
+  files,
+  viewMode = "list",
+  gridColumns = DEFAULT_FILE_GRID_COLUMNS,
+  selectedKeys,
+  defaultSelectedKeys,
+  multiple = false,
+  columns,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath,
+  defaultCurrentPath,
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText,
+  searchable = false,
+  searchText,
+  defaultSearchText,
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  onReorder,
+  onFilesChange,
+  renderIcon,
+  locale,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getFileManagerLabels(mergedLocale), [mergedLocale]);
+  const isRtl = mergedLocale?.direction === "rtl";
+  const tree = files ?? EMPTY_FILE_ITEMS;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const contentRef = useRef(null);
+  const [keys, setKeys] = useControlledState({
+    value: selectedKeys,
+    defaultValue: defaultSelectedKeys ?? [],
+    onChange: onSelectedKeysChange
+  });
+  const [path, setPath] = useControlledState({
+    value: currentPath,
+    defaultValue: defaultCurrentPath ?? EMPTY_FILE_PATH,
+    onChange: (next) => {
+      onCurrentPathChange?.(next);
+      onNavigate?.(next);
+    }
+  });
+  const [query, setQuery] = useControlledState({
+    value: searchText,
+    defaultValue: defaultSearchText ?? "",
+    onChange: onSearchTextChange
+  });
+  const metaColumns = columns ?? DEFAULT_FILE_COLUMNS;
+  const showSizeColumn = metaColumns.includes("size");
+  const showModifiedColumn = metaColumns.includes("modified");
+  const showTypeColumn = metaColumns.includes("type");
+  const model = useMemo(
+    () => deriveFileManagerModel({
+      files: tree,
+      currentPath: path,
+      selectedKeys: keys,
+      sortField,
+      sortOrder,
+      showHidden,
+      searchText: query,
+      draggable
+    }),
+    [tree, path, keys, sortField, sortOrder, showHidden, query, draggable]
+  );
+  const viewKey = `${path.join("/")}\0${query}\0${model.processedItems.length}`;
+  useEffect(() => {
+    setFocusedIndex(0);
+  }, [viewKey]);
+  const drag = useDrag({
+    containerId: "files",
+    onDrop: (event) => {
+      if (!model.canReorder) return;
+      const result = applyFileManagerReorder(
+        tree,
+        path,
+        event.fromIndex,
+        event.toIndex,
+        model.currentItems
+      );
+      if (!result) return;
+      onReorder?.(result.layer, event.fromIndex, event.toIndex);
+      onFilesChange?.(result.files);
+    }
+  });
+  const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
+  const contentClass = getFileManagerContentClasses(viewMode);
+  const gridStyle = getFileManagerGridStyle(viewMode, gridColumns);
+  const breadcrumbs = useMemo(
+    () => buildFileBreadcrumb(tree, path, labels.rootText),
+    [tree, path, labels.rootText]
+  );
+  const focusedItem = clampFileManagerFocusIndex(focusedIndex, model.processedItems);
+  const commitPath = useCallback(
+    (next) => {
+      setPath(next);
+    },
+    [setPath]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      if (loading || item.disabled) return;
+      onSelect?.(item);
+      setKeys(toggleFileSelection(keys, item.key, multiple));
+    },
+    [keys, loading, multiple, onSelect, setKeys]
+  );
+  const handleOpen = useCallback(
+    (item) => {
+      if (loading) return;
+      const result = resolveFileOpen(item, path);
+      if (!result) return;
+      if (result.type === "navigate") {
+        commitPath(result.path);
+      } else {
+        onOpen?.(result.item);
+      }
+    },
+    [commitPath, loading, onOpen, path]
+  );
+  const focusItemAt = useCallback((index) => {
+    requestAnimationFrame(() => {
+      contentRef.current?.querySelector(`[data-option-index="${index}"]`)?.focus();
+    });
+  }, []);
+  const handleItemKeyDown = useCallback(
+    (event, item, index) => {
+      if (loading) return;
+      const action = resolveFileManagerItemKeydown({
+        key: event.key,
+        altKey: event.altKey,
+        viewMode,
+        gridColumns,
+        isRtl,
+        currentIndex: index,
+        items: model.processedItems,
+        currentPath: path
+      });
+      if (!action) return;
+      event.preventDefault();
+      if (action.type === "move" || action.type === "home" || action.type === "end") {
+        setFocusedIndex(action.index);
+        focusItemAt(action.index);
+        return;
+      }
+      if (action.type === "select") {
+        handleSelect(item);
+        return;
+      }
+      if (action.type === "open") {
+        handleSelect(item);
+        handleOpen(item);
+        return;
+      }
+      commitPath(action.path);
+    },
+    [
+      commitPath,
+      focusItemAt,
+      gridColumns,
+      handleOpen,
+      handleSelect,
+      isRtl,
+      loading,
+      model.processedItems,
+      path,
+      viewMode
+    ]
+  );
+  const handleDragStart = useCallback(
+    (event, item, index) => {
+      if (!model.canReorder || item.disabled) return;
+      drag.startDrag(toFileDragItem(item, index, "files"), event);
+    },
+    [drag, model.canReorder]
+  );
+  const handleDragOver = useCallback(
+    (event, item, index) => {
+      if (!model.canReorder || item.disabled) return;
+      drag.dragOver(toFileDragItem(item, index, "files"), event);
+    },
+    [drag, model.canReorder]
+  );
+  const emptyLabel = emptyText ?? mergedLocale?.fileManager?.emptyText ?? mergedLocale?.common?.emptyText ?? labels.emptyText;
+  const loadingLabel = mergedLocale?.common?.loadingText;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: classNames(containerClasses),
+      style,
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: fileManagerToolbarClasses, children: [
+          /* @__PURE__ */ jsx("nav", { className: fileManagerBreadcrumbClasses, "aria-label": labels.pathAriaLabel, children: /* @__PURE__ */ jsx("ol", { className: fileManagerBreadcrumbListClasses, children: breadcrumbs.map((segment, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+            index > 0 ? /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbSeparatorClasses, "aria-hidden": "true", children: "/" }) : null,
+            segment.current ? /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbCurrentClasses, "aria-current": "page", children: segment.name }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: fileManagerBreadcrumbItemClasses,
+                onClick: () => commitPath(segment.path),
+                children: segment.name
+              }
+            )
+          ] }, segment.key || "root")) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          searchable && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: fileManagerSearchClasses,
+              placeholder: mergedLocale?.common?.searchPlaceholder,
+              "aria-label": labels.searchAriaLabel,
+              value: query,
+              onChange: (event) => setQuery(event.target.value)
+            }
+          )
+        ] }),
+        model.processedItems.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            className: contentClass,
+            style: gridStyle,
+            role: "listbox",
+            "aria-label": labels.listboxAriaLabel,
+            "aria-multiselectable": multiple || void 0,
+            "aria-disabled": loading || void 0,
+            children: model.processedItems.map((item, index) => {
+              const isSelected = model.selectedSet.has(item.key);
+              const itemClass = getFileItemClasses(viewMode, isSelected, Boolean(item.disabled));
+              const canDrag = model.canReorder && !item.disabled;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: itemClass,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": item.disabled || void 0,
+                  tabIndex: !loading && !item.disabled && index === focusedItem ? 0 : -1,
+                  "data-option-index": index,
+                  "data-disabled": item.disabled || void 0,
+                  "data-drag-id": item.key,
+                  "data-drag-index": index,
+                  "data-drag-container": "files",
+                  onFocus: () => {
+                    if (!item.disabled) setFocusedIndex(index);
+                  },
+                  onKeyDown: (event) => handleItemKeyDown(event, item, index),
+                  onClick: () => handleSelect(item),
+                  onDoubleClick: () => handleOpen(item),
+                  draggable: canDrag,
+                  onDragStart: canDrag ? (event) => handleDragStart(event, item, index) : void 0,
+                  onDragOver: canDrag ? (event) => handleDragOver(event, item, index) : void 0,
+                  onDrop: canDrag ? (event) => drag.drop(event) : void 0,
+                  onDragEnd: canDrag ? () => drag.endDrag() : void 0,
+                  children: [
+                    renderIcon ? renderIcon(item) : /* @__PURE__ */ jsx("span", { className: fileManagerItemIconClasses, "aria-hidden": "true", children: resolveFileItemIcon(item) }),
+                    /* @__PURE__ */ jsx("span", { className: fileManagerItemNameClasses, children: item.name }),
+                    viewMode === "list" && showTypeColumn && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: resolveFileItemExtension(item) || 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: emptyLabel }),
+        loading && /* @__PURE__ */ jsx("div", { className: fileManagerLoadingClasses, role: "status", children: loadingLabel })
+      ]
+    }
+  );
+};
+var FileManager_default = FileManager;
+
+export {
+  FileManager,
+  FileManager_default
+};

package/dist/chunk-R2VBVZIH.mjs

@@ -0,0 +1,20 @@
+// src/components/Footer.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  injectLayoutGridStyles,
+  layoutFooterClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Footer = forwardRef(function Footer2({ className, height, style, as = "footer", children, ...props }, ref) {
+  injectLayoutGridStyles();
+  const footerClasses = classNames(layoutFooterClasses, className);
+  const footerStyle = height ? { ...style, height } : style;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(Tag, { ref, className: footerClasses, style: footerStyle, ...props, children });
+});
+Footer.displayName = "TigerFooter";
+
+export {
+  Footer
+};

package/dist/chunk-R45ZPU5J.mjs

@@ -0,0 +1,19 @@
+// src/components/Header.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getLayoutHeaderClasses,
+  injectLayoutGridStyles
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Header = forwardRef(function Header2({ className, variant = "default", height, style, children, ...props }, ref) {
+  injectLayoutGridStyles();
+  const headerClasses = classNames(getLayoutHeaderClasses(variant), className);
+  const headerStyle = height ? { ...style, height } : style;
+  return /* @__PURE__ */ jsx("header", { ref, className: headerClasses, style: headerStyle, ...props, children });
+});
+Header.displayName = "TigerHeader";
+
+export {
+  Header
+};

package/dist/chunk-REJVXLW5.mjs

@@ -0,0 +1,97 @@
+// src/hooks/useDrag.ts
+import { useCallback, useEffect, useReducer, useRef } from "react";
+import {
+  createListReorderController,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function callbacksOf(options) {
+  return {
+    onDragStart: options.onDragStart,
+    onDragOver: options.onDragOver,
+    onDrop: options.onDrop,
+    onDragEnd: options.onDragEnd
+  };
+}
+function useDrag(options = {}) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const controllerRef = useRef(null);
+  if (controllerRef.current === null) {
+    controllerRef.current = createListReorderController({
+      getContainerId: () => optionsRef.current.containerId ?? "default",
+      getConfig: () => optionsRef.current.config,
+      getCallbacks: () => callbacksOf(optionsRef.current)
+    });
+  }
+  const [, rerender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    const controller2 = controllerRef.current;
+    if (!controller2) return void 0;
+    const unsubscribe = controller2.subscribe(rerender);
+    return () => {
+      unsubscribe();
+      controller2.dispose();
+    };
+  }, []);
+  const controller = controllerRef.current;
+  const state = controller.getState();
+  const startDrag = useCallback((item, event) => {
+    controllerRef.current?.startDrag(item, event);
+  }, []);
+  const dragOver = useCallback((item, event) => {
+    controllerRef.current?.dragOver(item, event);
+  }, []);
+  const drop = useCallback((event) => {
+    return controllerRef.current?.drop(event) ?? null;
+  }, []);
+  const endDrag = useCallback((cancelled) => {
+    controllerRef.current?.endDrag(cancelled);
+  }, []);
+  const reorder = useCallback((items) => {
+    return controllerRef.current?.reorder(items) ?? null;
+  }, []);
+  const moveBetween = useCallback(
+    (sourceItems, targetItems) => {
+      return controllerRef.current?.moveBetween(sourceItems, targetItems) ?? null;
+    },
+    []
+  );
+  const getDragItemProps = useCallback((item) => {
+    const bindings = controllerRef.current?.getItemBindings(item);
+    if (!bindings) return {};
+    const { extraClass, onPointerDown, ...rest } = bindings;
+    return {
+      ...rest,
+      className: extraClass,
+      onPointerDown
+    };
+  }, []);
+  const getDropZoneProps = useCallback(() => {
+    const bindings = controllerRef.current?.getZoneBindings();
+    if (!bindings) return {};
+    return {
+      onDragOver: bindings.onDragOver,
+      onDrop: bindings.onDrop
+    };
+  }, []);
+  return {
+    state,
+    isDragging: state.isDragging,
+    draggedItem: state.draggedItem,
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder,
+    moveBetween,
+    isSameContainer: isSameContainerDrag(state),
+    isCrossContainer: isCrossContainerDrag(state),
+    getDragItemProps,
+    getDropZoneProps
+  };
+}
+
+export {
+  useDrag
+};

package/dist/chunk-RLUBTLOT.mjs

@@ -0,0 +1,80 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Empty.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  classNames,
+  emptyBaseClasses,
+  emptyImageClasses,
+  emptyDescriptionClasses,
+  emptyActionsClasses,
+  getEmptyDescription,
+  getEmptyIllustration,
+  resolveEmptyImageMode,
+  mergeTigerLocale,
+  devWarn
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Empty = forwardRef(function Empty2({
+  preset = "default",
+  description,
+  showImage = true,
+  image,
+  extra,
+  className,
+  children,
+  locale,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const descText = useMemo(
+    () => description ?? getEmptyDescription(preset, mergedLocale),
+    [description, preset, mergedLocale]
+  );
+  const hasCustomImage = image !== void 0 && image !== null;
+  const imageMode = resolveEmptyImageMode({ showImage, hasCustomImage, preset });
+  const illustration = imageMode === "builtin" ? getEmptyIllustration(preset) : null;
+  if (showImage === false && hasCustomImage) {
+    devWarn(
+      "Empty.showImage.custom",
+      "Empty: `image` still renders when `showImage` is false. Pass no `image` to hide the illustration."
+    );
+  }
+  const wrapperClasses = classNames(emptyBaseClasses, className);
+  return /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, ...props, children: [
+    imageMode === "custom" ? /* @__PURE__ */ jsx("div", { className: emptyImageClasses || void 0, children: image }) : illustration ? /* @__PURE__ */ jsx("div", { className: emptyImageClasses || void 0, children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: illustration.viewBox,
+        className: "mx-auto h-24 w-24",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: illustration.paths.map((p, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: p.d,
+            fill: p.fill ?? "none",
+            stroke: p.stroke,
+            strokeWidth: p.strokeWidth,
+            opacity: p.opacity
+          },
+          i
+        ))
+      }
+    ) }) : null,
+    descText ? /* @__PURE__ */ jsx("div", { className: emptyDescriptionClasses, children: descText }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: emptyActionsClasses, children: extra }) : null,
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+});
+
+export {
+  Empty
+};