react-public-components 1.2.0 → 1.2.2

package/dist/chunk-XB3BT6BU.js

@@ -0,0 +1,619 @@
+import { RightOutlined, LeftOutlined, DownOutlined, UpOutlined } from './chunk-TGSKTHTV.js';
+import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var getCollapsibleConfig = (collapsible) => {
+  var _a, _b, _c;
+  if (!collapsible) {
+    return { start: false, end: false, showCollapsibleIcon: "auto" };
+  }
+  if (typeof collapsible === "boolean") {
+    return {
+      start: collapsible,
+      end: collapsible,
+      showCollapsibleIcon: collapsible ? true : "auto"
+    };
+  }
+  return {
+    start: (_a = collapsible.start) != null ? _a : false,
+    end: (_b = collapsible.end) != null ? _b : false,
+    showCollapsibleIcon: (_c = collapsible.showCollapsibleIcon) != null ? _c : true
+  };
+};
+var DEFAULT_DRAGGER_SIZE = 4;
+var SplitterPanel = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+var isPercentSize = (value) => typeof value === "string" && value.endsWith("%");
+var parseSize = (value, total, fallback) => {
+  if (value === void 0) {
+    return fallback;
+  }
+  if (isPercentSize(value)) {
+    return Number.parseFloat(value) / 100 * total;
+  }
+  return Number(value);
+};
+var roundSizes = (sizes) => sizes.map((size) => Math.round(size));
+var getPointerPosition = (event, orientation) => orientation === "horizontal" ? event.clientX : event.clientY;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var resolveSemanticStyles = (styles, infoProps) => {
+  if (!styles) {
+    return {};
+  }
+  const resolved = typeof styles === "function" ? styles({ props: infoProps }) : styles;
+  return resolved || {};
+};
+var resolveSemanticClassNames = (classNames, infoProps) => {
+  if (!classNames) {
+    return {};
+  }
+  const resolved = typeof classNames === "function" ? classNames({ props: infoProps }) : classNames;
+  return resolved || {};
+};
+var CustomSplitter = (props) => {
+  const {
+    children,
+    className,
+    classNames,
+    destroyOnHidden = false,
+    draggerIcon,
+    draggerSize = DEFAULT_DRAGGER_SIZE,
+    lazy = false,
+    onResize,
+    onResizeEnd,
+    onResizeStart,
+    onCollapse,
+    onDraggerDoubleClick,
+    orientation,
+    style,
+    styles,
+    vertical = false
+  } = props;
+  const resolvedOrientation = orientation != null ? orientation : vertical ? "vertical" : "horizontal";
+  const rootRef = useRef(null);
+  const sizesRef = useRef([]);
+  const [containerSize, setContainerSize] = useState(0);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [hoveredCollapsePanelIndex, setHoveredCollapsePanelIndex] = useState(null);
+  const [sizes, setSizes] = useState([]);
+  const semanticStyles = useMemo(() => resolveSemanticStyles(styles, props), [styles, props]);
+  const semanticClassNames = useMemo(
+    () => resolveSemanticClassNames(classNames, props),
+    [classNames, props]
+  );
+  const panels = useMemo(
+    () => React.Children.toArray(children).filter(
+      React.isValidElement
+    ),
+    [children]
+  );
+  const trackSize = Math.max(0, containerSize - Math.max(0, panels.length - 1) * draggerSize);
+  const getPanelMin = useCallback(
+    (index) => {
+      var _a;
+      return parseSize((_a = panels[index]) == null ? void 0 : _a.props.min, trackSize, 0);
+    },
+    [panels, trackSize]
+  );
+  const getPanelMax = useCallback(
+    (index) => {
+      var _a;
+      return parseSize((_a = panels[index]) == null ? void 0 : _a.props.max, trackSize, trackSize);
+    },
+    [panels, trackSize]
+  );
+  const normalizeToTrack = useCallback(
+    (nextSizes) => {
+      if (!trackSize || !nextSizes.length) {
+        return nextSizes;
+      }
+      const normalized = [...nextSizes];
+      const diff = trackSize - normalized.reduce((sum, size) => sum + size, 0);
+      const flexibleIndex = normalized.findIndex((size) => size > 0);
+      if (flexibleIndex !== -1) {
+        normalized[flexibleIndex] += diff;
+      }
+      return normalized.map((size, index) => {
+        if (size <= 1) {
+          return 0;
+        }
+        if (size < getPanelMin(index)) {
+          return size;
+        }
+        return clamp(size, getPanelMin(index), getPanelMax(index));
+      });
+    },
+    [getPanelMax, getPanelMin, trackSize]
+  );
+  const buildInitialSizes = useCallback(
+    (previous) => {
+      if (!trackSize || !panels.length) {
+        return [];
+      }
+      if ((previous == null ? void 0 : previous.length) === panels.length) {
+        const previousTotal = previous.reduce((sum, size) => sum + size, 0);
+        if (previousTotal > 0) {
+          return normalizeToTrack(previous.map((size) => size / previousTotal * trackSize));
+        }
+      }
+      const explicitSizes = panels.map(
+        (panel) => {
+          var _a;
+          return parseSize((_a = panel.props.size) != null ? _a : panel.props.defaultSize, trackSize, -1);
+        }
+      );
+      const usedSize = explicitSizes.filter((size) => size >= 0).reduce((sum, size) => sum + size, 0);
+      const unsetCount = explicitSizes.filter((size) => size < 0).length;
+      const fallbackSize = unsetCount ? Math.max(0, (trackSize - usedSize) / unsetCount) : 0;
+      return normalizeToTrack(
+        explicitSizes.map(
+          (size, index) => clamp(size >= 0 ? size : fallbackSize, getPanelMin(index), getPanelMax(index))
+        )
+      );
+    },
+    [getPanelMax, getPanelMin, normalizeToTrack, panels, trackSize]
+  );
+  const updateSizes = useCallback(
+    (nextSizes, notify = true) => {
+      const normalized = normalizeToTrack(nextSizes);
+      setSizes(normalized);
+      sizesRef.current = normalized;
+      if (notify) {
+        onResize == null ? void 0 : onResize(roundSizes(normalized));
+      }
+    },
+    [normalizeToTrack, onResize]
+  );
+  useEffect(() => {
+    const node = rootRef.current;
+    if (!node) {
+      return void 0;
+    }
+    const syncSize = () => {
+      setContainerSize(resolvedOrientation === "horizontal" ? node.clientWidth : node.clientHeight);
+    };
+    syncSize();
+    const observer = new ResizeObserver(syncSize);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [resolvedOrientation]);
+  useEffect(() => {
+    setSizes((previous) => {
+      const nextSizes = buildInitialSizes(previous);
+      sizesRef.current = nextSizes;
+      return nextSizes;
+    });
+  }, [buildInitialSizes]);
+  const getResizedPair = useCallback(
+    (sourceSizes, index, delta) => {
+      const nextSizes = [...sourceSizes];
+      const isLeftCollapsed = sourceSizes[index] <= 1;
+      const isRightCollapsed = sourceSizes[index + 1] <= 1;
+      const leftMin = isLeftCollapsed ? 0 : getPanelMin(index);
+      const rightMin = isRightCollapsed ? 0 : getPanelMin(index + 1);
+      const leftMax = getPanelMax(index);
+      const rightMax = getPanelMax(index + 1);
+      const minDelta = Math.max(leftMin - sourceSizes[index], sourceSizes[index + 1] - rightMax);
+      const maxDelta = Math.min(leftMax - sourceSizes[index], sourceSizes[index + 1] - rightMin);
+      const safeDelta = clamp(delta, minDelta, maxDelta);
+      nextSizes[index] = sourceSizes[index] + safeDelta;
+      nextSizes[index + 1] = sourceSizes[index + 1] - safeDelta;
+      return normalizeToTrack(nextSizes);
+    },
+    [getPanelMax, getPanelMin, normalizeToTrack]
+  );
+  const getInitialLockedIndex = useCallback(
+    (sourceSizes, startIndex, delta) => {
+      if (sourceSizes[startIndex] <= 1 && delta < 0 && startIndex > 0) {
+        return startIndex - 1;
+      }
+      if (sourceSizes[startIndex + 1] <= 1 && delta > 0 && startIndex < sourceSizes.length - 2) {
+        return startIndex + 1;
+      }
+      return startIndex;
+    },
+    []
+  );
+  const resizePair = useCallback(
+    (index, delta, notify = true) => {
+      const targetIndex = getInitialLockedIndex(sizesRef.current, index, delta);
+      updateSizes(getResizedPair(sizesRef.current, targetIndex, delta), notify);
+    },
+    [getInitialLockedIndex, getResizedPair, updateSizes]
+  );
+  const startResize = (index, event) => {
+    if (panels[index].props.resizable === false || panels[index + 1].props.resizable === false) {
+      return;
+    }
+    event.preventDefault();
+    const startPosition = getPointerPosition(event, resolvedOrientation);
+    const startSizes = [...sizesRef.current];
+    let latestSizes = startSizes;
+    let lockedIndex = null;
+    setDraggingIndex(index);
+    onResizeStart == null ? void 0 : onResizeStart(roundSizes(startSizes));
+    const handlePointerMove = (moveEvent) => {
+      const delta = getPointerPosition(moveEvent, resolvedOrientation) - startPosition;
+      if (delta === 0) {
+        return;
+      }
+      if (lockedIndex === null) {
+        lockedIndex = getInitialLockedIndex(startSizes, index, delta);
+      }
+      latestSizes = getResizedPair(startSizes, lockedIndex, delta);
+      if (!lazy) {
+        updateSizes(latestSizes, true);
+      }
+    };
+    const handlePointerUp = () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+      setDraggingIndex(null);
+      if (lazy) {
+        updateSizes(latestSizes, true);
+      }
+      const currentSizes = roundSizes(sizesRef.current);
+      const currentCollapsed = sizesRef.current.map((size) => size <= 1);
+      const startCollapsed = startSizes.map((size) => size <= 1);
+      if (currentCollapsed.some((c, i) => c !== startCollapsed[i])) {
+        onCollapse == null ? void 0 : onCollapse(currentCollapsed, currentSizes);
+      }
+      onResizeEnd == null ? void 0 : onResizeEnd(currentSizes);
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  };
+  const toggleCollapse = (index, neighborIndex) => {
+    var _a;
+    const nextSizes = [...sizesRef.current];
+    if (nextSizes[index] > 1) {
+      nextSizes[neighborIndex] += nextSizes[index];
+      nextSizes[index] = 0;
+    } else {
+      const initialSizes = buildInitialSizes();
+      const initialSize = (_a = initialSizes[index]) != null ? _a : parseSize(panels[index].props.defaultSize, trackSize, trackSize / panels.length);
+      const restoredSize = clamp(initialSize, getPanelMin(index), getPanelMax(index));
+      nextSizes[index] = restoredSize;
+      nextSizes[neighborIndex] = Math.max(0, nextSizes[neighborIndex] - nextSizes[index]);
+    }
+    updateSizes(nextSizes);
+    const currentSizes = roundSizes(sizesRef.current);
+    const currentCollapsed = sizesRef.current.map((size) => size <= 1);
+    onCollapse == null ? void 0 : onCollapse(currentCollapsed, currentSizes);
+    onResizeEnd == null ? void 0 : onResizeEnd(currentSizes);
+  };
+  const resetSizes = () => {
+    const previousCollapsed = sizesRef.current.map((size) => size <= 1);
+    const nextSizes = buildInitialSizes();
+    updateSizes(nextSizes);
+    const currentSizes = roundSizes(sizesRef.current);
+    const currentCollapsed = sizesRef.current.map((size) => size <= 1);
+    if (currentCollapsed.some((c, i) => c !== previousCollapsed[i])) {
+      onCollapse == null ? void 0 : onCollapse(currentCollapsed, currentSizes);
+    }
+    onResizeEnd == null ? void 0 : onResizeEnd(currentSizes);
+  };
+  const rootStyle = {
+    border: "1px solid #f0f0f0",
+    borderRadius: 8,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: resolvedOrientation === "horizontal" ? "row" : "column",
+    height: "100%",
+    minHeight: 0,
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+    ...semanticStyles.root,
+    ...style
+  };
+  const renderCollapseButton = (draggerIndex, panelIndex, direction) => {
+    var _a, _b;
+    const panel = panels[panelIndex];
+    const config = getCollapsibleConfig(panel == null ? void 0 : panel.props.collapsible);
+    const isAllowed = direction === "start" ? config.start : config.end;
+    if (!isAllowed || config.showCollapsibleIcon === false) {
+      return null;
+    }
+    const neighborIndex = direction === "start" ? panelIndex + 1 : panelIndex - 1;
+    const isCollapsed = ((_a = sizes[panelIndex]) != null ? _a : 0) <= 1;
+    const isNeighborCollapsed = ((_b = sizes[neighborIndex]) != null ? _b : 0) <= 1;
+    if (isCollapsed || isNeighborCollapsed) {
+      return null;
+    }
+    const Icon = resolvedOrientation === "horizontal" ? direction === "start" ? LeftOutlined : RightOutlined : direction === "start" ? UpOutlined : DownOutlined;
+    const isHorizontal = resolvedOrientation === "horizontal";
+    const isAlwaysShow = config.showCollapsibleIcon === true;
+    const isHoveredOrDragging = hoveredIndex === draggerIndex || draggingIndex === draggerIndex;
+    const opacity = isAlwaysShow || isHoveredOrDragging ? 1 : 0;
+    const pointerEvents = isAlwaysShow || isHoveredOrDragging ? "auto" : "none";
+    const buttonTitle = resolvedOrientation === "horizontal" ? direction === "start" ? "\u6298\u53E0\u5DE6\u4FA7\u9762\u677F" : "\u6298\u53E0\u53F3\u4FA7\u9762\u677F" : direction === "start" ? "\u6298\u53E0\u4E0A\u65B9\u9762\u677F" : "\u6298\u53E0\u4E0B\u65B9\u9762\u677F";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": buttonTitle,
+        title: buttonTitle,
+        onClick: (event) => {
+          event.stopPropagation();
+          toggleCollapse(panelIndex, neighborIndex);
+        },
+        onDoubleClick: (event) => {
+          event.stopPropagation();
+        },
+        style: {
+          alignItems: "center",
+          background: "#fff",
+          border: "1px solid #d9d9d9",
+          borderRadius: 3,
+          color: "#595959",
+          cursor: "pointer",
+          display: "flex",
+          height: isHorizontal ? 40 : 14,
+          width: isHorizontal ? 14 : 40,
+          justifyContent: "center",
+          padding: 0,
+          fontSize: 10,
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+          transition: "all 0.2s ease",
+          opacity,
+          pointerEvents
+        },
+        type: "button",
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "#e5e7eb";
+          e.currentTarget.style.color = "#1f2937";
+          setHoveredCollapsePanelIndex(panelIndex);
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "#fff";
+          e.currentTarget.style.color = "#595959";
+          setHoveredCollapsePanelIndex(null);
+        },
+        children: /* @__PURE__ */ jsx(Icon, {})
+      }
+    );
+  };
+  const rootClassName = [className, semanticClassNames.root].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx("div", { className: rootClassName, ref: rootRef, style: rootStyle, children: panels.map((panel, index) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isHidden = sizes[index] <= 1;
+    const isLeftOrTopCollapsed = ((_a = sizes[index]) != null ? _a : 0) <= 1;
+    const isRightOrBottomCollapsed = ((_b = sizes[index + 1]) != null ? _b : 0) <= 1;
+    const isAnyCollapsed = isLeftOrTopCollapsed || isRightOrBottomCollapsed;
+    const panelDestroyOnHidden = (_c = panel.props.destroyOnHidden) != null ? _c : destroyOnHidden;
+    const shouldRenderContent = !isHidden || !panelDestroyOnHidden;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [semanticClassNames.panel, panel.props.className].filter(Boolean).join(" ") || void 0,
+          style: {
+            background: index % 2 ? "#fff" : "#fafafa",
+            boxSizing: "border-box",
+            flex: `0 0 ${(_d = sizes[index]) != null ? _d : 0}px`,
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "hidden",
+            position: "relative",
+            boxShadow: hoveredCollapsePanelIndex === index ? "inset 0 0 0 2px #1677ff" : void 0,
+            transition: draggingIndex === null ? "box-shadow 0.2s ease, flex-basis 0.2s ease" : void 0,
+            ...semanticStyles.panel,
+            ...panel.props.style
+          },
+          children: shouldRenderContent && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                boxSizing: "border-box",
+                display: isHidden ? "none" : "block",
+                height: "100%",
+                overflowX: "hidden",
+                overflowY: "auto",
+                padding: ((_e = sizes[index]) != null ? _e : 0) < 32 ? 0 : 16,
+                width: "100%"
+              },
+              children: panel.props.children
+            }
+          )
+        }
+      ),
+      index < panels.length - 1 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-orientation": resolvedOrientation,
+          className: semanticClassNames.dragger,
+          onDoubleClick: () => {
+            onDraggerDoubleClick == null ? void 0 : onDraggerDoubleClick(index);
+            resetSizes();
+          },
+          onKeyDown: (event) => {
+            const step = event.shiftKey ? 40 : 10;
+            const directionMap = resolvedOrientation === "horizontal" ? { ArrowLeft: -step, ArrowRight: step } : { ArrowUp: -step, ArrowDown: step };
+            const delta = directionMap[event.key];
+            if (delta !== void 0) {
+              event.preventDefault();
+              resizePair(index, delta);
+            }
+          },
+          onPointerDown: (event) => startResize(index, event),
+          onPointerEnter: () => setHoveredIndex(index),
+          onPointerLeave: () => setHoveredIndex(null),
+          role: "separator",
+          title: "\u62D6\u52A8\u8C03\u6574\u5927\u5C0F\uFF0C\u53CC\u51FB\u91CD\u7F6E",
+          style: {
+            alignItems: "center",
+            background: hoveredIndex === index || draggingIndex === index ? "#e6f4ff" : "#f5f5f5",
+            boxSizing: "border-box",
+            cursor: resolvedOrientation === "horizontal" ? "col-resize" : "row-resize",
+            display: "flex",
+            flex: `0 0 ${draggerSize}px`,
+            justifyContent: "center",
+            marginLeft: index > 0 && ((_f = sizes[index]) != null ? _f : 0) <= 1 && resolvedOrientation === "horizontal" ? -draggerSize : void 0,
+            marginTop: index > 0 && ((_g = sizes[index]) != null ? _g : 0) <= 1 && resolvedOrientation === "vertical" ? -draggerSize : void 0,
+            outline: "none",
+            position: "relative",
+            userSelect: "none",
+            zIndex: isAnyCollapsed ? 2 : 1,
+            ...semanticStyles.dragger
+          },
+          tabIndex: 0,
+          children: [
+            draggerIcon ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  alignItems: "center",
+                  color: hoveredIndex === index || draggingIndex === index ? "#1677ff" : "#8c8c8c",
+                  display: "flex",
+                  fontSize: 12,
+                  justifyContent: "center",
+                  pointerEvents: "none",
+                  transition: "color 0.2s ease",
+                  userSelect: "none"
+                },
+                children: draggerIcon
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  background: hoveredIndex === index || draggingIndex === index ? "#1677ff" : "#d9d9d9",
+                  borderRadius: 2,
+                  height: resolvedOrientation === "horizontal" ? 40 : 2,
+                  transition: "background 0.2s ease",
+                  width: resolvedOrientation === "horizontal" ? 2 : 40
+                }
+              }
+            ),
+            !isAnyCollapsed && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  display: "flex",
+                  flexDirection: resolvedOrientation === "horizontal" ? "row" : "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 2,
+                  zIndex: 5
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        alignItems: "center",
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        minHeight: resolvedOrientation === "horizontal" ? void 0 : 14,
+                        minWidth: resolvedOrientation === "horizontal" ? 14 : void 0
+                      },
+                      children: renderCollapseButton(index, index, "start")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        alignItems: "center",
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        minHeight: resolvedOrientation === "horizontal" ? void 0 : 14,
+                        minWidth: resolvedOrientation === "horizontal" ? 14 : void 0
+                      },
+                      children: renderCollapseButton(index, index + 1, "end")
+                    }
+                  )
+                ]
+              }
+            ),
+            isAnyCollapsed && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: resolvedOrientation === "horizontal" ? "50%" : isLeftOrTopCollapsed ? 0 : void 0,
+                  bottom: resolvedOrientation === "horizontal" ? void 0 : isRightOrBottomCollapsed ? 0 : void 0,
+                  left: resolvedOrientation === "horizontal" ? isLeftOrTopCollapsed ? 0 : void 0 : "50%",
+                  right: resolvedOrientation === "horizontal" ? isRightOrBottomCollapsed ? 0 : void 0 : void 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  opacity: 1,
+                  pointerEvents: "auto",
+                  zIndex: 5,
+                  transform: resolvedOrientation === "horizontal" ? `translate(${isLeftOrTopCollapsed ? "4px" : "-4px"}, -50%)` : `translate(-50%, ${isLeftOrTopCollapsed ? "4px" : "-4px"})`
+                },
+                children: (() => {
+                  const isStart = isLeftOrTopCollapsed;
+                  const targetIndex = isStart ? index : index + 1;
+                  const targetPanel = panels[targetIndex];
+                  const config = getCollapsibleConfig(targetPanel == null ? void 0 : targetPanel.props.collapsible);
+                  const isAllowed = isStart ? config.start : config.end;
+                  if (!isAllowed || config.showCollapsibleIcon === false) {
+                    return null;
+                  }
+                  const ExpandIcon = resolvedOrientation === "horizontal" ? isLeftOrTopCollapsed ? RightOutlined : LeftOutlined : isLeftOrTopCollapsed ? DownOutlined : UpOutlined;
+                  const neighborIndex = isLeftOrTopCollapsed ? index + 1 : index;
+                  const isHorizontal = resolvedOrientation === "horizontal";
+                  const expandTitle = resolvedOrientation === "horizontal" ? isLeftOrTopCollapsed ? "\u5C55\u5F00\u5DE6\u4FA7\u9762\u677F" : "\u5C55\u5F00\u53F3\u4FA7\u9762\u677F" : isLeftOrTopCollapsed ? "\u5C55\u5F00\u4E0A\u65B9\u9762\u677F" : "\u5C55\u5F00\u4E0B\u65B9\u9762\u677F";
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": expandTitle,
+                      title: expandTitle,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggleCollapse(targetIndex, neighborIndex);
+                      },
+                      onDoubleClick: (event) => {
+                        event.stopPropagation();
+                      },
+                      style: {
+                        alignItems: "center",
+                        background: "#f3f4f6",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: 3,
+                        color: "#595959",
+                        cursor: "pointer",
+                        display: "flex",
+                        height: isHorizontal ? 40 : 14,
+                        width: isHorizontal ? 14 : 40,
+                        justifyContent: "center",
+                        padding: 0,
+                        fontSize: 10,
+                        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
+                        transition: "all 0.2s ease"
+                      },
+                      type: "button",
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = "#e5e7eb";
+                        e.currentTarget.style.color = "#1f2937";
+                        setHoveredCollapsePanelIndex(targetIndex);
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = "#f3f4f6";
+                        e.currentTarget.style.color = "#595959";
+                        setHoveredCollapsePanelIndex(null);
+                      },
+                      children: /* @__PURE__ */ jsx(ExpandIcon, {})
+                    }
+                  );
+                })()
+              }
+            )
+          ]
+        }
+      )
+    ] }, index);
+  }) });
+};
+CustomSplitter.Panel = SplitterPanel;
+var Splitter_default = CustomSplitter;
+
+export { Splitter_default };
+//# sourceMappingURL=chunk-XB3BT6BU.js.map
+//# sourceMappingURL=chunk-XB3BT6BU.js.map