@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-QO3GGQAV.mjs → chunk-5HFHHFQS.mjs}

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from 'react';
-import { navigateToFolder, filterHiddenFiles, filterFileItems, sortFileItems, getFileManagerContainerClasses, fileManagerBreadcrumbItemClasses, fileManagerBreadcrumbSeparatorClasses, classNames, fileManagerToolbarClasses, fileManagerBreadcrumbClasses, fileManagerSearchClasses, fileManagerContentClasses, getFileItemClasses, fileManagerItemIconClasses, fileManagerItemNameClasses, formatFileSizeLabel, fileManagerItemMetaClasses, fileManagerEmptyClasses, fileManagerLoadingClasses } from '@expcat/tigercat-core';
+import { deriveFileManagerModel, getFileManagerContainerClasses, toggleFileSelection, resolveFileOpen, sliceBreadcrumbPath, fileManagerBreadcrumbItemClasses, fileManagerBreadcrumbSeparatorClasses, classNames, fileManagerToolbarClasses, fileManagerBreadcrumbClasses, fileManagerSearchClasses, fileManagerContentClasses, getFileItemClasses, toFileDragItem, fileManagerItemIconClasses, fileManagerItemNameClasses, formatFileSizeLabel, fileManagerItemMetaClasses, fileManagerEmptyClasses, fileManagerLoadingClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/FileManager.tsx
@@ -27,49 +27,44 @@ var FileManager = ({
   renderIcon
 }) => {
   const [localSearch, setLocalSearch] = useState(searchText);
-  const currentItems = useMemo(() => navigateToFolder(files, currentPath), [files, currentPath]);
-  const processedItems = useMemo(() => {
-    let items = filterHiddenFiles(currentItems, showHidden);
-    const search = localSearch || searchText;
-    if (search) {
-      items = filterFileItems(items, search);
-    }
-    return sortFileItems(items, sortField, sortOrder);
-  }, [currentItems, showHidden, localSearch, searchText, sortField, sortOrder]);
-  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const model = useMemo(
+    () => deriveFileManagerModel({
+      files,
+      currentPath,
+      selectedKeys,
+      sortField,
+      sortOrder,
+      showHidden,
+      searchText: localSearch || searchText
+    }),
+    [files, currentPath, selectedKeys, sortField, sortOrder, showHidden, localSearch, searchText]
+  );
   const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
   const handleSelect = useCallback(
     (item) => {
       if (item.disabled) return;
       onSelect?.(item);
-      const keys = [...selectedKeys];
-      const idx = keys.indexOf(item.key);
-      if (idx >= 0) {
-        keys.splice(idx, 1);
-      } else {
-        if (!multiple) keys.length = 0;
-        keys.push(item.key);
-      }
+      const keys = toggleFileSelection(selectedKeys, item.key, multiple);
       onSelectedKeysChange?.(keys);
     },
     [selectedKeys, multiple, onSelect, onSelectedKeysChange]
   );
   const handleOpen = useCallback(
     (item) => {
-      if (item.disabled) return;
-      if (item.type === "folder") {
-        const newPath = [...currentPath, item.name];
-        onCurrentPathChange?.(newPath);
-        onNavigate?.(newPath);
+      const result = resolveFileOpen(item, currentPath);
+      if (!result) return;
+      if (result.type === "navigate") {
+        onCurrentPathChange?.(result.path);
+        onNavigate?.(result.path);
       } else {
-        onOpen?.(item);
+        onOpen?.(result.item);
       }
     },
     [currentPath, onOpen, onNavigate, onCurrentPathChange]
   );
   const navigateToBreadcrumb = useCallback(
     (index) => {
-      const newPath = currentPath.slice(0, index);
+      const newPath = sliceBreadcrumbPath(currentPath, index);
       onCurrentPathChange?.(newPath);
       onNavigate?.(newPath);
     },
@@ -117,9 +112,10 @@ var FileManager = ({
         }
       )
     ] }),
-    processedItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: contentClass, role: "listbox", "aria-multiselectable": multiple, children: processedItems.map((item) => {
-      const isSelected = selectedSet.has(item.key);
+    model.processedItems.length > 0 ? /* @__PURE__ */ jsx("div", { 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",
         {
@@ -127,6 +123,7 @@ var FileManager = ({
           role: "option",
           "aria-selected": isSelected,
           "data-disabled": item.disabled || void 0,
+          "data-drag-id": dragItem?.id,
           onClick: () => handleSelect(item),
           onDoubleClick: () => handleOpen(item),
           draggable: draggable && !item.disabled,

package/dist/{chunk-SDWJSALH.js → chunk-5OLE7XM3.js}

@@ -8,145 +8,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/components/TabPane.tsx
+// src/components/Tabs.tsx
 var TabsContext = React.createContext(null);
 function useTabsContext() {
   return React.useContext(TabsContext);
 }
-var Tabs = ({
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
-  type = "line",
-  tabPosition = "top",
-  size = "medium",
-  closable = false,
-  centered = false,
-  destroyInactiveTabPane = false,
-  lazy = false,
-  className,
-  style,
-  onChange,
-  onTabClick,
-  onEdit,
-  children
-}) => {
-  const reactId = React.useId();
-  const idBase = React.useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
-  const [internalActiveKey, setInternalActiveKey] = React.useState(
-    defaultActiveKey
-  );
-  const containerClasses = React.useMemo(() => {
-    return tigercatCore.classNames(tigercatCore.getTabsContainerClasses(tabPosition), className);
-  }, [tabPosition, className]);
-  const tabNavClasses = React.useMemo(() => {
-    return tigercatCore.getTabNavClasses(tabPosition, type);
-  }, [tabPosition, type]);
-  const tabNavListClasses = React.useMemo(() => {
-    return tigercatCore.getTabNavListClasses(tabPosition, centered);
-  }, [tabPosition, centered]);
-  const { tabItems, tabPanes, firstTabKey } = React.useMemo(() => {
-    const items = [];
-    const panes = [];
-    let firstKey;
-    React__default.default.Children.forEach(children, (child) => {
-      if (!React__default.default.isValidElement(child) || child.type !== TabPane) return;
-      const key = child.props.tabKey;
-      if (firstKey === void 0) firstKey = key;
-      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
-      const tabId = `${idBase}-tab-${String(key)}`;
-      const panelId = `${idBase}-panel-${String(key)}`;
-      items.push(
-        React__default.default.cloneElement(child, {
-          renderMode: "tab",
-          tabId,
-          panelId,
-          tabIndex: key === resolvedActiveKey ? 0 : -1
-        })
-      );
-      panes.push(React__default.default.cloneElement(child, { renderMode: "pane", tabId, panelId }));
-    });
-    return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
-  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
-  const handleTabClick = React.useCallback(
-    (key) => {
-      onTabClick?.(key);
-      if (key === activeKey) {
-        return;
-      }
-      if (controlledActiveKey === void 0) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
-  );
-  const handleTabClose = React.useCallback(
-    (key, event) => {
-      event.stopPropagation();
-      onEdit?.({ targetKey: key, action: "remove" });
-    },
-    [onEdit]
-  );
-  const handleTabAdd = React.useCallback(() => {
-    onEdit?.({ targetKey: void 0, action: "add" });
-  }, [onEdit]);
-  const contextValue = React.useMemo(
-    () => ({
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    }),
-    [
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    ]
-  );
-  const tabNavContent = /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: tabNavClasses,
-      role: "tablist",
-      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tabNavListClasses, children: [
-        tabItems,
-        type === "editable-card" && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: tigercatCore.tabAddButtonClasses,
-            onClick: handleTabAdd,
-            "aria-label": "Add tab",
-            children: "+"
-          }
-        )
-      ] })
-    }
-  );
-  const tabContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.tabContentBaseClasses, children: tabPanes });
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    tabContent,
-    tabNavContent
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    tabNavContent,
-    tabContent
-  ] }) }) });
-};
 var TabPane = ({
   tabKey,
   label,
@@ -208,8 +74,8 @@ var TabPane = ({
     const tabButtons = Array.from(
       tabList?.querySelectorAll('[role="tab"]') ?? []
     );
-    const enabled = tabButtons.filter((b) => !b.disabled);
-    const currentIndex = enabled.findIndex((b) => b.id === tabId);
+    const enabled = tabButtons.filter((button) => !button.disabled);
+    const currentIndex = enabled.findIndex((button) => button.id === tabId);
     if (currentIndex === -1) {
       return;
     }
@@ -304,6 +170,159 @@ var TabPane = ({
     }
   );
 };
+var Tabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  type = "line",
+  tabPosition = "top",
+  size = "medium",
+  closable = false,
+  centered = false,
+  destroyInactiveTabPane = false,
+  lazy = false,
+  className,
+  style,
+  onChange,
+  onTabClick,
+  onEdit,
+  children
+}) => {
+  const reactId = React.useId();
+  const idBase = React.useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const [internalActiveKey, setInternalActiveKey] = React.useState(
+    defaultActiveKey
+  );
+  const containerClasses = React.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getTabsContainerClasses(tabPosition), className);
+  }, [tabPosition, className]);
+  const tabNavClasses = React.useMemo(() => {
+    return tigercatCore.getTabNavClasses(tabPosition, type);
+  }, [tabPosition, type]);
+  const tabNavListClasses = React.useMemo(() => {
+    return tigercatCore.getTabNavListClasses(tabPosition, centered);
+  }, [tabPosition, centered]);
+  const { tabItems, tabPanes, firstTabKey, tabKeys } = React.useMemo(() => {
+    const items = [];
+    const panes = [];
+    const keys = [];
+    let firstKey;
+    React__default.default.Children.forEach(children, (child) => {
+      if (!React__default.default.isValidElement(child) || child.type !== TabPane) return;
+      const key = child.props.tabKey;
+      if (firstKey === void 0) firstKey = key;
+      keys.push(key);
+      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
+      const tabId = `${idBase}-tab-${String(key)}`;
+      const panelId = `${idBase}-panel-${String(key)}`;
+      items.push(
+        React__default.default.cloneElement(child, {
+          renderMode: "tab",
+          tabId,
+          panelId,
+          tabIndex: key === resolvedActiveKey ? 0 : -1
+        })
+      );
+      panes.push(React__default.default.cloneElement(child, { renderMode: "pane", tabId, panelId }));
+    });
+    return { tabItems: items, tabPanes: panes, firstTabKey: firstKey, tabKeys: keys };
+  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
+  const activeTabIndex = React.useMemo(() => tabKeys.indexOf(activeKey ?? ""), [tabKeys, activeKey]);
+  const handleTabClick = React.useCallback(
+    (key) => {
+      onTabClick?.(key);
+      if (key === activeKey) {
+        return;
+      }
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [activeKey, controlledActiveKey, onChange, onTabClick]
+  );
+  const handleTabClose = React.useCallback(
+    (key, event) => {
+      event.stopPropagation();
+      onEdit?.({ targetKey: key, action: "remove" });
+    },
+    [onEdit]
+  );
+  const handleTabAdd = React.useCallback(() => {
+    onEdit?.({ targetKey: void 0, action: "add" });
+  }, [onEdit]);
+  const contextValue = React.useMemo(
+    () => ({
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    ]
+  );
+  const tabNavContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: tabNavListClasses,
+          style: tigercatCore.getTabNavListStyle(type, tabPosition, tabKeys.length),
+          children: [
+            type === "line" && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-tiger-tabs-indicator": "true",
+                "aria-hidden": "true",
+                className: tigercatCore.getTabIndicatorClasses(type, tabPosition),
+                style: tigercatCore.getTabIndicatorStyle(activeTabIndex, tabKeys.length, tabPosition)
+              }
+            ),
+            tabItems,
+            type === "editable-card" && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: tigercatCore.tabAddButtonClasses,
+                onClick: handleTabAdd,
+                "aria-label": "Add tab",
+                children: "+"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  const tabContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.tabContentBaseClasses, children: tabPanes });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tabContent,
+    tabNavContent
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tabNavContent,
+    tabContent
+  ] }) }) });
+};
 
 exports.TabPane = TabPane;
 exports.Tabs = Tabs;