@douyinfe/semi-ui 2.9.1 → 2.10.0-alpha.0

package/lib/es/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/es/dropdown/dropdownMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type DropdownMenuProps = BaseProps;

package/lib/es/form/baseForm.d.ts

@@ -125,7 +125,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/es/form/field.d.ts

@@ -73,7 +73,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;

package/lib/es/form/hoc/withField.js

@@ -112,8 +112,7 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = useRef(rules);
-    const validateRef = useRef(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = useRef(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -214,7 +213,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validateRef.current(val, values);
+        maybePromisedErrors = validate(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -254,7 +253,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validateRef.current) {
+      if (validate) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -363,8 +362,7 @@ function withField(Component, opts) {
 
     useLayoutEffect(() => {
       rulesRef.current = rules;
-      validateRef.current = validate;
-    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
+    }, [rules]); // exec validate once when trigger inlcude 'mount'
 
     useLayoutEffect(() => {
       if (validateOnMount) {

package/lib/es/modal/useModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
 export default function useModal(): (JSX.Element | {

package/lib/es/notification/useNotification/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '@douyinfe/semi-foundation/lib/es/notification/notification.css';
 import { NoticeProps } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
 export default function useNotification(): (JSX.Element | {

package/lib/es/radio/radio.d.ts

@@ -29,9 +29,13 @@ export declare type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,7 +75,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radio.js

@@ -44,16 +44,12 @@ class Radio extends BaseComponent {
     };
 
     this.state = {
-      hover: false
+      hover: false,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.foundation = new RadioFoundation(this.adapter);
     this.radioEntity = null;
-    this.addonId = getUuidShort({
-      prefix: 'addon'
-    });
-    this.extraId = getUuidShort({
-      prefix: 'extra'
-    });
   }
 
   get adapter() {
@@ -62,6 +58,20 @@ class Radio extends BaseComponent {
         this.setState({
           hover
         });
+      },
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
       }
     });
   }
@@ -98,7 +108,11 @@ class Radio extends BaseComponent {
       value: propValue
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
-    const isHover = this.state.hover;
+    const {
+      hover: isHover,
+      addonId,
+      extraId
+    } = this.state;
     let props = {};
 
     if (this.isInGroup()) {
@@ -151,10 +165,10 @@ class Radio extends BaseComponent {
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: this.addonId
+      id: addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: this.extraId
+      id: extraId
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {
@@ -171,8 +185,8 @@ class Radio extends BaseComponent {
       ref: ref => {
         this.radioEntity = ref;
       },
-      addonId: children && this.addonId,
-      extraId: extra && this.extraId
+      addonId: children && addonId,
+      extraId: extra && extraId
     })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

package/lib/es/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/scrollList/scrollItem.js

@@ -176,7 +176,7 @@ export default class ScrollItem extends BaseComponent {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
+      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

package/lib/es/timePicker/Combobox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollItem from '../scrollList/scrollItem';

package/lib/es/timePicker/TimePicker.d.ts

@@ -97,11 +97,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
 export { TimeShape };

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

@@ -18,11 +18,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/es/toast/useToast/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToastProps } from '@douyinfe/semi-foundation/lib/es/toast/toastFoundation';
 export default function useToast(): (JSX.Element | {
     success: (config: ToastProps) => string;

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

@@ -53,6 +53,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;

package/lib/es/tooltip/index.js

@@ -212,7 +212,7 @@ export default class Tooltip extends BaseComponent {
       }, portalEventSet, {
         "x-placement": placement,
         style: _Object$assign({
-          visibility: motion ? 'hidden' : 'visible'
+          visibility: motion ? undefined : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/React.createElement(Portal, {
@@ -286,7 +286,7 @@ export default class Tooltip extends BaseComponent {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: getUuidShort() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new TooltipFoundation(this.adapter);
@@ -559,6 +559,11 @@ export default class Tooltip extends BaseComponent {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
+      },
+      setId: () => {
+        this.setState({
+          id: getUuidShort()
+        });
       }
     });
   }

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.1",
+    "version": "2.10.0-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.9.1",
-        "@douyinfe/semi-animation-react": "2.9.1",
-        "@douyinfe/semi-foundation": "2.9.1",
-        "@douyinfe/semi-icons": "2.9.1",
-        "@douyinfe/semi-illustrations": "2.9.1",
-        "@douyinfe/semi-theme-default": "2.9.1",
+        "@douyinfe/semi-animation": "2.9.0",
+        "@douyinfe/semi-animation-react": "2.9.0",
+        "@douyinfe/semi-foundation": "^2.10.0-alpha.0",
+        "@douyinfe/semi-icons": "2.9.0",
+        "@douyinfe/semi-illustrations": "2.9.0",
+        "@douyinfe/semi-theme-default": "2.9.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "9593ab23b59b5a18305627ac402cfd4527072f9c",
+    "gitHead": "5d1bb1d031052d7584ecd5d1bc444cd13f861337",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.9.1",
+        "@douyinfe/semi-scss-compile": "2.9.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radio.tsx

@@ -41,10 +41,14 @@ export type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 
 export { RadioChangeEvent };
@@ -94,11 +98,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         super(props);
         this.state = {
             hover: false,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
     }
 
     get adapter(): RadioAdapter {
@@ -106,6 +110,12 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             ...super.adapter,
             setHover: (hover: boolean) => {
                 this.setState({ hover });
+            },
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             }
         };
     }
@@ -168,7 +178,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const isHover = this.state.hover;
+        const { hover: isHover, addonId, extraId } = this.state;
         let props = {};
 
         if (this.isInGroup()) {
@@ -218,8 +228,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? <span className={addonCls} style={addonStyle} id={this.addonId}>{children}</span> : null}
-                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={this.extraId}>{extra}</div> : null}
+                {children ? <span className={addonCls} style={addonStyle} id={addonId}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={extraId}>{extra}</div> : null}
             </>
         );
         return (
@@ -240,8 +250,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     ref={(ref: RadioInner) => {
                         this.radioEntity = ref;
                     }}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                 />
                 {
                     isCardRadioGroup ?

package/scrollList/scrollItem.tsx

@@ -329,7 +329,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { wrapper } = this;
         const wrapperHeight = wrapper.offsetHeight;
         const itemHeight = this.getItmHeight(node);
-        const targetTop =  (node.offsetTop || this.list.children.length * itemHeight / 2 )  - (wrapperHeight - itemHeight) / 2;
+        const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
 
         this.scrollToPos(targetTop, duration);
     };

package/timePicker/TimePicker.tsx

@@ -475,7 +475,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
         const panelPrefix = classNames({
             [`${prefixCls}-panel`]: true,
-            [`${prefixCls}-panel-${size}`]: size,
+            [`${prefixCls}-panel-${ size}`]: size,
         });
 
         const inputProps = {

package/timePicker/_story/timepicker.stories.js

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
+import { TimePicker as BasicTimePicker, Button } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -44,12 +44,6 @@ const init = () => {
 init();
 
 export const TimePickerPanelDefault = () => {
-   const initValues = {
-    testRange: [
-      new Date("2022-04-17T15:00:00"),
-      new Date("2022-04-17T18:00:00"),
-    ],
-  };
   return (
     <div>
       <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
@@ -59,19 +53,6 @@ export const TimePickerPanelDefault = () => {
         defaultOpen={true}
         scrollItemProps={{ cycled: false }}
       />
-      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
-      <br/><br/>
-      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
-      <Form initValues={initValues}>
-      <pre>{JSON.stringify(initValues)}</pre>
-      <Form.TimePicker
-        use12Hours
-        field="testRange"
-        label="Time Range"
-        type="timeRange"
-        format="a hh:mm"
-      />
-    </Form>
     </div>
   );
 };

package/tooltip/index.tsx

@@ -75,6 +75,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;
@@ -193,7 +194,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             placement: props.position || 'top',
             transitionStyle: {},
             isPositionUpdated: false,
-            id: getUuidShort(), // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+            id: props.wrapperId, // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
         };
         this.foundation = new TooltipFoundation(this.adapter);
         this.eventManager = new Event();
@@ -428,6 +429,9 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             },
             notifyEscKeydown: (event: React.KeyboardEvent) => {
                 this.props.onEscKeyDown(event);
+            },
+            setId: () => {
+                this.setState({ id: getUuidShort() });
             }
         };
     }
@@ -581,7 +585,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             </TooltipTransition>
         ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
+            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? undefined : 'visible', ...style }}>
                 {contentNode}
                 {icon}
             </div>