@expcat/tigercat-react 2.1.0 → 2.1.1

package/dist/{chunk-UETARXIK.mjs → chunk-SXWEFZOF.mjs}

@@ -32,6 +32,8 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
+  findFirstEnabledIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
@@ -178,6 +180,7 @@ var Cascader = (props) => {
   const [activePath, setActivePath] = useState([]);
   const [columnActiveIndices, setColumnActiveIndices] = useState([]);
   const [searchActiveIndex, setSearchActiveIndex] = useState(-1);
+  const [focusedColumnIndex, setFocusedColumnIndex] = useState(0);
   const [indexedSearchQuery, setIndexedSearchQuery] = useState(searchQuery);
   if (indexedSearchQuery !== searchQuery) {
     setIndexedSearchQuery(searchQuery);
@@ -231,6 +234,7 @@ var Cascader = (props) => {
       wasOpenRef.current = false;
       setColumnActiveIndices([]);
       setSearchActiveIndex(-1);
+      setFocusedColumnIndex(0);
       return;
     }
     if (wasOpenRef.current) return;
@@ -239,16 +243,21 @@ var Cascader = (props) => {
     updateSearchValue("");
   }, [isOpen, updateSearchValue, value]);
   useEffect(() => {
-    if (!virtual || !isOpen) return;
+    if (!isOpen) return;
     setColumnActiveIndices(
       (prev) => columns.map((col, i) => {
-        if (prev[i] !== void 0 && prev[i] >= 0 && prev[i] < col.options.length) {
+        if (prev[i] !== void 0 && prev[i] >= 0 && prev[i] < col.options.length && !col.options[prev[i]]?.disabled) {
           return prev[i];
         }
         return selectedIndexInColumn(col.options, col.selectedValue);
       })
     );
-  }, [virtual, isOpen, columns]);
+    setFocusedColumnIndex((prev) => {
+      const last = columns.length - 1;
+      if (last < 0) return 0;
+      return prev > last ? last : prev;
+    });
+  }, [isOpen, columns]);
   const toggleOpen = useCallback(() => {
     if (disabled) return;
     setIsOpen((prev) => !prev);
@@ -266,6 +275,7 @@ var Cascader = (props) => {
           next[level] = optionIndex;
           return next;
         });
+        setFocusedColumnIndex(level);
       }
       const hasChildren = isCascaderOptionExpandable(option);
       if (!hasChildren) {
@@ -286,6 +296,7 @@ var Cascader = (props) => {
           next[level] = optionIndex;
           return next;
         });
+        setFocusedColumnIndex(level);
       }
       if (expandTrigger !== "hover" || option.disabled) return;
       const newPath = activePath.slice(0, level);
@@ -309,8 +320,142 @@ var Cascader = (props) => {
     },
     [onChange]
   );
