@uzum-tech/ui 2.0.6 → 2.0.7

package/es/tree/src/TreeNodeSwitcher.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, h, inject } from 'vue';
 import { UBaseIcon, UBaseLoading, UIconSwitchTransition } from "../../_internal/index.mjs";
-import { SwitcherIcon } from "../../_internal/icons/index.mjs";
+import { ChevronRightIcon } from "../../_internal/icons/index.mjs";
 import { treeInjectionKey } from "./interface.mjs";
 export default defineComponent({
   name: 'UTreeSwitcher',
@@ -28,6 +28,23 @@ export default defineComponent({
       renderSwitcherIconRef,
       spinPropsRef
     } = inject(treeInjectionKey, null);
+    const renderSwitchIcon = () => {
+      const {
+        value: renderSwitcherIcon
+      } = renderSwitcherIconRef;
+      return h(UIconSwitchTransition, null, {
+        default: () => renderSwitcherIcon ? renderSwitcherIcon({
+          expanded: props.expanded,
+          selected: props.selected,
+          option: props.tmNode.rawNode
+        }) : h(UBaseIcon, {
+          clsPrefix: props.clsPrefix,
+          key: "switcher"
+        }, {
+          default: () => h(ChevronRightIcon, null)
+        })
+      });
+    };
     return () => {
       const {
         clsPrefix,
@@ -45,31 +62,12 @@ export default defineComponent({
         onClick: onClick
       }, h("div", {
         class: `${clsPrefix}-tree-node-switcher__icon`
-      }, h(UIconSwitchTransition, null, {
-        default: () => {
-          if (props.loading) {
-            return h(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
-          }) : h(UBaseIcon, {
-            clsPrefix: clsPrefix,
-            key: "switcher"
-          }, {
-            default: () => h(SwitcherIcon, null)
-          });
-        }
-      })));
+      }, props.loading ? h(UBaseLoading, Object.assign({
+        clsPrefix: clsPrefix,
+        key: "loading",
+        radius: 85,
+        strokeWidth: 20
+      }, spinPropsRef === null || spinPropsRef === void 0 ? void 0 : spinPropsRef.value)) : renderSwitchIcon()));
     };
   }
 });

package/es/tree/src/styles/index.cssr.mjs

@@ -4,6 +4,8 @@ import { c, cB, cE, cM, cNotM } from "../../../_utils/cssr/index.mjs";
 const iconSwitchTransitionNode = iconSwitchTransition();
 // vars:
 // --u-arrow-color
+// --u-switcher-color
+// --u-switcher-size
 // --u-bezier
 // --u-font-size
 // --u-node-border-radius
