@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.61

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

@@ -0,0 +1,266 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectVariant,
+  Pagination,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  MenuToggle,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const ToolbarStacked: React.FunctionComponent = () => {
+  // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
+  // pagination - right aligned
+  const resourceOptions = [
+    { value: 'All resources', disabled: false },
+    { value: 'Deployment', disabled: false },
+    { value: 'Pod', disabled: false }
+  ];
+
+  const statusOptions = [
+    { value: 'Running', disabled: false },
+    { value: 'New', disabled: false },
+    { value: 'Pending', disabled: false },
+    { value: 'Cancelled', disabled: false }
+  ];
+
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
+  const [resourceSelected, setResourceSelected] = React.useState<string | SelectOptionObject>();
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onKebabToggle = () => {
+    setKebabIsOpen(!kebabIsOpen);
+  };
+
+  const onResourceToggle = (_event: any, isExpanded: boolean) => {
+    setResourceIsExpanded(isExpanded);
+  };
+
+  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setResourceSelected(selection);
+    setResourceIsExpanded(false);
+  };
+
+  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    setResourceSelected(event?.target);
+    setResourceIsExpanded(false);
+  };
+
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setStatusSelected(selection);
+    setStatusIsExpanded(false);
+  };
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    perPage: number,
+    page: number
+  ) => {
+    setPage(page);
+    setPerPage(perPage);
+  };
+
+  const onSplitButtonToggle = (_event: any, isOpen: boolean) => {
+    setSplitButtonDropdownIsOpen(isOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <Divider key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  const splitButtonDropdownItems = [
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
+      Action
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItemDeprecated>
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="label" id="stacked-example-resource-select">
+        Resource
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onResourceToggle}
+          onSelect={onResourceSelect}
+          selections={resourceSelected}
+          isOpen={resourceIsExpanded}
+          aria-labelledby="stacked-example-resource-select"
+        >
+          {resourceOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem variant="label" id="stacked-example-status-select">
+        Status
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onStatusToggle}
+          onSelect={onStatusSelect}
+          selections={statusSelected}
+          isOpen={statusIsExpanded}
+          aria-labelledby="stacked-example-status-select"
+        >
+          {statusOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const firstRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
+            {toggleGroupItems}
+          </ToolbarToggleGroup>
+          <ToolbarItem variant="overflow-menu">
+            <OverflowMenu breakpoint="2xl">
+              <OverflowMenuContent>
+                <OverflowMenuGroup groupType="button">
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.primary}>Primary</Button>
+                  </OverflowMenuItem>
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </OverflowMenuItem>
+                </OverflowMenuGroup>
+              </OverflowMenuContent>
+              <OverflowMenuControl hasAdditionalOptions>
+                <Dropdown
+                  onSelect={onResourceSelectDropdown}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      aria-label="Kebab overflow menu"
+                      variant="plain"
+                      onClick={onKebabToggle}
+                      isExpanded={kebabIsOpen}
+                    >
+                      <EllipsisVIcon />
+                    </MenuToggle>
+                  )}
+                  isOpen={kebabIsOpen}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </OverflowMenuControl>
+            </OverflowMenu>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  const secondRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem variant="bulk-select">
+            <DropdownDeprecated
+              onSelect={onSplitButtonSelect}
+              toggle={
+                <DropdownToggle
+                  id="stacked-example-toggle"
+                  splitButtonItems={[
+                    <DropdownToggleCheckbox id="example-checkbox-1" key="split-checkbox" aria-label="Select all" />
+                  ]}
+                  onToggle={onSplitButtonToggle}
+                />
+              }
+              isOpen={splitButtonDropdownIsOpen}
+              dropdownItems={splitButtonDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+            <Pagination
+              itemCount={37}
+              perPage={perPage}
+              page={page}
+              onSetPage={onSetPage}
+              widgetId="pagination-options-menu-top"
+              onPerPageSelect={onPerPageSelect}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  return (
+    <React.Fragment>
+      {firstRowItems}
+      <Divider />
+      {secondRowItems}
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
+
+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;
+
+  return (
+    <React.Fragment>
+      <div style={{ overflowY: 'scroll', height: '200px' }}>
+        <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
+          <ToolbarContent>
+            <ToolbarItem>
+              <SearchInput aria-label="Sticky example search input" />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Checkbox
+                label="Show only even number items"
+                isChecked={showEvenOnly}
+                onChange={(_event, checked) => setShowEvenOnly(checked)}
+                id="showOnlyEvenCheckbox"
+              />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+        <ul>
+          {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" />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarWidths: React.FunctionComponent = () => {
+  const widths = {
+    default: '100px',
+    sm: '80px',
+    md: '150px',
+    lg: '200px',
+    xl: '250px',
+    '2xl': '300px'
+  };
+
+  const items = (
+    <React.Fragment>
+      <ToolbarItem widths={widths}>
+        <Button variant="secondary" style={{ width: '100%' }}>
+          Action
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-widths">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,218 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import { Button, Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+
+export const ToolbarWithFilters: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onSelect = (
+    type: string,
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    setFilters((prev) => {
+      const prevSelections = prev[type];
+      return {
+        ...prev,
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
+      };
+    });
+  };
+
+  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('status', event, selection);
+  };
+
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('risk', event, selection);
+  };
+
+  const onDelete = (type: string, id: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });
+    } else {
+      setFilters({ risk: [], status: [] });
+    }
+  };
+
+  const onDeleteGroup = (type: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: [], status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: [] });
+    }
+  };
+
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
+    setRiskIsExpanded(isExpanded);
+  };
+
+  const onKebabToggle = (_event: any, isOpen: boolean) => {
+    setKebabIsOpen(isOpen);
+  };
+
+  const statusMenuItems = [
+    <SelectOption key="statusNew" value="New" />,
+    <SelectOption key="statusPending" value="Pending" />,
+    <SelectOption key="statusRunning" value="Running" />,
+    <SelectOption key="statusCancelled" value="Cancelled" />
+  ];
+
+  const riskMenuItems = [
+    <SelectOption key="riskLow" value="Low" />,
+    <SelectOption key="riskMedium" value="Medium" />,
+    <SelectOption key="riskHigh" value="High" />
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="With filters example search input"
+          onChange={(_event, value) => onInputChange(value)}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
+          categoryName="Status"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Status"
+            onToggle={onStatusToggle}
+            onSelect={onStatusSelect}
+            selections={filters.status}
+            isOpen={statusIsExpanded}
+            placeholderText="Status"
+          >
+            {statusMenuItems}
+          </Select>
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.risk}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          categoryName="Risk"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Risk"
+            onToggle={onRiskToggle}
+            onSelect={onRiskSelect}
+            selections={filters.risk}
+            isOpen={riskIsExpanded}
+            placeholderText="Risk"
+          >
+            {riskMenuItems}
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const dropdownItems = [
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
+      Action
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItemDeprecated>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
+      Separated Action
+    </DropdownItemDeprecated>
+  ];
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        {toggleGroupItems}
+      </ToolbarToggleGroup>
+      <ToolbarGroup variant="icon-button-group">
+        <ToolbarItem>
+          <Button variant="plain" aria-label="edit">
+            <EditIcon />
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="plain" aria-label="clone">
+            <CloneIcon />
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="plain" aria-label="sync">
+            <SyncIcon />
+          </Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem>
+        <DropdownDeprecated
+          toggle={<KebabToggle onToggle={onKebabToggle} />}
+          isOpen={kebabIsOpen}
+          isPlain
+          dropdownItems={dropdownItems}
+          position={DropdownPosition.right}
+        />
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-with-filter"
+      className="pf-m-toggle-group-container"
+      collapseListedFiltersBreakpoint="xl"
+      clearAllFilters={() => onDelete('', '')}
+    >
+      <ToolbarContent>{toolbarItems}</ToolbarContent>
+    </Toolbar>
+  );
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -35,23 +35,24 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
    */
   aria?: 'describedby' | 'labelledby' | 'none';
   /**
-   * Determines whether the tooltip is an aria-live region. If the reference prop is passed in the
+   * Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the
    * default behavior is 'polite' in order to ensure the tooltip contents is announced to
    * assistive technologies. Otherwise the default behavior is 'off'.
    */
   'aria-live'?: 'off' | 'polite';
   /**
-   * The reference element to which the Tooltip is relatively placed to.
-   * If you cannot wrap the reference with the Tooltip, you can use the reference prop instead.
+   * The trigger reference element to which the Tooltip is relatively placed to.
+   * If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead.
    * Usage: <Tooltip><Button>Reference</Button></Tooltip>
    */
   children?: ReactElement<any>;
   /**
-   * The reference element to which the Tooltip is relatively placed to.
-   * If you can wrap the reference with the Tooltip, you can use the children prop instead.
-   * Usage: <Tooltip reference={() => document.getElementById('reference-element')} />
+   * The trigger reference element to which the Tooltip is relatively placed to.
+   * If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together.
+   * When passed along with the trigger prop, the div element that wraps the trigger will be removed.
+   * Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />
    */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** Tooltip additional class */
   className?: string;
   /** Tooltip content */
