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

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-LUABLBKS.mjs → chunk-JSBWEK6D.mjs}

@@ -6,7 +6,9 @@ import {
 import {
   classNames as classNames2,
   selectDropdownBaseClasses,
-  selectSearchInputClasses
+  selectSearchInputClasses,
+  selectDoneActionClasses,
+  selectDoneButtonClasses
 } from "@expcat/tigercat-core";
 
 // src/components/Select/state.ts
@@ -31,9 +33,10 @@ var SELECT_KEYS = /* @__PURE__ */ new Set([
   "disabled",
   "placeholder",
   "searchable",
+  "searchValue",
+  "defaultSearchValue",
   "clearable",
-  "noOptionsText",
-  "noDataText",
+  "emptyText",
   "maxTagCount",
   "virtual",
   "remote",
@@ -41,7 +44,7 @@ var SELECT_KEYS = /* @__PURE__ */ new Set([
   "creatable",
   "createOptionText",
   "listHeight",
-  "onSearch",
+  "onSearchChange",
   "onCreate",
   "className",
   "value",
@@ -56,9 +59,10 @@ function useSelectState(props) {
     disabled = false,
     placeholder = "Select an option",
     searchable = false,
+    searchValue,
+    defaultSearchValue = "",
     clearable = true,
-    noOptionsText,
-    noDataText,
+    emptyText,
     maxTagCount,
     remote = false,
     searchDebounce = 0,
@@ -66,7 +70,7 @@ function useSelectState(props) {
     createOptionText = "Create",
     virtual = false,
     listHeight = 256,
-    onSearch,
+    onSearchChange,
     onCreate,
     className,
     value,
@@ -87,7 +91,8 @@ function useSelectState(props) {
   const instanceId = useId();
   const listboxId = `tiger-select-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+  const searchQuery = searchValue ?? uncontrolledSearchValue;
   const [activeIndex, setActiveIndex] = useState(-1);
   const [createdOptions, setCreatedOptions] = useState([]);
   const dropdownRef = useRef(null);
@@ -160,7 +165,7 @@ function useSelectState(props) {
   };
   const closeDropdown = () => {
     setIsOpen(false);
-    setSearchQuery("");
+    updateSearchValue("");
     setActiveIndex(-1);
   };
   const toggleDropdown = () => {
@@ -213,18 +218,25 @@ function useSelectState(props) {
     onChange?.(void 0);
   };
   const handleSearchInput = (event) => {
-    const query = event.target.value;
-    setSearchQuery(query);
-    searchDebouncerRef.current?.schedule(query);
+    updateSearchValue(event.target.value);
   };
+  const updateSearchValue = useCallback(
+    (query) => {
+      if (searchValue === void 0) {
+        setUncontrolledSearchValue(query);
+      }
+      searchDebouncerRef.current?.schedule(query);
+    },
+    [searchValue]
+  );
   useEffect(() => {
     searchDebouncerRef.current?.cancel();
     searchDebouncerRef.current = createSelectSearchDebouncer({
       delay: searchDebounce,
-      onSearch: (query) => onSearch?.(query)
+      onSearchChange: (query) => onSearchChange?.(query)
     });
     return () => searchDebouncerRef.current?.cancel();
-  }, [onSearch, searchDebounce]);
+  }, [onSearchChange, searchDebounce]);
   const handleTriggerKeyDown = (event) => {
     if (disabled) {
       return;
@@ -429,21 +441,17 @@ function useSelectState(props) {
     placeholder,
     searchable,
     clearable,
-    noDataText: resolveLocaleText(
-      "No options available",
-      noDataText,
-      mergedLocale?.common?.emptyText
-    ),
-    noOptionsText: resolveLocaleText(
-      "No options found",
-      noOptionsText,
-      mergedLocale?.common?.emptyText
-    ),
+    emptyText: resolveLocaleText("No options found", emptyText, mergedLocale?.common?.emptyText),
     createOptionText,
     className,
     divProps,
     searchPlaceholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
     clearAriaLabel: resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
+    doneText: resolveLocaleText(
+      "Done",
+      mergedLocale?.common?.okText,
+      mergedLocale?.common?.closeText
+    ),
     filteredOptions,
     flatSelectableOptions,
     creatableOption,
@@ -456,6 +464,7 @@ function useSelectState(props) {
     isSelected,
     selectOption,
     clearSelection,
+    closeDropdown,
     toggleDropdown,
     handleSearchInput,
     handleTriggerKeyDown,
@@ -587,7 +596,7 @@ var VirtualSelectOptions = ({
 };
 function renderOptions(ctx) {
   if (!ctx.hasOptions && !ctx.creatableOption) {
-    return /* @__PURE__ */ jsx2("div", { className: selectEmptyStateClasses, children: ctx.optionsLength === 0 ? ctx.noDataText : ctx.noOptionsText });
+    return /* @__PURE__ */ jsx2("div", { className: selectEmptyStateClasses, children: ctx.emptyText });
   }
   const hasGroups = ctx.filteredOptions.some(isOptionGroup);
   if (ctx.virtual && !hasGroups) {
@@ -690,7 +699,21 @@ var Select = (props) => {
               onKeyDown: ctx.handleSearchKeyDown
             }
           ),
-          renderOptions(ctx)
+          renderOptions(ctx),
+          /* @__PURE__ */ jsx3("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: selectDoneButtonClasses,
+              onClick: ctx.closeDropdown,
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.stopPropagation();
+                }
+              },
+              children: ctx.doneText
+            }
+          ) })
         ]
       }
     )

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) => {