@@ -95,19 +97,20 @@ export default cB('tree', `
  vertical-align: bottom;
  `, [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;
  `, [cB('icon', [iconSwitchTransitionNode]), cB('base-loading', `
  color: var(--u-loading-color);
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
  `, [iconSwitchTransitionNode]), cB('base-icon', [iconSwitchTransitionNode])]), cM('hide', 'visibility: hidden;'), cM('expanded', 'transform: rotate(90deg);')]), cB('tree-node-checkbox', `
  display: inline-flex;
  height: var(--u-node-content-height);

package/es/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").Theme<"Tree", {
     nodeColorPressed: string;
     nodeColorActive: string;
     arrowColor: string;
+    switcherColor: string;
+    switcherSize: string;
     nodeTextColor: string;
     nodeTextColorDisabled: string;
     loadingColor: string;

package/es/tree/styles/light.mjs

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

package/es/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/es/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/es/tree-select/src/TreeSelect.mjs

@@ -13,6 +13,7 @@ import { createTreeMateOptions, treeSharedProps } from "../../tree/src/Tree.mjs"
 import { useMergedCheckStrategy } from "../../tree/src/utils.mjs";
 import { treeSelectLight } from "../styles/index.mjs";
 import { treeSelectInjectionKey } from "./interface.mjs";
+import { scanReachedRootOptions } from "./scroll-option-end.mjs";
 import style from "./styles/index.cssr.mjs";
 import { treeOption2SelectOption, treeOption2SelectOptionWithPath } from "./utils.mjs";
 export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), {
@@ -83,6 +84,8 @@ export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.
   nodeProps: Function,
   onBlur: Function,
   onFocus: Function,
+  onScroll: [Function, Array],
+  onScrollOptionEnd: [Function, Array],
   onLoad: Function,
   onUpdateShow: [Function, Array],
   onUpdateValue: [Function, Array],
@@ -162,6 +165,7 @@ export default defineComponent({
     const controlledExpandedKeysRef = toRef(props, 'expandedKeys');
     const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
     const focusedRef = ref(false);
+    let visibleRootEndKeys = new Set();
     const mergedPlaceholderRef = computed(() => {
       const {
         placeholder
@@ -297,19 +301,19 @@ export default defineComponent({
       }
       uncontrolledExpandedKeysRef.value = keys;
     }
-    function doFocus(e) {
+    function doFocus(event) {
       const {
         onFocus
       } = props;
-      if (onFocus) onFocus(e);
+      if (onFocus) onFocus(event);
       triggerFormFocus();
     }
-    function doBlur(e) {
+    function doBlur(event) {
       closeMenu();
       const {
         onBlur
       } = props;
-      if (onBlur) onBlur(e);
+      if (onBlur) onBlur(event);
       triggerFormBlur();
     }
     function closeMenu() {
@@ -326,11 +330,12 @@ export default 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(getPreciseEventTarget(e)))) {
+        if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(event)))) {
           // outside select, don't need to return focus
           closeMenu();
         }
@@ -390,36 +395,36 @@ export default 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)) return;
+      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)) return;
+      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;
@@ -481,24 +486,24 @@ export default defineComponent({
         }
       }
     }
-    function handlePatternInput(e) {
+    function handlePatternInput(event) {
       const {
         value
-      } = e.target;
+      } = 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();
@@ -506,17 +511,17 @@ export default defineComponent({
         } else {
           openMenu();
         }
-        e.preventDefault();
-      } else if (e.key === 'Escape') {
+        event.preventDefault();
+      } else if (event.key === 'Escape') {
         if (mergedShowRef.value) {
-          markEventEffectPerformed(e);
+          markEventEffectPerformed(event);
           closeMenu();
           focusSelection();
         }
       } else {
         if (mergedShowRef.value) {
-          treeHandleKeydown(e);
-        } else if (e.key === 'ArrowDown') {
+          treeHandleKeydown(event);
+        } else if (event.key === 'ArrowDown') {
           openMenu();
         }
       }
@@ -525,10 +530,33 @@ export default 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 (!happensIn(e, 'action')) e.preventDefault();
+      if (!happensIn(event, 'action')) event.preventDefault();
+    }
+    function doScroll(event) {
+      const {
+        onScroll
+      } = props;
+      if (onScroll) call(onScroll, event);
+    }
+    function doScrollOptionEnd(option, event) {
+      props.onScrollOptionEnd && 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
+      } = scanReachedRootOptions(scrollElement, dataTreeMateRef.value.treeNodes, mergedExpandedKeysRef.value, visibleRootEndKeys);
+      visibleRootEndKeys = visibleKeys;
+      for (const reachedOption of reachedOptions) {
+        doScrollOptionEnd(reachedOption, event);
+      }
     }
     const selectionRenderTagRef = computed(() => {
       const {
@@ -702,6 +730,7 @@ export default defineComponent({
       handleKeydown,
       handleTabOut,
       handleMenuMousedown,
+      handleTreeScroll,
       mergedTheme: themeRef,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
@@ -836,7 +865,8 @@ export default defineComponent({
               onLoad: this.onLoad,
               onUpdateCheckedKeys: this.handleUpdateCheckedKeys,
               onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys,
-              onUpdateExpandedKeys: this.doUpdateExpandedKeys
+              onUpdateExpandedKeys: this.doUpdateExpandedKeys,
+              onScroll: this.handleTreeScroll
             }), resolveWrappedSlot($slots.action, children => {
               return children ? h("div", {
                 class: `${mergedClsPrefix}-tree-select-menu__action`,

package/es/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/es/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/es/tree-select/src/scroll-option-end.mjs

@@ -0,0 +1,28 @@
+import { createDataKey } from "../../_utils/index.mjs";
+function isVerticallyVisibleWithin(element, containerRect) {
+  const elementRect = element.getBoundingClientRect();
+  return elementRect.top < containerRect.bottom && elementRect.bottom > containerRect.top;
+}
+export 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="${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/es/tree-select/styles/light.d.ts

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

package/es/version.d.ts

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

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.6';
+export default '2.0.7';

package/lib/_internal/icons/index.d.ts

@@ -55,7 +55,6 @@ export { default as SearchIcon } from './Search';
 export { default as SendFilled } from './SendFilled';
 export { default as SiderUnionBorder } from './SiderUnionBorder';
 export { default as SuccessIcon } from './Success';
-export { default as SwitcherIcon } from './Switcher';
 export { default as TimeIcon } from './Time';
 export { default as ToIcon } from './To';
 export { default as TrashIcon } from './Trash';

package/lib/_internal/icons/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RetryIcon = exports.ResizeSmallIcon = exports.RemoveIcon = exports.Refresh = exports.PhotoIcon = exports.PersonOutline = exports.PersonNote = exports.OzbekFlag = exports.MoreIcon = exports.MdTime = exports.LogoutIcon = exports.InfoOutlineIcon = exports.InfoIcon = exports.InactiveIcon = exports.ForwardIcon = exports.FilterIcon = exports.FileHeart = exports.FileIcon = exports.FastForwardIcon = exports.FastBackwardIcon = exports.EyeOffIcon = exports.EyeIcon = exports.ErrorIcon = exports.EmptyIcon = exports.EditIcon = exports.DragHandleRound = exports.DownloadIcon = exports.DismissCircleIcon = exports.DateIcon = exports.ContentCopy = exports.CloseIcon = exports.ClearSmallIcon = exports.ClearIcon = exports.ChevronRightIcon = exports.ChevronLeftIcon = exports.ChevronDownOutline = exports.ChevronDownFilledIcon = exports.ChevronDownIcon = exports.CheckmarkDoneSharp = exports.CheckmarkCircleIcon = exports.CheckmarkIcon = exports.CancelIcon = exports.BurgerMenuIcon = exports.BackwardIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowHookUpRight = exports.ArrowDownIcon = exports.ArrowBackIcon = exports.AddIcon = void 0;
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.WarningIcon = exports.TrashIcon = exports.ToIcon = exports.TimeIcon = exports.SwitcherIcon = exports.SuccessIcon = exports.SiderUnionBorder = exports.SendFilled = exports.SearchIcon = exports.RussiaFlag = exports.RotateCounterclockwiseIcon = exports.RotateClockwiseIcon = void 0;
+exports.ZoomOutIcon = exports.ZoomInIcon = exports.WarningIcon = exports.TrashIcon = exports.ToIcon = exports.TimeIcon = exports.SuccessIcon = exports.SiderUnionBorder = exports.SendFilled = exports.SearchIcon = exports.RussiaFlag = exports.RotateCounterclockwiseIcon = exports.RotateClockwiseIcon = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var ArrowBack_1 = require("./ArrowBack");
@@ -119,8 +119,6 @@ var SiderUnionBorder_1 = require("./SiderUnionBorder");
 Object.defineProperty(exports, "SiderUnionBorder", { enumerable: true, get: function () { return __importDefault(SiderUnionBorder_1).default; } });
 var Success_1 = require("./Success");
 Object.defineProperty(exports, "SuccessIcon", { enumerable: true, get: function () { return __importDefault(Success_1).default; } });
-var Switcher_1 = require("./Switcher");
-Object.defineProperty(exports, "SwitcherIcon", { enumerable: true, get: function () { return __importDefault(Switcher_1).default; } });
 var Time_1 = require("./Time");
 Object.defineProperty(exports, "TimeIcon", { enumerable: true, get: function () { return __importDefault(Time_1).default; } });
 var To_1 = require("./To");