@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/Tabs/Tabs.tsx

@@ -136,7 +136,7 @@ interface TabsState {
   overflowingTabCount: number;
 }
 
-export class Tabs extends React.Component<TabsProps, TabsState> {
+class Tabs extends React.Component<TabsProps, TabsState> {
   static displayName = 'Tabs';
   tabList = React.createRef<HTMLUListElement>();
   leftScrollButtonRef = React.createRef<HTMLButtonElement>();
@@ -208,7 +208,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       React.Children.toArray(this.props.children)
         .filter((child): child is TabElement => React.isValidElement(child))
         .filter(({ props }) => props.tabContentRef && props.tabContentRef.current)
-        .forEach(child => (child.props.tabContentRef.current.hidden = true));
+        .forEach((child) => (child.props.tabContentRef.current.hidden = true));
       // most recently selected tabContent
       if (tabContentRef.current) {
         tabContentRef.current.hidden = false;
@@ -223,7 +223,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
 
   countOverflowingElements = (container: HTMLUListElement) => {
     const elements = Array.from(container.children);
-    return elements.filter(element => !isElementInView(container, element as HTMLElement, false)).length;
+    return elements.filter((element) => !isElementInView(container, element as HTMLElement, false)).length;
   };
 
   handleScrollButtons = () => {
@@ -468,7 +468,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         >
           {expandable && isVertical && (
             <GenerateId>
-              {randomId => (
+              {(randomId) => (
                 <div className={css(styles.tabsToggle)}>
                   <div className={css(styles.tabsToggleButton)}>
                     <Button
@@ -532,12 +532,12 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         </Component>
         {filteredChildren
           .filter(
-            child =>
+            (child) =>
               child.props.children &&
               !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
               !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
           )
-          .map(child => (
+          .map((child) => (
             <TabContent
               key={child.props.eventKey}
               activeKey={localActiveKey}
@@ -550,3 +550,5 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     );
   }
 }
+
+export { Tabs };

package/src/components/TextArea/TextArea.tsx

@@ -36,6 +36,10 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   value?: string | number;
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Callback function when text area is focused */
+  onFocus?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
+  /** Callback function when text area is blurred (focus leaves) */
+  onBlur?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
@@ -44,7 +48,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   innerRef?: React.RefObject<any>;
 }
 
-export class TextAreaBase extends React.Component<TextAreaProps> {
+class TextAreaBase extends React.Component<TextAreaProps> {
   static displayName = 'TextArea';
   static defaultProps: TextAreaProps = {
     innerRef: React.createRef<HTMLTextAreaElement>(),
@@ -114,6 +118,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       autoResize,
       onChange,
       /* eslint-enable @typescript-eslint/no-unused-vars */
+      onBlur,
+      onFocus,
       ...props
     } = this.props;
     const orientation = `resize${capitalize(resizeOrientation)}` as
@@ -136,6 +142,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       >
         <textarea
           onChange={this.handleChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
           {...(typeof this.props.defaultValue !== 'string' && { value })}
           aria-invalid={validated === ValidatedOptions.error}
           required={isRequired}

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -5,8 +5,12 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const timerRef = React.useRef<number | null>(null);
   const simulateNetworkCall = (callback: Function) => {
-    setTimeout(callback, 2000);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(callback, 2000);
   };
 
   const handleTextAreaChange = (value: string) => {

package/src/components/TextInput/TextInput.tsx

@@ -85,6 +85,7 @@ interface TextInputState {
   ouiaStateId: string;
 }
 
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
 export class TextInputBase extends React.Component<TextInputProps, TextInputState> {
   static displayName = 'TextInputBase';
   static defaultProps: TextInputProps = {

package/src/components/TextInput/examples/TextInputBasic.tsx

@@ -3,5 +3,12 @@ import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  return <TextInput value={value} type="text" onChange={(_event, value) => setValue(value)} aria-label="text input example" />;
+  return (
+    <TextInput
+      value={value}
+      type="text"
+      onChange={(_event, value) => setValue(value)}
+      aria-label="text input example"
+    />
+  );
 };

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -33,7 +33,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
 
   /** callback for removing a chip from the chip selections */
   const deleteChip = (chipToDelete: string) => {
-    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
+    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));
     setCurrentChips(newChips);
   };
 
@@ -53,7 +53,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
     <TextInputGroup>
       <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
         <ChipGroup>
-          {currentChips.map(currentChip => (
+          {currentChips.map((currentChip) => (
             <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
               {currentChip}
             </Chip>

package/src/components/TimePicker/TimePicker.tsx

@@ -93,7 +93,7 @@ interface TimePickerState {
   maxTimeState: string;
 }
 
-export class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
+class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
   static displayName = 'TimePicker';
   private baseComponentRef = React.createRef<any>();
   private toggleRef = React.createRef<HTMLDivElement>();
@@ -564,3 +564,5 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     );
   }
 }
+
+export { TimePicker };

package/src/components/TimePicker/TimePickerUtils.tsx

@@ -26,10 +26,7 @@ export const makeTimeOptions = (
       }
     }
     hour = hour12 ? hour.toString() : hour.toString().padStart(2, '0');
-    const minutes = iter
-      .getMinutes()
-      .toString()
-      .padStart(2, '0');
+    const minutes = iter.getMinutes().toString().padStart(2, '0');
     const timeOption = `${hour}${delimiter}${minutes}${hour12 ? suffix : ''}`;
     // time option is valid if within min/max constraints
     if (isWithinMinMax(minTime, maxTime, timeOption, delimiter, includeSeconds)) {

package/src/components/TimePicker/examples/TimePicker.md

@@ -15,66 +15,32 @@ Appending the TimePicker to the `document.body` may cause accessibility issues,
 
 ### Basic 12 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-SimpleTimePicker = () => {
-  const onChange = (_event, time, hour, minute, seconds, isValid) => {
-    console.log('time', time);
-    console.log('hour', hour);
-    console.log('minute', minute);
-    console.log('seconds', seconds);
-    console.log('isValid', isValid);
-  };
-
-  return <TimePicker time="3:35 AM" onChange={onChange} />;
-};
+```ts file="./TimePickerBasic12Hour.tsx"
 ```
 
 ### Basic 24 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="2020-10-14T18:06:02Z" is24Hour />;
+```ts file="./TimePickerBasic24Hour.tsx"
 ```
 
 ### Custom delimiter
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour delimiter="h" placeholder="" />;
+```ts file="./TimePickerCustomDelimiter.tsx"
 ```
 
 ### Minimum/maximum times
 
 The `minTime`/`maxTime` props restrict the options shown for the user to select from as well as trigger the `invalidMinMaxErrorMessage` if the user enters a time outside this range.
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />;
+```ts file="./TimePickerMinMaxTimes.tsx"
 ```
 
 ### With seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="3:35:20 PM" includeSeconds />;
+```ts file="./TimePickerWithSeconds.tsx"
 ```
 
 ### Basic 24 hours with seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="12:35:50" includeSeconds is24Hour />;
+```ts file="./TimePickerBasic24HoursWithSeconds.tsx"
 ```

package/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic12Hour: React.FunctionComponent = () => {
+  const onChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour: number,
+    minute: number,
+    seconds: number,
+    isValid: boolean
+  ) => {
+    console.log('time', time);
+    console.log('hour', hour);
+    console.log('minute', minute);
+    console.log('seconds', seconds);
+    console.log('isValid', isValid);
+  };
+
+  return <TimePicker time="3:35 AM" onChange={onChange} />;
+};

package/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24Hour: React.FunctionComponent = () => <TimePicker time="2020-10-14T18:06:02Z" is24Hour />;

package/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24HourWithSeconds: React.FunctionComponent = () => (
+  <TimePicker time="12:35:50" includeSeconds is24Hour />
+);

package/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerCustomDelimiter: React.FunctionComponent = () => (
+  <TimePicker is24Hour delimiter="h" placeholder="" />
+);

package/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerMinMaxTimes: React.FunctionComponent = () => (
+  <TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />
+);

package/src/components/TimePicker/examples/TimePickerWithSeconds.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerWithSeconds: React.FunctionComponent = () => <TimePicker time="3:35:20 PM" includeSeconds />;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -24,7 +24,7 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, child =>
+  const toggleGroupItemList = React.Children.map(children, (child) =>
     !(React.isValidElement(child) && child.type === ToggleGroupItem)
       ? child
       : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -8,7 +8,7 @@ export const ToggleGroupCompact: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup isCompact aria-label="Compact variant toggle group">

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -9,7 +9,7 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
   const [disableAll, setDisableAll] = React.useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   const disableAllClick = () => {
     setDisableAll(!disableAll);

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -12,7 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup aria-label="Icon variant toggle group">

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -12,7 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup aria-label="Text and icon toggle group">

package/src/components/Toolbar/Toolbar.tsx

@@ -67,7 +67,7 @@ interface FilterInfo {
   [key: string]: number;
 }
 
-export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
+class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   chipGroupContentRef = React.createRef<HTMLDivElement>();
   staticFilterInfo = {};
@@ -81,7 +81,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
 
   toggleIsExpanded = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isManagedToggleExpanded: !prevState.isManagedToggleExpanded
     }));
   };
@@ -200,7 +200,9 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
     return this.props.id ? (
       this.renderToolbar(this.props.id)
     ) : (
-      <GenerateId>{randomId => this.renderToolbar(randomId)}</GenerateId>
+      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
     );
   }
 }
+
+export { Toolbar };

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -33,7 +33,7 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
   customChipGroupContent?: React.ReactNode;
 }
 
-export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
+class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
   static displayName = 'ToolbarChipGroupContent';
   static defaultProps: PickOptional<ToolbarChipGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -104,3 +104,5 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
     );
   }
 }
+
+export { ToolbarChipGroupContent };

package/src/components/Toolbar/ToolbarContent.tsx

@@ -35,7 +35,7 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   toolbarId?: string;
 }
 
-export class ToolbarContent extends React.Component<ToolbarContentProps> {
+class ToolbarContent extends React.Component<ToolbarContentProps> {
   static displayName = 'ToolbarContent';
   private expandableContentRef = React.createRef<HTMLDivElement>();
   private chipContainerRef = React.createRef<HTMLDivElement>();
@@ -122,3 +122,5 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
     );
   }
 }
+
+export { ToolbarContent };

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -26,7 +26,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   showClearFiltersButton: boolean;
 }
 
-export class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
+class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -73,3 +73,5 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
     );
   }
 }
+
+export { ToolbarExpandableContent };

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -43,7 +43,7 @@ interface ToolbarFilterState {
   isMounted: boolean;
 }
 
-export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -108,7 +108,7 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
           collapsedText={chipGroupCollapsedText}
           expandedText={chipGroupExpandedText}
         >
-          {chips.map(chip =>
+          {chips.map((chip) =>
             typeof chip === 'string' ? (
               <Chip key={chip} onClick={() => deleteChip(categoryKey, chip)}>
                 {chip}
@@ -144,3 +144,5 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
     );
   }
 }
+
+export { ToolbarFilter };

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -48,7 +48,7 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   };
 }
 
-export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
+class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;
@@ -143,3 +143,5 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
     );
   }
 }
