@douyinfe/semi-ui 2.41.0-beta.0 → 2.41.1

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

@@ -68,3 +68,4 @@ export declare const isSemiIcon: (icon: any) => boolean;
 export declare function getActiveElement(): HTMLElement | null;
 export declare function isNodeContainsFocus(node: HTMLElement): boolean;
 export declare function getFocusableElements(node: HTMLElement): HTMLElement[];
+export declare function getScrollbarWidth(): number;

package/lib/cjs/_utils/index.js

@@ -7,6 +7,7 @@ exports.cloneDeep = cloneDeep;
 exports.getActiveElement = getActiveElement;
 exports.getFocusableElements = getFocusableElements;
 exports.getHighLightTextHTML = void 0;
+exports.getScrollbarWidth = getScrollbarWidth;
 exports.isNodeContainsFocus = isNodeContainsFocus;
 exports.registerMediaQuery = exports.isSemiIcon = void 0;
 exports.stopPropagation = stopPropagation;
@@ -174,4 +175,10 @@ function getFocusableElements(node) {
   // we are not filtered elements which are invisible
   const focusableElements = Array.from(node.querySelectorAll(focusableSelectorsStr));
   return focusableElements;
+}
+function getScrollbarWidth() {
+  if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
+    return window.innerWidth - document.documentElement.clientWidth;
+  }
+  return 0;
 }

package/lib/cjs/datePicker/dateInput.js

