@uzum-tech/ui 2.0.6 → 2.0.7

package/lib/tree/src/TreeNodeSwitcher.js

@@ -24,6 +24,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         const { renderSwitcherIconRef, spinPropsRef } = (0, vue_1.inject)(interface_1.treeInjectionKey, null);
+        const renderSwitchIcon = () => {
+            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+            return ((0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
+                default: () => renderSwitcherIcon ? (renderSwitcherIcon({
+                    expanded: props.expanded,
+                    selected: props.selected,
+                    option: props.tmNode.rawNode
+                })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: props.clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null) }))
+            }));
+        };
         return () => {
             const { clsPrefix, expanded, hide, indent, onClick } = props;
             return ((0, vue_1.h)("span", { "data-switcher": true, class: [
@@ -31,20 +41,7 @@ exports.default = (0, vue_1.defineComponent)({
                     expanded && `${clsPrefix}-tree-node-switcher--expanded`,
                     hide && `${clsPrefix}-tree-node-switcher--hide`
                 ], style: { width: `${indent}px` }, onClick: onClick },
-                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
-                    (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
-                        default: () => {
-                            if (props.loading) {
-                                return ((0, vue_1.h)(_internal_1.UBaseLoading, Object.assign({ clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value)));
-                            }
-                            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
-                            return renderSwitcherIcon ? (renderSwitcherIcon({
-                                expanded: props.expanded,
-                                selected: props.selected,
-                                option: props.tmNode.rawNode
-                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) }));
-                        }
-                    }))));
+                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` }, props.loading ? ((0, vue_1.h)(_internal_1.UBaseLoading, Object.assign({ clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value))) : (renderSwitchIcon()))));
         };
     }
 });

package/lib/tree/src/styles/index.cssr.js

@@ -9,6 +9,8 @@ const cssr_1 = require("../../../_utils/cssr");
 const iconSwitchTransitionNode = (0, icon_switch_cssr_1.iconSwitchTransition)();
 // vars:
 // --u-arrow-color
+// --u-switcher-color
+// --u-switcher-size
 // --u-bezier
 // --u-font-size
 // --u-node-border-radius
@@ -100,19 +102,20 @@ exports.default = (0, cssr_1.cB)('tree', `
  vertical-align: bottom;
  `, [(0, cssr_1.cE)('icon', `
  position: relative;
- height: 14px;
- width: 14px;
+ height: var(--u-switcher-size);
+ width: var(--u-switcher-size);
  display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
  color: var(--u-arrow-color);
- transition: color .3s var(--u-bezier);
+ background-color: var(--u-switcher-color);
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
  font-size: 14px;
  `, [(0, cssr_1.cB)('icon', [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-loading', `
  color: var(--u-loading-color);
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
  `, [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-icon', [iconSwitchTransitionNode])]), (0, cssr_1.cM)('hide', 'visibility: hidden;'), (0, cssr_1.cM)('expanded', 'transform: rotate(90deg);')]), (0, cssr_1.cB)('tree-node-checkbox', `
  display: inline-flex;
  height: var(--u-node-content-height);

package/lib/tree/styles/light.d.ts

@@ -9,6 +9,8 @@ export declare function self(vars: ThemeCommonVars): {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;
@@ -25,6 +27,8 @@ declare const treeLight: import("../../_mixins/use-theme").Theme<"Tree", {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;

package/lib/tree/styles/light.js

@@ -18,6 +18,8 @@ function self(vars) {
         nodeColorPressed: elementsQuaternary,
         nodeColorActive: brandPrimary100,
         arrowColor: elementsPrimary,
+        switcherColor: elementsTertiary,
+        switcherSize: '22px',
         nodeTextColor: textPrimary,
         nodeTextColorDisabled: textSecondary,
         loadingColor: elementsPrimary,

package/lib/tree-select/index.d.ts

@@ -1,5 +1,5 @@
 export type { TreeOverrideNodeClickBehavior as TreeSelectOverrideNodeClickBehavior, TreeOverrideNodeClickBehaviorReturn as TreeSelectOverrideNodeClickBehaviorReturn } from '../tree';
-export type { TreeSelectInst, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';
+export type { OnScrollOptionEnd, TreeSelectInst, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';
 export type * from './src/public-types';
 export { treeSelectProps, default as UTreeSelect } from './src/TreeSelect';
 export type { TreeSelectProps, TreeSelectSlots } from './src/TreeSelect';

package/lib/tree-select/src/TreeSelect.d.ts

@@ -7,15 +7,17 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { SelectBaseOption, SelectOption } from '../../select/src/interface';
 import type { InternalTreeInst, Key, TreeOption } from '../../tree/src/interface';
-import type { OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './interface';
+import type { OnScrollOptionEnd, OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './interface';
 type OnLoad = (node: TreeSelectOption) => Promise<void>;
 export declare const treeSelectProps: {
     readonly renderLabel: PropType<TreeSelectRenderLabel>;
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -139,6 +141,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -391,6 +395,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -643,6 +649,8 @@ export declare const treeSelectProps: {
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -888,8 +896,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -1013,6 +1023,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -1265,6 +1277,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -1517,6 +1531,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -1815,22 +1831,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }) => void;
     handleMenuLeave: () => void;
     handleTriggerClick: () => void;
-    handleMenuClickoutside: (e: MouseEvent) => void;
+    handleMenuClickoutside: (event: MouseEvent) => void;
     handleUpdateCheckedKeys: (keys: Key[], _: unknown, meta: {
         node: TreeOption | null;
         action: "check" | "uncheck";
     }) => void;
     handleUpdateIndeterminateKeys: (keys: Key[]) => void;
-    handleTriggerFocus: (e: FocusEvent) => void;
-    handleTriggerBlur: (e: FocusEvent) => void;
-    handleMenuFocusin: (e: FocusEvent) => void;
-    handleMenuFocusout: (e: FocusEvent) => void;
-    handleClear: (e: MouseEvent) => void;
+    handleTriggerFocus: (event: FocusEvent) => void;
+    handleTriggerBlur: (event: FocusEvent) => void;
+    handleMenuFocusin: (event: FocusEvent) => void;
+    handleMenuFocusout: (event: FocusEvent) => void;
+    handleClear: (event: MouseEvent) => void;
     handleDeleteOption: (option: SelectBaseOption) => void;
-    handlePatternInput: (e: InputEvent) => void;
-    handleKeydown: (e: KeyboardEvent) => void;
+    handlePatternInput: (event: InputEvent) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
     handleTabOut: () => void;
-    handleMenuMousedown: (e: MouseEvent) => void;
+    handleMenuMousedown: (event: MouseEvent) => void;
+    handleTreeScroll: (event: Event) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: import("../..").ThemeCommonVars;
         self: {
@@ -1854,6 +1871,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 nodeColorPressed: string;
                 nodeColorActive: string;
                 arrowColor: string;
+                switcherColor: string;
+                switcherSize: string;
                 nodeTextColor: string;
                 nodeTextColorDisabled: string;
                 loadingColor: string;
@@ -2228,8 +2247,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly renderPrefix: PropType<TreeSelectRenderPrefix>;
     readonly renderSuffix: PropType<TreeSelectRenderSuffix>;
     readonly nodeProps: PropType<TreeSelectNodeProps>;
-    readonly onBlur: PropType<(e: FocusEvent) => void>;
-    readonly onFocus: PropType<(e: FocusEvent) => void>;
+    readonly onBlur: PropType<(event: FocusEvent) => void>;
+    readonly onFocus: PropType<(event: FocusEvent) => void>;
+    readonly onScroll: PropType<MaybeArray<(event: Event) => void>>;
+    readonly onScrollOptionEnd: PropType<MaybeArray<OnScrollOptionEnd>>;
     readonly onLoad: PropType<OnLoad>;
     readonly onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -2353,6 +2374,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -2605,6 +2628,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;
@@ -2857,6 +2882,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             nodeColorPressed: string;
             nodeColorActive: string;
             arrowColor: string;
+            switcherColor: string;
+            switcherSize: string;
             nodeTextColor: string;
             nodeTextColorDisabled: string;
             loadingColor: string;

package/lib/tree-select/src/TreeSelect.js

@@ -19,6 +19,7 @@ const Tree_1 = require("../../tree/src/Tree");
 const utils_1 = require("../../tree/src/utils");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
+const scroll_option_end_1 = require("./scroll-option-end");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const utils_2 = require("./utils");
 exports.treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
@@ -54,7 +55,7 @@ exports.treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assig
     }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
-    }, status: String, renderTag: Function }), Tree_1.treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
+    }, status: String, renderTag: Function }), Tree_1.treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onScroll: [Function, Array], onScrollOptionEnd: [Function, Array], onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
     /**
      * @deprecated
      */
@@ -117,6 +118,7 @@ exports.default = (0, vue_1.defineComponent)({
         const controlledExpandedKeysRef = (0, vue_1.toRef)(props, 'expandedKeys');
         const mergedExpandedKeysRef = (0, vooks_1.useMergedState)(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
         const focusedRef = (0, vue_1.ref)(false);
+        let visibleRootEndKeys = new Set();
         const mergedPlaceholderRef = (0, vue_1.computed)(() => {
             const { placeholder } = props;
             if (placeholder !== undefined)
@@ -232,17 +234,17 @@ exports.default = (0, vue_1.defineComponent)({
             }
             uncontrolledExpandedKeysRef.value = keys;
         }
-        function doFocus(e) {
+        function doFocus(event) {
             const { onFocus } = props;
             if (onFocus)
-                onFocus(e);
+                onFocus(event);
             triggerFormFocus();
         }
-        function doBlur(e) {
+        function doBlur(event) {
             closeMenu();
             const { onBlur } = props;
             if (onBlur)
-                onBlur(e);
+                onBlur(event);
             triggerFormBlur();
         }
         function closeMenu() {
@@ -259,11 +261,12 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleMenuLeave() {
             patternRef.value = '';
+            visibleRootEndKeys = new Set();
         }
-        function handleMenuClickoutside(e) {
+        function handleMenuClickoutside(event) {
             var _a;
             if (mergedShowRef.value) {
-                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains((0, seemly_1.getPreciseEventTarget)(e)))) {
+                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains((0, seemly_1.getPreciseEventTarget)(event)))) {
                     // outside select, don't need to return focus
                     closeMenu();
                 }
@@ -316,40 +319,40 @@ exports.default = (0, vue_1.defineComponent)({
                 doUpdateIndeterminateKeys(keys, getOptionsByKeys(keys));
             }
         }
-        function handleTriggerFocus(e) {
+        function handleTriggerFocus(event) {
             var _a;
-            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
                 return;
             focusedRef.value = true;
-            doFocus(e);
+            doFocus(event);
         }
-        function handleTriggerBlur(e) {
+        function handleTriggerBlur(event) {
             var _a;
-            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+            if ((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
                 return;
             focusedRef.value = false;
-            doBlur(e);
+            doBlur(event);
         }
-        function handleMenuFocusin(e) {
+        function handleMenuFocusin(event) {
             var _a, _b, _c;
-            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
-                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
+                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(event.relatedTarget))) {
                 return;
             }
             focusedRef.value = true;
-            doFocus(e);
+            doFocus(event);
         }
-        function handleMenuFocusout(e) {
+        function handleMenuFocusout(event) {
             var _a, _b, _c;
-            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
-                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(e.relatedTarget))) {
+            if (((_a = menuElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))
+                || ((_c = (_b = triggerInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.contains(event.relatedTarget))) {
                 return;
             }
             focusedRef.value = false;
-            doBlur(e);
+            doBlur(event);
         }
-        function handleClear(e) {
-            e.stopPropagation();
+        function handleClear(event) {
+            event.stopPropagation();
             const { multiple } = props;
             if (!multiple && props.filterable) {
                 closeMenu();
@@ -399,20 +402,20 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        function handlePatternInput(e) {
-            const { value } = e.target;
+        function handlePatternInput(event) {
+            const { value } = event.target;
             patternRef.value = value;
         }
-        function treeHandleKeydown(e) {
+        function treeHandleKeydown(event) {
             const { value: treeInst } = treeInstRef;
             if (treeInst) {
-                treeInst.handleKeydown(e);
+                treeInst.handleKeydown(event);
             }
         }
-        function handleKeydown(e) {
-            if (e.key === 'Enter') {
+        function handleKeydown(event) {
+            if (event.key === 'Enter') {
                 if (mergedShowRef.value) {
-                    treeHandleKeydown(e);
+                    treeHandleKeydown(event);
                     if (!props.multiple) {
                         closeMenu();
                         focusSelection();
@@ -421,20 +424,20 @@ exports.default = (0, vue_1.defineComponent)({
                 else {
                     openMenu();
                 }
-                e.preventDefault();
+                event.preventDefault();
             }
-            else if (e.key === 'Escape') {
+            else if (event.key === 'Escape') {
                 if (mergedShowRef.value) {
-                    (0, _utils_1.markEventEffectPerformed)(e);
+                    (0, _utils_1.markEventEffectPerformed)(event);
                     closeMenu();
                     focusSelection();
                 }
             }
             else {
                 if (mergedShowRef.value) {
-                    treeHandleKeydown(e);
+                    treeHandleKeydown(event);
                 }
-                else if (e.key === 'ArrowDown') {
+                else if (event.key === 'ArrowDown') {
                     openMenu();
                 }
             }
@@ -443,11 +446,33 @@ exports.default = (0, vue_1.defineComponent)({
             closeMenu();
             focusSelection();
         }
-        function handleMenuMousedown(e) {
+        function handleMenuMousedown(event) {
             // If there's an action slot later, we need to check if mousedown happens
             // in action panel
-            if (!(0, seemly_1.happensIn)(e, 'action'))
-                e.preventDefault();
+            if (!(0, seemly_1.happensIn)(event, 'action'))
+                event.preventDefault();
+        }
+        function doScroll(event) {
+            const { onScroll } = props;
+            if (onScroll)
+                (0, _utils_1.call)(onScroll, event);
+        }
+        function doScrollOptionEnd(option, event) {
+            props.onScrollOptionEnd && (0, _utils_1.call)(props.onScrollOptionEnd, option, event);
+        }
+        function handleTreeScroll(event) {
+            doScroll(event);
+            if (!props.onScrollOptionEnd)
+                return;
+            const scrollElement = (event.currentTarget
+                || event.target);
+            if (!scrollElement)
+                return;
+            const { reachedOptions, visibleKeys } = (0, scroll_option_end_1.scanReachedRootOptions)(scrollElement, dataTreeMateRef.value.treeNodes, mergedExpandedKeysRef.value, visibleRootEndKeys);
+            visibleRootEndKeys = visibleKeys;
+            for (const reachedOption of reachedOptions) {
+                doScrollOptionEnd(reachedOption, event);
+            }
         }
         const selectionRenderTagRef = (0, vue_1.computed)(() => {
             const { renderTag } = props;
@@ -556,7 +581,8 @@ exports.default = (0, vue_1.defineComponent)({
             handlePatternInput,
             handleKeydown,
             handleTabOut,
-            handleMenuMousedown, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+            handleMenuMousedown,
+            handleTreeScroll, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         const { mergedTheme, mergedClsPrefix, $slots } = this;
@@ -586,7 +612,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
                                     (0, vue_1.h)(tree_1.UTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, disabledField: this.disabledField, childrenField: this.childrenField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, renderLabel: this.renderLabel, renderPrefix: this.renderPrefix, renderSuffix: this.renderSuffix, renderSwitcherIcon: this.renderSwitcherIcon, nodeProps: this.nodeProps, virtualScroll: this.consistentMenuWidth && this.virtualScroll, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, (0, _utils_1.resolveSlot)($slots.empty, () => [
                                             (0, vue_1.h)(empty_1.UEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
-                                        ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys }),
+                                        ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys, onScroll: this.handleTreeScroll }),
                                     (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => {
                                         return children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__action`, "data-action": true }, children)) : null;
                                     }),

package/lib/tree-select/src/interface.d.ts

@@ -1,4 +1,4 @@
-import type { TreeMate, TreeNode } from 'treemate';
+import type { Key, TreeMate, TreeNode } from 'treemate';
 import type { HTMLAttributes, Ref, VNodeChild } from 'vue';
 import type { TreeOption, TreeOptionBase } from '../../tree/src/interface';
 export type TreeSelectOption = Omit<TreeOptionBase, 'checkboxDisabled' | 'isLeaf' | 'children'> & {
@@ -28,6 +28,11 @@ export type OnUpdateValueImpl = (value: string | number | (string | number) | st
 }) => void;
 export type OnUpdateIndeterminateKeysImpl = (value: string | number | (string | number) | string[] | number[] | Array<string | number> | null, option: TreeSelectOption | null | Array<TreeSelectOption | null>) => void;
 export type Value = string | number | Array<string | number> | null;
+export type OnScrollOptionEnd = (option: TreeSelectOption, event: Event) => void;
+export interface ScrollOptionEndScanResult {
+    reachedOptions: TreeSelectOption[];
+    visibleKeys: Set<Key>;
+}
 export interface TreeSelectInjection {
     pendingNodeKeyRef: Ref<string | number | null>;
     dataTreeMate: Ref<TreeMate<TreeOption>>;

package/lib/tree-select/src/scroll-option-end.d.ts

@@ -0,0 +1,3 @@
+import type { Key } from '../../tree/src/interface';
+import type { ScrollOptionEndScanResult, TreeSelectTmNode } from './interface';
+export declare function scanReachedRootOptions(scrollElement: HTMLElement, rootNodes: TreeSelectTmNode[], expandedKeys: Key[] | undefined, previousVisibleKeys: Set<Key>): ScrollOptionEndScanResult;

package/lib/tree-select/src/scroll-option-end.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scanReachedRootOptions = scanReachedRootOptions;
+const _utils_1 = require("../../_utils");
+function isVerticallyVisibleWithin(element, containerRect) {
+    const elementRect = element.getBoundingClientRect();
+    return (elementRect.top < containerRect.bottom
+        && elementRect.bottom > containerRect.top);
+}
+function scanReachedRootOptions(scrollElement, rootNodes, expandedKeys, previousVisibleKeys) {
+    const containerRect = scrollElement.getBoundingClientRect();
+    const visibleKeys = new Set();
+    const reachedOptions = [];
+    for (const rootNode of rootNodes) {
+        const { children } = rootNode;
+        if (!(children === null || children === void 0 ? void 0 : children.length) || !(expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.includes(rootNode.key)))
+            continue;
+        const lastChild = children[children.length - 1];
+        const lastChildElement = scrollElement.querySelector(`[data-key="${(0, _utils_1.createDataKey)(lastChild.key)}"]`);
+        const isHiddenOrMissing = !lastChildElement
+            || !isVerticallyVisibleWithin(lastChildElement, containerRect);
+        if (isHiddenOrMissing)
+            continue;
+        visibleKeys.add(rootNode.key);
+        if (!previousVisibleKeys.has(rootNode.key)) {
+            reachedOptions.push(rootNode.rawNode);
+        }
+    }
+    return { reachedOptions, visibleKeys };
+}

package/lib/tree-select/styles/light.d.ts

@@ -30,6 +30,8 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
         nodeColorPressed: string;
         nodeColorActive: string;
         arrowColor: string;
+        switcherColor: string;
+        switcherSize: string;
         nodeTextColor: string;
         nodeTextColorDisabled: string;
         loadingColor: string;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.6";
+declare const _default: "2.0.7";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.0.6';
+exports.default = '2.0.7';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {
     "name": "KapitalLab",
@@ -59,7 +59,7 @@
     "build:themes": "tsc -b --force themes/tusimple/tsconfig.esm.json && tsc -b --force themes/tusimple/tsconfig.cjs.json",
     "build:site": "bash ./scripts/pre-build-site/pre-build-site.sh && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh",
     "clean": "rimraf site lib es dist node_modules/@uzum-tech/ui themes/tusimple/es themes/tusimple/lib",
-    "release:package": "pnpm run test && pnpm run build:package && npm publish --no-git-checks",
+    "release:package": "npm login && pnpm install && pnpm run test && pnpm run build:package && npm publish --no-git-checks",
     "release:changelog": "tsx scripts/release-changelog.ts",
     "lint": "pnpm run lint:code && pnpm run lint:type",
     "lint:type": "pnpm run lint:src-type && pnpm run lint:demo-type",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -15890,6 +15890,26 @@
                   "since": "2.27.0"
                 }
               },
+              {
+                "name": "scroll",
+                "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",
+                "type": "(e: Event) => void",
+                "description": "Callback fired on every scroll of the options menu. Useful for loading options asynchronously.",
+                "default": "undefined",
+                "description-sections": {
+                  "since": "2.0.7"
+                }
+              },
+              {
+                "name": "scroll-option-end",
+                "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",
+                "type": "(option: TreeSelectOption, e: Event) => void",
+                "description": "Callback fired when the last child of a top-level (root) expanded branch becomes visible in the menu. Called per root branch with that root's option.",
+                "default": "undefined",
+                "description-sections": {
+                  "since": "2.0.7"
+                }
+              },
               {
                 "name": "update:expanded-keys",
                 "doc-url": "https://uzum-ui.kapitalbank.uz/en-US/os-theme/components/tree-select",

package/es/_internal/icons/Switcher.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;