@carbon/react 1.63.0-rc.0 → 1.63.1

package/lib/components/NumberInput/NumberInput.d.ts

@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import { TranslateWithId } from '../../types/common';
 export declare const translationIds: {
-    'increment.number': string;
-    'decrement.number': string;
+    readonly 'increment.number': "increment.number";
+    readonly 'decrement.number': "decrement.number";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * `true` to allow empty string.
      */
@@ -115,10 +120,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify the value of the input
      */

package/lib/components/NumberInput/NumberInput.js

@@ -34,6 +34,11 @@ const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -5,7 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.pagination-nav.next': "Next";
+    readonly 'carbon.pagination-nav.previous': "Previous";
+    readonly 'carbon.pagination-nav.item': "Page";
+    readonly 'carbon.pagination-nav.active': "Active";
+    readonly 'carbon.pagination-nav.of': "of";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */
@@ -35,11 +47,6 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The total number of items.
      */
     totalItems?: number;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
 export default PaginationNav;

package/lib/components/PaginationNav/PaginationNav.js

@@ -31,6 +31,11 @@ const translationIds = {
   'carbon.pagination-nav.active': 'Active',
   'carbon.pagination-nav.of': 'of'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return translationIds[messageId];
 }

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,6 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    readonly 'carbon.progress-step.complete': "Complete";
+    readonly 'carbon.progress-step.incomplete': "Incomplete";
+    readonly 'carbon.progress-step.current': "Current";
+    readonly 'carbon.progress-step.invalid': "Invalid";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
 export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
@@ -63,7 +74,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-export interface ProgressStepProps {
+export interface ProgressStepProps extends TranslateWithId<TranslationKey> {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */
@@ -112,11 +123,6 @@ export interface ProgressStepProps {
      * The ID of the tooltip content.
      */
     tooltipId?: string;
-    /**
-     * Optional method that takes in a message id and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressStep {

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -32,6 +32,11 @@ const defaultTranslations = {
   'carbon.progress-step.current': 'Current',
   'carbon.progress-step.invalid': 'Invalid'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return defaultTranslations[messageId];
 }

package/lib/components/Slider/Slider.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -14,7 +22,9 @@ declare enum HandlePosition {
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+    correctedValue?: string;
+}> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
@@ -136,14 +146,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * which will be `(max - min) / stepMultiplier`.
      */
     stepMultiplier?: number;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationIds` field for
-     * this component.
-     */
-    translateWithId?: (translationId: string, translationState: {
-        correctedValue?: string;
-    }) => string;
     /**
      * The value of the slider. When there are two handles, value is the lower
      * bound.

package/lib/components/Slider/Slider.js

@@ -83,8 +83,13 @@ ThumbWrapper.propTypes = {
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(translationId, translationState) {
-  if (translationId === translationIds.autoCorrectAnnouncement && translationState?.correctedValue) {
+  if (translationState?.correctedValue) {
     const {
       correctedValue
     } = translationState;

package/lib/internal/Selection.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/internal/useId.js

@@ -18,49 +18,70 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// This file was heavily inspired by Reach UI and their work on their auto-id
-const getId = setupGetInstanceId["default"]();
+// This file was heavily inspired by:
+
+// 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__default["default"]
+};
+const instanceId = setupGetInstanceId["default"]();
 const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
 let serverHandoffCompleted = false;
+const defaultId = 'id';
 
 /**
- * Generate a unique ID with an optional prefix prepended to it
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
  * @param {string} [prefix]
  * @returns {string}
  */
-function useId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
-  const _prefix = useIdPrefix.useIdPrefix();
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
   const [id, setId] = React.useState(() => {
     if (serverHandoffCompleted) {
-      return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
+      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
     }
     return null;
   });
   useIsomorphicLayoutEffect(() => {
     if (id === null) {
-      setId(`${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`);
+      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
     }
-  }, [getId]);
+  }, [instanceId]);
   React.useEffect(() => {
     if (serverHandoffCompleted === false) {
       serverHandoffCompleted = true;
     }
   }, []);
-  if (typeof React__default["default"]['useId'] === 'function') {
-    const id = nativeReactUseId(_prefix, prefix);
-    return id;
-  }
   return id;
 }
-function nativeReactUseId(_prefix, prefix) {
-  const getId = React__default["default"]['useId']();
-  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
-  return id;
+
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+function useReactId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
+  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
 }
 
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ */
+const useId = _React.useId ? useReactId : useCompatibleId;
+
 /**
  * Generate a unique id if a given `id` is not provided
+ * This is an internal utility, not intended for public usage.
  * @param {string|undefined} id
  * @returns {string}
  */
@@ -69,5 +90,6 @@ function useFallbackId(id) {
   return id ?? fallback;
 }
 
+exports.useCompatibleId = useCompatibleId;
 exports.useFallbackId = useFallbackId;
 exports.useId = useId;

package/lib/types/common.d.ts

@@ -9,10 +9,15 @@ export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<F
 export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
     as?: Element;
 };
-export interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
     /**
      * Supply a method to translate internal strings with your i18n tool of
      * choice.
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
+/**
+ * Alias of TranslateWithId. Will be removed in v12
+ * @deprecated Use TranslateWithId instead
+ */
+export type InternationalProps<MID = string, ARGS = Record<string, unknown>> = TranslateWithId<MID, ARGS>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.63.0-rc.0",
+  "version": "1.63.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.21.0-rc.0",
-    "@carbon/icons-react": "^11.46.0-rc.0",
-    "@carbon/layout": "^11.24.0-rc.0",
-    "@carbon/styles": "^1.62.0-rc.0",
+    "@carbon/feature-flags": "^0.21.0",
+    "@carbon/icons-react": "^11.46.0",
+    "@carbon/layout": "^11.24.0",
+    "@carbon/styles": "^1.62.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -61,7 +61,6 @@
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
     "lodash.findlast": "^4.5.0",
-    "lodash.isequal": "^4.5.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
@@ -81,7 +80,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.38.0-rc.0",
+    "@carbon/themes": "^11.38.0",
     "@figma/code-connect": "^1.0.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
@@ -100,7 +99,7 @@
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.6.0-rc.0",
+    "babel-preset-carbon": "^0.6.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^2.1.0",
@@ -142,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "326ac312c2b669937ede1c0c68c0e3a6d9c34135"
+  "gitHead": "950953f450dcdfbee94deceba31ce2cab8807414"
 }