@xfe-repo/web-components 1.7.6 → 1.8.0

package/dist/index.js

@@ -947,6 +947,11 @@ var import_modifiers = require("@dnd-kit/modifiers");
 var import_utilities = require("@dnd-kit/utilities");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var import_react5 = require("react");
+var getMiddleClickCloseTargetKey = function getMiddleClickCloseTargetKey(event, data) {
+    if (event.button !== 1) return void 0;
+    if (!data || data.disabled || data.closable === false) return void 0;
+    return data.key;
+};
 var MultiWindowTabs = (0, import_react4.memo)(function(props) {
     var pathKey = props.pathKey, pagePaths = props.pagePaths, className = props.className, onChange = props.onChange, onClose = props.onClose, onSort = props.onSort, onCollectionChange = props.onCollectionChange, sortAutoActive = props.sortAutoActive;
     var sensor = (0, import_core.useSensor)(import_core.PointerSensor, {
@@ -1022,6 +1027,7 @@ var MultiWindowTabs = (0, import_react4.memo)(function(props) {
                             key: node.key,
                             data: pagePathsHelperData.map.get(String(node.key)),
                             onCollectionChange: onCollectionChange,
+                            onClose: onClose,
                             isActivated: pathKey === String(node.key)
                         }), node);
                     }
@@ -1033,6 +1039,8 @@ var MultiWindowTabs = (0, import_react4.memo)(function(props) {
         onDragStart,
         onDragEnd,
         onCollectionChange,
+        onClose,
+        pathKey,
         sensor
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_antd4.Tabs, {
@@ -1048,15 +1056,26 @@ var MultiWindowTabs = (0, import_react4.memo)(function(props) {
     });
 });
 var TabItem = (0, import_react4.memo)(function(props) {
-    var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange;
+    var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange, onClose = props.onClose;
     var _ref = (0, import_sortable.useSortable)({
         id: props["data-node-key"]
     }), attributes = _ref.attributes, listeners = _ref.listeners, setNodeRef = _ref.setNodeRef, transform = _ref.transform, transition = _ref.transition, isDragging = _ref.isDragging;
+    var handleAuxClick = (0, import_react4.useCallback)(function(event) {
+        var targetKey = getMiddleClickCloseTargetKey(event, data);
+        if (!targetKey) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose === null || onClose === void 0 ? void 0 : onClose(targetKey);
+    }, [
+        data,
+        onClose
+    ]);
     var handleCollectionChange = (0, import_react4.useCallback)(function(collectionKey) {
         if (!data) return;
         onCollectionChange === null || onCollectionChange === void 0 ? void 0 : onCollectionChange(data.key, collectionKey);
     }, [
-        data
+        data,
+        onCollectionChange
     ]);
     var collectionSelect = (0, import_react4.useMemo)(function() {
         var _data_searchCollection;
@@ -1093,7 +1112,7 @@ var TabItem = (0, import_react4.memo)(function(props) {
         children,
         collectionSelect
     ]);
-    return import_react4.default.cloneElement(children, _object_spread({
+    return import_react4.default.cloneElement(children, _object_spread_props(_object_spread({
         ref: setNodeRef,
         style: _object_spread_props(_object_spread({}, style), {
             transform: import_utilities.CSS.Translate.toString(transform && _object_spread_props(_object_spread({}, transform), {
@@ -1104,7 +1123,9 @@ var TabItem = (0, import_react4.memo)(function(props) {
             cursor: "pointer"
         }),
         children: childrenWithCollectionSelect
-    }, attributes, listeners));
+    }, attributes, listeners), {
+        onAuxClick: handleAuxClick
+    }));
 });
 // src/MultiWindow/MultiWindow.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -653,6 +653,11 @@ import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 import { jsx as jsx4 } from "react/jsx-runtime";
 import { createElement } from "react";
+var getMiddleClickCloseTargetKey = function getMiddleClickCloseTargetKey(event, data) {
+    if (event.button !== 1) return void 0;
+    if (!data || data.disabled || data.closable === false) return void 0;
+    return data.key;
+};
 var MultiWindowTabs = memo3(function(props) {
     var pathKey = props.pathKey, pagePaths = props.pagePaths, className = props.className, onChange = props.onChange, onClose = props.onClose, onSort = props.onSort, onCollectionChange = props.onCollectionChange, sortAutoActive = props.sortAutoActive;
     var sensor = useSensor(PointerSensor, {
@@ -728,6 +733,7 @@ var MultiWindowTabs = memo3(function(props) {
                             key: node.key,
                             data: pagePathsHelperData.map.get(String(node.key)),
                             onCollectionChange: onCollectionChange,
+                            onClose: onClose,
                             isActivated: pathKey === String(node.key)
                         }), node);
                     }
@@ -739,6 +745,8 @@ var MultiWindowTabs = memo3(function(props) {
         onDragStart,
         onDragEnd,
         onCollectionChange,
+        onClose,
+        pathKey,
         sensor
     ]);
     return /* @__PURE__ */ jsx4(Tabs, {
@@ -754,15 +762,26 @@ var MultiWindowTabs = memo3(function(props) {
     });
 });
 var TabItem = memo3(function(props) {
-    var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange;
+    var data = props.data, children = props.children, style = props.style, isActivated = props.isActivated, onCollectionChange = props.onCollectionChange, onClose = props.onClose;
     var _useSortable = useSortable({
         id: props["data-node-key"]
     }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging;
+    var handleAuxClick = useCallback2(function(event) {
+        var targetKey = getMiddleClickCloseTargetKey(event, data);
+        if (!targetKey) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose === null || onClose === void 0 ? void 0 : onClose(targetKey);
+    }, [
+        data,
+        onClose
+    ]);
     var handleCollectionChange = useCallback2(function(collectionKey) {
         if (!data) return;
         onCollectionChange === null || onCollectionChange === void 0 ? void 0 : onCollectionChange(data.key, collectionKey);
     }, [
-        data
+        data,
+        onCollectionChange
     ]);
     var collectionSelect = useMemo3(function() {
         var _data_searchCollection;
@@ -799,7 +818,7 @@ var TabItem = memo3(function(props) {
         children,
         collectionSelect
     ]);
-    return React3.cloneElement(children, _object_spread({
+    return React3.cloneElement(children, _object_spread_props(_object_spread({
         ref: setNodeRef,
         style: _object_spread_props(_object_spread({}, style), {
             transform: CSS.Translate.toString(transform && _object_spread_props(_object_spread({}, transform), {
@@ -810,7 +829,9 @@ var TabItem = memo3(function(props) {
             cursor: "pointer"
         }),
         children: childrenWithCollectionSelect
-    }, attributes, listeners));
+    }, attributes, listeners), {
+        onAuxClick: handleAuxClick
+    }));
 });
 // src/MultiWindow/MultiWindow.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfe-repo/web-components",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": [
@@ -51,6 +51,7 @@
     "@types/react": "^18",
     "esbuild-plugin-less": "^1.3.9",
     "eslint": "8.57.1",
+    "vitest": "^4.0.14",
     "@xfe-repo/eslint-config": "1.6.0",
     "@xfe-repo/typescript-config": "1.6.1"
   },
@@ -62,9 +63,9 @@
     "react-dom": "18.2.0",
     "react-use": "^17.5.1",
     "swr": "^2.2.5",
-    "@xfe-repo/web-service": "1.6.0",
     "@xfe-repo/web-micro": "1.7.0",
     "@xfe-repo/web-router": "1.6.1",
+    "@xfe-repo/web-service": "1.6.0",
     "@xfe-repo/web-utils": "1.6.0"
   },
   "publishConfig": {
@@ -74,6 +75,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint \"src/**/*.ts*\" --fix",
+    "test": "vitest run",
     "clean": "rm -rf .turbo coverage dist node_modules"
   }
 }