@canlooks/can-ui 0.0.77 → 0.0.79

package/dist/cjs/components/cascade/cascade.js

@@ -60,7 +60,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setInnerOptions(await loadOptions(searchValue, parent));
     }, loading);
     (0, react_1.useEffect)(() => {
-        if (loadOptions && !searchable && !innerOpen.current && (0, utils_1.toArray)(innerValue)?.length) {
+        if (loadOptions && !searchable && !innerOpen.current && !(0, utils_1.isNoValue)(innerValue)) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }

package/dist/cjs/components/dateTimePicker/timer.js

@@ -40,7 +40,7 @@ function TimerItem({ type, value, onChange }) {
         return false;
     };
     const scrollerRef = (0, react_1.useRef)(null);
-    const selectedItemRef = (0, popper_1.useScrollToSelected)(scrollerRef);
+    const selectedItemRef = (0, popper_1.useScrollToTarget)(scrollerRef);
     const renderItems = (count) => {
         const ret = [];
         for (let i = 0; i < count; i++) {

package/dist/cjs/components/inputBase/inputBase.js

@@ -57,13 +57,10 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
         }
     };
     const shouldRenderClearButton = () => {
-        if (!clearable || disabled || readOnly || (0, utils_1.isUnset)(innerValue.current)) {
+        if (!clearable || disabled || readOnly) {
             return false;
         }
-        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
-            return !!innerValue.current.length;
-        }
-        return true;
+        return (0, utils_1.isNoValue)(innerValue.current);
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.mergeComponentProps)(props, {
             ref: innerRef,

package/dist/cjs/components/optionsBase/optionsBase.d.ts

@@ -4,6 +4,10 @@ import { LoadingProps } from '../loading';
 import { OptionType } from '../selectionContext';
 import { Id } from '../../types';
 export interface MenuOptionType<V extends Id = Id> extends Omit<MenuItemProps, 'children'>, Omit<OptionType<V>, 'children'> {
+    /**
+     * 若指定为`true`，则弹框打开时会自动滚动到该选项，默认为`false`
+     */
+    scrollHere?: boolean;
 }
 export type OptionsBaseSharedProps<O extends MenuOptionType<V>, V extends Id = Id> = {
     showCheckbox?: boolean;

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -68,14 +68,14 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
      * 渲染部分
      */
     const scrollerRef = (0, react_1.useRef)(null);
-    const selectedItemRef = (0, popper_1.useScrollToSelected)(scrollerRef);
+    const selectedItemRef = (0, popper_1.useScrollToTarget)(scrollerRef);
     const syncOnToggleSelected = (0, utils_1.useSync)(onToggleSelected);
     const renderedOptions = (0, react_1.useMemo)(() => {
         if (!filteredOptions?.length) {
             return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
         }
         const makeProps = (params) => ({
-            ref: params.selected ? selectedItemRef : void 0,
+            ref: params.scrollHere || params.selected ? selectedItemRef : void 0,
             showCheckbox,
             selected: params.selected,
             focused: verticalIndex.current === params.index,
@@ -84,11 +84,11 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 : params.label,
             onClick: e => {
                 e.stopPropagation();
-                params.opt.onClick?.(e);
+                params.opt?.onClick?.(e);
                 syncOnToggleSelected.current?.(params.value, e);
             },
             onPointerEnter: e => {
-                params.opt.onPointerEnter?.(e);
+                params.opt?.onPointerEnter?.(e);
                 setVerticalIndex(-1);
             },
             children: null
@@ -97,13 +97,13 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             return filteredOptions.map((opt, index) => {
                 const value = opt[primaryKey];
                 const label = opt[labelKey] ?? value;
-                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: value, ...opt, ...makeProps({
-                        opt,
+                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: value, ...(0, utils_1.mergeComponentProps)(opt, makeProps({
                         label,
                         value,
                         index,
-                        selected: (0, utils_1.isSelected)(value, selectedValue)
-                    }) }, opt.key ?? value ?? index));
+                        selected: (0, utils_1.isSelected)(value, selectedValue),
+                        scrollHere: opt.scrollHere
+                    })) }, opt.key ?? value ?? index));
             });
         }
         // children
@@ -111,13 +111,14 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             if (!(0, react_1.isValidElement)(c)) {
                 return c;
             }
-            const { value, label } = c.props;
+            const { value, label, scrollHere } = c.props;
             return (0, react_1.cloneElement)(c, makeProps({
                 opt: c.props,
                 label,
                 value: value,
                 index,
-                selected: (0, utils_1.isSelected)(value, selectedValue)
+                selected: (0, utils_1.isSelected)(value, selectedValue),
+                scrollHere
             }));
         });
     }, [filteredOptions, selectedValue, verticalIndex.current, showCheckbox]);