+
+export { ToolbarToggleGroup };

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -5,7 +5,7 @@ export const ToolbarSticky: React.FunctionComponent = () => {
   const [isSticky, setIsSticky] = React.useState(true);
   const [showEvenOnly, setShowEvenOnly] = React.useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
-  const numbers = showEvenOnly ? array.filter(number => number % 2 === 0) : array;
+  const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 
   return (
     <React.Fragment>
@@ -26,12 +26,17 @@ export const ToolbarSticky: React.FunctionComponent = () => {
           </ToolbarContent>
         </Toolbar>
         <ul>
-          {numbers.map(number => (
+          {numbers.map((number) => (
             <li key={number}>{`item ${number}`}</li>
           ))}
         </ul>
       </div>
-      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={(_event, checked) => setIsSticky(checked)} id="isStickyCheckbox" />
+      <Checkbox
+        label="Is toolbar sticky"
+        isChecked={isSticky}
+        onChange={(_event, checked) => setIsSticky(checked)}
+        id="isStickyCheckbox"
+      />
     </React.Fragment>
   );
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import { TooltipArrow } from './TooltipArrow';
 import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
-import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 
 export enum TooltipPosition {
   auto = 'auto',
@@ -174,30 +174,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const triggerOnClick = trigger.includes('click');
   const triggerManually = trigger === 'manual';
   const [visible, setVisible] = React.useState(false);
-  const [opacity, setOpacity] = React.useState(0);
-  const transitionTimerRef = React.useRef(null);
-  const showTimerRef = React.useRef(null);
-  const hideTimerRef = React.useRef(null);
   const popperRef = React.createRef<HTMLDivElement>();
 
-  const prevExitDelayRef = React.useRef<number>();
-
-  const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
-    timeoutRefs.forEach((ref) => {
-      if (ref.current) {
-        clearTimeout(ref.current);
-      }
-    });
-  };
-
-  // Cancel all timers on unmount
-  React.useEffect(
-    () => () => {
-      clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
-    },
-    []
-  );
-
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.key === KeyTypes.Escape && visible) {
@@ -222,36 +200,11 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     }
   }, [isVisible]);
 
-  React.useEffect(() => {
-    if (prevExitDelayRef.current < exitDelay) {
-      clearTimeouts([transitionTimerRef, hideTimerRef]);
-      hideTimerRef.current = setTimeout(() => {
-        setOpacity(0);
-        transitionTimerRef.current = setTimeout(() => {
-          setVisible(false);
-          onTooltipHidden();
-        }, animationDuration);
-      }, exitDelay);
-    }
-    prevExitDelayRef.current = exitDelay;
-  }, [exitDelay]);
-
   const show = () => {
-    clearTimeouts([transitionTimerRef, hideTimerRef]);
-    showTimerRef.current = setTimeout(() => {
-      setVisible(true);
-      setOpacity(1);
-    }, entryDelay);
+    setVisible(true);
   };
   const hide = () => {
-    clearTimeouts([showTimerRef]);
-    hideTimerRef.current = setTimeout(() => {
-      setOpacity(0);
-      transitionTimerRef.current = setTimeout(() => {
-        setVisible(false);
-        onTooltipHidden();
-      }, animationDuration);
-    }, exitDelay);
+    setVisible(false);
   };
   const positionModifiers = {
     top: styles.modifiers.top,
@@ -275,9 +228,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       role="tooltip"
       id={id}
       style={{
-        maxWidth: hasCustomMaxWidth ? maxWidth : null,
-        opacity,
-        transition: getOpacityTransition(animationDuration)
+        maxWidth: hasCustomMaxWidth ? maxWidth : null
       }}
       ref={popperRef}
       {...rest}
@@ -342,6 +293,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}
+      animationDuration={animationDuration}
+      entryDelay={entryDelay}
+      exitDelay={exitDelay}
+      onHidden={onTooltipHidden}
     />
   );
 };