chore:backup

package.json

@@ -194,7 +194,7 @@
         "svgo": "^2.7.0",
         "terser-webpack-plugin": "^4.2.3",
         "ts-loader": "^5.4.5",
-        "typescript": "4.4.3",
+        "typescript": "^4.8.3",
         "webpack": "^4.46.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.2",
@@ -225,4 +225,4 @@
         ]
     },
     "license": "MIT"
-}
+}

packages/semi-foundation/modal/animation.scss

@@ -0,0 +1,26 @@
+$animation_duration-modal_show: 0.12s; // 弹窗打开-动画持续时间
+$animation_function-modal_show: cubic-bezier(0, 0, 0.26, 1.38); // 弹窗打开-过渡曲线
+$animation_delay-modal_show: 0ms; // 弹窗打开-延迟时间
+
+$animation_duration-modal_hide: 0.09s; // 弹窗关闭-动画持续时间
+$animation_function-modal_hide: cubic-bezier(0.25, 0.46, 0.45, 0.94); // 弹窗关闭-过渡曲线
+$animation_delay-modal_hide: 0ms; // 弹窗关闭-延迟时间
+
+
+$animation_duration-modal_mask_show: 0.09s; // 弹窗打开时-蒙层颜色-动画持续时间
+$animation_function-modal_mask_show: cubic-bezier(0, 0, 0.26, 1.38); // 弹窗打开时-蒙层颜色-过渡曲线
+$animation_delay-modal_mask_show: 0ms; // 弹窗打开时-蒙层颜色-延迟时间
+
+$animation_duration-modal_mask_hide: 0.09s; // 弹窗关闭时-蒙层颜色-动画持续时间
+$animation_function-modal_mask_hide: cubic-bezier(0.25, 0.46, 0.45, 0.94); // 弹窗关闭时-蒙层颜色-过渡曲线
+$animation_delay-modal_mask_hide: 0ms; // 弹窗关闭时-蒙层颜色-延迟时间
+
+
+$animation_transform_scale-modal_content-open: 0.7; // 弹窗打开时-缩放比例
+$animation_opacity-modal_content_open : 0; // 弹窗打开时-起始透明度
+$animation_transform_scale-modal_content-close: 0.7; // 弹窗关闭时-缩放比例
+$animation_opacity-modal_content-close: 0; // 弹窗关闭时-起始透明度
+
+$animation_opacity-modal_mask-open: 0; // 弹窗打开时-蒙层起始透明度
+$animation_opacity-modal_mask-close: 0; // 弹窗关闭时-蒙层起始透明度
+

packages/semi-foundation/modal/modal.scss

@@ -1,4 +1,5 @@
 //@import '../theme/variables.scss';
+@import "./animation.scss";
 @import "./variables.scss";
 
 $module: #{$prefix}-modal;
@@ -9,7 +10,7 @@ $module: #{$prefix}-modal;
     // width: 600px;
     margin: $spacing-modal-marginY $spacing-modal-marginX;
     color: $color-modal_main-text;
-    
+
     &-mask {
         position: fixed;
         top: $spacing-modal_mask-top;
@@ -20,18 +21,18 @@ $module: #{$prefix}-modal;
         height: 100%;
         // filter: alpha(opacity=50);
         z-index: $z-modal-mask;
-        
+
         &-hidden {
             display: none;
         }
     }
-    
+
     &-icon-wrapper {
         display: inline-flex;
         margin-right: $spacing-modal_icon_wrapper-marginRight;
         width: $width-icon-extra-large;
     }
-    
+
     &-wrap {
         position: fixed;
         overflow: auto;
@@ -47,7 +48,7 @@ $module: #{$prefix}-modal;
             align-items: center;
         }
     }
-    
+
     &-title {
         display: inline-flex;
         align-items: flex-start;
@@ -55,7 +56,7 @@ $module: #{$prefix}-modal;
         width: $width-modal_title;
         margin: $spacing-modal_title-margin;
     }