package/dist/cjs/components/popper/popperContext.d.ts

@@ -17,4 +17,4 @@ export declare function usePopperContext(): {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-export declare function useScrollToSelected<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;
+export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;

package/dist/cjs/components/popper/popperContext.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopperContext = void 0;
 exports.usePopperContext = usePopperContext;
-exports.useScrollToSelected = useScrollToSelected;
+exports.useScrollToTarget = useScrollToTarget;
 const react_1 = require("react");
 exports.PopperContext = (0, react_1.createContext)({
     autoClose: false,
@@ -20,13 +20,13 @@ function usePopperContext() {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-function useScrollToSelected(scrollerRef) {
+function useScrollToTarget(scrollerRef) {
     const ref = (0, react_1.useRef)(null);
     const { beforeOpenCallbacks } = usePopperContext();
     (0, react_1.useEffect)(() => {
         const beforeOpen = () => {
             if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
-                scrollerRef.current.scrollTop = ref.current.offsetTop - scrollerRef.current.clientHeight / 2 + ref.current.clientHeight / 2;
+                scrollerRef.current.scrollTop = ref.current.offsetTop + ref.current.clientHeight / 2 - scrollerRef.current.clientHeight / 2;
             }
         };
         beforeOpenCallbacks.add(beforeOpen);

package/dist/cjs/components/select/select.js

@@ -115,7 +115,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                 value: innerValue,
                 onClear,
                 onBlur
-            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [(0, utils_1.isNoValue)(innerValue)
                         ? (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
                         : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})

package/dist/cjs/components/textarea/textarea.d.ts

@@ -1,9 +1,15 @@
-import { Ref, ComponentProps } from 'react';
+import { Ref, ComponentProps, CSSProperties } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
     textareaProps?: ComponentProps<'textarea'>;
     textareaRef?: Ref<HTMLTextAreaElement>;
     rows?: number;
     fullWidth?: boolean;
+    /**
+     * @enum {@link fullWidth} 为`true`时，默认为`vertical`
+     * @enum {@link fullWidth} 为`false`时，默认为`both`
+     * @enum 若设为`none`，则不可调整尺寸
+     */
+    resize?: CSSProperties['resize'];
 }
-export declare const Textarea: import("react").MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Textarea: import("react").MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, resize, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/textarea/textarea.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const inputBase_1 = require("../inputBase");
 const textarea_style_1 = require("./textarea.style");
 const utils_1 = require("../../utils");
-exports.Textarea = (0, react_1.memo)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
+exports.Textarea = (0, react_1.memo)(({ textareaProps, textareaRef, rows, fullWidth = false, resize = fullWidth ? 'vertical' : 'both', ...props }) => {
     return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.clsx)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: inputBaseProps => (0, jsx_runtime_1.jsx)("textarea", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, {
                 rows,
                 ref: textareaRef,
-                className: textarea_style_1.classes.textarea
+                className: textarea_style_1.classes.textarea,
+                style: { resize }
             }) }) }));
 });

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -74,7 +74,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [(0, utils_1.isNoValue)(innerValue)
                         ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
                         : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})

package/dist/cjs/extensions/reactiveForm/reactiveForm.d.ts

@@ -22,9 +22,9 @@
 import { FormProps, FormRef } from '../../components/form';
 import { ReactElement, Ref } from 'react';
 import { ReactiveFormItem } from './reactiveFormItem';
-export type ReactiveFormPropsRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
+export type ReactiveFormRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
 export interface ReactiveFormProps extends Omit<FormProps, 'ref' | 'initialValue' | 'onChange' | 'onFinish' | 'items'> {
-    ref?: Ref<ReactiveFormPropsRef>;
+    ref?: Ref<ReactiveFormRef>;
     onChange?(): void;
     onFinish?(): void;
 }

package/dist/cjs/utils/utils.d.ts

