@patternfly/react-core 6.0.0-alpha.50 → 6.0.0-alpha.52

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
   TextContent,

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -16,7 +16,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -17,7 +17,7 @@ import {
   TitleSizes,
   CardTitle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(1);

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -225,7 +225,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -19,7 +19,7 @@ import {
   DropdownList,
   MenuFooter
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';

package/src/demos/examples/Wizard/InModal.tsx

@@ -11,7 +11,7 @@ import {
   WizardHeader,
   WizardStep
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const WizardInModalDemo: React.FunctionComponent = () => (
   <>

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

@@ -7,6 +7,8 @@ import { ChipGroup } from '../index';
 import { Chip } from '..';
 import styles from '@patternfly/react-styles/css/components/Label/label-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('list')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
+  expect(screen.getByRole('list')).toHaveAttribute('aria-labelledby', expect.stringContaining(`generated-id`));
 });
 
 test('chip group has aria-labelledby attribute set to ID value', () => {
@@ -266,7 +268,7 @@ test('passing defaultIsOpen of true causes the chip group to be expanded by defa
 
 test('chip group will not render if no children passed', () => {
   render(<ChipGroup />);
-  expect(screen.queryByRole('group')).toBeNull();
+  expect(screen.queryByRole('list')).toBeNull();
 });
 
 test('chip group renders to match snapshot', () => {

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;

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

@@ -697,7 +697,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Mr"
+              id="generated-id-Mr"
               type="checkbox"
             />
             <span
@@ -711,7 +711,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Mrs"
+              id="generated-id-Mrs"
               type="checkbox"
             />
             <span
@@ -725,7 +725,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Ms"
+              id="generated-id-Ms"
               type="checkbox"
             />
             <span
@@ -739,7 +739,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Other"
+              id="generated-id-Other"
               type="checkbox"
             />
             <span
@@ -769,7 +769,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Mr"
+              id="generated-id-Mr"
               type="checkbox"
             />
             <span
@@ -783,7 +783,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Mrs"
+              id="generated-id-Mrs"
               type="checkbox"
             />
             <span
@@ -797,7 +797,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Ms"
+              id="generated-id-Ms"
               type="checkbox"
             />
             <span
@@ -811,7 +811,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
           >
             <input
               class="pf-v6-c-check__input"
-              id="pf-random-id-16-Other"
+              id="generated-id-Other"
               type="checkbox"
             />
             <span
@@ -1022,7 +1022,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-13-Mr"
+          id="generated-id-Mr"
           type="checkbox"
         />
         <span
@@ -1036,7 +1036,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-13-Mrs"
+          id="generated-id-Mrs"
           type="checkbox"
         />
         <span
@@ -1050,7 +1050,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-13-Ms"
+          id="generated-id-Ms"
           type="checkbox"
         />
         <span
@@ -1064,7 +1064,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-13-Other"
+          id="generated-id-Other"
           type="checkbox"
         />
         <span
@@ -1129,7 +1129,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-15-Mr: User One"
+          id="generated-id-Mr: User One"
           type="checkbox"
         />
         <span
@@ -1143,7 +1143,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-15-Mrs: New User"
+          id="generated-id-Mrs: New User"
           type="checkbox"
         />
         <span
@@ -1157,7 +1157,7 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] =
       >
         <input
           class="pf-v6-c-check__input"
-          id="pf-random-id-15-Ms: Test Three"
+          id="generated-id-Ms: Test Three"
           type="checkbox"
         />
         <span
@@ -1239,7 +1239,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v6-c-check__input"
-            id="pf-random-id-14-Mr"
+            id="generated-id-Mr"
             type="checkbox"
           />
           <span
@@ -1253,7 +1253,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v6-c-check__input"
-            id="pf-random-id-14-Mrs"
+            id="generated-id-Mrs"
             type="checkbox"
           />
           <span
@@ -1267,7 +1267,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v6-c-check__input"
-            id="pf-random-id-14-Ms"
+            id="generated-id-Ms"
             type="checkbox"
           />
           <span
@@ -1281,7 +1281,7 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         >
           <input
             class="pf-v6-c-check__input"
-            id="pf-random-id-14-Other"
+            id="generated-id-Other"
             type="checkbox"
           />
           <span

package/src/helpers/GenerateId/GenerateId.ts

@@ -12,22 +12,36 @@
  */
 
 import * as React from 'react';
+import { getUniqueId } from '../util';
 
 let currentId = 0;
 
-interface GenerateIdProps {
+// gives us a unique (enough) id to add to the generated id that it should prevent issues with duplicate ids
+function getRandomId() {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  } else {
+    return getUniqueId();
+  }
+}
+
+export interface GenerateIdProps {
   /** String to prefix the random id with */
   prefix?: string;
   /** Component to be rendered with the generated id */
   children(id: string): React.ReactNode;
+  /** Flag to add randomness to the generated id, should be used whenever possible */
+  isRandom?: boolean;
 }
 
 class GenerateId extends React.Component<GenerateIdProps, {}> {
   static displayName = 'GenerateId';
   static defaultProps = {
-    prefix: 'pf-random-id-'
+    prefix: 'pf-random-id-',
+    isRandom: false
   };
-  id = `${this.props.prefix}${currentId++}`;
+  uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
+  id = `${this.props.prefix}${this.uniqueElement}`;
 
   render() {
     return this.props.children(this.id);

package/src/helpers/GenerateId/__mocks__/GenerateId.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GenerateIdProps } from '../GenerateId';
+class GenerateId extends React.Component<GenerateIdProps, {}> {
+  static displayName = 'GenerateId';
+
+  render() {
+    return this.props.children('generated-id');
+  }
+}
+
+export { GenerateId };

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const { asFragment } = render(<GenerateId>{(id) => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(
+    <GenerateId isRandom={false}>{(id) => <div id={id}>div with random ID</div>}</GenerateId>
+  );
 
   expect(asFragment()).toMatchSnapshot();
 });