@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.6

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.3","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.5","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.3","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.5","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.3","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.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.4",
+  "version": "6.5.0-prerelease.6",
   "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": "912729437db337b5e576adbe8d06bdf2bc04b189"
+  "gitHead": "070b384f310888ebad56fff18677a08c49d35883"
 }

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/Tabs/Tabs.tsx

@@ -206,7 +206,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll forward',
-    component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
     ouiaSafe: true,
@@ -529,7 +528,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
     const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;

package/src/components/Tabs/examples/Tabs.md

@@ -189,6 +189,14 @@ Subtabs can also link to nav elements.
 
 ```
 
+### Tabs used for site navigation
+
+Site navigation tabs
+
+```ts file="./TabsSiteNav.tsx"
+
+```
+
 ### With separate content
 
 If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.

package/src/components/Tabs/examples/TabsSiteNav.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsSiteNav: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isNav={true}
+      aria-label="Site navigation with nav styling example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

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>