@@ -80,13 +80,18 @@ export declare function isPromise<T>(it: any): it is Promise<T>;
  * @param promise
  */
 export declare function getPromiseState(promise: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+export declare function isNoValue(value: any): boolean;
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, separator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/cjs/utils/utils.js

@@ -14,6 +14,7 @@ exports.cloneRef = cloneRef;
 exports.isUnset = isUnset;
 exports.isPromise = isPromise;
 exports.getPromiseState = getPromiseState;
+exports.isNoValue = isNoValue;
 exports.joinNodes = joinNodes;
 exports.fixInputNumber = fixInputNumber;
 exports.isChildOf = isChildOf;
@@ -216,16 +217,29 @@ function getPromiseState(promise) {
         return res === s ? 'pending' : 'fulfilled';
     }).catch(() => 'rejected');
 }
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+function isNoValue(value) {
+    if (isUnset(value)) {
+        return true;
+    }
+    if (Array.isArray(value) || typeof value === 'string') {
+        return !value.length;
+    }
+    return false;
+}
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-function joinNodes(arr, callback, seperator = ' / ') {
+function joinNodes(arr, callback, separator = ' / ') {
     return arr.flatMap((item, index) => {
         return index > 0
-            ? [seperator, callback(item, index)]
+            ? [separator, callback(item, index)]
             : callback(item, index);
     });
 }

package/dist/esm/components/cascade/cascade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
-import { useControlled, useLoading, useKeyboard, joinNodes, clsx, toArray, mergeComponentProps } from '../../utils';
+import { useControlled, useLoading, useKeyboard, joinNodes, clsx, mergeComponentProps, isNoValue } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
 import { Popper } from '../popper';
@@ -56,7 +56,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setInnerOptions(await loadOptions(searchValue, parent));
     }, loading);
     useEffect(() => {
-        if (loadOptions && !searchable && !innerOpen.current && toArray(innerValue)?.length) {
+        if (loadOptions && !searchable && !innerOpen.current && !isNoValue(innerValue)) {
             // 第一次渲染就有value，需要请求数据
             innerLoadOptions(innerSearchValue.current);
         }

package/dist/esm/components/dateTimePicker/timer.js

@@ -3,7 +3,7 @@ import { memo, useRef } from 'react';
 import { classes, style } from './timer.style';
 import { MenuItem } from '../menuItem';
 import { useDateTimePickerContext } from './dateTimePicker';
-import { useScrollToSelected } from '../popper';
+import { useScrollToTarget } from '../popper';
 export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChange }) => {
     return (_jsxs("div", { css: style, className: classes.root, children: [showHours && _jsx(TimerItem, { type: "hour", value: value, onChange: onChange }), showMinutes && _jsx(TimerItem, { type: "minute", value: value, onChange: onChange }), showSeconds && _jsx(TimerItem, { type: "second", value: value, onChange: onChange })] }));
 });
@@ -37,7 +37,7 @@ function TimerItem({ type, value, onChange }) {
         return false;
     };
     const scrollerRef = useRef(null);
