@mezzanine-ui/react 1.0.0-beta.4 → 1.0.0-beta.5

package/Calendar/useCalendarControls.js

@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useCalendarControlModifiers } from './useCalendarControlModifiers.js';
 import { useCalendarModeStack } from './useCalendarModeStack.js';
 
@@ -10,30 +10,44 @@ function useCalendarControls(referenceDateProp, mode) {
     }, [referenceDateProp]);
     const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
     const modifierGroup = useCalendarControlModifiers();
-    const onPrev = () => {
+    const onPrev = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [handleMinus] = modifiers;
-        setReferenceDate(handleMinus(referenceDate));
-    };
-    const onNext = () => {
+        return () => {
+            const [handleMinus] = modifiers;
+            setReferenceDate(handleMinus(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onNext = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [, handleAdd] = modifiers;
-        setReferenceDate(handleAdd(referenceDate));
-    };
-    const onDoublePrev = () => {
-        const [handleMinus] = modifierGroup[currentMode].double;
-        setReferenceDate(handleMinus(referenceDate));
-    };
-    const onDoubleNext = () => {
-        const [, handleAdd] = modifierGroup[currentMode].double;
-        setReferenceDate(handleAdd(referenceDate));
-    };
-    const onMonthControlClick = () => pushModeStack('month');
-    const onYearControlClick = () => pushModeStack('year');
+        return () => {
+            const [, handleAdd] = modifiers;
+            setReferenceDate(handleAdd(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onDoublePrev = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [handleMinus] = modifiers;
+            setReferenceDate(handleMinus(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onDoubleNext = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [, handleAdd] = modifiers;
+            setReferenceDate(handleAdd(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onMonthControlClick = useCallback(() => pushModeStack('month'), [pushModeStack]);
+    const onYearControlClick = useCallback(() => pushModeStack('year'), [pushModeStack]);
     return {
         currentMode,
         onMonthControlClick,

package/Calendar/useRangeCalendarControls.d.ts

@@ -2,14 +2,14 @@ import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
 export declare function useRangeCalendarControls(referenceDateProp: DateType, mode?: CalendarMode): {
     currentMode: CalendarMode;
     onMonthControlClick: () => void;
-    onFirstNext: () => void;
-    onFirstPrev: () => void;
-    onFirstDoubleNext: () => void;
-    onFirstDoublePrev: () => void;
-    onSecondNext: () => void;
-    onSecondPrev: () => void;
-    onSecondDoubleNext: () => void;
-    onSecondDoublePrev: () => void;
+    onFirstNext: (() => void) | undefined;
+    onFirstPrev: (() => void) | undefined;
+    onFirstDoubleNext: (() => void) | undefined;
+    onFirstDoublePrev: (() => void) | undefined;
+    onSecondNext: (() => void) | undefined;
+    onSecondPrev: (() => void) | undefined;
+    onSecondDoubleNext: (() => void) | undefined;
+    onSecondDoublePrev: (() => void) | undefined;
     onYearControlClick: () => void;
     popModeStack: () => void;
     referenceDates: [string, string];

package/Calendar/useRangeCalendarControls.js

@@ -37,54 +37,65 @@ function useRangeCalendarControls(referenceDateProp, mode) {
     const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
     const modifierGroup = useCalendarControlModifiers();
     // First calendar controls
-    const onFirstPrev = () => {
+    const onFirstPrev = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [handleMinus] = modifiers;
-        const newFirst = handleMinus(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstNext = () => {
+        return () => {
+            const [handleMinus] = modifiers;
+            const newFirst = handleMinus(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstNext = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [, handleAdd] = modifiers;
-        const newFirst = handleAdd(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstDoublePrev = () => {
-        const [handleMinus] = modifierGroup[currentMode].double;
-        const newFirst = handleMinus(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstDoubleNext = () => {
-        const [, handleAdd] = modifierGroup[currentMode].double;
-        const newFirst = handleAdd(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
+        return () => {
+            const [, handleAdd] = modifiers;
+            const newFirst = handleAdd(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstDoublePrev = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [handleMinus] = modifiers;
+            const newFirst = handleMinus(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstDoubleNext = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [, handleAdd] = modifiers;
+            const newFirst = handleAdd(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
     // Second calendar controls (same behavior as first)
     const onSecondPrev = onFirstPrev;
     const onSecondNext = onFirstNext;
     const onSecondDoublePrev = onFirstDoublePrev;
     const onSecondDoubleNext = onFirstDoubleNext;
-    const onMonthControlClick = () => {
+    const onMonthControlClick = useCallback(() => {
         setFirstReferenceDate(firstReferenceDate);
         setSecondReferenceDate(addYear(firstReferenceDate, 1));
         pushModeStack('month');
-    };
-    const onYearControlClick = () => {
+    }, [firstReferenceDate, pushModeStack, addYear]);
+    const onYearControlClick = useCallback(() => {
         setFirstReferenceDate(firstReferenceDate);
         setSecondReferenceDate(addYear(firstReferenceDate, calendarYearModuler));
         pushModeStack('year');
-    };
-    // Wrapper functions for updating reference dates
-    // These should be used when switching modes (e.g., from month picker back to day mode)
-    // They update the target calendar and maintain the offset between calendars
+    }, [firstReferenceDate, pushModeStack, addYear]);
     const updateFirstReferenceDate = useCallback((date) => {
         setFirstReferenceDate(date);
         setSecondReferenceDate(getSecondCalendarDate(date));

package/DateRangePicker/useDateRangeCalendarControls.js

@@ -39,7 +39,10 @@ function useDateRangeCalendarControls(referenceDate, mode) {
     const onPrevFactory = (target) => () => {
         var _a;
         const modifiers = modifierGroup[currentMode];
-        const [handleMinus] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        const activeModifiers = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        if (!activeModifiers)
+            return;
+        const [handleMinus] = activeModifiers;
         const newAnchor = handleMinus(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;
@@ -54,7 +57,10 @@ function useDateRangeCalendarControls(referenceDate, mode) {
     const onNextFactory = (target) => () => {
         var _a;
         const modifiers = modifierGroup[currentMode];
-        const [, handleAdd] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        const activeModifiers = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        if (!activeModifiers)
+            return;
+        const [, handleAdd] = activeModifiers;
         const newAnchor = handleAdd(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;

package/Dropdown/Dropdown.d.ts

@@ -179,5 +179,36 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * Only fires when `maxHeight` is set and the list is scrollable.
      */
     onLeaveBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list is scrolled.
+     * Receives the scroll event and computed scroll information.
+     */
+    onScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLDivElement) => void;
+    /**
+     * Whether to defer the initialization of OverlayScrollbars.
+     * This can improve initial render performance.
+     * @default true
+     */
+    scrollbarDefer?: boolean | object;
+    /**
+     * Whether to disable the custom scrollbar component.
+     * When false (default), Scrollbar component will be used when maxHeight is set.
+     * When true, falls back to native div scrolling (backward compatible).
+     * @default false
+     */
+    scrollbarDisabled?: boolean;
+    /**
+     * The maximum width of the scrollable container.
+     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
+     */
+    scrollbarMaxWidth?: number | string;
+    /**
+     * Additional options to pass to OverlayScrollbars.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
+     */
+    scrollbarOptions?: import('overlayscrollbars').PartialOptions;
 }
 export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/Dropdown.js

@@ -14,7 +14,7 @@ import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, disablePortal = false, onReachBottom, onLeaveBottom, mode, value, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, disablePortal = false, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -231,6 +231,7 @@ function Dropdown(props) {
         onSelect,
         onReachBottom,
         onLeaveBottom,
+        onScroll,
         options,
         type,
         status,
@@ -239,6 +240,10 @@ function Dropdown(props) {
         emptyIcon,
         mode,
         value,
+        scrollbarDefer,
+        scrollbarDisabled,
+        scrollbarMaxWidth,
+        scrollbarOptions,
     }), [
         actionConfig,
         mergedActiveIndex,
@@ -252,6 +257,7 @@ function Dropdown(props) {
         onSelect,
         onReachBottom,
         onLeaveBottom,
+        onScroll,
         options,
         type,
         status,
@@ -260,6 +266,10 @@ function Dropdown(props) {
         emptyIcon,
         mode,
         value,
+        scrollbarDefer,
+        scrollbarDisabled,
+        scrollbarMaxWidth,
+        scrollbarOptions,
     ]);
     const triggerElement = useMemo(() => {
         const childWithRef = children;

package/Dropdown/DropdownItem.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DropdownItemSharedProps, DropdownOptionsByType, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { type IconDefinition } from '@mezzanine-ui/icons';
+import type { PartialOptions } from 'overlayscrollbars';
 import { type DropdownActionProps } from './DropdownAction';
 export interface DropdownItemProps<T extends DropdownType | undefined = DropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
     /**
@@ -83,5 +84,36 @@ export interface DropdownItemProps<T extends DropdownType | undefined = Dropdown
      * Only fires when `maxHeight` is set and the list is scrollable.
      */
     onLeaveBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list is scrolled.
+     * Receives the scroll event and computed scroll information.
+     */
+    onScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLDivElement) => void;
+    /**
+     * Whether to defer the initialization of OverlayScrollbars.
+     * This can improve initial render performance.
+     * @default true
+     */
+    scrollbarDefer?: boolean | object;
+    /**
+     * Whether to disable the custom scrollbar component.
+     * When false (default), Scrollbar component will be used when maxHeight is set.
+     * When true, falls back to native div scrolling (backward compatible).
+     * @default false
+     */
+    scrollbarDisabled?: boolean;
+    /**
+     * The maximum width of the scrollable container.
+     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
+     */
+    scrollbarMaxWidth?: number | string;
+    /**
+     * Additional options to pass to OverlayScrollbars.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
+     */
+    scrollbarOptions?: PartialOptions;
 }
 export default function DropdownItem<T extends DropdownType | undefined = DropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownItem.js

@@ -10,7 +10,19 @@ import DropdownAction from './DropdownAction.js';
 import DropdownItemCard from './DropdownItemCard.js';
 import DropdownStatus from './DropdownStatus.js';
 import { shortcutTextHandler } from './shortcutTextHandler.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 
+// Helper function to recursively get all descendant IDs from a tree option (excluding the option itself)
+function getAllDescendantIds(option) {
+    const ids = [];
+    if (option.children && option.children.length > 0) {
+        option.children.forEach((child) => {
+            ids.push(String(child.id));
+            ids.push(...getAllDescendantIds(child));
+        });
+    }
+    return ids;
+}
 /**
  * Limits DropdownOption array to a maximum depth, truncating extra children levels and showing error message if exceeded.
  * @param input - The original DropdownOption array
@@ -57,13 +69,16 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
     return truncate(input);
 }
 function DropdownItem(props) {
-    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, onReachBottom, onLeaveBottom, } = props;
+    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
     const listWrapperRef = useRef(null);
+    const viewportRef = useRef(null);
+    const wasAtBottomRef = useRef(false);
     const [expandedNodes, setExpandedNodes] = useState(new Set());
     const hasActions = Boolean(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.showActions);
     const hasHeader = Boolean(headerContent);
+    const shouldUseScrollbar = maxHeight && !scrollbarDisabled;
     // Use custom hook to measure element heights
     const [actionRef, actionHeight] = useElementHeight(hasActions && !!maxHeight);
     const [headerRef, headerHeight] = useElementHeight(hasHeader && !!maxHeight);
@@ -200,17 +215,39 @@ function DropdownItem(props) {
         });
         return { elements, nextIndex: currentIndex };
     };
+    const calculateNodeSelectionState = useCallback((option, selectedIds) => {
+        if (!option.children || option.children.length === 0) {
+            const isSelected = selectedIds.includes(String(option.id));
+            return { checked: isSelected, indeterminate: false };
+        }
+        // Get all descendant IDs (excluding the parent node itself)
+        const allDescendantIds = getAllDescendantIds(option);
+        const selectedDescendants = allDescendantIds.filter((id) => selectedIds.includes(id));
+        const totalDescendants = allDescendantIds.length;
+        if (totalDescendants === 0) {
+            // No descendants, check if parent itself is selected
+            const isSelected = selectedIds.includes(String(option.id));
+            return { checked: isSelected, indeterminate: false };
+        }
+        if (selectedDescendants.length === 0) {
+            return { checked: false, indeterminate: false };
+        }
+        if (selectedDescendants.length === totalDescendants) {
+            // All descendants are selected
+            return { checked: true, indeterminate: false };
+        }
+        // Some but not all descendants are selected
+        return { checked: false, indeterminate: true };
+    }, []);
     const renderTreeOptions = (optionList, depth, startIndex) => {
         let currentIndex = startIndex;
+        const selectedIds = Array.isArray(value) ? value.map((id) => String(id)) : value ? [String(value)] : [];
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
             var _a, _b, _c;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const level = Math.min(depth, 2);
             const isActive = optionIndex === activeIndex;
-            const isSelected = Array.isArray(value)
-                ? value.includes(option.id)
-                : value === option.id;
             const hasChildren = Boolean(option.children && option.children.length > 0);
             const isExpanded = hasChildren && expandedNodes.has(option.id);
             let prependIcon = undefined;
@@ -221,13 +258,31 @@ function DropdownItem(props) {
             const shortcutText = option.shortcutText
                 ? option.shortcutText
                 : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
-            const card = (jsx(DropdownItemCard, { active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
+            const selectionState = hasChildren && mode === 'multiple'
+                ? calculateNodeSelectionState(option, selectedIds)
+                : {
+                    checked: selectedIds.includes(String(option.id)),
+                    indeterminate: false,
+                };
+            const card = (jsx(DropdownItemCard, { active: isActive, checked: selectionState.checked, indeterminate: selectionState.indeterminate, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
                     if (disabled)
                         return;
-                    if (hasChildren && type === 'tree') {
+                    if (hasChildren && type === 'tree' && mode === 'multiple' && option.showCheckbox) {
+                        toggleExpand(option.id);
+                    }
+                    else if (hasChildren && type === 'tree') {
                         toggleExpand(option.id);
                     }
                     else {
+                        // In `tree` + `multiple` mode, `DropdownItemCard` already triggers selection via
+                        // `onCheckedChange` when row is clicked (it toggles checked first, then calls `onClick`),
+                        // so calling `onSelect` here would cause it to fire twice for leaf nodes.
+                        if (!(type === 'tree' && mode === 'multiple')) {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+                        }
+                    }
+                }, onCheckedChange: () => {
+                    if (!disabled) {
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
                     }
                 }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', appendContent: shortcutText }, option.id));
@@ -292,6 +347,10 @@ function DropdownItem(props) {
             maxHeight: `${availableHeight}px`,
         };
     }, [maxHeight, actionHeight, headerHeight]);
+    const getIsAtBottom = useCallback((viewport) => {
+        const { scrollTop, scrollHeight, clientHeight } = viewport;
+        return scrollTop + clientHeight >= scrollHeight - 1;
+    }, []);
     useEffect(() => {
         const listElement = listRef.current;
         if (!listElement || disabled) {
@@ -321,10 +380,17 @@ function DropdownItem(props) {
             listElement.removeEventListener('keydown', handleKeyDown);
         };
     }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
-    // Handle scroll to bottom detection
+    const handleViewportReady = useCallback((viewport) => {
+        viewportRef.current = viewport;
+        listWrapperRef.current = viewport;
+        wasAtBottomRef.current = getIsAtBottom(viewport);
+    }, [getIsAtBottom]);
     useEffect(() => {
+        if (shouldUseScrollbar) {
+            return;
+        }
         const listWrapperElement = listWrapperRef.current;
-        if (!listWrapperElement || !maxHeight || (!onReachBottom && !onLeaveBottom)) {
+        if (!listWrapperElement || !maxHeight || (!onReachBottom && !onLeaveBottom && !onScroll)) {
             return;
         }
         // Initialize wasAtBottom state by checking current position
@@ -335,6 +401,14 @@ function DropdownItem(props) {
         let wasAtBottom = checkInitialState();
         const handleScroll = () => {
             const { scrollTop, scrollHeight, clientHeight } = listWrapperElement;
+            const maxScrollTop = scrollHeight - clientHeight;
+            // Call onScroll callback if provided
+            if (onScroll) {
+                onScroll({
+                    scrollTop,
+                    maxScrollTop,
+                }, listWrapperElement);
+            }
             // Check if scrolled to bottom (with 1px threshold for rounding errors)
             const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
             // Trigger onReachBottom when entering bottom state
@@ -351,9 +425,37 @@ function DropdownItem(props) {
         return () => {
             listWrapperElement.removeEventListener('scroll', handleScroll);
         };
-    }, [maxHeight, onReachBottom, onLeaveBottom]);
+    }, [maxHeight, onReachBottom, onLeaveBottom, onScroll, shouldUseScrollbar]);
+    const scrollbarEvents = useMemo(() => {
+        if (!shouldUseScrollbar || (!onReachBottom && !onLeaveBottom && !onScroll)) {
+            return undefined;
+        }
+        return {
+            scroll: (_instance, _event) => {
+                const viewport = viewportRef.current;
+                if (!viewport)
+                    return;
+                const { scrollTop, scrollHeight, clientHeight } = viewport;
+                const maxScrollTop = scrollHeight - clientHeight;
+                if (onScroll) {
+                    onScroll({
+                        scrollTop,
+                        maxScrollTop,
+                    }, viewport);
+                }
+                const isAtBottom = getIsAtBottom(viewport);
+                if (isAtBottom && !wasAtBottomRef.current) {
+                    onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+                }
+                if (!isAtBottom && wasAtBottomRef.current) {
+                    onLeaveBottom === null || onLeaveBottom === void 0 ? void 0 : onLeaveBottom();
+                }
+                wasAtBottomRef.current = isAtBottom;
+            },
+        };
+    }, [getIsAtBottom, shouldUseScrollbar, onReachBottom, onLeaveBottom, onScroll]);
     return (jsxs("ul", { "aria-label": listboxLabel || (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight
-                ? (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) }))
+                ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })))
                 : shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
 }
 

package/Dropdown/DropdownItemCard.d.ts

@@ -25,6 +25,11 @@ export interface DropdownItemCardProps {
      * When provided, the state is controlled externally.
      */
     checked?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state.
+     * Used in tree mode when some but not all children are selected.
+     */
+    indeterminate?: boolean;
     /**
      * Additional className for the list item.
      */

package/Dropdown/DropdownItemCard.js

@@ -10,7 +10,7 @@ import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 
 function DropdownItemCard(props) {
-    const { active = false, appendIcon, appendContent, followText, id, label, level: levelProp, mode, name: _name, prependIcon, subTitle, validate, disabled, checked, defaultChecked, checkSite, onCheckedChange, onClick, className, onMouseEnter, showUnderline, } = props;
+    const { active = false, appendIcon, appendContent, followText, id, label, level: levelProp, mode, name: _name, prependIcon, subTitle, validate, disabled, checked, defaultChecked, indeterminate = false, checkSite, onCheckedChange, onClick, className, onMouseEnter, showUnderline, } = props;
     const cardLabel = label || '';
     const cardName = _name || cardLabel;
     const level = levelProp || 0;
@@ -111,7 +111,7 @@ function DropdownItemCard(props) {
                     [dropdownClasses.cardActive]: active || isChecked,
                     [dropdownClasses.cardDisabled]: disabled,
                     [dropdownClasses.cardDanger]: validate === 'danger',
-                }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
+                }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, indeterminate: indeterminate, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
                                     renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 &&
                                     renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && (jsx(Typography, { color: "text-neutral-light", children: appendContent })), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
 }

package/Form/useSelectValueControl.d.ts

@@ -2,19 +2,18 @@ import { MouseEvent } from 'react';
 import { SelectValue } from '../Select/typings';
 export interface UseSelectBaseValueControl {
     onClear?(e: MouseEvent<Element>): void;
-    onChange?(newOptions: SelectValue[] | SelectValue): any;
     onClose?(): void;
 }
 export type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
     defaultValue?: SelectValue[];
     mode: 'multiple';
-    onChange?(newOptions: SelectValue[]): any;
+    onChange?(newOptions: SelectValue[]): void;
     value?: SelectValue[];
 };
 export type UseSelectSingleValueControl = UseSelectBaseValueControl & {
     defaultValue?: SelectValue;
     mode: 'single';
-    onChange?(newOption: SelectValue): any;
+    onChange?(newOption: SelectValue | null): void;
     value?: SelectValue | null;
 };
 export type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
@@ -22,7 +21,7 @@ export interface SelectBaseValueControl {
     onClear(e: MouseEvent<Element>): void;
 }
 export type SelectMultipleValueControl = SelectBaseValueControl & {
-    onChange: (v: SelectValue | null) => SelectValue[];
+    onChange: (v: SelectValue | SelectValue[] | null) => SelectValue[];
     value: SelectValue[];
 };
 export type SelectSingleValueControl = SelectBaseValueControl & {