@expcat/tigercat-react 1.5.0 → 2.0.0-preview.2

package/dist/{chunk-AI4V7L6K.mjs → chunk-GFLKO46C.mjs}

@@ -19,6 +19,7 @@ import {
   getTableFixedCellClasses,
   getTableFixedHeaderCellClasses,
   getTableColgroup,
+  getNextTableSelectAllKeys,
   tableBaseClasses,
   virtualTableHeaderClasses,
   virtualTableHeaderCellClasses,
@@ -30,10 +31,10 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_VIRTUAL_COLUMN_WIDTH = 150;
 var VirtualTable = ({
-  data = [],
+  dataSource = [],
   columns = [],
-  rowHeight = 48,
-  height = 400,
+  virtualItemHeight = 48,
+  virtualHeight = 400,
   width = "auto",
   overscan = 5,
   stickyHeader = true,
@@ -43,13 +44,12 @@ var VirtualTable = ({
   loading = false,
   emptyText,
   locale,
-  selectable = false,
-  selectedKeys = [],
+  rowSelection,
   striped = false,
   bordered = false,
   className,
   onRowClick,
-  onSelect,
+  onSelectionChange,
   renderCell,
   ...rest
 }) => {
@@ -61,15 +61,47 @@ var VirtualTable = ({
   const containerRef = useRef(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollLeft, setScrollLeft] = useState(0);
+  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(
+    rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []
+  );
+  const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0;
+  const selectedKeys = isSelectionControlled ? rowSelection.selectedRowKeys ?? [] : uncontrolledSelectedKeys;
+  const hasSelection = !!rowSelection;
   const range = useMemo(
-    () => calculateVirtualRange(scrollTop, height, data.length, rowHeight, overscan),
-    [scrollTop, height, data.length, rowHeight, overscan]
+    () => calculateVirtualRange(
+      scrollTop,
+      virtualHeight,
+      dataSource.length,
+      virtualItemHeight,
+      overscan
+    ),
+    [scrollTop, virtualHeight, dataSource.length, virtualItemHeight, overscan]
   );
   const visibleData = useMemo(
-    () => data.slice(range.start, range.end),
-    [data, range.start, range.end]
+    () => dataSource.slice(range.start, range.end),
+    [dataSource, range.start, range.end]
   );
   const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const commitSelection = useCallback(
+    (nextKeys) => {
+      if (!isSelectionControlled) {
+        setUncontrolledSelectedKeys(nextKeys);
+      }
+      onSelectionChange?.(nextKeys);
+    },
+    [isSelectionControlled, onSelectionChange]
+  );
+  const toggleRowSelection = useCallback(
+    (key, row) => {
+      if (!rowSelection || rowSelection.getCheckboxProps?.(row)?.disabled) return;
+      if (rowSelection.type === "radio") {
+        commitSelection([key]);
+        return;
+      }
+      commitSelection(getNextTableSelectAllKeys(selectedKeys, [key], !selectedSet.has(key)));
+    },
+    [commitSelection, rowSelection, selectedKeys, selectedSet]
+  );
   const onScroll = useCallback(() => {
     if (containerRef.current) {
       setScrollTop(containerRef.current.scrollTop);
@@ -102,7 +134,7 @@ var VirtualTable = ({
     [fixedInfo.hasFixedColumns, visibleColumns]
   );
   const resolveRowClassName = (row, index) => typeof rowClassName === "function" ? rowClassName(row, index) : rowClassName;
-  const bottomHeight = Math.max(0, range.totalHeight - range.end * rowHeight);
+  const bottomHeight = Math.max(0, range.totalHeight - range.end * virtualItemHeight);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -112,12 +144,12 @@ var VirtualTable = ({
         rest.className
       ),
       style: {
-        height: `${height}px`,
+        height: `${virtualHeight}px`,
         ...width !== "auto" ? { width: `${width}px` } : {}
       },
       onScroll,
       role: "grid",
-      "aria-rowcount": data.length,
+      "aria-rowcount": dataSource.length,
       children: [
         /* @__PURE__ */ jsxs("table", { className: classNames(tableBaseClasses, "table-fixed"), children: [
           colgroupEntries.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: colgroupEntries.map((entry) => /* @__PURE__ */ jsx(
@@ -157,12 +189,12 @@ var VirtualTable = ({
             /* @__PURE__ */ jsx("tr", { style: { height: `${range.offsetTop}px` }, "aria-hidden": true }),
             visibleData.map((row, localIdx) => {
               const globalIdx = range.start + localIdx;
-              const key = getVirtualRowKey(row, globalIdx, rowKey);
+              const key = rowSelection?.getRowKey ? rowSelection.getRowKey(row) : getVirtualRowKey(row, globalIdx, rowKey);
               const isSelected = selectedSet.has(key);
-              const isInteractive = !!onRowClick || selectable;
+              const isInteractive = !!onRowClick || hasSelection;
               const activate = () => {
                 onRowClick?.(row, globalIdx);
-                if (selectable) onSelect?.(key, row, globalIdx);
+                if (hasSelection) toggleRowSelection(key, row);
               };
               return /* @__PURE__ */ jsxs(
                 "tr",
@@ -172,7 +204,7 @@ var VirtualTable = ({
                     resolveRowClassName(row, globalIdx)
                   ),
                   "aria-rowindex": globalIdx + 2,
-                  "aria-selected": selectable ? isSelected : void 0,
+                  "aria-selected": hasSelection ? isSelected : void 0,
                   tabIndex: isInteractive ? 0 : void 0,
                   onClick: isInteractive ? activate : void 0,
                   onKeyDown: isInteractive ? (e) => {
@@ -216,7 +248,7 @@ var VirtualTable = ({
             bottomHeight > 0 && /* @__PURE__ */ jsx("tr", { style: { height: `${bottomHeight}px` }, "aria-hidden": true })
           ] })
         ] }),
-        data.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: virtualTableEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) }),
+        dataSource.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: virtualTableEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) }),
         loading && /* @__PURE__ */ jsx("div", { className: virtualTableLoadingClasses, children: resolveLocaleText("Loading...", mergedLocale?.common?.loadingText) })
       ]
     }

package/dist/{chunk-BRPOEVRT.mjs → chunk-I3SE5HMH.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
+import {
+  ChartTooltip
+} from "./chunk-YORCCCQX.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
 import {
   ChartLegend
 } from "./chunk-ZG2W4HS5.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
-import {
-  ChartTooltip
-} from "./chunk-O6YIPNXX.mjs";
-import {
-  ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
 
 // src/components/RadarChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -639,7 +639,7 @@ var RadarChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoveredPoint !== null && tooltipContent !== "",
+      open: hoveredPoint !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-3RBRWBUG.mjs → chunk-IIWUQK2P.mjs}

@@ -1,9 +1,9 @@
 import {
   RadioGroupContext
-} from "./chunk-4MONGWU5.mjs";
+} from "./chunk-AKNWUI7K.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Radio.tsx
 import { useContext, useMemo } from "react";

package/dist/{chunk-4DRJA5ZK.mjs → chunk-J4HCTYJG.mjs}

@@ -199,7 +199,7 @@ var Tabs = ({
   swipeable = true,
   className,
   style,
-  onChange,
+  onActiveKeyChange,
   onTabClick,
   onEdit,
   children
@@ -269,9 +269,9 @@ var Tabs = ({
       if (controlledActiveKey === void 0) {
         setInternalActiveKey(key);
       }
-      onChange?.(key);
+      onActiveKeyChange?.(key);
     },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
+    [activeKey, controlledActiveKey, onActiveKeyChange, onTabClick]
   );
   const handleTabClose = useCallback(
     (key, event) => {

package/dist/chunk-JNZHZVPW.mjs

@@ -0,0 +1,143 @@
+import {
+  StatusIcon
+} from "./chunk-FLYJVZED.mjs";
+
+// src/components/NotificationContainer.tsx
+import { useEffect, useState } from "react";
+import {
+  ANIMATION_DURATION_MS,
+  classNames,
+  getNotificationIconPath,
+  getNotificationTypeClasses,
+  notificationActionButtonClasses,
+  notificationActionButtonTypeClasses,
+  notificationActionsClasses,
+  notificationBaseClasses,
+  notificationCloseButtonClasses,
+  notificationCloseIconClasses,
+  notificationCloseIconPath,
+  notificationContainerBaseClasses,
+  notificationContentClasses,
+  notificationDescriptionClasses,
+  notificationIconClasses,
+  notificationPositionClasses,
+  notificationTitleClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
+var NotificationItem = ({ notification, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+  const colorScheme = getNotificationTypeClasses(notification.type);
+  const notificationClasses = classNames(
+    notificationBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    notification.className,
+    isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
+  );
+  const iconPath = notification.icon || getNotificationIconPath(notification.type);
+  const iconClass = classNames(notificationIconClasses, colorScheme.icon);
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => onClose?.(notification.id), ANIMATION_DURATION_MS);
+  };
+  const a11yRole = notification.type === "error" ? "alert" : "status";
+  const ariaLive = notification.type === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: notificationClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      onClick: notification.onClick,
+      onKeyDown: (e) => {
+        if (!notification.onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          notification.onClick();
+        }
+      },
+      tabIndex: notification.onClick ? 0 : void 0,
+      style: notification.onClick ? { cursor: "pointer" } : void 0,
+      "data-tiger-notification": "",
+      "data-tiger-notification-type": notification.type,
+      "data-tiger-notification-id": String(notification.id),
+      children: [
+        /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconClass, "aria-hidden": "true", focusable: "false" }),
+        /* @__PURE__ */ jsxs("div", { className: notificationContentClasses, children: [
+          /* @__PURE__ */ jsx("div", { className: classNames(notificationTitleClasses, colorScheme.titleText), children: notification.title }),
+          notification.description && /* @__PURE__ */ jsx("div", { className: classNames(notificationDescriptionClasses, colorScheme.descriptionText), children: notification.description }),
+          notification.actions && notification.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: notificationActionsClasses, children: notification.actions.map((action) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(
+                notificationActionButtonClasses,
+                notificationActionButtonTypeClasses[action.type ?? "default"]
+              ),
+              type: "button",
+              disabled: action.disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+                action.onClick?.({
+                  id: notification.id,
+                  close: handleClose
+                });
+                if (action.closeOnClick) {
+                  handleClose();
+                }
+              },
+              children: action.label
+            },
+            action.key ?? action.label
+          )) })
+        ] }),
+        notification.closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: notificationCloseButtonClasses,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            },
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
+          }
+        )
+      ]
+    }
+  );
+};
+var NotificationContainer = ({
+  position = "top-right",
+  notifications = [],
+  onClose
+}) => {
+  const containerClasses = classNames(
+    notificationContainerBaseClasses,
+    notificationPositionClasses[position]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-notification-container": "",
+      "data-tiger-notification-position": position,
+      children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose }, notification.id))
+    }
+  );
+};
+var NotificationContainer_default = NotificationContainer;
+
+export {
+  NotificationContainer,
+  NotificationContainer_default
+};