-    
+
     &-content {
         position: relative;
         display: flex;
@@ -71,17 +72,17 @@ $module: #{$prefix}-modal;
         overflow: hidden;
         @include shadow-elevated;
     }
-    
+
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
     }
-    
+
     // &-close {
     // position: absolute;
     // right: 15px;
     // }
-    
+
     &-header {
         display: flex;
         align-items: flex-start;
@@ -93,24 +94,24 @@ $module: #{$prefix}-modal;
         color: $color-modal_main-text;
         border-bottom: $width-modal_header-border solid $color-modal_header-border;
     }
-    
+
     &-body-wrapper {
         display: flex;
         align-items: flex-start;
         margin: $spacing-modal_body_wrapper-marginY $spacing-modal_body_wrapper-marginX;
     }
-    
+
     &-body {
         flex: 1 1 auto;
         // padding: $spacing-loose;
         margin: $spacing-modal_body-margin;
         padding: $spacing-modal_body-padding;
     }
-    
+
     &-withIcon {
         margin-left: $spacing-modal_content_withicon-marginLeft;
     }
-    
+
     &-footer {
         // padding: $spacing-loose;
         margin: $spacing-modal_footer-marginY $spacing-modal_footer-marginX;
@@ -119,62 +120,62 @@ $module: #{$prefix}-modal;
         border-radius: $radius-modal_footer;
         border-top: $width-modal_footer-border solid $color-modal_footer-border;
         background-color: $color-modal_footer-bg;
-        
+
         .#{$prefix}-button {
             margin-left: $spacing-modal_footer_button-marginLeft;
             margin-right: 0;
         }
     }
-    
+
     &-confirm {
         .#{$module}-header {
             margin-bottom: $spacing-modal_confirm_header-marginBottom;
         }
-        
+
         // &-content-withIcon {
         // margin-left: 36px;
         // }
-        
+
         &-icon-wrapper {
             display: inline-flex;
             margin-right: $spacing-modal_confirm_icon_wrapper-marginRight;
             width: $width-icon-extra-large;
         }
-        
+
         &-icon {
             display: inline-flex;
             color: $color-modal_primary-icon;
         }
     }
-    
+
     &-info-icon {
         color: $color-modal_info-icon;
     }
-    
+
     &-success-icon {
         color: $color-modal_success-icon;
     }
-    
+
     &-error-icon {
         color: $color-modal_danger-icon;
     }
-    
+
     &-warning-icon {
         color: $color-modal_warning-icon;
     }
-    
+
     &-small {
         width: $width-modal_small;
     }
-    
+
     &-medium {
         width: $width-modal_medium;
     }
-    
+
     &-large {
         width: $width-modal_large;
     }
-    
+
     &-full-width {
         width: $width-modal_full_width;
     }
@@ -204,30 +205,33 @@ $module: #{$prefix}-modal;
     display: none;
 }
 
-.#{$module}-content-animate-hide {
-    animation: 90ms #{$module}-content-keyframe-hide ease forwards;
-}
+
 
 .#{$module}-content-animate-show {
-    animation: 120ms #{$module}-content-keyframe-show cubic-bezier(0, 0, 0.26, 1.38) forwards;
+    animation: $animation_duration-modal_show #{$module}-content-keyframe-show $animation_function-modal_show $animation_delay-modal_show forwards;
 }
 
-.#{$module}-mask-animate-hide {
-    animation: 90ms #{$module}-mask-keyframe-hide ease forwards;
+.#{$module}-content-animate-hide {
+    animation: $animation_duration-modal_hide #{$module}-content-keyframe-hide $animation_function-modal_hide $animation_delay-modal_hide forwards;
 }
 
 .#{$module}-mask-animate-show {
-    animation: 90ms #{$module}-mask-keyframe-show ease forwards;
+    animation: $animation_duration-modal_mask_show #{$module}-mask-keyframe-show $animation_function-modal_mask_show $animation_delay-modal_mask_show forwards;
 }
 