+  const isOptionDisabled = useCallback((option) => !!option.disabled, []);
+  const getColumnOptionDomId = useCallback(
+    (colIndex, optionIndex) => `${listboxId}-col${colIndex}-opt${optionIndex}`,
+    [listboxId]
+  );
+  const getCurrentColumnIndex = useCallback(() => {
+    const last = columns.length - 1;
+    if (last < 0) return 0;
+    if (focusedColumnIndex >= 0 && focusedColumnIndex <= last) return focusedColumnIndex;
+    return last;
+  }, [columns.length, focusedColumnIndex]);
+  const commitActiveOption = useCallback(() => {
+    if (isSearchMode) {
+      const item = searchResults[searchActiveIndex];
+      if (!item || item.disabled) return;
+      handleSearchResultClick(item.valuePath, item.disabled);
+      return;
+    }
+    const colIndex = getCurrentColumnIndex();
+    const col = columns[colIndex];
+    const idx = columnActiveIndices[colIndex] ?? -1;
+    const option = col?.options[idx];
+    if (!option || option.disabled) return;
+    handleOptionClick(option, colIndex);
+    if (isCascaderOptionExpandable(option)) {
+      const nextCol = colIndex + 1;
+      const childOptions = option.children ?? [];
+      const nextIdx = findFirstEnabledIndex(childOptions, isOptionDisabled);
+      setColumnActiveIndices((prev) => {
+        const next = prev.slice();
+        next[colIndex] = idx;
+        next[nextCol] = nextIdx;
+        return next;
+      });
+      setFocusedColumnIndex(nextCol);
+    }
+  }, [
+    isSearchMode,
+    searchResults,
+    searchActiveIndex,
+    handleSearchResultClick,
+    getCurrentColumnIndex,
+    columns,
+    columnActiveIndices,
+    handleOptionClick,
+    isOptionDisabled
+  ]);
+  const handleOpenListKeyDown = useCallback(
+    (e, fromSearchInput = false) => {
+      const key = e.key;
+      if (fromSearchInput && key === " ") return false;
+      if (isSearchMode) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+          e.preventDefault();
+          e.stopPropagation();
+          setSearchActiveIndex(
+            (current) => getPickerNavigationIndex(searchResults, current, key, (item) => !!item.disabled)
+          );
+          return true;
+        }
+        if (key === "Enter" || key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          commitActiveOption();
+          return true;
+        }
+        return false;
+      }
+      const colIndex = getCurrentColumnIndex();
+      const col = columns[colIndex];
+      if (!col) return false;
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        const current = columnActiveIndices[colIndex] ?? -1;
+        const next = getPickerNavigationIndex(col.options, current, key, isOptionDisabled);
+        setColumnActiveIndices((prev) => {
+          const nextIndices = prev.slice();
+          nextIndices[colIndex] = next;
+          return nextIndices;
+        });
+        setFocusedColumnIndex(colIndex);
+        return true;
+      }
+      if (key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        const idx = columnActiveIndices[colIndex] ?? -1;
+        const option = col.options[idx];
+        if (option && !option.disabled && isCascaderOptionExpandable(option)) {
+          handleOptionClick(option, colIndex);
+          const childOptions = option.children ?? [];
+          const nextIdx = findFirstEnabledIndex(childOptions, isOptionDisabled);
+          setColumnActiveIndices((prev) => {
+            const next = prev.slice();
+            next[colIndex] = idx;
+            next[colIndex + 1] = nextIdx;
+            return next;
+          });
+          setFocusedColumnIndex(colIndex + 1);
+        }
+        return true;
+      }
+      if (key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (activePath.length > 0) {
+          setActivePath(activePath.slice(0, -1));
+          setFocusedColumnIndex(Math.max(0, colIndex - 1));
+        }
+        return true;
+      }
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitActiveOption();
+        return true;
+      }
+      return false;
+    },
+    [
+      isSearchMode,
+      searchResults,
+      commitActiveOption,
+      getCurrentColumnIndex,
+      columns,
+      columnActiveIndices,
+      isOptionDisabled,
+      handleOptionClick,
+      activePath
+    ]
+  );
   const handleTriggerKeyDown = useCallback(
     (e) => {
+      if (disabled) return;
+      if (isOpen && handleOpenListKeyDown(e)) return;
       const action = getPickerTriggerKeyAction(e.key, isOpen);
       if (action === "none") return;
       e.preventDefault();
@@ -322,69 +467,99 @@ var Cascader = (props) => {
         setIsOpen(false);
       }
     },
-    [toggleOpen, isOpen]
+    [disabled, isOpen, handleOpenListKeyDown, toggleOpen]
+  );
+  const handleDropdownKeyDown = useCallback(
+    (e) => {
+      if (e.target instanceof HTMLInputElement) return;
+      if (!isOpen) return;
+      handleOpenListKeyDown(e);
+    },
+    [isOpen, handleOpenListKeyDown]
+  );
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case " ":
+          e.stopPropagation();
+          return;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+          handleOpenListKeyDown(e, true);
+          return;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+          return;
+        default:
+          return;
+      }
+    },
+    [handleOpenListKeyDown]
   );
   const hasValue = value && value.length > 0;
   const showClearBtn = clearable && hasValue && !disabled;
