@nutui/nutui-react 3.0.2 → 3.0.3-beta.1

package/dist/es/packages/inputnumber/inputnumber.js

@@ -1,13 +1,16 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useEffect, useRef, useState } from "react";
 import { Minus, Plus } from "@nutui/icons-react";
 import classNames from "classnames";
 import { usePropsValue } from "../../hooks/use-props-value";
 import { ComponentDefaults } from "../../utils/typings";
+import { bound } from "../../utils/bound";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     readOnly: false,
@@ -16,12 +19,14 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     max: 9999,
     step: 1,
     digits: 0,
-    async: false,
-    select: true
+    select: true,
+    beforeChange: function(value) {
+        return Promise.resolve(true);
+    }
 });
 var classPrefix = "nut-inputnumber";
 export var InputNumber = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, disabled = _ref.disabled, min = _ref.min, max = _ref.max, readOnly = _ref.readOnly, value = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, async = _ref.async, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, restProps = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, disabled = _ref.disabled, min = _ref.min, max = _ref.max, readOnly = _ref.readOnly, value = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, beforeChange = _ref.beforeChange, restProps = _object_without_properties(_ref, [
         "children",
         "disabled",
         "min",
@@ -32,7 +37,6 @@ export var InputNumber = function(props) {
         "allowEmpty",
         "digits",
         "step",
-        "async",
         "select",
         "className",
         "style",
@@ -42,7 +46,8 @@ export var InputNumber = function(props) {
         "onOverlimit",
         "onBlur",
         "onFocus",
-        "onChange"
+        "onChange",
+        "beforeChange"
     ]);
     var classes = classNames(classPrefix, className, _define_property({}, "".concat(classPrefix, "-disabled"), disabled));
     var _useState = _sliced_to_array(useState(false), 2), focused = _useState[0], setFocused = _useState[1];
@@ -59,24 +64,12 @@ export var InputNumber = function(props) {
     var _usePropsValue = _sliced_to_array(usePropsValue({
         value: typeof value === 'string' ? parseFloat(value) : value,
         defaultValue: typeof defaultValue === 'string' ? parseFloat(defaultValue) : defaultValue,
-        finalValue: 0,
-        onChange: function(value) {}
+        finalValue: 0
     }), 2), shadowValue = _usePropsValue[0], setShadowValue = _usePropsValue[1];
-    var bound = function(value, min, max) {
-        var res = value;
-        if (min !== undefined) {
-            res = Math.max(Number(min), res);
-        }
-        if (max !== undefined) {
-            res = Math.min(Number(max), res);
-        }
-        return res;
-    };
     var format = function(value) {
         if (value === null) return '';
         // 如果超过 min 或 max, 需要纠正
-        if (typeof value === 'string') value = parseFloat(value);
-        var fixedValue = bound(value, Number(min), Number(max));
+        var fixedValue = bound(typeof value === 'string' ? parseFloat(value) : value, Number(min), Number(max));
         if (formatter) {
             return formatter(fixedValue);
         }
@@ -87,83 +80,144 @@ export var InputNumber = function(props) {
     };
     var _useState1 = _sliced_to_array(useState(format(shadowValue)), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
     useEffect(function() {
-        if (!focused && !async) {
-            setShadowValue(bound(Number(shadowValue), Number(min), Number(max)));
+        if (!focused) {
             setInputValue(format(shadowValue));
         }
     }, [
         focused,
         shadowValue
     ]);
-    useEffect(function() {
-        if (async) {
-            setShadowValue(bound(Number(value), Number(min), Number(max)));
-            setInputValue(format(value));
-        }
-    }, [
-        value
-    ]);
-    var calcNextValue = function(current, step, symbol) {
+    var calcNextValue = function(current, stepValue, symbol) {
         var dig = digits + 1;
-        return (parseFloat(current || '0') * dig + parseFloat(step) * dig * symbol) / dig;
-    };
-    var update = function(negative, e) {
-        if (step !== undefined) {
-            var shouldOverBoundary = calcNextValue(shadowValue, step, negative ? -1 : 1);
-            var nextValue = bound(shouldOverBoundary, Number(min), Number(max));
-            setShadowValue(nextValue);
-            if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
-                onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e);
-            } else {
-                onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, e);
-            }
-        }
-    };
-    var handleReduce = function(e) {
-        if (disabled) return;
-        onMinus === null || onMinus === void 0 ? void 0 : onMinus(e);
-        update(true, e);
-    };
-    var handlePlus = function(e) {
-        if (disabled) return;
-        onPlus === null || onPlus === void 0 ? void 0 : onPlus(e);
-        update(false, e);
+        var currentValue = parseFloat(current || '0');
+        var stepAmount = parseFloat(stepValue) * symbol;
+        return (currentValue * dig + stepAmount * dig) / dig;
     };
+    var update = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(negative, e) {
+            var shouldOverBoundary, maybeResume, nextValue;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (step === undefined) return [
+                            2
+                        ];
+                        negative ? onMinus === null || onMinus === void 0 ? void 0 : onMinus(e) : onPlus === null || onPlus === void 0 ? void 0 : onPlus(e);
+                        shouldOverBoundary = calcNextValue(bound(Number(shadowValue), Number(min), Number(max)), step, negative ? -1 : 1);
+                        return [
+                            4,
+                            beforeChange(Number(shouldOverBoundary))
+                        ];
+                    case 1:
+                        maybeResume = _state.sent();
+                        if (!maybeResume) return [
+                            2
+                        ];
+                        nextValue = bound(shouldOverBoundary, Number(min), Number(max));
+                        setShadowValue(nextValue);
+                        if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
+                            onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e);
+                        } else {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, e);
+                        }
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function update(negative, e) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var handleReduce = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(e) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (disabled) return [
+                            2
+                        ];
+                        return [
+                            4,
+                            update(true, e)
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function handleReduce(e) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var handlePlus = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(e) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (disabled) return [
+                            2
+                        ];
+                        return [
+                            4,
+                            update(false, e)
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function handlePlus(e) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var parseValue = function(text) {
         if (text === '') return null;
         if (text === '-') return null;
         return text;
     };
-    var clampValue = function(valueStr) {
-        if (valueStr === null) return defaultValue;
-        var val = Number(parseFloat(valueStr || '0').toFixed(digits));
-        return Math.max(Number(min), Math.min(Number(max), val));
-    };
-    var handleValueChange = function(valueStr, e) {
-        var val = clampValue(valueStr);
-        // input暂不触发onOverlimit
-        // if (val !== Number(e.target.value)) {
-        //   onOverlimit?.(e)
-        // }
-        if (val !== Number(shadowValue)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(val, e);
-        }
-    };
-    var handleInputChange = function(e) {
-        // 设置 input 值， 在 blur 时格式化
-        setInputValue(e.target.value);
-        var valueStr = parseValue(e.target.value);
-        if (valueStr === null) {
-            if (allowEmpty) {
-                setShadowValue(null);
-            } else {
-                setShadowValue(defaultValue);
-            }
-        } else {
-            setShadowValue(clampValue(valueStr));
-        }
-        !async && handleValueChange(valueStr, e);
-    };
+    var handleInputChange = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(e) {
+            var valueStr, maybeResume;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        // 设置 input 值， 在 blur 时格式化
+                        setInputValue(e.target.value);
+                        valueStr = parseValue(e.target.value);
+                        return [
+                            4,
+                            beforeChange(Number(valueStr))
+                        ];
+                    case 1:
+                        maybeResume = _state.sent();
+                        if (!maybeResume) return [
+                            2
+                        ];
+                        setShadowValue(// eslint-disable-next-line no-nested-ternary
+                        valueStr === null ? allowEmpty ? null : defaultValue : valueStr);
+                        if (valueStr !== null && (Number(valueStr) < Number(min) || Number(valueStr) > Number(max))) {
+                            onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e);
+                        } else {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
+                        }
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function handleInputChange(e) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var handleFocus = function(e) {
         setFocused(true);
         setInputValue(shadowValue !== undefined && shadowValue !== null ? bound(Number(shadowValue), Number(min), Number(max)).toString() : '');
@@ -171,18 +225,9 @@ export var InputNumber = function(props) {
     };
     var handleBlur = function(e) {
         setFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        onBlur && onBlur(e);
         var valueStr = parseValue(e.target.value);
-        if (valueStr === null) {
-            if (allowEmpty) {
-                setShadowValue(null);
-            } else {
-                setShadowValue(defaultValue);
-            }
-        } else {
-            setShadowValue(clampValue(valueStr));
-        }
-        async && handleValueChange(valueStr, e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
     };
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes,

package/dist/es/packages/loading/index.d.ts

@@ -1,3 +1,3 @@
 import { Loading } from './loading';
-export type { LoadingProps, LoadingType, LoadingDirection } from './types';
+export type { WebLoadingProps as LoadingProps, LoadingType, LoadingRef, } from "../../types";
 export default Loading;

package/dist/es/packages/loading/loading.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { LoadingProps } from './types';
-export declare const Loading: React.ForwardRefExoticComponent<Partial<LoadingProps> & React.RefAttributes<any>>;
+import { WebLoadingProps } from "../../types";
+export declare const Loading: React.ForwardRefExoticComponent<Partial<WebLoadingProps> & React.RefAttributes<any>>;

package/dist/es/packages/lottie/index.d.ts

@@ -1,3 +1,3 @@
 import { Lottie } from './web';
-export type { LottieProps } from './types';
+export type { WebLottieProps as LottieProps } from "../../types";
 export default Lottie;

package/dist/es/packages/lottie/web.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { LottieProps } from './types';
-export declare const Lottie: React.ForwardRefExoticComponent<Omit<Partial<LottieProps>, "ref"> & React.RefAttributes<unknown>>;
+import { WebLottieProps } from "../../types";
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<Partial<WebLottieProps>, "ref"> & React.RefAttributes<unknown>>;

package/dist/es/packages/menu/index.d.ts

@@ -1,3 +1,3 @@
 import { Menu } from './menu';
-export type { MenuProps, MenuTriggerType, MenuCallBackFunction } from './menu';
+export type { WebMenuProps as MenuProps, MenuTriggerType, MenuCallBack, } from "../../types";
 export default Menu;

package/dist/es/packages/menu/menu.d.ts

@@ -1,47 +1,6 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { MenuItem } from "../menuitem/menuitem";
-import { BasicComponent } from "../../utils/typings";
-export type MenuTriggerType = 'NORMAL' | 'REF';
-export type MenuCallBackFunction = (index: number, from?: MenuTriggerType) => void;
-export interface MenuProps extends BasicComponent {
-    /**
-    * 选项的选中态图标颜色
-    * @default #F2270C
-    */
-    activeColor: string
-    overlay: boolean;
-    /**
-    * 是否在点击遮罩层后关闭菜单
-    * @default true
-    */
-    closeOnOverlayClick: boolean
-    /**
-    * 滚动后是否固定，可设置固定位置
-    * @default true
-    */
-    scrollFixed: boolean | string | number
-    /**
-    * 背景是否锁定
-    * @default true
-    */
-    lockScroll: boolean
-    /**
-    * 自定义标题图标
-    * @default -
-    */
-    icon: React.ReactNode
-    children: React.ReactNode;
-    /**
-    * menu 展开触发
-    * @default -
-    */
-    onOpen: MenuCallBackFunction
-    /**
-    * menu 关闭触发
-    * @default -
-    */
-    onClose: MenuCallBackFunction
-}
-export declare const Menu: FunctionComponent<Partial<MenuProps>> & {
+import { WebMenuProps } from "../../types";
+export declare const Menu: FunctionComponent<Partial<WebMenuProps>> & {
     Item: typeof MenuItem;
 };

package/dist/es/packages/menuitem/index.d.ts

@@ -1,3 +1,3 @@
 import { MenuItem } from './menuitem';
-export type { MenuItemProps } from './menuitem';
+export type { WebMenuItemProps as MenuItemProps, MenuOptionItem } from "../../types";
 export default MenuItem;

package/dist/es/packages/menuitem/menuitem.d.ts

@@ -1,59 +1,3 @@
 import React from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface OptionItem {
-    text: string;
-    value: string | number;
-}
-export interface MenuItemProps extends BasicComponent {
-    /**
-    * 菜单项标题
-    * @default 当前选中项文字
-    */
-    title: React.ReactNode
-    /**
-    * 菜单项 icon
-    * @default ArrowUp/ArrowDown
-    */
-    titleIcon: React.ReactNode
-    /**
-    * 选项数组
-    * @default -
-    */
-    options: OptionItem[]
-    /**
-    * 是否禁用菜单
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 可以设置一行展示多少列 options
-    * @default 1
-    */
-    columns: number
-    /**
-    * 自定义选项图标
-    * @default Check
-    */
-    icon: React.ReactNode
-    /**
-    * 点击空白处关闭菜单
-    * @default true
-    */
-    closeOnClickAway: boolean
-    /**
-    * 菜单展开方向，可选值为up
-    * @default down
-    */
-    direction: string
-    activeTitleClass: string;
-    inactiveTitleClass: string;
-    value: string | number;
-    defaultValue: string | number;
-    /**
-    * 选择 option 之后触发
-    * @default -
-    */
-    onChange: (event: any) => void
-    children: React.ReactNode;
-}
-export declare const MenuItem: React.ForwardRefExoticComponent<Partial<MenuItemProps> & React.RefAttributes<unknown>>;
+import { TaroMenuItemProps } from "../../types";
+export declare const MenuItem: React.ForwardRefExoticComponent<Partial<TaroMenuItemProps> & React.RefAttributes<unknown>>;

package/dist/es/packages/navbar/index.d.ts

@@ -1,3 +1,3 @@
 import { NavBar } from './navbar';
-export type { NavBarProps } from './navbar';
+export type { WebNavBarProps as NavBarProps } from "../../types";
 export default NavBar;

package/dist/es/packages/navbar/navbar.d.ts

@@ -1,15 +1,3 @@
-import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface NavBarProps extends BasicComponent {
-    left: React.ReactNode;
-    back: React.ReactNode;
-    right: React.ReactNode;
-    title: React.ReactNode;
-    fixed: boolean;
-    safeAreaInsetTop: boolean;
-    placeholder: boolean;
-    zIndex: number | string;
-    onBackClick: (e: React.MouseEvent<HTMLElement>) => void;
-    children?: React.ReactNode;
-}
-export declare const NavBar: FunctionComponent<Partial<NavBarProps>>;
+import { FunctionComponent } from 'react';
+import { WebNavBarProps } from "../../types";
+export declare const NavBar: FunctionComponent<Partial<WebNavBarProps>>;

package/dist/es/packages/noticebar/index.d.ts

@@ -1,4 +1,3 @@
 import { NoticeBar } from './noticebar';
-export type { NoticeBarAlign } from './types';
-export type { NoticeBarProps } from './noticebar';
+export type { WebNoticeBarProps as NoticeBarProps, NoticeBarAlign, } from "../../types";
 export default NoticeBar;

package/dist/es/packages/noticebar/noticebar.d.ts

@@ -1,81 +1,3 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-import { NoticeBarAlign } from './types';
-export interface NoticeBarProps extends BasicComponent {
-    /**
-    * 布局方式, 值为center时，不支持滚动
-    * @default left
-    */
-    align: NoticeBarAlign
-    /**
-    * 滚动的方向，可选 horizontal、vertical
-    * @default horizontal
-    */
-    direction: string
-    list: any;
-    duration: number;
-    height: number;
-    /**
-    * 提示的信息
-    * @default -
-    */
-    content: string
-    /**
-    * 是否启用关闭模式
-    * @default false
-    */
-    closeable: boolean
-    /**
-    * 是否开启文本换行
-    * @default false
-    */
-    wrap: boolean
-    /**
-    * 左边的 icon，closeable 模式下默认为空
-    * @default -
-    */
-    leftIcon: ReactNode
-    /**
-    * 右边的 icon，在 closeable 模式下默认为 <Close />
-    * @default -
-    */
-    rightIcon: ReactNode
-    /**
-    * 区别于rightIcon，为右边自定义区域，仅用于 direction='horizontal' 模式
-    * @default -
-    */
-    right: ReactNode
-    /**
-    * 延时多少秒
-    * @default 1
-    */
-    delay: string | number
-    /**
-    * 是否可以滚动
-    * @default true
-    */
-    scrollable: boolean | null
-    /**
-    * 滚动速率 (px/s)
-    * @default 50
-    */
-    speed: number
-    close?: (event: any) => void;
-    click?: (event: any) => void;
-    /**
-    * 关闭通知栏时触发
-    * @default -
-    */
-    onClose?: (event: any) => void
-    /**
-    * 外层点击事件回调
-    * @default -
-    */
-    onClick?: (event: any) => void
-    /**
-    * 垂直滚动多条数据时，点击当前展示的信息时触发
-    * @default -
-    */
-    onItemClick?: (event: any, value: any) => void
-}
-export declare const NoticeBar: FunctionComponent<Partial<NoticeBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;
+import React, { FunctionComponent } from 'react';
+import { WebNoticeBarProps } from "../../types";
+export declare const NoticeBar: FunctionComponent<Partial<WebNoticeBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/es/packages/noticebar/noticebar.js

@@ -2,7 +2,7 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Close, Notice } from "@nutui/icons-react";
 import classNames from "classnames";
 import { getRect } from "../../hooks/use-client-rect";

package/dist/es/packages/notify/index.d.ts

@@ -1,3 +1,3 @@
 import Notify from './notify';
-export type { NotifyProps } from './notify';
+export type { WebNotifyProps as NotifyProps } from "../../types";
 export default Notify;

package/dist/es/packages/notify/notify.d.ts

@@ -1,13 +1,4 @@
 import * as React from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface NotifyProps extends BasicComponent {
-    id: string;
-    duration: number;
-    type: string;
-    position: string;
-    onClick: () => void;
-    onClose: () => void;
-}
 declare const _default: {
     text(message: string | React.ReactNode, option?: {}): void;
     success(message: string | React.ReactNode, option?: {}): void;

package/dist/es/packages/numberkeyboard/index.d.ts

@@ -1,3 +1,3 @@
 import { NumberKeyboard } from './numberkeyboard';
-export type { NumberKeyboardProps } from './numberkeyboard';
+export type { WebNumberKeyboardProps as NumberKeyboardProps } from "../../types";
 export default NumberKeyboard;

package/dist/es/packages/numberkeyboard/numberkeyboard.d.ts

@@ -1,15 +1,3 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { PopupProps } from "../popup/index";
-export interface NumberKeyboardProps extends PopupProps {
-    visible: boolean;
-    rightActions: ReactNode;
-    confirmText?: string;
-    type: 'default' | 'rightColumn';
-    custom: Array<string>;
-    random: boolean;
-    onChange?: (value: string) => void;
-    onDelete?: () => void;
-    onClose: () => void;
-    onConfirm?: () => void;
-}
-export declare const NumberKeyboard: FunctionComponent<Partial<NumberKeyboardProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick' | 'title'>>;
+import React, { FunctionComponent } from 'react';
+import { WebNumberKeyboardProps } from "../../types";
+export declare const NumberKeyboard: FunctionComponent<Partial<WebNumberKeyboardProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick' | 'title'>>;