@patternfly/react-core 5.3.0-prerelease.9 → 5.3.0

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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-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-v5-c-check__input"
-            id="pf-random-id-14-Other"
+            id="generated-id-Other"
             type="checkbox"
           />
           <span
@@ -1877,7 +1877,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   >
                     <span
                       class="pf-v5-c-chip__text"
-                      id="pf-random-id-25"
+                      id="generated-id"
                     >
                       Mr
                     </span>
@@ -1888,12 +1888,12 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
+                      aria-labelledby="remove_generated-id generated-id"
                       class="pf-v5-c-button pf-m-plain"
                       data-ouia-component-id="Remove"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-25"
+                      id="remove_generated-id"
                       type="button"
                     >
                       <svg
@@ -1927,7 +1927,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   >
                     <span
                       class="pf-v5-c-chip__text"
-                      id="pf-random-id-26"
+                      id="generated-id"
                     >
                       Mrs
                     </span>
@@ -1938,12 +1938,12 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
+                      aria-labelledby="remove_generated-id generated-id"
                       class="pf-v5-c-button pf-m-plain"
                       data-ouia-component-id="Remove"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-26"
+                      id="remove_generated-id"
                       type="button"
                     >
                       <svg

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();
 });