+  const currentCol = getCurrentColumnIndex();
+  const currentOpt = columnActiveIndices[currentCol] ?? -1;
+  const activeOptionId = !isOpen ? void 0 : isSearchMode ? searchActiveIndex >= 0 ? getPickerOptionId(listboxId, searchActiveIndex) : void 0 : currentOpt >= 0 ? getColumnOptionDomId(currentCol, currentOpt) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cascaderBaseClasses, "data-testid": "cascader", ...divProps, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
         type: "button",
-        className: triggerClasses,
+        className: classNames(triggerClasses, showClearBtn ? "pr-14" : "pr-9"),
         disabled,
-        ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
+        ...getPickerComboboxAria({ expanded: isOpen, listboxId, activeOptionId }),
         onClick: toggleOpen,
         onKeyDown: handleTriggerKeyDown,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: classNames(
-                "flex-1 text-left truncate",
-                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
-              ),
-              children: hasValue ? displayLabel : placeholder
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-            showClearBtn && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "flex items-center",
-                role: "button",
-                "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
-                onClick: handleClear,
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    viewBox: icon20ViewBox,
-                    fill: "currentColor",
-                    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
-                  }
-                )
-              }
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "flex-1 text-left truncate",
+              !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
             ),
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: classNames(
-                  "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
-                  isOpen && "rotate-180"
-                ),
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: icon20ViewBox,
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
-              }
-            )
-          ] })
-        ]
+            children: hasValue ? displayLabel : placeholder
+          }
+        )
       }
     ),
