@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.5

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.4","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.4","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.3",
+  "version": "6.5.0-prerelease.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "40a5015cf1eb4730bda9c5c15e328f6d544bc857"
+  "gitHead": "0f921f1c919501506e043b7c8b2febc71644b15a"
 }

package/src/components/ClipboardCopy/__tests__/ClipboardCopyTruncateIntegration.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ClipboardCopy, ClipboardCopyVariant } from '../ClipboardCopy';
+
+// This test file uses the real Truncate component for integration testing, instead of a mock
+
+test('Tooltip appears on keyboard focus when using inline-compact variant with truncation', async () => {
+  const user = userEvent.setup();
+  const longText = 'This is a very long piece of content that should be truncated when the container is too small';
+
+  render(
+    <ClipboardCopy
+      variant={ClipboardCopyVariant.inlineCompact}
+      truncation={{ maxCharsDisplayed: 20 }}
+      data-testid="clipboard-copy"
+    >
+      {longText}
+    </ClipboardCopy>
+  );
+
+  expect(screen.queryByText(longText)).not.toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+  await user.tab();
+
+  const clipboardCopy = screen.getByTestId('clipboard-copy');
+  expect(clipboardCopy).toHaveFocus();
+
+  const tooltip = screen.getByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toHaveTextContent(longText);
+});

package/src/components/DataList/DataList.tsx

@@ -31,6 +31,8 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
   isCompact?: boolean;
+  /** @beta Flag indicating if DataList should have plain styling with a transparent background */
+  isPlain?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Determines which wrapping modifier to apply to the DataList */
@@ -59,6 +61,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
   onSelectDataListItem,
   selectedDataListItemId = '',
   isCompact = false,
+  isPlain = false,
   gridBreakpoint = 'md',
   wrapModifier = null,
   onSelectableRowChange,
