@douyinfe/semi-ui 2.8.0 → 2.9.0-beta.0

package/divider/__test__/divider.test.js

@@ -0,0 +1,72 @@
+import { Divider } from '../../index';
+
+describe('Divider', () => {
+    it('Divider-custom className & style', () => {
+        const props = {
+            className: 'test',
+            style: {
+                color: 'red',
+            },
+        };
+        const demo = mount(<Divider {...props}/>);
+        expect(demo.exists(`.semi-divider.test`)).toEqual(true);
+        expect(demo.find(`.semi-divider`)).toHaveStyle('color', 'red');
+    });
+
+    it('test title', () => {
+        const demo = mount(<Divider>divider title</Divider>);
+        expect(demo.getDOMNode().textContent).toEqual('divider title');
+    });
+
+    it('test align', () => {
+
+        const demo = mount(
+            <div>
+                Semi-Design
+                <Divider>divider center title</Divider>
+                Semi-Design
+                <Divider align="left">divider left title</Divider>
+                Semi-Design
+                <Divider align="right">divider right title</Divider>
+            </div>
+        );
+        expect(demo.exists(`.semi-divider-with-text-center`)).toBe(true);
+        expect(demo.exists(`.semi-divider-with-text-left`)).toBe(true);
+        expect(demo.exists(`.semi-divider-with-text-right`)).toBe(true);
+    });
+
+    it('test layout', () => {
+        const props = {
+            layout: 'vertical',
+        };
+        const demo = mount(
+            <div>
+                Semi-Design
+                <Divider {...props} />
+                Semi-Design
+                <Divider {...props} />
+                Semi-Design
+                <Divider {...props} />
+            </div>
+        );
+        expect(demo.exists(`.semi-divider-vertical`)).toBe(true);
+        demo.unmount();
+    });
+    it('test dashed',()=>{
+        const props = {
+            dashed:true
+        };
+        const demo = mount(
+            <div>
+                Semi-Design
+                <Divider {...props} />
+                Semi-Design
+                <Divider {...props} />
+                Semi-Design
+                <Divider {...props} />
+            </div>
+        );
+        expect(demo.exists('.semi-divider-dashed')).toBe(true);
+        demo.unmount();
+    })
+});

package/divider/_story/Demo.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Divider from '../index';
+
+const Demo = () => {
+    return (
+        <>
+            <p>Semi Design </p>
+            <Divider />
+            <p>Semi Design </p>
+            <Divider />
+            <p>Semi Design </p>
+        </>
+    );
+};
+
+export default Demo;

package/divider/_story/divider.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
+import Divider from '../index';
+import { IllustrationSuccess } from '@douyinfe/semi-illustrations';
+
+const stories = storiesOf('Divider', module);
+
+stories.add('Divider default', () => (
+    <div>
+        <p>Semi Design</p>
+        <Divider />
+        <p>Semi Design</p>
+        <Divider />
+        <p>Semi Design</p>
+        <Divider dashed />
+        <p>Semi Design</p>
+    </div>
+));
+
+stories.add('Divider vertical', () => (
+    <div>
+        <span>Semi Design</span>
+        <Divider layout="vertical" />
+        <span>Semi Design</span>
+        <Divider layout="vertical" />
+        <span>Semi Design</span>
+    </div>
+));
+
+stories.add('Divider title', () => (
+    <div>
+        <p>Semi Design </p>
+        <Divider>Title</Divider>
+        <p>Semi Design </p>
+        <Divider align='left'>Title</Divider>
+        <p>Semi Design </p>
+        <Divider align='right'>Title</Divider>
+    </div>
+));

package/divider/_story/divider.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Demo from './Demo';
+
+const stories = storiesOf('Divider', module);
+
+stories.add('Divider', () => <Demo />);