+.#{$module}-mask-animate-hide {
+    animation: $animation_duration-modal_mask_hide #{$module}-mask-keyframe-hide $animation_function-modal_mask_hide $animation_delay-modal_mask_hide forwards;
+}
+
+
 
 @keyframes #{$module}-content-keyframe-show {
-    
+
     0% {
-        opacity: 0;
-        transform: scale(0.7);
+        opacity: $animation_opacity-modal_content_open;
+        transform: scale($animation_transform_scale-modal_content-open);
     }
-    
+
     100% {
         opacity: 1;
         transform: scale(1);
@@ -235,38 +239,38 @@ $module: #{$prefix}-modal;
 }
 
 @keyframes #{$module}-content-keyframe-hide {
-    
+
     0% {
         opacity: 1;
         transform: scale(1);
     }
-    
+
     100% {
-        opacity: 0;
-        transform: scale(0.7);
+        opacity: $animation_opacity-modal_content-close;
+        transform: scale($animation_transform_scale-modal_content-close);
     }
 }
 
 
 @keyframes #{$module}-mask-keyframe-show {
-    
+
     0% {
-        opacity: 0;
+        opacity: $animation_opacity-modal_mask-open;
     }
-    
+
     100% {
         opacity: 1;
     }
 }
 
 @keyframes #{$module}-mask-keyframe-hide {
-    
+
     0% {
         opacity: 1;
     }
-    
+
     100% {
-        opacity: 0;
+        opacity: $animation_opacity-modal_mask-close;
     }
 }
 

packages/semi-foundation/modal/modalContentFoundation.ts

@@ -8,7 +8,9 @@ export interface ModalContentProps extends ModalProps {
     isFullScreen?: boolean;
     contentClassName?: string,
     maskClassName?: string;
-    onAnimationEnd?: () => void;
+    onAnimationEnd?: (e:any) => void;
+    maskExtraProps?:Record<string, any>;
+    contentExtraProps?:Record<string, any>;
 }
 
 export interface ModalContentState {

packages/semi-foundation/sideSheet/sideSheetFoundation.ts

@@ -19,7 +19,7 @@ export interface SideSheetProps {
     mask?: boolean;
     maskClosable?: boolean;
     maskStyle?: Record<string, any>;
-    motion?: Motion;
+    motion?: boolean;
     onCancel?: (e: any) => void;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     size?: 'small' | 'medium' | 'large';
@@ -96,43 +96,13 @@ export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter
         this._adapter.setShouldRender(shouldRender);
     }
 
-    mergeMotionProp = (motion: any, prop: string, cb: () => void) => {
-        const mergedMotion = typeof (motion) === 'undefined' || motion ? {
-            ...motion,
-            [prop]: (...args: any) => {
-                const curr = get(motion, prop);
-                if (typeof curr === 'function') {
-                    curr(...args);
-                }
-                cb();
-            },
-        } : false;
-        return mergedMotion;
-    };
-
-    getMergedMotion = () => {
-        const {
-            motion,
-            visible,
-            keepDOM,
-        } = this.getProps();
-        let mergedMotion = this.mergeMotionProp(motion, 'didEnter', (...args) => {
-            const didEnter = get(motion, 'didEnter');
-            if (typeof didEnter === 'function') {
-                didEnter(...args);
-            }
-            this._adapter.notifyVisibleChange(visible);
-        });
-        mergedMotion = this.mergeMotionProp(mergedMotion, 'didLeave', (...args) => {
-            const didLeave = get(motion, 'didLeave');
-            if (typeof didLeave === 'function') {
-                didLeave(...args);
-            }
-            this._adapter.notifyVisibleChange(visible);
-        });
-        if (keepDOM) {
-            mergedMotion = this.mergeMotionProp(mergedMotion, 'didLeave', this._adapter.toggleHidden.bind(this, true));
-        }
-        return mergedMotion;
-    };
+    onVisibleChange(visible: boolean) {
+        this._adapter.notifyVisibleChange(visible);
+    }
+
+
+    toggleHidden = (hidden:boolean)=>{
+        this._adapter.toggleHidden(hidden);
+    }
+
 }

