fix(EmptyState): added useId handling for older react version (#6620)

* fix(EmptyState): added useId handling for older react version

* fix(EmptyState): fixed imports for useId

---------

Co-authored-by: Sean Anderson <[email protected]>

packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React, { useId } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { useId } from '../../../global/js/utils/useId';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;

packages/ibm-products/src/global/js/utils/useId.js

@@ -0,0 +1,21 @@
+//
+// Copyright IBM Corp. 2021, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+import React from 'react';
+import uuidv4 from './uuidv4';
+
+// This tricks bundlers so they can't statically analyze this and produce
+// compilation warnings/errors.
+// https://github.com/webpack/webpack/issues/14814
+// https://github.com/mui/material-ui/issues/41190
+const _React = { ...React };
+
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to
+ * using uuidv4 otherwise
+ */
+export const useId = _React.useId ? _React.useId : uuidv4;