package/divider/index.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/divider/constants';
+import '@douyinfe/semi-foundation/divider/divider.scss';
+
+
+const prefixCls = cssClasses.PREFIX;
+
+export interface DividerProps {
+    /** The position of title inside divider */
+    align?: 'left' | 'right' | 'center';
+    /** space between divider and surroundings **/
+    margin?: number | string
+    /** The wrapped title */
+    children?: ReactNode;
+    /** Style class name */
+    className?: string;
+    /** Whether line is dashed  */
+    dashed?: boolean;
+    /** The direction type of divider */
+    layout?: 'horizontal' | 'vertical';
+    /** Divider inline style */
+    style?: CSSProperties;
+}
+
+const Divider: React.FC<DividerProps> = props => {
+    const {
+        layout = 'horizontal',
+        dashed,
+        align = 'center',
+        className,
+        margin,
+        style,
+        children,
+        ...rest
+    } = props;
+
+    const dividerClassNames = cls(`${prefixCls}-divider`, className, {
+        [`${prefixCls}-divider-horizontal`]: layout === 'horizontal',
+        [`${prefixCls}-divider-vertical`]: layout === 'vertical',
+        [`${prefixCls}-divider-dashed`]: !!dashed,
+        [`${prefixCls}-divider-with-text`]: children && layout === 'horizontal',
+        [`${prefixCls}-divider-with-text-${align}`]: children && layout === 'horizontal',
+    });
+
+    let overrideDefaultStyle: CSSProperties = {};
+    if (margin !== undefined) {
+        if (layout === 'vertical') {
+            overrideDefaultStyle = {
+                'marginLeft': margin,
+                'marginRight': margin
+            };
+        } else if (layout === 'horizontal') {
+            overrideDefaultStyle = {
+                'marginTop': margin,
+                'marginBottom': margin,
+            };
+        }
+    }
+
+    return (
+        <div {...rest} className={dividerClassNames} style={{ ...overrideDefaultStyle, ...style }}>
+            {(children && layout === 'horizontal') ? (
+                typeof children === 'string' ? <span className={`${prefixCls}-divider_inner-text`}>
+                    {children}
+                </span> : children
+            ) : null}
+        </div>
+    );
+};
+
+export default Divider;

package/form/_story/demo.jsx

@@ -283,6 +283,15 @@ class BasicDemoWithInit extends Component {
                             </Form.AutoComplete>
                         </Col>
                     </Row>
+                    <Row>
+                        <Col span={12}>
+                            <Form.TagInput
+                                field='tags'
+                                label='tags'
+                            />
+                        </Col>
+                        
+                    </Row>
                 </Form.Section>
                 <Form.Section text='资源详情'>
 

package/index.ts

@@ -20,6 +20,7 @@ export { default as Collapsible } from './collapsible';
 export { default as ConfigProvider } from './configProvider';
 export { default as DatePicker } from './datePicker';
 export { default as Descriptions } from './descriptions';
+export { default as Divider } from './divider';
 export { default as Empty } from './empty';
 export { default as Modal } from './modal';
 export { default as Dropdown } from './dropdown';

package/lib/cjs/badge/index.d.ts

@@ -14,6 +14,9 @@ export interface BadgeProps {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
+    onMouseEnter?: (e: React.MouseEvent) => any;
+    onMouseLeave?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.MouseEvent) => any;
 }
 export default class Badge extends PureComponent<BadgeProps> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
@@ -27,12 +30,18 @@ export default class Badge extends PureComponent<BadgeProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         dot: boolean;
         type: string;
         theme: string;
         className: string;
+        onClick: () => (...args: any[]) => void;
+        onMouseEnter: () => (...args: any[]) => void;
+        onMouseLeave: () => (...args: any[]) => void;
     };
     render(): JSX.Element;
 }

package/lib/cjs/badge/index.js

