@autobest-ui/components 2.13.12 → 2.14.1

package/esm/affix/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { AddListenerEventRemoveHandler, getOffsetAndSize } from '@autobest-ui/utils';
-import { CurrentResizeObserver } from './observe';
 export interface GetFixedStateParams {
     positionInfo: OffsetInfo;
     scrollTop: number;
@@ -50,10 +49,6 @@ export interface AffixProps {
      * 是否忽略水平方向固定定位， true将跟着鼠标左右移动
      */
     ignoreHorizontalFixed?: boolean;
-    /**
-     * 是否监听children的大小变化（仅用于非自定义renderAffix的情况）
-     */
-    observeSize?: boolean;
 }
 interface AffixStates {
     visible: boolean;
@@ -69,7 +64,6 @@ declare class Affix extends React.Component<AffixProps, AffixStates> {
     isFixed: boolean;
     wrapRef: React.RefObject<HTMLDivElement>;
     customRef: React.RefObject<HTMLDivElement>;
-    resizeObserver: CurrentResizeObserver;
     static defaultProps: {
         offsetTop: number;
         allWidth: boolean;
@@ -80,10 +74,6 @@ declare class Affix extends React.Component<AffixProps, AffixStates> {
     constructor(props: AffixProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onVisibleChange: (visible: any) => void;
-    addElementObserve: () => void;
-    removeElementObserve: () => void;
-    refreshWrap: () => void;
     onHandlerScroll: (isResize?: boolean) => void;
     renderContent(): JSX.Element;
     render(): JSX.Element;

package/esm/affix/index.js

@@ -34,9 +34,8 @@ var __assign = this && this.__assign || function () {
 };
 import React from 'react';
 import classNames from 'classnames';
-import { throttleWithRAF, addEventListener, getOffsetAndSize, getScrollOffset, getOffset, getElementSize } from '@autobest-ui/utils';
+import { throttleWithRAF, addEventListener, getOffsetAndSize, getScrollOffset, getOffset } from '@autobest-ui/utils';
 import PortalAffix from './PortalAffix';
-import getResizeObserver from './observe';
 var Affix = /** @class */function (_super) {
   __extends(Affix, _super);
   function Affix(props) {
@@ -45,46 +44,16 @@ var Affix = /** @class */function (_super) {
     _this.resizeHandler = null;
     _this.wrapRef = /*#__PURE__*/React.createRef();
     _this.customRef = /*#__PURE__*/React.createRef();
-    _this.onVisibleChange = function (visible) {
-      var _a = _this.props,
-        onChange = _a.onChange,
-        observeSize = _a.observeSize,
-        renderAffix = _a.renderAffix;
-      onChange(visible);
-      if (visible && observeSize && !renderAffix) {
-        _this.addElementObserve();
-        return;
-      }
-      _this.removeElementObserve();
-    };
-    _this.addElementObserve = function () {
-      var element = _this.wrapRef.current;
-      var CurrentResizeObserve = getResizeObserver();
-      if (_this.resizeObserver || !element || !CurrentResizeObserve) {
-        return;
-      }
-      _this.resizeObserver = new CurrentResizeObserve(_this.refreshWrap);
-      _this.resizeObserver.observe(element);
-    };
-    _this.removeElementObserve = function () {
-      if (_this.resizeObserver) {
-        _this.resizeObserver.disconnect();
-        _this.resizeObserver = null;
-      }
-    };
-    _this.refreshWrap = function () {
-      _this.onHandlerScroll();
-    };
     _this.onHandlerScroll = function (isResize) {
       var _a = _this.props,
         offsetTop = _a.offsetTop,
+        onChange = _a.onChange,
         onScroll = _a.onScroll,
         renderAffix = _a.renderAffix,
         allWidth = _a.allWidth,
         fadeEffect = _a.fadeEffect,
         getFixedStatus = _a.getFixedStatus,
-        ignoreHorizontalFixed = _a.ignoreHorizontalFixed,
-        observeSize = _a.observeSize;
+        ignoreHorizontalFixed = _a.ignoreHorizontalFixed;
       var element = _this.wrapRef.current;
       if (!element) {
         return;
@@ -94,22 +63,12 @@ var Affix = /** @class */function (_super) {
         scrollLeft = _b.left;
       var parentElement = element.parentNode;
       // 元素信息
-      var isOriginalFixed = _this.isFixed && !renderAffix;
-      var positionInfo = isOriginalFixed ? getOffsetAndSize(parentElement) : getOffsetAndSize(element);
+      var positionElement = _this.isFixed && !renderAffix ? parentElement : element;
+      var positionInfo = getOffsetAndSize(positionElement);
       if (ignoreHorizontalFixed) {
-        var ignoreScrollLeft = getOffset(isOriginalFixed ? parentElement : element, true).left;
+        var ignoreScrollLeft = getOffset(positionElement, true).left;
         positionInfo.left = ignoreScrollLeft;
       }
-      var sizeChanged = false;
-      if (observeSize && isOriginalFixed) {
-        // 如果监听元素size变化，需要获取原元素的width和height信息
-        var _c = getElementSize(element),
-          elementWidth = _c.width,
-          elementHeight = _c.height;
-        sizeChanged = elementWidth !== positionInfo.width || elementHeight !== positionInfo.height;
-        positionInfo.width = elementWidth;
-        positionInfo.height = elementHeight;
-      }
       var currentFixed = getFixedStatus({
         positionInfo: positionInfo,
         scrollTop: scrollTop,
@@ -129,8 +88,8 @@ var Affix = /** @class */function (_super) {
           parentElement.style.width = '';
           parentElement.style.height = '';
         }
-        _this.onVisibleChange(false);
-      } else if ((!_this.isFixed || isResize || sizeChanged) && currentFixed) {
+        onChange(false);
+      } else if ((!_this.isFixed || isResize) && currentFixed) {
         _this.isFixed = true;
         var documentWidth = document.body.offsetWidth;
         var allWidthLeft = ignoreHorizontalFixed ? "-".concat(scrollLeft, "px") : '0px';
@@ -149,7 +108,7 @@ var Affix = /** @class */function (_super) {
           parentElement.style.width = "".concat(positionInfo.width, "px");
           parentElement.style.height = "".concat(positionInfo.height, "px");
         }
-        _this.onVisibleChange(true);
+        onChange(true);
       } else if (_this.isFixed && currentFixed && ignoreHorizontalFixed) {
         var allWidthLeft = "-".concat(scrollLeft, "px");
         if (renderAffix || fadeEffect) {

package/esm/carousel/index.d.ts

@@ -6,6 +6,10 @@ export interface CarouselProps {
      * 一行显示的数量
      */
     slidesPerView?: number;
+    /**
+     * 初始化时显示第几个，默认是第一个
+     */
+    defaultValue?: number;
     /**
      * 监听resize
      */

package/esm/carousel/index.js

@@ -40,12 +40,21 @@ var Carousel = /** @class */function (_super) {
     _this.autoplayTimer = null;
     _this.fadeEffectTimer = null;
     _this.next = function (transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(_this.state.currentPage + 1, transition);
     };
     _this.prev = function (transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(_this.state.currentPage - 1, transition);
     };
     _this.goTo = function (nextIndex, transition) {
+      if (transition === void 0) {
+        transition = Transition.TransformEaseInOut;
+      }
       _this.interceptorChangePage(nextIndex - 1, transition);
     };
     /**
@@ -154,7 +163,7 @@ var Carousel = /** @class */function (_super) {
           element.style.visibility = '';
         });
       } else {
-        element.style.transition = transition || Transition.TransformEaseInOut;
+        element.style.transition = transition;
       }
       element.style.transform = "translateX(".concat(translateX, "px)");
     };

package/esm/checkbox/Checkbox.js

@@ -39,30 +39,14 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: "checkbox",
     checked: checked,
     disabled: disabled,
-    onChange: onCheckboxChange,
-    style: {
-      width: size,
-      height: size
-    }
+    onChange: onCheckboxChange
   }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-control"),
-    style: {
-      width: size,
-      height: size,
-      fontSize: size
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(cls, "-outer"),
+    className: "".concat(cls, "-inner"),
     style: {
       width: size,
       height: size
     }
-  }), /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(cls, "-check"),
-    viewBox: "0 0 18 18"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M2.8284 8.4853 7.7782 13.435 15.5563 5.6569 14.1421 4.2426 7.7782 10.6066 4.2426 7.0711 2.8284 8.4853Z"
-  }))), children);
+  }), children);
 });
 Checkbox.defaultProps = {
   disabled: false,

package/esm/checkbox/style/index.css

@@ -1 +1 @@
-.ab-checkbox{position:relative;cursor:pointer;display:inline-flex;align-items:center;user-select:none}.ab-checkbox:hover .ab-checkbox-outer{border-color:#767676}.ab-checkbox-input{cursor:pointer;position:absolute;opacity:0;margin:0;padding:0;top:50%;left:0;transform:translateY(-50%);z-index:2}.ab-checkbox-check{opacity:0;transform:scale(0);transition:.2s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.ab-checkbox-control{display:inline-block;margin-right:.06rem;position:relative;flex-shrink:0}.ab-checkbox-control svg{position:absolute;left:0;top:0;width:1em;height:1em;user-select:none;flex-shrink:0;fill:currentcolor;stroke:none}.ab-checkbox-outer{position:absolute;left:0;top:0;border:1px solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-checked .ab-checkbox-check{opacity:1;transform:scale(1);transition:.2s cubic-bezier(.12,.4,.29,1.46) .1s}.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-disabled .ab-checkbox-input{cursor:not-allowed}.ab-checkbox-disabled span.ab-checkbox-control .ab-checkbox-outer{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-disabled svg.ab-checkbox-check{color:#cecece}.ab-checkbox-white .ab-checkbox-check{color:#e84040}.ab-checkbox-blue .ab-checkbox-check{color:#fff}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-outer{background-color:#0075ff;border-color:#0075ff}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox{margin-right:.08rem}
+.ab-checkbox{cursor:pointer;display:inline-flex;align-items:center;user-select:none;position:relative}.ab-checkbox-input{cursor:pointer;position:absolute;opacity:0;margin:0;padding:0;z-index:2}.ab-checkbox-inner{display:inline-block;margin-right:.06rem;position:relative;border:1px solid #b0b0b0;border-radius:.02rem;background-color:#fff;transition:.3s;flex-shrink:0}.ab-checkbox-inner::after{box-sizing:border-box;position:absolute;top:45%;left:22%;display:table;width:37.5%;height:62.5%;border-style:solid;border-width:2px;border-top:0;border-inline-start:0;transform:rotate(45deg) scale(0) translate(-50%,-50%);opacity:0;content:"";transition:.2s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.ab-checkbox-checked .ab-checkbox-inner::after{opacity:1;transform:rotate(45deg) scale(1) translate(-50%,-50%);transition:.2s cubic-bezier(.12,.4,.29,1.46) .1s}.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-disabled .ab-checkbox-input{cursor:not-allowed}.ab-checkbox-white .ab-checkbox-inner::after{border-color:#e84040}.ab-checkbox-white.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-blue .ab-checkbox-inner::after{border-color:#fff}.ab-checkbox-blue.ab-checkbox-checked .ab-checkbox-inner{transition:none;background-color:#0075ff;border-color:#0075ff}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0;background-color:#f5f5f5}.ab-checkbox-blue.ab-checkbox-disabled .ab-checkbox-inner::after{border-color:#cecece}.ab-checkbox-group{display:flex;flex-wrap:wrap}.ab-checkbox-group .ab-checkbox{margin-right:.08rem}

package/esm/confirm/style/index.css

@@ -1 +1 @@
-.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
+.ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}.ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}

package/esm/index.d.ts

@@ -14,6 +14,10 @@ export type { MoveProps } from './move';
 export { default as Move } from './move';
 export type { ShowMoreProps } from './show-more';
 export { default as ShowMore } from './show-more';
+export type { ReadMoreProps } from './read-more';
+export { default as ReadMore } from './read-more';
+export type { ReadMoreHtmlProps } from './read-more-html';
+export { default as ReadMoreHtml } from './read-more-html';
 export type { SelectOptionItem, SelectProps, SelectPlacement } from './select';
 export { default as Select } from './select';
 export type { ConfirmProps } from './confirm';
@@ -61,3 +65,5 @@ export { default as Trigger } from './trigger';
 export { composeRef, supportRef, fillRef } from './trigger/ref';
 export type { RadioProps, RadioGroupProps, RadioValue, RadioOptionItem } from './radio';
 export { Radio, RadioGroup } from './radio';
+export type { PortalProps } from './portal';
+export { default as Portal } from './portal';

package/esm/index.js

@@ -6,6 +6,8 @@ export { default as Popover } from './popover';
 export { default as Skeleton } from './skeleton';
 export { default as Move } from './move';
 export { default as ShowMore } from './show-more';
+export { default as ReadMore } from './read-more';
+export { default as ReadMoreHtml } from './read-more-html';
 export { default as Select } from './select';
 export { default as Confirm } from './confirm';
 export { default as Collapse } from './collapse';
@@ -29,4 +31,5 @@ export { default as LoadingBar } from './loading-bar';
 export { default as LoadingIcon } from './loading-icon';
 export { default as Trigger } from './trigger';
 export { composeRef, supportRef, fillRef } from './trigger/ref';
-export { Radio, RadioGroup } from './radio';
+export { Radio, RadioGroup } from './radio';
+export { default as Portal } from './portal';

package/esm/input/Adorn.d.ts

@@ -8,6 +8,10 @@ export interface AdornProps {
      * 样式前缀，这个需要使用者提供前缀
      */
     prefixCls: string;
+    /**
+     * 包裹input父级元素标签名
+     */
+    wrapTagName?: string;
     /**
      * 样式
      */

package/esm/input/Adorn.js

@@ -47,17 +47,21 @@ var Adorn = function Adorn(props) {
       onBlur(ev);
     }
   }, [onBlur, disabled]);
-  return /*#__PURE__*/React.createElement("div", {
+  var WrapTagName = props.wrapTagName;
+  return /*#__PURE__*/React.createElement(WrapTagName, {
     className: classNames(prefixCls, className, (_a = {}, _a["".concat(prefixCls, "-enter")] = isEnter || isFocus, _a), (_b = {}, _b["".concat(prefixCls, "-focus")] = isFocus, _b), (_c = {}, _c["".concat(prefixCls, "-disabled")] = disabled, _c)),
     onMouseEnter: onMouseEnterCallback,
     onMouseLeave: onMouseLeaveCallback
-  }, !isBlank(prefix) ? /*#__PURE__*/React.createElement("div", {
+  }, !isBlank(prefix) ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-prefix")
   }, prefix) : null, /*#__PURE__*/React.cloneElement(children, {
     onFocus: onFocusCallback,
     onBlur: onBlurCallback
-  }), !isBlank(suffix) ? /*#__PURE__*/React.createElement("div", {
+  }), !isBlank(suffix) ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-suffix")
   }, suffix) : null);
 };