@@ -92,6 +93,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
         | 'right-start'
         | 'right-end'
       )[];
+  /** Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. */
+  minWidth?: string | 'trigger';
   /** Maximum width of the tooltip (default 18.75rem) */
   maxWidth?: string;
   /** Callback when tooltip's hide transition has finished executing */
@@ -150,6 +153,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
+  minWidth,
   maxWidth = tooltipMaxWidth.value,
   distance = 15,
   aria = 'describedby',
@@ -158,8 +162,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   id = `pf-tooltip-${pfTooltipIdCounter++}`,
   children,
   animationDuration = 300,
-  reference,
-  'aria-live': ariaLive = reference ? 'polite' : 'off',
+  triggerRef,
+  'aria-live': ariaLive = triggerRef ? 'polite' : 'off',
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
@@ -174,11 +178,12 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   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 => {
+    timeoutRefs.forEach((ref) => {
       if (ref.current) {
         clearTimeout(ref.current);
       }
@@ -274,6 +279,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
         opacity,
         transition: getOpacityTransition(animationDuration)
       }}
+      ref={popperRef}
       {...rest}
     >
       <TooltipArrow />
@@ -315,9 +321,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   return (
     <Popper
       trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
-      reference={reference}
+      triggerRef={triggerRef}
       popper={content}
-      popperMatchesTriggerWidth={false}
+      popperRef={popperRef}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
       appendTo={appendTo}
       isVisible={visible}
       positionModifiers={positionModifiers}

package/src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -3,16 +3,18 @@ import { render } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
 
 test('tooltip renders', () => {
+  const ref = React.createRef<HTMLDivElement>();
   const { asFragment } = render(
     <Tooltip
       position="top"
+      triggerRef={ref}
       content={
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
         </div>
       }
     >
-      <div>Toggle tooltip</div>
+      <div ref={ref}>Toggle tooltip</div>
     </Tooltip>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -20,18 +22,19 @@ test('tooltip renders', () => {
 
 test('tooltip renders in strict mode', () => {
   const consoleError = jest.spyOn(console, 'error');
+  const ref = React.createRef<HTMLDivElement>();
   const { asFragment } = render(
     <React.StrictMode>
       <Tooltip
-        removeFindDomNode
         position="top"
+        triggerRef={ref}
         content={
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
           </div>
         }
       >
-        <div>Toggle tooltip</div>
+        <div ref={ref}>Toggle tooltip</div>
       </Tooltip>
     </React.StrictMode>
   );