@@ -14,8 +14,16 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
@@ -36,6 +44,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class Badge extends _react.PureComponent {
@@ -48,7 +67,8 @@ class Badge extends _react.PureComponent {
 
     const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop'; // eslint-disable-next-line max-len
 
-    const {
+    const _a = this.props,
+          {
       count,
       dot,
       type,
@@ -58,7 +78,9 @@ class Badge extends _react.PureComponent {
       style,
       children,
       className
-    } = this.props;
+    } = _a,
+          rest = __rest(_a, ["count", "dot", "type", "theme", "position", "overflowCount", "style", "children", "className"]);
+
     const custom = count && !((0, _isNumber2.default)(count) || (0, _isString2.default)(count));
     const showBadge = count !== null && typeof count !== 'undefined';
     const wrapper = (0, _classnames.default)(className, {
@@ -78,9 +100,9 @@ class Badge extends _react.PureComponent {
       content = count;
     }
 
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({
       className: prefixCls
-    }, children, /*#__PURE__*/_react.default.createElement("span", {
+    }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
       className: wrapper,
       style: style
     }, dot ? null : content));
@@ -99,11 +121,17 @@ Badge.propTypes = {
   overflowCount: _propTypes.default.number,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  onClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func
 };
 Badge.defaultProps = {
   dot: false,
   type: 'primary',
   theme: 'solid',
-  className: ''
+  className: '',
+  onClick: () => _noop2.default,
+  onMouseEnter: () => _noop2.default,
+  onMouseLeave: () => _noop2.default
 };

package/lib/cjs/descriptions/index.d.ts

@@ -6,8 +6,7 @@ import Item from './item';
 export { DescriptionsItemProps } from './item';
 export declare type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
-    [x: string]: any;
-    key?: string | number;
+    key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
 }

package/lib/cjs/descriptions/index.js

@@ -60,10 +60,11 @@ class Descriptions extends _react.PureComponent {
       ["".concat(prefixCls, "-double")]: row,
       [(0, _concat.default)(_context2 = "".concat(prefixCls, "-double-")).call(_context2, size)]: row
     });
-    const childrenList = data && data.length ? (0, _map.default)(data).call(data, item => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, (0, _assign.default)({
-      key: item.key,
+    const childrenList = data && data.length ? (0, _map.default)(data).call(data, (item, index) => (0, _isPlainObject2.default)(item) ? /*#__PURE__*/_react.default.createElement(_item.default, (0, _assign.default)({
       itemKey: item.key
-    }, item), item.value) : null) : children;
+    }, item, {
+      key: index
+    }), item.value) : null) : children;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classNames,
       style: style

package/lib/cjs/descriptions/item.d.ts

@@ -5,7 +5,7 @@ export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
     style?: React.CSSProperties;
-    itemKey: string | number;
+    itemKey?: React.ReactNode;
 }
 export default class Item extends PureComponent<DescriptionsItemProps> {
     static propTypes: {

package/lib/cjs/divider/index.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import '@douyinfe/semi-foundation/lib/cjs/divider/divider.css';
+export interface DividerProps {
+    /** The position of title inside divider */
+    align?: 'left' | 'right' | 'center';
+    /** space between divider and surroundings **/
+    margin?: number | string;
+    /** The wrapped title */
+    children?: ReactNode;
+    /** Style class name */
+    className?: string;
+    /** Whether line is dashed  */
+    dashed?: boolean;
+    /** The direction type of divider */
+    layout?: 'horizontal' | 'vertical';
+    /** Divider inline style */
+    style?: CSSProperties;
+}
+declare const Divider: React.FC<DividerProps>;
+export default Divider;

package/lib/cjs/divider/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/divider/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/divider/divider.css");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+const Divider = props => {
+  var _context;
+
+  const {
+    layout = 'horizontal',
+    dashed,
+    align = 'center',
+    className,
+    margin,
+    style,
+    children
+  } = props,
+        rest = __rest(props, ["layout", "dashed", "align", "className", "margin", "style", "children"]);
+
+  const dividerClassNames = (0, _classnames.default)("".concat(prefixCls, "-divider"), className, {
+    ["".concat(prefixCls, "-divider-horizontal")]: layout === 'horizontal',
+    ["".concat(prefixCls, "-divider-vertical")]: layout === 'vertical',
+    ["".concat(prefixCls, "-divider-dashed")]: !!dashed,
+    ["".concat(prefixCls, "-divider-with-text")]: children && layout === 'horizontal',
+    [(0, _concat.default)(_context = "".concat(prefixCls, "-divider-with-text-")).call(_context, align)]: children && layout === 'horizontal'
+  });
+  let overrideDefaultStyle = {};
+
+  if (margin !== undefined) {
+    if (layout === 'vertical') {
+      overrideDefaultStyle = {
+        'marginLeft': margin,
+        'marginRight': margin
+      };
+    } else if (layout === 'horizontal') {
+      overrideDefaultStyle = {
+        'marginTop': margin,
+        'marginBottom': margin
+      };
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, rest, {
+    className: dividerClassNames,
+    style: (0, _assign.default)((0, _assign.default)({}, overrideDefaultStyle), style)
+  }), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-divider_inner-text")
+  }, children) : children : null);
+};
+
+var _default = Divider;
+exports.default = _default;