-    const selectedItemRef = useScrollToSelected(scrollerRef);
+    const selectedItemRef = useScrollToTarget(scrollerRef);
     const renderItems = (count) => {
         const ret = [];
         for (let i = 0; i < count; i++) {

package/dist/esm/components/inputBase/inputBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useImperativeHandle, useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { fixInputNumber, isUnset, mergeComponentProps, useControlled } from '../../utils';
+import { fixInputNumber, isNoValue, mergeComponentProps, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -54,13 +54,10 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
         }
     };
     const shouldRenderClearButton = () => {
-        if (!clearable || disabled || readOnly || isUnset(innerValue.current)) {
+        if (!clearable || disabled || readOnly) {
             return false;
         }
-        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
-            return !!innerValue.current.length;
-        }
-        return true;
+        return isNoValue(innerValue.current);
     };
     return (_jsxs("div", { ...mergeComponentProps(props, {
             ref: innerRef,

package/dist/esm/components/optionsBase/optionsBase.d.ts

@@ -4,6 +4,10 @@ import { LoadingProps } from '../loading';
 import { OptionType } from '../selectionContext';
 import { Id } from '../../types';
 export interface MenuOptionType<V extends Id = Id> extends Omit<MenuItemProps, 'children'>, Omit<OptionType<V>, 'children'> {
+    /**
+     * 若指定为`true`，则弹框打开时会自动滚动到该选项，默认为`false`
+     */
+    scrollHere?: boolean;
 }
 export type OptionsBaseSharedProps<O extends MenuOptionType<V>, V extends Id = Id> = {
     showCheckbox?: boolean;

package/dist/esm/components/optionsBase/optionsBase.js

@@ -3,10 +3,10 @@ import { useMemo, memo, Children, isValidElement, cloneElement, useRef } from 'r
 import { Highlight } from '../highlight';
 import { MenuItem } from '../menuItem';
 import { Placeholder } from '../placeholder';
-import { clsx, isSelected, useKeyboard, useSync } from '../../utils';
+import { clsx, isSelected, mergeComponentProps, useKeyboard, useSync } from '../../utils';
 import { classes, style } from './optionsBase.style';
 import { Loading } from '../loading';
-import { usePopperContext, useScrollToSelected } from '../popper';
+import { usePopperContext, useScrollToTarget } from '../popper';
 export const OptionsBase = memo(({ 
 // 共享属性
 showCheckbox, loading, options, children, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, 
@@ -65,14 +65,14 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
      * 渲染部分
      */
     const scrollerRef = useRef(null);
-    const selectedItemRef = useScrollToSelected(scrollerRef);
+    const selectedItemRef = useScrollToTarget(scrollerRef);
     const syncOnToggleSelected = useSync(onToggleSelected);
     const renderedOptions = useMemo(() => {
         if (!filteredOptions?.length) {
             return _jsx(Placeholder, {});
         }
         const makeProps = (params) => ({
-            ref: params.selected ? selectedItemRef : void 0,
+            ref: params.scrollHere || params.selected ? selectedItemRef : void 0,
             showCheckbox,
             selected: params.selected,
             focused: verticalIndex.current === params.index,
@@ -81,11 +81,11 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 : params.label,
             onClick: e => {
                 e.stopPropagation();
-                params.opt.onClick?.(e);
+                params.opt?.onClick?.(e);
                 syncOnToggleSelected.current?.(params.value, e);
             },
             onPointerEnter: e => {
-                params.opt.onPointerEnter?.(e);
+                params.opt?.onPointerEnter?.(e);
                 setVerticalIndex(-1);
             },
             children: null
@@ -94,13 +94,13 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             return filteredOptions.map((opt, index) => {
                 const value = opt[primaryKey];
                 const label = opt[labelKey] ?? value;
-                return (_jsx(MenuItem, { value: value, ...opt, ...makeProps({
-                        opt,
+                return (_jsx(MenuItem, { value: value, ...mergeComponentProps(opt, makeProps({
                         label,
                         value,
                         index,
-                        selected: isSelected(value, selectedValue)
-                    }) }, opt.key ?? value ?? index));
+                        selected: isSelected(value, selectedValue),
+                        scrollHere: opt.scrollHere
+                    })) }, opt.key ?? value ?? index));
             });
         }
         // children
@@ -108,13 +108,14 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             if (!isValidElement(c)) {
                 return c;
             }
-            const { value, label } = c.props;
+            const { value, label, scrollHere } = c.props;
             return cloneElement(c, makeProps({
                 opt: c.props,
                 label,
                 value: value,
                 index,
-                selected: isSelected(value, selectedValue)
+                selected: isSelected(value, selectedValue),
+                scrollHere
             }));
         });
     }, [filteredOptions, selectedValue, verticalIndex.current, showCheckbox]);

package/dist/esm/components/popper/popperContext.d.ts

@@ -17,4 +17,4 @@ export declare function usePopperContext(): {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-export declare function useScrollToSelected<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;
+export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;

package/dist/esm/components/popper/popperContext.js

@@ -15,13 +15,13 @@ export function usePopperContext() {
  * 当弹框打开时，滚动至已选项
  * @returns {RefObject} ref
  */
-export function useScrollToSelected(scrollerRef) {
+export function useScrollToTarget(scrollerRef) {
     const ref = useRef(null);
     const { beforeOpenCallbacks } = usePopperContext();
     useEffect(() => {
         const beforeOpen = () => {
             if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
-                scrollerRef.current.scrollTop = ref.current.offsetTop - scrollerRef.current.clientHeight / 2 + ref.current.clientHeight / 2;
+                scrollerRef.current.scrollTop = ref.current.offsetTop + ref.current.clientHeight / 2 - scrollerRef.current.clientHeight / 2;
             }
         };
         beforeOpenCallbacks.add(beforeOpen);

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
 import { InputBase } from '../inputBase';
-import { mergeComponentProps, toArray, useControlled } from '../../utils';
+import { isNoValue, mergeComponentProps, useControlled } from '../../utils';
 import { classes, style } from './select.style';
 import { Popper } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -112,7 +112,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                 value: innerValue,
                 onClear,
                 onBlur
-            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
                             ? _jsx(LoadingIndicator, {})

package/dist/esm/components/textarea/textarea.d.ts

@@ -1,9 +1,15 @@
-import { Ref, ComponentProps } from 'react';
+import { Ref, ComponentProps, CSSProperties } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
     textareaProps?: ComponentProps<'textarea'>;
     textareaRef?: Ref<HTMLTextAreaElement>;
     rows?: number;
     fullWidth?: boolean;
+    /**
+     * @enum {@link fullWidth} 为`true`时，默认为`vertical`
+     * @enum {@link fullWidth} 为`false`时，默认为`both`
+     * @enum 若设为`none`，则不可调整尺寸
+     */
+    resize?: CSSProperties['resize'];
 }
-export declare const Textarea: import("react").MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Textarea: import("react").MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, resize, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/textarea/textarea.js

@@ -3,10 +3,11 @@ import { memo } from 'react';
 import { InputBase } from '../inputBase';
 import { classes, style } from './textarea.style';
 import { clsx, mergeComponentProps } from '../../utils';
-export const Textarea = memo(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
+export const Textarea = memo(({ textareaProps, textareaRef, rows, fullWidth = false, resize = fullWidth ? 'vertical' : 'both', ...props }) => {
     return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, children: inputBaseProps => _jsx("textarea", { ...mergeComponentProps(inputBaseProps, {
                 rows,
                 ref: textareaRef,
-                className: classes.textarea
+                className: classes.textarea,
+                style: { resize }
             }) }) }));
 });

package/dist/esm/components/treeSelect/treeSelect.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { Tree, TreeNode } from '../tree';
-import { useControlled, toArray, clsx, mergeComponentProps } from '../../utils';
+import { useControlled, toArray, clsx, mergeComponentProps, isNoValue } from '../../utils';
 import { InputBase } from '../inputBase';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
@@ -71,7 +71,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})

package/dist/esm/extensions/reactiveForm/reactiveForm.d.ts

@@ -22,9 +22,9 @@
 import { FormProps, FormRef } from '../../components/form';
 import { ReactElement, Ref } from 'react';
 import { ReactiveFormItem } from './reactiveFormItem';
-export type ReactiveFormPropsRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
+export type ReactiveFormRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
 export interface ReactiveFormProps extends Omit<FormProps, 'ref' | 'initialValue' | 'onChange' | 'onFinish' | 'items'> {
-    ref?: Ref<ReactiveFormPropsRef>;
+    ref?: Ref<ReactiveFormRef>;
     onChange?(): void;
     onFinish?(): void;
 }

package/dist/esm/utils/utils.d.ts

@@ -80,13 +80,18 @@ export declare function isPromise<T>(it: any): it is Promise<T>;
  * @param promise
  */
 export declare function getPromiseState(promise: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+export declare function isNoValue(value: any): boolean;
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, separator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/esm/utils/utils.js

@@ -191,16 +191,29 @@ export function getPromiseState(promise) {
         return res === s ? 'pending' : 'fulfilled';
     }).catch(() => 'rejected');
 }
+/**
+ * 判断表单控件是否为空值
+ * @param value
+ */
+export function isNoValue(value) {
+    if (isUnset(value)) {
+        return true;
+    }
+    if (Array.isArray(value) || typeof value === 'string') {
+        return !value.length;
+    }
+    return false;
+}
 /**
  * 将节点用某个分隔符拼接起来，通常用于渲染多选项
  * @param arr
  * @param callback
- * @param seperator
+ * @param separator
  */
-export function joinNodes(arr, callback, seperator = ' / ') {
+export function joinNodes(arr, callback, separator = ' / ') {
     return arr.flatMap((item, index) => {
         return index > 0
-            ? [seperator, callback(item, index)]
+            ? [separator, callback(item, index)]
             : callback(item, index);
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",