@@ -222,7 +222,7 @@ class DateInput extends _baseComponent.default {
       onChange: (rangeStartValue, e) => this.handleRangeInputChange(rangeStartValue, rangeEnd, e),
       onEnterPress: e => this.handleRangeInputEnterPress(e, rangeStart, rangeEnd),
       onFocus: e => this.handleRangeInputFocus(e, 'rangeStart'),
-      autofocus: autofocus,
+      autoFocus: autofocus,
       ref: rangeInputStartRef
     })), this.renderRangeSeparator(rangeStart, rangeEnd), /*#__PURE__*/_react.default.createElement("div", {
       className: `${inputCls} ${inputRightWrapperCls}`,
@@ -397,7 +397,7 @@ class DateInput extends _baseComponent.default {
       value: text,
       validateStatus: validateStatus,
       prefix: prefix,
-      autofocus: autofocus,
+      autoFocus: autofocus,
       size: size,
       onBlur: onBlur,
       onFocus: onFocus

package/lib/cjs/image/previewInner.d.ts

@@ -68,7 +68,6 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     foundation: PreviewInnerFoundation;
     constructor(props: PreviewInnerProps);
     static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
-    static getScrollbarWidth(): number;
     componentDidMount(): void;
     componentDidUpdate(prevProps: PreviewInnerProps, prevState: PreviewInnerStates): void;
     componentWillUnmount(): void;

package/lib/cjs/image/previewInner.js

@@ -18,6 +18,7 @@ var _previewFooter = _interopRequireDefault(require("./previewFooter"));
 var _previewImage = _interopRequireDefault(require("./previewImage"));
 var _previewInnerFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewInnerFoundation"));
 var _previewContext = require("./previewContext");
+var _utils = require("../_utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const prefixCls = _constants.cssClasses.PREFIX;
 let startMouseDown = {
@@ -223,14 +224,8 @@ class PreviewInner extends _baseComponent.default {
     }
     return willUpdateStates;
   }
-  static getScrollbarWidth() {
-    if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
-      return window.innerWidth - document.documentElement.clientWidth;
-    }
-    return 0;
-  }
   componentDidMount() {
-    this.scrollBarWidth = PreviewInner.getScrollbarWidth();
+    this.scrollBarWidth = (0, _utils.getScrollbarWidth)();
     this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();

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

@@ -8,7 +8,7 @@ export type { TextAreaProps } from './textarea';
 export type InputSize = 'small' | 'large' | 'default';
 export type InputMode = 'password';
 export type ValidateStatus = "default" | "error" | "warning" | "success";
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'placeholder' | 'onFocus' | 'onBlur'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -25,7 +25,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     defaultValue?: React.ReactText;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
     type?: string;
     showClear?: boolean;
     hideSuffix?: boolean;
@@ -81,7 +80,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         defaultValue: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         readonly: PropTypes.Requireable<boolean>;
-        autofocus: PropTypes.Requireable<boolean>;
+        autoFocus: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
         showClear: PropTypes.Requireable<boolean>;
         hideSuffix: PropTypes.Requireable<boolean>;

package/lib/cjs/input/index.js

@@ -148,10 +148,10 @@ class Input extends _baseComponent.default {
     this.foundation.init();
     const {
       disabled,
-      autofocus,
+      autoFocus,
       preventScroll
     } = this.props;
-    if (!disabled && autofocus) {
+    if (!disabled && (autoFocus || this.props['autofocus'])) {
       this.inputRef.current.focus({
         preventScroll
       });
@@ -314,7 +314,7 @@ class Input extends _baseComponent.default {
       {
         addonAfter,
         addonBefore,
-        autofocus,
+        autoFocus,
         clearIcon,
         className,
         disabled,
@@ -342,7 +342,7 @@ class Input extends _baseComponent.default {
         borderless,
         showClearIgnoreDisabled
       } = _a,
-      rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
+      rest = __rest(_a, ["addonAfter", "addonBefore", "autoFocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
     const {
       value,
       isFocus,
@@ -437,7 +437,7 @@ Input.propTypes = {
   defaultValue: _propTypes.default.any,
   disabled: _propTypes.default.bool,
   readonly: _propTypes.default.bool,
-  autofocus: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
   type: _propTypes.default.string,
   showClear: _propTypes.default.bool,
   hideSuffix: _propTypes.default.bool,

package/lib/cjs/input/textarea.d.ts

@@ -14,7 +14,7 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     defaultValue?: string;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
+    autoFocus?: boolean;
     showCounter?: boolean;
     showClear?: boolean;
     onClear?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;

package/lib/cjs/input/textarea.js

@@ -198,9 +198,10 @@ class TextArea extends _baseComponent.default {
         maxLength,
         minLength,
         showClear,
-        borderless
+        borderless,
+        autoFocus
       } = _a,
-      rest = __rest(_a, ["autosize", "placeholder", "onEnterPress", "onResize", "disabled", "readonly", "className", "showCounter", "validateStatus", "maxCount", "defaultValue", "style", "forwardRef", "getValueLength", "maxLength", "minLength", "showClear", "borderless"]);
+      rest = __rest(_a, ["autosize", "placeholder", "onEnterPress", "onResize", "disabled", "readonly", "className", "showCounter", "validateStatus", "maxCount", "defaultValue", "style", "forwardRef", "getValueLength", "maxLength", "minLength", "showClear", "borderless", "autoFocus"]);
     const {
       isFocus,
       value,
@@ -222,6 +223,7 @@ class TextArea extends _baseComponent.default {
       [`${prefixCls}-textarea-showClear`]: showClear
     });
     const itemProps = Object.assign(Object.assign({}, (0, _omit2.default)(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
+      autoFocus: autoFocus || this.props['autofocus'],
       className: itemCls,
       disabled,
       readOnly: readonly,

package/lib/cjs/modal/Modal.d.ts

@@ -97,7 +97,6 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
     constructor(props: ModalReactProps);
     get adapter(): ModalAdapter;
     static getDerivedStateFromProps(props: ModalReactProps, prevState: ModalState): Partial<ModalState>;
-    static getScrollbarWidth(): number;
     static info: (props: ModalReactProps) => {
         destroy: () => void;
         update: (newConfig: ModalReactProps) => void;

package/lib/cjs/modal/Modal.js

@@ -19,6 +19,7 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 var _confirm = _interopRequireWildcard(require("./confirm"));
 var _useModal = _interopRequireDefault(require("./useModal"));
 var _cssAnimation = _interopRequireDefault(require("../_cssAnimation"));
+var _utils = require("../_utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -239,14 +240,8 @@ class Modal extends _baseComponent.default {
     // }
     return newState;
   }
-  static getScrollbarWidth() {
-    if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
-      return window.innerWidth - document.documentElement.clientWidth;
-    }
-    return 0;
-  }
   componentDidMount() {
-    this.scrollBarWidth = Modal.getScrollbarWidth();
+    this.scrollBarWidth = (0, _utils.getScrollbarWidth)();
     this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();

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

@@ -49,6 +49,9 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
     private _active;
     constructor(props: SideSheetReactProps);
     context: ContextValue;
+    private bodyOverflow;
+    private scrollBarWidth;
+    private originBodyWidth;
     get adapter(): SideSheetAdapter;
     static getDerivedStateFromProps(props: SideSheetReactProps, prevState: SideSheetState): Partial<SideSheetState>;
     componentDidMount(): void;

package/lib/cjs/sideSheet/index.js

@@ -16,6 +16,7 @@ var _SideSheetContent = _interopRequireDefault(require("./SideSheetContent"));
 var _sideSheetFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheetFoundation"));
 require("@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheet.css");
 var _cssAnimation = _interopRequireDefault(require("../_cssAnimation"));
+var _utils = require("../_utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -44,6 +45,9 @@ class SideSheet extends _baseComponent.default {
       displayNone: !this.props.visible
     };
     this.foundation = new _sideSheetFoundation.default(this.adapter);
+    this.bodyOverflow = '';
+    this.scrollBarWidth = 0;
+    this.originBodyWidth = '100%';
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -51,16 +55,19 @@ class SideSheet extends _baseComponent.default {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && document) {
+        this.bodyOverflow = document.body.style.overflow || '';
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
+          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
         }
       },
       enabledBodyScroll: () => {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && document) {
-          document.body.style.overflow = '';
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          document.body.style.overflow = this.bodyOverflow;
+          document.body.style.width = this.originBodyWidth;
         }
       },
       notifyCancel: e => {
@@ -99,6 +106,8 @@ class SideSheet extends _baseComponent.default {
     return newState;
   }
   componentDidMount() {
+    this.scrollBarWidth = (0, _utils.getScrollbarWidth)();
+    this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();
     }

package/lib/cjs/slider/index.js

@@ -442,7 +442,7 @@ class Slider extends _baseComponent.default {
       getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-        this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
+        this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
         this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
       },
       onHandleMove: function (mousePos, isMin) {
@@ -506,6 +506,8 @@ class Slider extends _baseComponent.default {
         });
       },
       onHandleUpBefore: e => {
+        var _a, _b;
+        (_b = (_a = this.props).onMouseUp) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         e.stopPropagation();
         e.preventDefault();
         document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
@@ -633,6 +635,7 @@ Slider.propTypes = {
   vertical: _propTypes.default.bool,
   onAfterChange: _propTypes.default.func,
   onChange: _propTypes.default.func,
+  onMouseUp: _propTypes.default.func,
   tooltipVisible: _propTypes.default.bool,
   style: _propTypes.default.object,
   className: _propTypes.default.string,

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

@@ -68,3 +68,4 @@ export declare const isSemiIcon: (icon: any) => boolean;
 export declare function getActiveElement(): HTMLElement | null;
 export declare function isNodeContainsFocus(node: HTMLElement): boolean;
 export declare function getFocusableElements(node: HTMLElement): HTMLElement[];
+export declare function getScrollbarWidth(): number;

package/lib/es/_utils/index.js

@@ -158,4 +158,10 @@ export function getFocusableElements(node) {
   // we are not filtered elements which are invisible
   const focusableElements = Array.from(node.querySelectorAll(focusableSelectorsStr));
   return focusableElements;
+}
+export function getScrollbarWidth() {
+  if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
+    return window.innerWidth - document.documentElement.clientWidth;
+  }
+  return 0;
 }

package/lib/es/datePicker/dateInput.js

@@ -215,7 +215,7 @@ export default class DateInput extends BaseComponent {
       onChange: (rangeStartValue, e) => this.handleRangeInputChange(rangeStartValue, rangeEnd, e),
       onEnterPress: e => this.handleRangeInputEnterPress(e, rangeStart, rangeEnd),
       onFocus: e => this.handleRangeInputFocus(e, 'rangeStart'),
-      autofocus: autofocus,
+      autoFocus: autofocus,
       ref: rangeInputStartRef
     })), this.renderRangeSeparator(rangeStart, rangeEnd), /*#__PURE__*/React.createElement("div", {
       className: `${inputCls} ${inputRightWrapperCls}`,
@@ -390,7 +390,7 @@ export default class DateInput extends BaseComponent {
       value: text,
       validateStatus: validateStatus,
       prefix: prefix,
-      autofocus: autofocus,
+      autoFocus: autofocus,
       size: size,
       onBlur: onBlur,
       onFocus: onFocus

package/lib/es/image/previewInner.d.ts

@@ -68,7 +68,6 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     foundation: PreviewInnerFoundation;
     constructor(props: PreviewInnerProps);
     static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
-    static getScrollbarWidth(): number;
     componentDidMount(): void;
     componentDidUpdate(prevProps: PreviewInnerProps, prevState: PreviewInnerStates): void;
     componentWillUnmount(): void;

package/lib/es/image/previewInner.js

@@ -12,6 +12,7 @@ import Footer from "./previewFooter";
 import PreviewImage from "./previewImage";
 import PreviewInnerFoundation from '@douyinfe/semi-foundation/lib/es/image/previewInnerFoundation';
 import { PreviewContext } from "./previewContext";
+import { getScrollbarWidth } from "../_utils";
 const prefixCls = cssClasses.PREFIX;
 let startMouseDown = {
   x: 0,
@@ -216,14 +217,8 @@ export default class PreviewInner extends BaseComponent {
     }
     return willUpdateStates;
   }
-  static getScrollbarWidth() {
-    if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
-      return window.innerWidth - document.documentElement.clientWidth;
-    }
-    return 0;
-  }
   componentDidMount() {
-    this.scrollBarWidth = PreviewInner.getScrollbarWidth();
+    this.scrollBarWidth = getScrollbarWidth();
     this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();

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

@@ -8,7 +8,7 @@ export type { TextAreaProps } from './textarea';
 export type InputSize = 'small' | 'large' | 'default';
 export type InputMode = 'password';
 export type ValidateStatus = "default" | "error" | "warning" | "success";
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'placeholder' | 'onFocus' | 'onBlur'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -25,7 +25,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     defaultValue?: React.ReactText;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
     type?: string;
     showClear?: boolean;
     hideSuffix?: boolean;
@@ -81,7 +80,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         defaultValue: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         readonly: PropTypes.Requireable<boolean>;
-        autofocus: PropTypes.Requireable<boolean>;
+        autoFocus: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
         showClear: PropTypes.Requireable<boolean>;
         hideSuffix: PropTypes.Requireable<boolean>;

package/lib/es/input/index.js

@@ -141,10 +141,10 @@ class Input extends BaseComponent {
     this.foundation.init();
     const {
       disabled,
-      autofocus,
+      autoFocus,
       preventScroll
     } = this.props;
-    if (!disabled && autofocus) {
+    if (!disabled && (autoFocus || this.props['autofocus'])) {
       this.inputRef.current.focus({
         preventScroll
       });
@@ -307,7 +307,7 @@ class Input extends BaseComponent {
       {
         addonAfter,
         addonBefore,
-        autofocus,
+        autoFocus,
         clearIcon,
         className,
         disabled,
@@ -335,7 +335,7 @@ class Input extends BaseComponent {
         borderless,
         showClearIgnoreDisabled
       } = _a,
-      rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
+      rest = __rest(_a, ["addonAfter", "addonBefore", "autoFocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
     const {
       value,
       isFocus,
@@ -429,7 +429,7 @@ Input.propTypes = {
   defaultValue: PropTypes.any,
   disabled: PropTypes.bool,
   readonly: PropTypes.bool,
-  autofocus: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   type: PropTypes.string,
   showClear: PropTypes.bool,
   hideSuffix: PropTypes.bool,

package/lib/es/input/textarea.d.ts

@@ -14,7 +14,7 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     defaultValue?: string;
     disabled?: boolean;
     readonly?: boolean;
-    autofocus?: boolean;
+    autoFocus?: boolean;
     showCounter?: boolean;
     showClear?: boolean;
     onClear?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;

package/lib/es/input/textarea.js

@@ -191,9 +191,10 @@ class TextArea extends BaseComponent {
         maxLength,
         minLength,
         showClear,
-        borderless
+        borderless,
+        autoFocus
       } = _a,
-      rest = __rest(_a, ["autosize", "placeholder", "onEnterPress", "onResize", "disabled", "readonly", "className", "showCounter", "validateStatus", "maxCount", "defaultValue", "style", "forwardRef", "getValueLength", "maxLength", "minLength", "showClear", "borderless"]);
+      rest = __rest(_a, ["autosize", "placeholder", "onEnterPress", "onResize", "disabled", "readonly", "className", "showCounter", "validateStatus", "maxCount", "defaultValue", "style", "forwardRef", "getValueLength", "maxLength", "minLength", "showClear", "borderless", "autoFocus"]);
     const {
       isFocus,
       value,
@@ -215,6 +216,7 @@ class TextArea extends BaseComponent {
       [`${prefixCls}-textarea-showClear`]: showClear
     });
     const itemProps = Object.assign(Object.assign({}, _omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
+      autoFocus: autoFocus || this.props['autofocus'],
       className: itemCls,
       disabled,
       readOnly: readonly,

package/lib/es/modal/Modal.d.ts

@@ -97,7 +97,6 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
     constructor(props: ModalReactProps);
     get adapter(): ModalAdapter;
     static getDerivedStateFromProps(props: ModalReactProps, prevState: ModalState): Partial<ModalState>;
-    static getScrollbarWidth(): number;
     static info: (props: ModalReactProps) => {
         destroy: () => void;
         update: (newConfig: ModalReactProps) => void;

package/lib/es/modal/Modal.js

@@ -21,6 +21,7 @@ import BaseComponent from '../_base/baseComponent';
 import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
 import useModal from './useModal';
 import CSSAnimation from "../_cssAnimation";
+import { getScrollbarWidth } from '../_utils';
 export const destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
@@ -229,14 +230,8 @@ class Modal extends BaseComponent {
     // }
     return newState;
   }
-  static getScrollbarWidth() {
-    if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
-      return window.innerWidth - document.documentElement.clientWidth;
-    }
-    return 0;
-  }
   componentDidMount() {
-    this.scrollBarWidth = Modal.getScrollbarWidth();
+    this.scrollBarWidth = getScrollbarWidth();
     this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();

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

@@ -49,6 +49,9 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
     private _active;
     constructor(props: SideSheetReactProps);
     context: ContextValue;
+    private bodyOverflow;
+    private scrollBarWidth;
+    private originBodyWidth;
     get adapter(): SideSheetAdapter;
     static getDerivedStateFromProps(props: SideSheetReactProps, prevState: SideSheetState): Partial<SideSheetState>;
     componentDidMount(): void;

package/lib/es/sideSheet/index.js

@@ -18,6 +18,7 @@ import SideSheetContent from './SideSheetContent';
 import SideSheetFoundation from '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheet.css';
 import CSSAnimation from "../_cssAnimation";
+import { getScrollbarWidth } from '../_utils';
 const prefixCls = cssClasses.PREFIX;
 const defaultWidthList = strings.WIDTH;
 const defaultHeight = strings.HEIGHT;
@@ -37,6 +38,9 @@ export default class SideSheet extends BaseComponent {
       displayNone: !this.props.visible
     };
     this.foundation = new SideSheetFoundation(this.adapter);
+    this.bodyOverflow = '';
+    this.scrollBarWidth = 0;
+    this.originBodyWidth = '100%';
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -44,16 +48,19 @@ export default class SideSheet extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && document) {
+        this.bodyOverflow = document.body.style.overflow || '';
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
+          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
         }
       },
       enabledBodyScroll: () => {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && document) {
-          document.body.style.overflow = '';
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          document.body.style.overflow = this.bodyOverflow;
+          document.body.style.width = this.originBodyWidth;
         }
       },
       notifyCancel: e => {
@@ -92,6 +99,8 @@ export default class SideSheet extends BaseComponent {
     return newState;
   }
   componentDidMount() {
+    this.scrollBarWidth = getScrollbarWidth();
+    this.originBodyWidth = document.body.style.width;
     if (this.props.visible) {
       this.foundation.beforeShow();
     }

package/lib/es/slider/index.js

@@ -435,7 +435,7 @@ export default class Slider extends BaseComponent {
       getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-        this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
+        this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
         this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
       },
       onHandleMove: function (mousePos, isMin) {
@@ -499,6 +499,8 @@ export default class Slider extends BaseComponent {
         });
       },
       onHandleUpBefore: e => {
+        var _a, _b;
+        (_b = (_a = this.props).onMouseUp) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         e.stopPropagation();
         e.preventDefault();
         document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
@@ -625,6 +627,7 @@ Slider.propTypes = {
   vertical: PropTypes.bool,
   onAfterChange: PropTypes.func,
   onChange: PropTypes.func,
+  onMouseUp: PropTypes.func,
   tooltipVisible: PropTypes.bool,
   style: PropTypes.object,
   className: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.41.0-beta.0",
+    "version": "2.41.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -71,7 +71,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f83f6076d1c6f3b64c1d9359a335a7182d991fb6",
+    "gitHead": "145acfe4a9dcca5eab26f40595f00eca521d0fc8",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",