package/dist/{chunk-DO3MVZZN.mjs → chunk-K6JLLCY7.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 import {
   useTigerConfig
 } from "./chunk-QAIBQHIO.mjs";
@@ -14,8 +14,8 @@ import {
   getTimePickerRangeTabButtonClasses,
   timePickerFooterClasses,
   timePickerFooterButtonClasses,
-  ClockIconPath,
-  TimePickerCloseIconPath
+  clockSolidIcon20PathD,
+  closeSolidIcon20PathD
 } from "@expcat/tigercat-core";
 
 // src/components/TimePicker/state.ts
@@ -625,7 +625,7 @@ var TimePicker = (allProps) => {
           className: timePickerClearButtonClasses,
           onClick: ctx.clearTime,
           "aria-label": ctx.labels.clear,
-          children: /* @__PURE__ */ jsx4(Icon, { path: TimePickerCloseIconPath, className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ jsx4(
@@ -636,7 +636,7 @@ var TimePicker = (allProps) => {
           disabled: ctx.disabled || ctx.readonly,
           onClick: ctx.togglePanel,
           "aria-label": ctx.labels.toggle,
-          children: /* @__PURE__ */ jsx4(Icon, { path: ClockIconPath, className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: clockSolidIcon20PathD, className: "w-5 h-5" })
         }
       )
     ] }),

package/dist/{chunk-2L7QEOFD.mjs → chunk-KWVA2DN3.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 import {
   renderBodyPortal,
   useBodyScrollLock,

package/dist/{chunk-WT72F56O.mjs → chunk-LJWQ7T57.mjs}

@@ -56,6 +56,9 @@ function useTreeState(props) {
     blockNode = false,
     emptyText,
     ariaLabel = "Tree",
+    onExpandedKeysChange,
+    onSelectedKeysChange,
+    onCheckedKeysChange,
     onExpand,
     onSelect,
     onCheck,
@@ -203,7 +206,9 @@ function useTreeState(props) {
       if (controlledExpandedKeys === void 0) {
         setInternalExpandedKeys(newExpandedKeys);
       }
-      onExpand?.(Array.from(newExpandedKeys), {
+      const expandedKeysArray = Array.from(newExpandedKeys);
+      onExpandedKeysChange?.(expandedKeysArray);
+      onExpand?.(expandedKeysArray, {
         expanded: !isExpanded,
         node
       });
@@ -214,6 +219,7 @@ function useTreeState(props) {
       loadData,
       loadingNodes,
       controlledExpandedKeys,
+      onExpandedKeysChange,
       onExpand,
       onNodeExpand,
       onNodeCollapse
@@ -238,6 +244,7 @@ function useTreeState(props) {
         setInternalSelectedKeys(newSelectedKeys);
       }
       const selectedKeysArray = Array.from(newSelectedKeys);
+      onSelectedKeysChange?.(selectedKeysArray);
       onSelect?.(selectedKeysArray, {
         selected: newSelectedKeys.has(nodeKey),
         selectedNodes: selectedKeysArray.map((k) => findNode(treeData, k)).filter(Boolean),
@@ -251,6 +258,7 @@ function useTreeState(props) {
       effectiveSelectable,
       effectiveMultiple,
       controlledSelectedKeys,
+      onSelectedKeysChange,
       onSelect
     ]
   );
@@ -270,6 +278,7 @@ function useTreeState(props) {
         setInternalCheckedState(newCheckedState);
       }
       const returnKeys = getCheckedKeysByStrategy(newCheckedState, treeData, checkStrategy);
+      onCheckedKeysChange?.(returnKeys);
       onCheck?.(returnKeys, {
         checked,
         checkedNodes: newCheckedState.checked.map((k) => findNode(treeData, k)).filter(Boolean),
@@ -277,7 +286,15 @@ function useTreeState(props) {
         checkedNodesPositions: newCheckedState
       });
     },
-    [treeData, computedCheckedState, checkStrictly, checkStrategy, controlledCheckedKeys, onCheck]
+    [
+      treeData,
+      computedCheckedState,
+      checkStrictly,
+      checkStrategy,
+      controlledCheckedKeys,
+      onCheckedKeysChange,
+      onCheck
+    ]
   );
   const handleKeyDown = useCallback(
     (e, node, isExpanded, isChecked) => {

package/dist/{chunk-4MREOFVE.mjs → chunk-MMWF2OPA.mjs}

@@ -38,11 +38,14 @@ var CASCADER_KEYS = /* @__PURE__ */ new Set([
   "size",
   "disabled",
   "clearable",
-  "showSearch",
+  "searchable",
+  "searchValue",
+  "defaultSearchValue",
+  "onSearchChange",
   "expandTrigger",
   "changeOnSelect",
   "separator",
-  "notFoundText",
+  "emptyText",
   "className",
   "locale"
 ]);
@@ -56,11 +59,14 @@ var Cascader = (props) => {
     size = "md",
     disabled = false,
     clearable = true,
-    showSearch = false,
+    searchable = false,
+    searchValue,
+    defaultSearchValue = "",
+    onSearchChange,
     expandTrigger = "click",
     changeOnSelect = false,
     separator = " / ",
-    notFoundText,
+    emptyText,
     className,
     locale
   } = props;
@@ -76,7 +82,8 @@ var Cascader = (props) => {
   const instanceId = useId();
   const listboxId = `tiger-cascader-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+  const searchQuery = searchValue ?? uncontrolledSearchValue;
   const [activePath, setActivePath] = useState([]);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
@@ -85,15 +92,15 @@ var Cascader = (props) => {
     [options, value, separator]
   );
   const columns = useMemo(() => getCascaderColumns(options, activePath), [options, activePath]);
-  const isSearchMode = showSearch && searchQuery.length > 0;
+  const isSearchMode = searchable && searchQuery.length > 0;
   const flattenedOptions = useMemo(() => {
-    if (!showSearch) return [];
+    if (!searchable) return [];
     return flattenCascaderOptions(options, [], [], changeOnSelect);
-  }, [showSearch, options, changeOnSelect]);
+  }, [searchable, options, changeOnSelect]);
   const searchResults = useMemo(() => {
     if (!isSearchMode) return [];
-    return filterCascaderOptions(flattenedOptions, searchQuery, showSearch);
-  }, [isSearchMode, flattenedOptions, searchQuery, showSearch]);
+    return filterCascaderOptions(flattenedOptions, searchQuery, searchable);
+  }, [isSearchMode, flattenedOptions, searchQuery, searchable]);
   const triggerClasses = useMemo(
     () => classNames(getCascaderTriggerClasses(size, disabled, isOpen), className),
     [size, disabled, isOpen, className]
@@ -101,9 +108,15 @@ var Cascader = (props) => {
   useEffect(() => {
     if (isOpen) {
       setActivePath(value ? [...value] : []);
-      setSearchQuery("");
+      updateSearchValue("");
     }
   }, [isOpen, value]);
+  function updateSearchValue(value2) {
+    if (searchValue === void 0) {
+      setUncontrolledSearchValue(value2);
+    }
+    onSearchChange?.(value2);
+  }
   useEffect(() => {
     if (!isOpen) return;
     function handleClick(e) {
@@ -241,24 +254,20 @@ var Cascader = (props) => {
         ref: dropdownRef,
         className: classNames(cascaderDropdownClasses, isSearchMode && "flex-col"),
         children: [
-          showSearch && /* @__PURE__ */ jsx(
+          searchable && /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
               className: cascaderSearchInputClasses,
               placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
               value: searchQuery,
-              onChange: (e) => setSearchQuery(e.target.value),
+              onChange: (e) => updateSearchValue(e.target.value),
               "aria-label": "Search options"
             }
           ),
           isSearchMode ? (
             // Search results
-            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: resolveLocaleText(
-              "No results found",
-              notFoundText,
-              mergedLocale?.common?.emptyText
-            ) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsx(
+            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: resolveLocaleText("No results found", emptyText, mergedLocale?.common?.emptyText) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsx(
               "div",
               {
                 className: classNames(
@@ -270,7 +279,7 @@ var Cascader = (props) => {
                   disabled: item.disabled
                 }),
                 onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
-                children: typeof showSearch === "object" && showSearch.render ? showSearch.render(searchQuery, item.path) : item.label
+                children: typeof searchable === "object" && searchable.render ? searchable.render(searchQuery, item.path) : item.label
               },
               item.valuePath.join(",")
             )) })

package/dist/{chunk-DEQZZKY5.mjs → chunk-NRWH5IWZ.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Input.tsx
 import { useState, useEffect, useRef, useCallback, useId } from "react";

package/dist/{chunk-FUE7IBTJ.mjs → chunk-OGG2TQDG.mjs}

@@ -29,7 +29,7 @@ var ScrollSpy = ({
   getContainer = getWindowContainer,
   className,
   style,
-  onChange,
+  onActiveKeyChange,
   onClick,
   ...rest
 }) => {
@@ -42,15 +42,15 @@ var ScrollSpy = ({
   const activeKeyString = currentActiveKey === void 0 ? "" : getScrollSpyKeyString(currentActiveKey);
   const getContainerRef = useRef(getContainer);
   getContainerRef.current = getContainer;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  const onActiveKeyChangeRef = useRef(onActiveKeyChange);
+  onActiveKeyChangeRef.current = onActiveKeyChange;
   const emitActive = useCallback(
     (item, source) => {
       const nextKeyString = getScrollSpyKeyString(item.key);
       if (nextKeyString === activeKeyString) return;
       const payload = createScrollSpyPayload(item, source);
       if (!isControlled) setInnerActiveKey(item.key);
-      onChangeRef.current?.(item.key, item, payload);
+      onActiveKeyChangeRef.current?.(item.key, item, payload);
     },
     [activeKeyString, isControlled]
   );

package/dist/{chunk-MV2JQ6XQ.mjs → chunk-OL3RXYMG.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/CheckboxGroup.tsx
 import { createContext, useContext } from "react";