@@ -84,6 +87,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
         className={css(
           styles.dataList,
           isCompact && styles.modifiers.compact,
+          isPlain && styles.modifiers.plain,
           gridBreakpointClasses[gridBreakpoint],
           wrapModifier && styles.modifiers[wrapModifier],
           className

package/src/components/DataList/examples/DataList.md

@@ -38,6 +38,11 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat
 
 ```ts file="./DataListCompact.tsx"
 
+```
+### Plain
+
+```ts file="./DataListPlain.tsx"
+
 ```
 
 ### Checkboxes, actions and additional cells

package/src/components/DataList/examples/DataListPlain.tsx

@@ -0,0 +1,32 @@
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListPlain: React.FunctionComponent = () => (
+  <DataList aria-label="Plain data list example" isPlain>
+    <DataListItem aria-labelledby="plain-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="plain-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="plain-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="plain-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -74,6 +74,11 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * animation will not occur.
    */
   direction?: 'up' | 'down';
+  /** The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.
+   * When using heading elements, the button will be rendered inside the heading for proper semantics.
+   * This is useful when the toggle text should function as a heading in the document structure.
+   */
+  toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 interface ExpandableSectionState {
@@ -218,6 +223,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       direction,
+      toggleWrapper = 'div',
       ...props
     } = this.props;
 
@@ -250,9 +256,10 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
 
     const computedToggleContent =
       typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
+    const ToggleWrapper = toggleWrapper as any;
 
     const expandableToggle = !isDetached && (
-      <div className={`${styles.expandableSection}__toggle`}>
+      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
         <Button
           variant="link"
           {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
@@ -272,7 +279,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
         >
           {computedToggleContent || computedToggleText}
         </Button>
-      </div>
+      </ToggleWrapper>
     );
 
     return (

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -34,6 +34,11 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   toggleAriaLabel?: string;
   /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
   toggleAriaLabelledBy?: string;
+  /** The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.
+   * When using heading elements, the button will be rendered inside the heading for proper semantics.
+   * This is useful when the toggle text should function as a heading in the document structure.
+   */
+  toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -48,45 +53,50 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isDetached,
   toggleAriaLabel,
   toggleAriaLabelledBy,
+  toggleWrapper = 'div',
   ...props
-}: ExpandableSectionToggleProps) => (
-  <div
-    className={css(
-      styles.expandableSection,
-      isExpanded && styles.modifiers.expanded,
-      hasTruncatedContent && styles.modifiers.truncate,
-      isDetached && 'pf-m-detached',
-      className
-    )}
-    {...props}
-  >
-    <div className={`${styles.expandableSection}__toggle`}>
-      <Button
-        variant="link"
-        {...(hasTruncatedContent && { isInline: true })}
-        aria-expanded={isExpanded}
-        aria-controls={contentId}
-        onClick={() => onToggle(!isExpanded)}
-        id={toggleId}
-        {...(!hasTruncatedContent && {
-          icon: (
-            <span
-              className={css(
-                styles.expandableSectionToggleIcon,
-                isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
-              )}
-            >
-              <AngleRightIcon />
-            </span>
-          )
-        })}
-        aria-label={toggleAriaLabel}
-        aria-labelledby={toggleAriaLabelledBy}
-      >
-        {children}
-      </Button>
+}: ExpandableSectionToggleProps) => {
+  const ToggleWrapper = toggleWrapper as any;
+
+  return (
+    <div
+      className={css(
+        styles.expandableSection,
+        isExpanded && styles.modifiers.expanded,
+        hasTruncatedContent && styles.modifiers.truncate,
+        isDetached && 'pf-m-detached',
+        className
+      )}
+      {...props}
+    >
+      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
+        <Button
+          variant="link"
+          {...(hasTruncatedContent && { isInline: true })}
+          aria-expanded={isExpanded}
+          aria-controls={contentId}
+          onClick={() => onToggle(!isExpanded)}
+          id={toggleId}
+          {...(!hasTruncatedContent && {
+            icon: (
+              <span
+                className={css(
+                  styles.expandableSectionToggleIcon,
+                  isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
+                )}
+              >
+                <AngleRightIcon />
+              </span>
+            )
+          })}
+          aria-label={toggleAriaLabel}
+          aria-labelledby={toggleAriaLabelledBy}
+        >
+          {children}
+        </Button>
+      </ToggleWrapper>
     </div>
-  </div>
-);
+  );
+};
 
 ExpandableSectionToggle.displayName = 'ExpandableSectionToggle';

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

@@ -208,6 +208,7 @@ test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
 test('Renders toggleContent as a function in uncontrolled mode (collapsed)', () => {
   render(
     <ExpandableSection toggleContent={(isExpanded) => (isExpanded ? 'Hide details' : 'Show details')}>
@@ -242,3 +243,31 @@ test('Renders toggleContent as a function in controlled mode', () => {
 
   expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument();
 });
+
+test('Renders with default div wrapper when toggleWrapper is not specified', () => {
+  render(<ExpandableSection data-testid="test-id">Test content</ExpandableSection>);
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});
+
+test('Renders with h2 wrapper when toggleWrapper="h2"', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleWrapper="h2">
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+});
+
+test('Renders with div wrapper when toggleWrapper="div"', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleWrapper="div">
+      Test content
+    </ExpandableSection>
+  );
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -47,3 +47,31 @@ test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
+test('Renders with default div wrapper when toggleWrapper is not specified', () => {
+  render(<ExpandableSectionToggle data-testid="test-id">Toggle test</ExpandableSectionToggle>);
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});
+
+test('Renders with h2 wrapper when toggleWrapper="h2"', () => {
+  render(
+    <ExpandableSectionToggle data-testid="test-id" toggleWrapper="h2">
+      Toggle test
+    </ExpandableSectionToggle>
+  );
+
+  expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+});
+
+test('Renders with div wrapper when toggleWrapper="div"', () => {
+  render(
+    <ExpandableSectionToggle data-testid="test-id" toggleWrapper="div">
+      Toggle test
+    </ExpandableSectionToggle>
+  );
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -70,6 +70,14 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 
 ```
 
+### With heading semantics
+
+When the toggle text should function as a heading in the document structure, use the `toggleWrapper` prop to specify a heading element (h1-h6). This ensures proper semantic structure for screen readers and other assistive technologies. The component automatically uses a native button element when heading wrappers are used, allowing the heading styles to display properly.
+
+```ts file="ExpandableSectionWithHeading.tsx"
+
+```
+
 ### Truncate expansion
 
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ExpandableSection, Badge } from '@patternfly/react-core';
+import { ExpandableSection, Badge, Stack, StackItem } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
@@ -10,20 +10,35 @@ export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
   };
 
   return (
-    <ExpandableSection
-      toggleContent={
-        <div>
-          <span>You can also use icons </span>
-          <CheckCircleIcon />
-          <span> or badges </span>
-          <Badge isRead={true}>4</Badge>
-          <span> !</span>
-        </div>
-      }
-      onToggle={onToggle}
-      isExpanded={isExpanded}
-    >
-      This content is visible only when the component is expanded.
-    </ExpandableSection>
+    <Stack hasGutter>
+      <StackItem>
+        <h3>Custom Toggle Content</h3>
+        <p>You can use custom content such as icons and badges in the toggle:</p>
+        <ExpandableSection
+          toggleContent={
+            <div>
+              <span>You can also use icons </span>
+              <CheckCircleIcon />
+              <span> or badges </span>
+              <Badge isRead={true}>4</Badge>
+              <span> !</span>
+            </div>
+          }
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+        >
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h3>Accessibility Note</h3>
+        <p>
+          <strong>Important:</strong> If you need the toggle text to function as a heading in the document structure, do
+          NOT put heading elements (h1-h6) inside the <code>toggleContent</code> prop, as this creates invalid HTML
+          structure. Instead, use the <code>toggleWrapper</code> prop.
+        </p>
+      </StackItem>
+    </Stack>
   );
 };

package/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx

@@ -0,0 +1,89 @@
+import { useState, MouseEvent } from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionWithHeading = () => {
+  const [isExpanded1, setIsExpanded1] = useState(false);
+  const [isExpanded2, setIsExpanded2] = useState(false);
+  const [isExpandedDetached, setIsExpandedDetached] = useState(false);
+
+  const onToggle1 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded1(isExpanded);
+  };
+
+  const onToggle2 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded2(isExpanded);
+  };
+
+  const onToggleDetached = (isExpanded: boolean) => {
+    setIsExpandedDetached(isExpanded);
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <h4>Document with Expandable Sections</h4>
+        <p>This demonstrates how to use expandable sections with proper heading semantics.</p>
+
+        {/* Using toggleWrapper prop for proper heading semantics */}
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleText="Toggle as a heading"
+          onToggle={onToggle1}
+          isExpanded={isExpanded1}
+        >
+          <p>
+            This content is visible only when the component is expanded. The toggle text above functions as a proper
+            heading in the document structure, which is important for screen readers and other assistive technologies.
+          </p>
+          <p>
+            When using the <code>toggleWrapper</code> prop with heading elements (h1-h6), the button is rendered inside
+            the heading element, maintaining proper semantic structure.
+          </p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Detached Variant with Heading</h4>
+        <p>You can also use the detached variant with heading semantics:</p>
+
+        <ExpandableSectionToggle
+          toggleWrapper="h5"
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+          onToggle={onToggleDetached}
+        >
+          Detached Toggle with Heading
+        </ExpandableSectionToggle>
+
+        <ExpandableSection
+          isDetached
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+        >
+          <p>This is detached content that can be positioned anywhere in the DOM.</p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Custom Content with Heading</h4>
+        <p>You can also use custom content within heading wrappers:</p>
+
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleContent={
+            <span>
+              <CheckCircleIcon /> Custom Heading Content with Icon
+            </span>
+          }
+          onToggle={onToggle2}
+          isExpanded={isExpanded2}
+        >
+          <p>This expandable section uses custom content with an icon inside a heading wrapper.</p>
+        </ExpandableSection>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/Truncate/Truncate.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
 import { getReferenceElement } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { debounce } from '../../helpers/util';
 
 export enum TruncatePosition {
   start = 'start',
@@ -130,12 +131,12 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
       const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
       const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
 
-      const handleResize = () => {
+      const debouncedHandleResize = debounce(() => {
         const parentWidth = getActualWidth(parentElement);
         setIsTruncated(textWidth >= parentWidth);
-      };
+      }, 500);
 
-      const observer = getResizeObserver(parentElement, handleResize);
+      const observer = getResizeObserver(parentElement, debouncedHandleResize);
 
       return () => {
         observer();
@@ -147,7 +148,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
     if (shouldRenderByMaxChars) {
       setIsTruncated(content.length > maxCharsDisplayed);
     }
-  }, [shouldRenderByMaxChars]);
+  }, [shouldRenderByMaxChars, content.length, maxCharsDisplayed]);
 
   useEffect(() => {
     setShouldRenderByMaxChars(maxCharsDisplayed > 0);

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

@@ -1,12 +1,12 @@
-import { render, screen, within } from '@testing-library/react';
-import { Truncate, TruncatePosition } from '../Truncate';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, triggerRef, ...props }) => (
     <div data-testid="Tooltip-mock" {...props}>
-      <div data-testid="Tooltip-mock-content-container">Test {content}</div>
+      <div>Test {content}</div>
       <p>{`position: ${position}`}</p>
       {children}
     </div>
@@ -242,3 +242,21 @@ describe('Truncation with maxCharsDisplayed', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('Tooltip appears on keyboard focus when external triggerRef is provided (ClipboardCopy regression test)', () => {
+  const mockTriggerRef = { current: document.createElement('div') };
+
+  render(
+    <Truncate
+      content="This is a very long piece of content that should be truncated when the container is too small"
+      tooltipProps={{ triggerRef: mockTriggerRef }}
+    />
+  );
+
+  // Simulate keyboard focus on the external trigger element
+  fireEvent.focus(mockTriggerRef.current);
+
+  // The tooltip should be present and visible
+  const tooltip = screen.getByTestId('Tooltip-mock');
+  expect(tooltip).toBeInTheDocument();
+});

package/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap

@@ -5,9 +5,7 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
   <div
     data-testid="Tooltip-mock"
   >
-    <div
-      data-testid="Tooltip-mock-content-container"
-    >
+    <div>
       Test Test truncation content
     </div>
     <p>
@@ -43,9 +41,7 @@ exports[`renders default truncation 1`] = `
   <div
     data-testid="Tooltip-mock"
   >
-    <div
-      data-testid="Tooltip-mock-content-container"
-    >
+    <div>
       Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
     </div>
     <p>
@@ -70,9 +66,7 @@ exports[`renders start truncation with &lrm; at start and end 1`] = `
   <div
     data-testid="Tooltip-mock"
   >
-    <div
-      data-testid="Tooltip-mock-content-container"
-    >
+    <div>
       Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
     </div>
     <p>