+    /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1", children: [
+      showClearBtn && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-cascader-ring,var(--tiger-primary,#2563eb))]",
+          "data-tiger-cascader-clear": "",
+          "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: classNames("inline-flex", isOpen && "rotate-180"), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: icon20ViewBox,
+          fill: "currentColor",
+          children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
+        }
+      ) })
+    ] }),
     renderOverlayPortal(
       isOpen ? /* @__PURE__ */ jsxs(
         "div",
@@ -397,6 +572,7 @@ var Cascader = (props) => {
           ),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
+          onKeyDown: handleDropdownKeyDown,
           children: [
             searchable && /* @__PURE__ */ jsx(
               "input",
@@ -409,6 +585,7 @@ var Cascader = (props) => {
                 ),
                 value: searchQuery,
                 onChange: (e) => updateSearchValue(e.target.value),
+                onKeyDown: handleSearchKeyDown,
                 "aria-label": resolveLocaleText(
                   "Search options",
                   mergedLocale?.common?.searchPlaceholder
@@ -433,9 +610,12 @@ var Cascader = (props) => {
                   renderItem: (item, index) => /* @__PURE__ */ jsx(
                     "div",
                     {
+                      id: getPickerOptionId(listboxId, index),
                       "data-option-index": index,
+                      "data-active": searchActiveIndex === index || void 0,
                       className: classNames(
                         cascaderSearchResultClasses,
+                        searchActiveIndex === index && "bg-[var(--tiger-cascader-option-bg-selected,var(--tiger-outline-bg-hover,#eff6ff))]",
                         item.disabled && "opacity-50 cursor-not-allowed"
                       ),
                       ...getPickerOptionAria({
@@ -460,15 +640,21 @@ var Cascader = (props) => {
                   children: searchResults.map((item, index) => /* @__PURE__ */ jsx(
                     "div",
                     {
+                      id: getPickerOptionId(listboxId, index),
                       "data-option-index": index,
+                      "data-active": searchActiveIndex === index || void 0,
                       className: classNames(
                         cascaderSearchResultClasses,
+                        searchActiveIndex === index && "bg-[var(--tiger-cascader-option-bg-selected,var(--tiger-outline-bg-hover,#eff6ff))]",
                         item.disabled && "opacity-50 cursor-not-allowed"
                       ),
                       ...getPickerOptionAria({
                         selected: value?.join(",") === item.valuePath.join(","),
                         disabled: item.disabled
                       }),
+                      onMouseEnter: () => {
+                        if (!item.disabled) setSearchActiveIndex(index);
+                      },
                       onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
                       children: typeof searchable === "object" && searchable.render ? searchable.render(searchQuery, item.path) : item.label
                     },
@@ -485,12 +671,19 @@ var Cascader = (props) => {
                 });
                 const renderColumnOption = (option, optionIndex) => {
                   const isSelected = col.selectedValue === option.value;
+                  const isActive = (columnActiveIndices[colIndex] ?? -1) === optionIndex;
                   const hasChildren = isCascaderOptionExpandable(option);
                   return /* @__PURE__ */ jsxs(
                     "div",
                     {
+                      id: getColumnOptionDomId(colIndex, optionIndex),
                       "data-option-index": optionIndex,
-                      className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
+                      "data-active": isActive || void 0,
+                      className: getCascaderOptionClasses(
+                        isSelected || isActive,
+                        !!option.disabled,
+                        size
+                      ),
                       ...getPickerOptionAria({
                         selected: isSelected,
                         disabled: !!option.disabled

package/dist/{chunk-H6MVW5YD.mjs → chunk-TEVEXDY2.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
@@ -29,7 +32,6 @@ import {
   createLinePath,
   createPointScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
@@ -109,9 +111,11 @@ var LineChart = ({
     () => getStableChartGradientPrefix("line", gradientId),
     [gradientId]
   );
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
   );
   const resolvedSeries = useMemo(
     () => resolveSeriesData(series, data, {
@@ -133,6 +137,7 @@ var LineChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -255,17 +260,21 @@ var LineChart = ({
     (seriesIndex, pointIndex, event) => {
       setHoveredPointInfo({ seriesIndex, pointIndex });
       setTooltipPosition({ x: event.clientX, y: event.clientY });
-      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      if (hoverable) {
+        onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      }
     },
-    [onPointHover, resolvedSeries]
+    [hoverable, onPointHover, resolvedSeries]
   );
   const handlePointMouseMove = useCallback((event) => {
     setTooltipPosition({ x: event.clientX, y: event.clientY });
   }, []);
   const handlePointMouseLeave = useCallback(() => {
     setHoveredPointInfo(null);
-    onPointHover?.(null, null, null);
-  }, [onPointHover]);
+    if (hoverable) {
+      onPointHover?.(null, null, null);
+    }
+  }, [hoverable, onPointHover]);
   const showPointTooltipFromElement = useCallback(
     (el, seriesIndex, pointIndex) => {
       if (!hoverable) return;
@@ -293,6 +302,7 @@ var LineChart = ({
     [selectable, handleSeriesSelect]
   );
   const pointClickable = selectable || !!onPointClick;
+  const trackPointHover = showTooltip || hoverable;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -303,6 +313,7 @@ var LineChart = ({
       title,
       desc,
       className: classNames(className),
+      onResolvedSizeChange,
       children: [
         (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsx("style", { children: `
@@ -477,9 +488,9 @@ var LineChart = ({
                     tabIndex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                    onMouseMove: hoverable ? handlePointMouseMove : void 0,
-                    onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                    onMouseEnter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMouseMove: trackPointHover ? handlePointMouseMove : void 0,
+                    onMouseLeave: trackPointHover ? handlePointMouseLeave : void 0,
                     onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);

package/dist/{chunk-DJOFM2VO.mjs → chunk-TO6MZFNQ.mjs}

@@ -4,9 +4,11 @@ import {
   classNames,
   getSplitterContainerClasses,
   getSplitterGutterClasses,
+  getSplitterGutterCssVars,
   getSplitterGutterHandleClasses,
   getPaneStyle,
   resizePanes,
+  resolveInitialPaneSizes,
   createDocumentDragSession
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,20 +39,21 @@ var Splitter = ({
   useEffect(() => cleanupDragSession, [cleanupDragSession]);
   useEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
     const paneCount2 = React.Children.count(children);
     if (paneCount2 === 0) return;
-    const totalGutter = (paneCount2 - 1) * gutterSize;
-    const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
-    if (controlledSizes && controlledSizes.length > 0) {
-      setPaneSizes([...controlledSizes]);
-    } else {
-      if (total > 0) {
-        const eachSize = total / paneCount2;
-        setPaneSizes(Array.from({ length: paneCount2 }, () => eachSize));
-      }
+    const containerSize = el ? direction === "horizontal" ? el.clientWidth : el.clientHeight : 0;
+    const resolved = resolveInitialPaneSizes(
+      paneCount2,
+      containerSize,
+      gutterSize,
+      controlledSizes,
+      min,
+      max
+    );
+    if (resolved) {
+      setPaneSizes(resolved);
     }
-  }, [children, direction, gutterSize, controlledSizes]);
+  }, [children, direction, gutterSize, controlledSizes, min, max]);
   const paneCount = paneSizes.length;
   const mins = useMemo(() => Array.from({ length: paneCount }, () => min), [paneCount, min]);
   const maxes = useMemo(() => Array.from({ length: paneCount }, () => max), [paneCount, max]);
@@ -136,35 +139,44 @@ var Splitter = ({
     () => classNames(getSplitterContainerClasses(direction, className)),
     [direction, className]
   );
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: containerClasses, style, "data-direction": direction, children: childArray.map((child, i) => {
-    const size = paneSizes[i];
-    const paneStyle = size != null ? getPaneStyle(size, direction) : void 0;
-    const isDragging = draggingIndex === i;
-    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "tiger-splitter-pane relative overflow-auto",
-          style: paneStyle,
-          "data-pane-index": i,
-          children: child
-        }
-      ),
-      i < childArray.length - 1 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: getSplitterGutterClasses(direction, !!isDragging, disabled),
-          role: "separator",
-          "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
-          tabIndex: disabled ? -1 : 0,
-          "data-gutter-index": i,
-          onMouseDown: (e) => handleMouseDown(i, e),
-          onKeyDown: (e) => handleKeyDown(i, e),
-          children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction) })
-        }
-      )
-    ] }, i);
-  }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      style: { ...style, ...getSplitterGutterCssVars(gutterSize) },
+      "data-direction": direction,
+      children: childArray.map((child, i) => {
+        const size = paneSizes[i];
+        const paneStyle = size != null ? getPaneStyle(size, direction) : void 0;
+        const isDragging = draggingIndex === i;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tiger-splitter-pane relative overflow-auto",
+              style: paneStyle,
+              "data-pane-index": i,
+              children: child
+            }
+          ),
+          i < childArray.length - 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getSplitterGutterClasses(direction, !!isDragging, disabled),
+              role: "separator",
+              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+              tabIndex: disabled ? -1 : 0,
+              "data-gutter-index": i,
+              onMouseDown: (e) => handleMouseDown(i, e),
+              onKeyDown: (e) => handleKeyDown(i, e),
+              children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction) })
+            }
+          )
+        ] }, i);
+      })
+    }
+  );
 };
 var Splitter_default = Splitter;
 

package/dist/{chunk-ZCGIZOMT.mjs → chunk-V7HJ5HLC.mjs}

@@ -275,14 +275,11 @@ var ImagePreview = ({
     },
     [handleNext, handlePrev, touchSwipeThreshold]
   );
-  const handleMaskClick = useCallback(
-    (e) => {
-      if (maskClosable && e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [maskClosable, handleClose]
-  );
+  const handleMaskClick = useCallback(() => {
+    if (maskClosable) {
+      handleClose();
+    }
+  }, [maskClosable, handleClose]);
   const transform = useMemo(
     () => `${calculateTransform(scale, offsetX, offsetY)} rotate(${rotation}deg)`,
     [scale, offsetX, offsetY, rotation]
@@ -298,10 +295,9 @@ var ImagePreview = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": labels.previewDialogAriaLabel,
-        onClick: handleMaskClick,
         onWheel: handleWheel,
         children: [
-          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
           /* @__PURE__ */ jsx(
             "img",
             {