@patternfly/react-core 5.3.0-prerelease.16 → 5.3.0-prerelease.17

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":"5.3.0-prerelease.15","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":"5.3.0-prerelease.16","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":"5.3.0-prerelease.15","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":"5.3.0-prerelease.16","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":"5.3.0-prerelease.15","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":"5.3.0-prerelease.16","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.16",
+  "version": "5.3.0-prerelease.17",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "57651d7b8e1e4a5e659e61a3c81cd69f841953bd"
+  "gitHead": "c2b801e346348cb0d522244c1764c3d1f47a48a8"
 }

package/src/components/Chip/__tests__/ChipGroup.test.tsx

@@ -7,6 +7,8 @@ import { ChipGroup } from '../index';
 import { Chip } from '../../Chip';
 import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('chip group default', () => {
   render(
     <ChipGroup>
@@ -71,7 +73,7 @@ test('chip group has aria-labelledby attribute', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
+  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`generated-id`));
 });
 
 test('chip group has aria-labelledby attribute set to ID value', () => {

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

@@ -4,6 +4,8 @@ import { ClipboardCopy } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 jest.mock('../ClipboardCopyButton', () => ({
   ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
     <div data-testid="clipboardCopyButton-mock">

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

@@ -21,7 +21,7 @@ exports[`Matches snapshot 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-26"
           data-ouia-component-type="PF5/TextInput"
           data-ouia-safe="true"
-          id="text-input-34"
+          id="text-input-generated-id"
           type="text"
           value="Copyable text"
         />

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

@@ -14,6 +14,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
   { isExpanded: false, isInline: false, isStatic: false },

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import { DrawerPanelContent } from '../DrawerPanelContent';
 import { Drawer } from '../Drawer';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Does not render with aria-labelledby by default', () => {
   render(
     <Drawer isExpanded>

package/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx

@@ -7,6 +7,8 @@ import { DrawerPanelContent } from '../../DrawerPanelContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
+jest.mock('../../../../helpers/GenerateId/GenerateId');
+
 it('DrawerPanelContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(<DrawerPanelContent className={"''"} children={<div>ReactNode</div>} />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;

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

@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-5"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -187,11 +187,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
-        id="pf-drawer-panel-6"
+        id="generated-id"
         style="--pf-v5-c-drawer__panel--md--FlexBasis: 300px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-6"
+          aria-controls="generated-id"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -283,7 +283,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-1"
+        id="generated-id"
       />
     </div>
   </div>
@@ -310,7 +310,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-3"
+        id="generated-id"
       />
     </div>
   </div>
@@ -336,7 +336,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-0"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -410,7 +410,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-4"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -484,7 +484,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-2"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -7,6 +7,8 @@ import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup

package/src/components/Form/__tests__/FormSection.test.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { FormSection } from '../FormSection';
 import { render, screen } from '@testing-library/react';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
   const { asFragment } = render(Section);

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -17,12 +17,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 form-field-group-toggle0"
+          aria-labelledby="title-text-id2 generated-id"
           class="pf-v5-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
-          id="form-field-group-toggle0"
+          id="generated-id"
           type="button"
         >
           <span

package/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -12,13 +12,13 @@ exports[`Check form section example against snapshot 1`] = `
 exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
-    aria-labelledby="pf-form-section-title1"
+    aria-labelledby="generated-id"
     class="pf-v5-c-form__section"
     role="group"
   >
     <h4
       class="pf-v5-c-form__section-title"
-      id="pf-form-section-title1"
+      id="generated-id"
     >
       Title
     </h4>

package/src/components/Label/__tests__/LabelGroup.test.tsx

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { Label } from '../../Label';
 import { LabelGroup } from '../index';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('LabelGroup', () => {
   test('label group default', () => {
     const { asFragment } = render(

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -134,12 +134,12 @@ exports[`LabelGroup label group with category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-1"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-1"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -177,12 +177,12 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-4"
+        id="generated-id"
       >
         A very long category name
       </span>
       <ul
-        aria-labelledby="pf-random-id-4"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -220,12 +220,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-2"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-2"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -254,12 +254,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close label group"
-        aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+        aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_group_pf-random-id-2"
+        id="remove_group_generated-id"
         type="button"
       >
         <svg

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
     const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -9,10 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-1-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-1-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -48,9 +48,9 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-1-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-1-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -74,10 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-3-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-3-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -127,9 +127,9 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-3-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-3-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -153,10 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-2-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-2-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -194,9 +194,9 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-2-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-2-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -220,10 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v5-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-0-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v5-c-expandable-section__toggle"
-        id="pf-expandable-section-0-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -259,9 +259,9 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-0-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v5-c-expandable-section__content"
-        id="pf-expandable-section-0-content"
+        id="generated-id-content"
         role="region"
       >
         <ul

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

@@ -11,6 +11,7 @@ import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 jest.mock('../../../helpers/OUIA/ouia');
+jest.mock('../../../helpers/GenerateId/GenerateId');
 
 const props = {
   onChange: jest.fn(),

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

@@ -364,7 +364,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 >
                   <label
                     class="pf-v5-c-form__label"
-                    for="pf-random-id-2"
+                    for="generated-id"
                   >
                     <span
                       class="pf-v5-c-form__label-text"
@@ -382,7 +382,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      id="pf-random-id-2"
+                      id="generated-id"
                       type="text"
                       value=""
                     />

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

@@ -7,6 +7,8 @@ import { TabTitleIcon } from '../TabTitleIcon';
 import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

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

@@ -408,12 +408,12 @@ exports[`should render expandable vertical tabs 1`] = `
       >
         <button
           aria-disabled="false"
-          aria-labelledby="pf-random-id-0-text pf-random-id-0-button"
+          aria-labelledby="generated-id-text generated-id-button"
           class="pf-v5-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
-          id="pf-random-id-0-button"
+          id="generated-id-button"
           type="button"
         >
           <span
@@ -436,7 +436,7 @@ exports[`should render expandable vertical tabs 1`] = `
           </span>
           <span
             class="pf-v5-c-tabs__toggle-text"
-            id="pf-random-id-0-text"
+            id="generated-id-text"
           >
             toggle
           </span>

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

@@ -10,6 +10,8 @@ import { ToolbarFilter } from '../ToolbarFilter';
 import { ToolbarGroup } from '../ToolbarGroup';
 import { Button } from '../../Button/Button';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('Toolbar', () => {
   it('should render inset', () => {
     const items = (

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

@@ -103,7 +103,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           class="pf-v5-c-toolbar__item pf-m-chip-group"
         >
           <div
-            aria-labelledby="pf-random-id-0"
+            aria-labelledby="generated-id"
             class="pf-v5-c-chip-group pf-m-category"
             data-ouia-component-type="PF5/ChipGroup"
             data-ouia-safe="true"
@@ -114,12 +114,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
             >
               <span
                 class="pf-v5-c-chip-group__label"
-                id="pf-random-id-0"
+                id="generated-id"
               >
                 Status
               </span>
               <ul
-                aria-labelledby="pf-random-id-0"
+                aria-labelledby="generated-id"
                 class="pf-v5-c-chip-group__list"
                 role="list"
               >
@@ -137,7 +137,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <span
                         class="pf-v5-c-chip__text"
-                        id="pf-random-id-1"
+                        id="generated-id"
                       >
                         New
                       </span>
@@ -148,12 +148,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       <button
                         aria-disabled="false"
                         aria-label="close"
-                        aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
+                        aria-labelledby="remove_generated-id generated-id"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-1"
+                        id="remove_generated-id"
                         type="button"
                       >
                         <svg
@@ -187,7 +187,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <span
                         class="pf-v5-c-chip__text"
-                        id="pf-random-id-2"
+                        id="generated-id"
                       >
                         Pending
                       </span>
@@ -198,12 +198,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       <button
                         aria-disabled="false"
                         aria-label="close"
-                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
+                        aria-labelledby="remove_generated-id generated-id"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-2"
+                        id="remove_generated-id"
                         type="button"
                       >
                         <svg
@@ -231,12 +231,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
               <button
                 aria-disabled="false"
                 aria-label="Close chip group"
-                aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
+                aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="Close chip group"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
-                id="remove_group_pf-random-id-0"
+                id="remove_group_generated-id"
                 type="button"
               >
                 <svg

package/src/deprecated/components/Select/__tests__/Select.test.tsx

@@ -9,6 +9,8 @@ import { SelectGroup } from '../SelectGroup';
 import { SelectVariant, SelectDirection } from '../selectConstants';
 import { KeyTypes } from '../../../../helpers';
 
+jest.mock('../../../../helpers/GenerateId/GenerateId');
+
 class User implements SelectOptionObject {
   private firstName: string;
   private lastName: string;