package/lib/cjs/index.d.ts

@@ -20,6 +20,7 @@ export { default as Collapsible } from './collapsible';
 export { default as ConfigProvider } from './configProvider';
 export { default as DatePicker } from './datePicker';
 export { default as Descriptions } from './descriptions';
+export { default as Divider } from './divider';
 export { default as Empty } from './empty';
 export { default as Modal } from './modal';
 export { default as Dropdown } from './dropdown';

package/lib/cjs/index.js

@@ -173,6 +173,13 @@ _Object$defineProperty(exports, "Descriptions", {
   }
 });
 
+_Object$defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _divider.default;
+  }
+});
+
 _Object$defineProperty(exports, "Dropdown", {
   enumerable: true,
   get: function () {
@@ -665,6 +672,8 @@ var _datePicker = _interopRequireDefault(require("./datePicker"));
 
 var _descriptions = _interopRequireDefault(require("./descriptions"));
 
+var _divider = _interopRequireDefault(require("./divider"));
+
 var _empty = _interopRequireDefault(require("./empty"));
 
 var _modal = _interopRequireDefault(require("./modal"));

package/lib/cjs/slider/index.js

@@ -296,7 +296,10 @@ class Slider extends _baseComponent.default {
           ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/_react.default.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        _react.default.createElement("span", {
           key: mark,
           onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
@@ -477,6 +480,7 @@ class Slider extends _baseComponent.default {
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop2.default;
         let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+        let outPutValue = arguments.length > 4 ? arguments[4] : undefined;
 
         const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
 
@@ -485,32 +489,32 @@ class Slider extends _baseComponent.default {
         }
 
         const {
-          value,
-          onChange
+          value
         } = _this.props;
+        let finalOutPutValue = outPutValue;
 
-        const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
+        if (finalOutPutValue === undefined) {
+          const moveValue = _this.foundation.transPosToValue(mousePos, isMin);
 
-        if (moveValue === false) {
-          return;
-        }
+          if (moveValue === false) {
+            return;
+          }
 
-        const outPutValue = _this.foundation.outPutValue(moveValue);
+          finalOutPutValue = _this.foundation.outPutValue(moveValue);
+        }
 
         const {
           currentValue
         } = _this.state;
 
-        if (!(0, _isEqual2.default)(_this.foundation.outPutValue(currentValue), outPutValue)) {
-          onChange(outPutValue);
-
+        if (!(0, _isEqual2.default)(_this.foundation.outPutValue(currentValue), finalOutPutValue)) {
           if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
             // still require afterChangeCallback when click on the track directly, need skip here
             return false;
           }
 
           _this.setState({
-            currentValue: outPutValue
+            currentValue: finalOutPutValue
           }, stateChangeCallback);
         }
       },

package/lib/cjs/tagInput/index.d.ts

@@ -82,7 +82,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
-        validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;

package/lib/es/badge/index.d.ts

@@ -14,6 +14,9 @@ export interface BadgeProps {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
+    onMouseEnter?: (e: React.MouseEvent) => any;
+    onMouseLeave?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.MouseEvent) => any;
 }
 export default class Badge extends PureComponent<BadgeProps> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
@@ -27,12 +30,18 @@ export default class Badge extends PureComponent<BadgeProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         dot: boolean;
         type: string;
         theme: string;
         className: string;
+        onClick: () => (...args: any[]) => void;
+        onMouseEnter: () => (...args: any[]) => void;
+        onMouseLeave: () => (...args: any[]) => void;
     };
     render(): JSX.Element;
 }