+Adorn.defaultProps = {
+  wrapTagName: 'div'
+};
 export default Adorn;

package/esm/input/Input.d.ts

@@ -54,6 +54,7 @@ export declare class InputNotRef extends React.Component<InputPropsWithRef, Inpu
     inputRef: React.RefObject<HTMLInputElement>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         type: string;
         checkValueOnMounted: boolean;
     };

package/esm/input/Input.js

@@ -207,10 +207,12 @@ var InputNotRef = /** @class */function (_super) {
       title = _a.title,
       onKeyUp = _a.onKeyUp,
       name = _a.name,
-      autoComplete = _a.autoComplete;
+      autoComplete = _a.autoComplete,
+      wrapTagName = _a.wrapTagName;
     var value = this.state.value;
     var isFileUpload = this.isFileUpload();
     return /*#__PURE__*/React.createElement(Adorn, {
+      wrapTagName: wrapTagName,
       prefixCls: cls,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
@@ -239,6 +241,8 @@ var InputNotRef = /** @class */function (_super) {
   };
   InputNotRef.defaultProps = {
     defaultValue: '',
+    // TODO:: 在改动最小的情况下设置默认是div, 后续升级时默认需改成label
+    wrapTagName: 'div',
     type: 'text',
     checkValueOnMounted: false
   };

package/esm/input/TextArea.d.ts

@@ -54,6 +54,7 @@ export declare class TextAreaNotRef extends React.Component<TextAreaPropsWithRef
     textareaRef: React.RefObject<HTMLTextAreaElement>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         rows: number;
         maxlength: number;
         checkValueOnMounted: boolean;

package/esm/input/TextArea.js

@@ -176,10 +176,12 @@ var TextAreaNotRef = /** @class */function (_super) {
       prefix = _a.prefix,
       rows = _a.rows,
       maxLength = _a.maxLength,
-      name = _a.name;
+      name = _a.name,
+      wrapTagName = _a.wrapTagName;
     var value = this.state.value;
     return /*#__PURE__*/React.createElement(Adorn, {
       prefixCls: cls,
+      wrapTagName: wrapTagName,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       className: className,
@@ -202,6 +204,7 @@ var TextAreaNotRef = /** @class */function (_super) {
   };
   TextAreaNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     rows: 5,
     maxlength: 0,
     checkValueOnMounted: false

package/esm/input-number/index.d.ts

@@ -81,6 +81,7 @@ export declare class InputNumberNotRef extends React.Component<InputNumberPropsW
     keyboardHandler: AddListenerEventRemoveHandler;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         controls: boolean;
         isAllowNumberWithDotAndMinus: boolean;
         isOnlyAllowNumber: boolean;

package/esm/input-number/index.js

@@ -282,7 +282,8 @@ var InputNumberNotRef = /** @class */function (_super) {
       controls = _b.controls,
       isValueToString = _b.isValueToString,
       checkValueOnMounted = _b.checkValueOnMounted,
-      maxLength = _b.maxLength;
+      maxLength = _b.maxLength,
+      wrapTagName = _b.wrapTagName;
     var originalValueStr = this.state.originalValueStr;
     var hasControls = controls && !isValueToString;
     return /*#__PURE__*/React.createElement(Input, {
@@ -290,12 +291,14 @@ var InputNumberNotRef = /** @class */function (_super) {
       className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-has-controls")] = hasControls, _a)),
       placeholder: placeholder,
       disabled: disabled,
+      wrapTagName: wrapTagName,
       style: style,
       prefix: prefix,
       name: name,
       value: originalValueStr,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
+      "aria-label": this.props['aria-label'],
       onBlur: this.onBlur,
       onFocus: this.onFocus,
       suffix: hasControls ? /*#__PURE__*/React.createElement(ControlArrow, {
@@ -309,6 +312,7 @@ var InputNumberNotRef = /** @class */function (_super) {
   };
   InputNumberNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     controls: true,
     isAllowNumberWithDotAndMinus: false,
     isOnlyAllowNumber: false,

package/esm/input-phone/index.d.ts

@@ -48,6 +48,7 @@ export declare class InputPhoneNotRef extends React.Component<InputPhonePropsWit
     onFocusTimer: ReturnType<typeof setTimeout>;
     static defaultProps: {
         defaultValue: string;
+        wrapTagName: string;
         format: string;
         placeholderChar: string;
     };

package/esm/input-phone/index.js

@@ -195,6 +195,7 @@ var InputPhoneNotRef = /** @class */function (_super) {
   };
   InputPhoneNotRef.defaultProps = {
     defaultValue: '',
+    wrapTagName: 'div',
     format: '(111)111-1111',
     placeholderChar: '_'
   };

package/esm/lazy-image/index.d.ts

@@ -1,5 +1,9 @@
-import React, { MouseEventHandler, MouseEvent } from 'react';
-export interface LazyImageProps {
+import React from 'react';
+export interface LazyImageProps extends React.AllHTMLAttributes<HTMLElement> {
+    /**
+     * 标签名，默认div
+     */
+    tagName?: string;
     /**
      * 需要显示的图片
      */
@@ -9,34 +13,13 @@ export interface LazyImageProps {
      */
     alt: string;
     /**
-     * 鼠标悬浮时显示的文字
+     * 图片额外的属性
      */
-    title?: string;
+    imgHTMLAttributes?: React.ImgHTMLAttributes<HTMLImageElement>;
     /**
      * 类名
      */
     className?: string;
-    /**
-     * hover 图片，图片透明度(需要注意不要少了isMobile属性)
-     */
-    hoverOpacity?: number;
-    /**
-     * 判断是否是移动端，如果是移动端，将不再执行hoverOpacity, onMouseOver, onMouseOut
-     */
-    isMobile?: boolean;
-    /**
-     * 判断是否需要动态loading效果，如果提供了defaultImage，则不再有loading
-     */
-    active?: boolean;
-    onClick?: MouseEventHandler<HTMLImageElement>;
-    /**
-     * 鼠标放上去的回调（方便自定义样式）
-     */
-    onMouseOver?: MouseEventHandler<HTMLImageElement>;
-    /**
-     * 鼠标离开的回调（方便自定义样式）
-     */
-    onMouseOut?: MouseEventHandler<HTMLImageElement>;
     /**
      * 加载图片时的回调
      */
@@ -55,10 +38,9 @@ interface LazyImageStates {
 }
 declare class LazyImage extends React.Component<LazyImageProps, LazyImageStates> {
     static defaultProps: {
+        tagName: string;
         className: string;
-        hoverOpacity: any;
-        isMobile: boolean;
-        active: boolean;
+        imgHTMLAttributes: {};
     };
     prefixCls: string;
     rootRef: React.RefObject<HTMLImageElement>;
@@ -71,8 +53,6 @@ declare class LazyImage extends React.Component<LazyImageProps, LazyImageStates>
      * 监听原生lazy loading, 并回调不同的事件
      */
     originalLazyLoad: () => void;
-    onMouseOut: (ev: MouseEvent<HTMLImageElement>) => void;
-    onMouseOver: (ev: MouseEvent<HTMLImageElement>) => void;
     render(): JSX.Element;
 }
 export default LazyImage;

package/esm/lazy-image/index.js

@@ -32,6 +32,16 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React from 'react';
 import classNames from 'classnames';
 function noop() {}
@@ -90,36 +100,6 @@ var LazyImage = /** @class */function (_super) {
         };
       }
     };
-    _this.onMouseOut = function (ev) {
-      if (_this.props.isMobile) {
-        return;
-      }
-      var _a = _this.props,
-        hoverOpacity = _a.hoverOpacity,
-        onMouseOut = _a.onMouseOut;
-      var el = ev.target;
-      if (hoverOpacity) {
-        el.style.opacity = '1';
-      }
-      if (onMouseOut) {
-        onMouseOut(ev);
-      }
-    };
-    _this.onMouseOver = function (ev) {
-      if (_this.props.isMobile) {
-        return;
-      }
-      var _a = _this.props,
-        hoverOpacity = _a.hoverOpacity,
-        onMouseOver = _a.onMouseOver;
-      var el = ev.target;
-      if (hoverOpacity) {
-        el.style.opacity = hoverOpacity.toString();
-      }
-      if (onMouseOver) {
-        onMouseOver(ev);
-      }
-    };
     _this.state = {
       loading: true
     };
@@ -141,34 +121,33 @@ var LazyImage = /** @class */function (_super) {
     var cls = this.prefixCls;
     var _b = this.props,
       className = _b.className,
-      active = _b.active;
+      alt = _b.alt,
+      src = _b.src,
+      imgHTMLAttributes = _b.imgHTMLAttributes,
+      tagName = _b.tagName,
+      onError = _b.onError,
+      onLoading = _b.onLoading,
+      onLoaded = _b.onLoaded,
+      extraProps = __rest(_b, ["className", "alt", "src", "imgHTMLAttributes", "tagName", "onError", "onLoading", "onLoaded"]);
     var loading = this.state.loading;
-    var props = __assign({}, this.props);
-    delete props.className;
-    delete props.onMouseOver;
-    delete props.onMouseOut;
-    delete props.hoverOpacity;
-    delete props.isMobile;
-    delete props.active;
-    delete props.onLoading;
-    delete props.onLoaded;
-    return /*#__PURE__*/React.createElement("img", __assign({
-      alt: ""
-    }, props, {
-      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-loading")] = loading, _a["".concat(cls, "-active")] = loading && active, _a)),
-      onMouseOver: this.onMouseOver,
-      onMouseOut: this.onMouseOut,
+    var Wrapper = tagName;
+    // 需要图片根据容器自适应时，需增加mask
+    return /*#__PURE__*/React.createElement(Wrapper, __assign({}, extraProps, {
+      className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-loading")] = loading, _a))
+    }), /*#__PURE__*/React.createElement("img", __assign({
       onFocus: noop,
-      onBlur: noop,
+      onBlur: noop
+    }, imgHTMLAttributes, {
+      src: src,
+      alt: alt,
       ref: this.rootRef,
       loading: "lazy"
-    }));
+    })));
   };
   LazyImage.defaultProps = {
+    tagName: 'div',
     className: '',
-    hoverOpacity: null,
-    isMobile: false,
-    active: true
+    imgHTMLAttributes: {}
   };
   return LazyImage;
 }(React.Component);

package/esm/lazy-image/style/index.css

@@ -1 +1 @@
-.ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:1.4s infinite ab-skeleton-loading}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
+.ab-lazy-image{position:relative;overflow:hidden;transition:opacity .5s;display:flex;align-items:center;justify-content:center}.ab-lazy-image::after{display:none;content:"";position:absolute;left:0;top:0;width:100%;height:100%}.ab-lazy-image-loading::after{display:block;background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:1.4s infinite ab-skeleton-loading}.ab-lazy-image img{display:block;max-width:100%;max-height:100%}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

package/esm/loading-container/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AddListenerEventRemoveHandler } from '@autobest-ui/utils';
 export interface LoadingContainerProps {
     /**
      * 容器是否loading
@@ -13,23 +12,6 @@ export interface LoadingContainerProps {
      * 内容区域
      */
     children?: React.ReactElement | React.ReactElement[];
-    /**
-     * LoadingIcon是否需要保持在可视区域内
-     */
-    loadingInView?: boolean;
-}
-declare class LoadingContainer extends React.Component<LoadingContainerProps> {
-    prefixCls: string;
-    addScrollHandlerListener: AddListenerEventRemoveHandler;
-    wrapRef: React.RefObject<HTMLDivElement>;
-    iconRef: React.RefObject<HTMLSpanElement>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<LoadingContainerProps>): void;
-    componentWillUnmount(): void;
-    addScrollListener: () => void;
-    removeScrollListener: () => void;
-    setIconTopStyle: (top: string) => void;
-    onHandlerScroll: () => void;
-    render(): JSX.Element;
 }
+declare function LoadingContainer(props: LoadingContainerProps): JSX.Element;
 export default LoadingContainer;