@canlooks/can-ui 0.0.77 → 0.0.78

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/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/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/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/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/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/package.json

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