packages/semi-foundation/utils/uuid.ts

@@ -5,9 +5,7 @@ export default function getUuid(prefix: string) {
 // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 function getUuidv4() {
     try {
-        return String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-            (Number(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16)
-        );
+        return crypto.randomUUID();
     } catch (err) {
         return getUuid('semi');
     }
@@ -15,9 +13,9 @@ function getUuidv4() {
 
 /**
  * Get a random id with prefix, it not strictly guarantee id uniqueness
- * 
+ *
  * Note: the return value of getUuid is too long, we need a short one
- * 
+ *
  * @example
  * getUuidShort({ prefix: 'semi' }) => 'semi-46dinzc'
  * getUuidShort({ prefix: '' }) => '0eer2i0'

packages/semi-ui/_utils/index.ts

@@ -196,3 +196,4 @@ export function getFocusableElements(node: HTMLElement) {
     const focusableElements = Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
     return focusableElements;
 }
+

packages/semi-ui/modal/Modal.tsx

@@ -16,6 +16,7 @@ import { Locale } from '../locale/interface';
 import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
 import { MotionObject } from "@douyinfe/semi-foundation/utils/type";
+import CSSAnimation from "@douyinfe/semi-ui/_cssAnimation";
 
 export const destroyFns: any[] = [];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
@@ -363,34 +364,67 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         const classList = cls(className, {
             [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.hidden && !visible,
         });
-        const contentClassName = motion ? cls({
-            [`${cssClasses.DIALOG}-content-animate-hide`]: !visible,
-            [`${cssClasses.DIALOG}-content-animate-show`]: visible
-        }) : null;
         const maskClassName = motion ? cls({
             [`${cssClasses.DIALOG}-mask-animate-hide`]: !visible,
             [`${cssClasses.DIALOG}-mask-animate-show`]: visible
         }) : null;
 
+        if (!motion){
+            return <ModalContent
+                {...restProps}
+                isFullScreen={this.state.isFullScreen}
+                maskClassName={maskClassName}
+                className={classList}
+                getPopupContainer={getPopupContainer}
+                maskStyle={maskStyle}
+                style={style}
+                ref={this.modalRef}
+                footer={renderFooter}
+                onClose={this.handleCancel}
+
+            />;
+        }
+
         return (
             <Portal style={wrapperStyle} getPopupContainer={getPopupContainer}>
-                <ModalContent
-                    {...restProps}
-                    isFullScreen={this.state.isFullScreen}
-                    contentClassName={contentClassName}
-                    maskClassName={maskClassName}
-                    className={classList}
-                    getPopupContainer={getPopupContainer}
-                    maskStyle={maskStyle}
-                    style={style}
-                    ref={this.modalRef}
-                    onAnimationEnd={() => {
+                <CSSAnimation animationState={visible?'enter':'leave'}
+                    startClassName={visible?`${cssClasses.DIALOG}-content-animate-show`:`${cssClasses.DIALOG}-content-animate-hide`}
+                    onAnimationEnd={()=>{
                         this.updateHiddenState();
                     }}
-                    footer={renderFooter}
-                    onClose={this.handleCancel}
-
-                />
+                >
+                    {
+                        ({ animationClassName, animationEventsNeedBind })=>{
+                            return <CSSAnimation animationState={visible?'enter':'leave'}
+                                startClassName={visible?`${cssClasses.DIALOG}-mask-animate-show`:`${cssClasses.DIALOG}-mask-animate-hide`}
+                                onAnimationEnd={()=>{
+                                    this.updateHiddenState();
+                                }}
+                            >
+                                {
+                                    ({ animationClassName:maskAnimationClassName, animationEventsNeedBind:maskAnimationEventsNeedBind })=>{
+                                        return <ModalContent
+                                            {...restProps}
+                                            contentExtraProps={animationEventsNeedBind}
+                                            maskExtraProps={maskAnimationEventsNeedBind}
+                                            isFullScreen={this.state.isFullScreen}
+                                            contentClassName={animationClassName}
+                                            maskClassName={maskAnimationClassName}
+                                            className={classList}
+                                            getPopupContainer={getPopupContainer}
+                                            maskStyle={maskStyle}
+                                            style={style}
+                                            ref={this.modalRef}
+                                            footer={renderFooter}
+                                            onClose={this.handleCancel}
+
+                                        />;
+                                    }
+                                }
+                            </CSSAnimation>;
+                        }
+                    }
+                </CSSAnimation>
             </Portal>
         );
     };

packages/semi-ui/modal/ModalContent.tsx

@@ -154,7 +154,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             const className = cls(`${cssClasses.DIALOG}-mask`, {
                 // [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
             });
-            return <div key="mask" className={cls(className, maskClassName)} style={props.maskStyle}/>;
+            return <div key="mask" {...this.props.maskExtraProps} className={cls(className, maskClassName)} style={props.maskStyle}/>;
         }
         return null;
     };
@@ -324,6 +324,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                     })}
                     onClick={maskClosable ? this.onMaskClick : null}
                     onMouseUp={maskClosable ? this.onMaskMouseUp : null}
+                    {...this.props.contentExtraProps}
                 >
                     {this.getDialogElement()}
                 </div>

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -28,7 +28,8 @@ export interface SideSheetContentProps {
     children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
-    eventHandlers?: {[key:string]: React.EventHandler<any>};
+    maskExtraProps?: {[key:string]: any};
+    wrapperExtraProps?: {[key:string]: any};
 }
 
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
@@ -76,6 +77,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                     className={cls(`${prefixCls}-mask`, this.props.maskClassName ?? "")}
                     style={maskStyle}
                     onClick={maskClosable ? this.onMaskClick : null}
+                    {...this.props.maskExtraProps}
                 />
             );
         }
@@ -139,6 +141,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                 className={cls(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, this.props.dialogClassName??"")}
                 // onMouseDown={this.onDialogMouseDown}
                 style={{ ...props.style, ...style }}
+                {...this.props.wrapperExtraProps}
                 // id={this.dialogId}
             >
                 <div className={`${prefixCls}-content`}>
@@ -162,7 +165,6 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             mask,
             className,
             width,
-            eventHandlers = {}
         } = this.props;
         const wrapperCls = cls(className, {
             [`${prefixCls}-fixed`]: !mask,
@@ -172,7 +174,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             wrapperStyle.width = width;
         }
         return (
-            <div className={wrapperCls} style={wrapperStyle} {...eventHandlers}>
+            <div className={wrapperCls} style={wrapperStyle}>
                 {this.getMaskElement()}
                 {this.getDialogElement()}
             </div>

packages/semi-ui/sideSheet/index.tsx

@@ -14,7 +14,8 @@ import SideSheetFoundation, {
     SideSheetState
 } from '@douyinfe/semi-foundation/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/sideSheet/sideSheet.scss';
-import CSSAnimation, { mergeAnimationFunction } from "../_cssAnimation";
+import CSSAnimation from "../_cssAnimation";
+import { executeWhenCallTimesEnough } from "@douyinfe/semi-ui/_utils";
 
 const prefixCls = cssClasses.PREFIX;
 const defaultWidthList = strings.WIDTH;
@@ -88,7 +89,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         super(props);
         this.state = { hidden: !this.props.visible, shouldRender: false };
         this.foundation = new SideSheetFoundation(this.adapter);
-        this._active = false;
     }
 
     context: ContextValue;
@@ -147,14 +147,12 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         if (!props.visible && !props.motion && !prevState.hidden) {
             newState.hidden = true;
         }
-
         return newState;
     }
 
     componentDidMount() {
         if (this.props.visible) {
             this.foundation.beforeShow();
-            this._active = this._active || this.props.visible;
         }
     }
 
@@ -167,6 +165,20 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         if (prevProps.visible && !this.props.visible) {
             this.foundation.afterHide();
         }
+
+
+        const shouldRender = (this.props.visible || this.props.keepDOM);
+        if (shouldRender === true && this.state.shouldRender === false) {
+            this.foundation.setShouldRender(true);
+        }
+        if (prevState.hidden!==this.state.hidden){
+            this.foundation.onVisibleChange(!this.state.hidden);
+        }
+
+        if (!this.props.motion){
+            // if motion is true, we should set state after animation end, so we don't need to set state here
+            this.updateState();
+        }
     }
 
     componentWillUnmount() {
@@ -183,6 +195,12 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         this.foundation.handleKeyDown(e);
     };
 
+    updateState = ()=>{
+        const shouldRender = (this.props.visible || this.props.keepDOM);
+        this.foundation.setShouldRender(shouldRender);
+        this.foundation.toggleHidden(!this.props.visible);
+    }
+
     renderContent() {
         const {
             placement,
@@ -222,37 +240,27 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
             onClose: this.handleCancel,
         };
 
-        const mergedMotion = this.foundation.getMergedMotion();
-        this._active = this._active || visible;
-        const shouldRender = (visible || keepDOM) && this._active;
-        if (shouldRender === true && !this.state.shouldRender) {
-            this.foundation.setShouldRender(true);
-        }
+        // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
-        if (mergedMotion) {
+        if (this.props.motion) {
             return <CSSAnimation animationState={visible ? 'enter' : 'leave'} startClassName={
                 visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`
-            } onAnimationEnd={() => {
-                this.foundation.setShouldRender(shouldRender);
-            }}>
+            } onAnimationEnd={this.updateState}>
                 {
                     ({
                         animationClassName: maskAnimationClassName,
-                        animationStyle: maskAnimationStyle,
                         animationEventsNeedBind: maskAnimationEventsNeedBind
                     }) => {
                         return <CSSAnimation
                             animationState={visible ? 'enter' : 'leave'}
                             startClassName={visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`}
-                            onAnimationEnd={() => {
-                                // for no mask case
-                                this.foundation.setShouldRender(shouldRender);
-                            }}
+                            onAnimationEnd={this.updateState /* for no mask case*/}
                         >
                             {({ animationClassName, animationStyle, animationEventsNeedBind }) => {
                                 return this.state.shouldRender ? <SideSheetContent
-                                    eventHandlers={mergeAnimationFunction([animationEventsNeedBind, maskAnimationEventsNeedBind])}
                                     {...contentProps}
+                                    maskExtraProps={maskAnimationEventsNeedBind}
+                                    wrapperExtraProps={animationEventsNeedBind}
                                     dialogClassName={animationClassName}
                                     maskClassName={maskAnimationClassName}
                                     style={{ ...animationStyle, ...style }}>
@@ -265,7 +273,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
                 }
             </CSSAnimation>;
         }
-        this.foundation.setShouldRender((visible || keepDOM) && this._active);
         if (this.state.shouldRender) {
             return (
                 <SideSheetContent {...contentProps} style={style} maskStyle={maskStyle}>
@@ -297,3 +304,4 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         );
     }
 }
+

yarn.lock

@@ -24164,16 +24164,16 @@ typeface-inter@^3.18.1:
   resolved "https://registry.yarnpkg.com/typeface-inter/-/typeface-inter-3.18.1.tgz#24cccdf29923f318589783997be20a662cd3ab9c"
   integrity sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==
 
[email protected]:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
-  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
-
 typescript@^4, typescript@^4.4.4:
   version "4.6.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
   integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
 
+typescript@^4.8.3:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88"
+  integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
+
 [email protected]:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"