From d69b9c853ea29eaf1bcb122d93c679ace210154f Mon Sep 17 00:00:00 2001 From: Sean Anderson Date: Wed, 18 Dec 2024 13:42:52 +0000 Subject: [PATCH 1/2] fix(EmptyState): added useId handling for older react version --- .../EmptyStates/assets/ErrorIllustration.js | 3 ++- .../EmptyStates/assets/NoDataIllustration.js | 3 ++- .../EmptyStates/assets/NoTagsIllustration.js | 3 ++- .../assets/NotFoundIllustration.js | 3 ++- .../assets/NotificationsIllustration.js | 3 ++- .../assets/UnauthorizedIllustration.js | 3 ++- .../ibm-products/src/global/js/utils/useId.js | 21 +++++++++++++++++++ 7 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 packages/ibm-products/src/global/js/utils/useId.js diff --git a/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js index ebe58b6587..0e69197bb0 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js index fa736070b2..d687703f0c 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js index 65aede2eca..fb8cf7a9bf 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js index a12f64ef98..a4e8c18d5b 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js index b7284f5cf4..a22423a525 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js index 67a3d407a2..74b9076ff9 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js +++ b/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`; diff --git a/packages/ibm-products/src/global/js/utils/useId.js b/packages/ibm-products/src/global/js/utils/useId.js new file mode 100644 index 0000000000..5d60e9b7af --- /dev/null +++ b/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; From 8030fa77d8848ccd23c5df2e303b31cf28874aeb Mon Sep 17 00:00:00 2001 From: Sean Anderson Date: Wed, 18 Dec 2024 17:30:33 +0000 Subject: [PATCH 2/2] fix(EmptyState): fixed imports for useId --- .../src/components/EmptyStates/assets/ErrorIllustration.js | 2 +- .../src/components/EmptyStates/assets/NoDataIllustration.js | 2 +- .../src/components/EmptyStates/assets/NoTagsIllustration.js | 2 +- .../src/components/EmptyStates/assets/NotFoundIllustration.js | 2 +- .../components/EmptyStates/assets/NotificationsIllustration.js | 2 +- .../components/EmptyStates/assets/UnauthorizedIllustration.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js index 0e69197bb0..099556deec 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/ErrorIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js index d687703f0c..af6da233ab 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/NoDataIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js index fb8cf7a9bf..f88b77e2c2 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/NoTagsIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js index a4e8c18d5b..00b7106e56 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/NotFoundIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js index a22423a525..a8f2c0b44a 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/NotificationsIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`; diff --git a/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js b/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js index 74b9076ff9..ea8945180a 100644 --- a/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js +++ b/packages/ibm-products/src/components/EmptyStates/assets/UnauthorizedIllustration.js @@ -12,7 +12,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { pkg } from '../../../settings'; -import useId from '../../../global/js/utils/useId'; +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`;