@carbon/react 1.87.0-rc.0 → 1.87.0

package/es/internal/useId.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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}
+ */
+export function useCompatibleId(prefix?: string): string;
+/**
+ * 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}
+ */
+export function useFallbackId(id: string | undefined): string;
+/**
+ * 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}
+ */
+export function useId(prefix?: string): string;

package/es/internal/useId.js

@@ -5,12 +5,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useLayoutEffect, useEffect } from 'react';
 import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
 
 // This file was heavily inspired by:
+//
+// 1. Reach UI and their work on their auto-id package:
+//    https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/auto-id/src/index.ts
+//
+// 2. Floating UI and their work on react >=18 compatibility
+//    https://github.com/floating-ui/floating-ui/blob/%40floating-ui/utils%400.2.5/packages/react/src/hooks/useId.ts
+//
+// The problem that this solves is an id mismatch when auto-generating
+// ids on both the server and the client. When using server-side rendering,
+// there can be the chance of a mismatch between what the server renders and
+// what the client renders when the id value is auto-generated.
+//
+// To get around this, we set the initial value of the `id` to `null` and then
+// conditionally use `useLayoutEffect` on the client and `useEffect` on the
+// server. On the client, `useLayoutEffect` will patch up the id to the correct
+// value. On the server, `useEffect` will not run.
+//
+// This ensures that we won't encounter a mismatch in ids between server and
+// client, at the cost of runtime patching of the id value in
+// `useLayoutEffect`
+//
+// React 18 introduced a new hook called `useId` that takes care of hydration
+// mismatches. If the user is running React 18 or higher, the native hook is
+// used via the `useReactId` function. If the user is running React 17 or
+// lower, `useCompatibleId` is used.
+
 
 // This tricks bundlers so they can't statically analyze this and produce
 // compilation warnings/errors.

package/es/internal/useOverflowItems.js

@@ -105,12 +105,6 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
 
   // Only call onChange if hidden items actually changed
   useEffect(() => {
-    if (previousHiddenItems && onChange) {
-      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
-      if (hasChanged) {
-        onChange(hiddenItems);
-      }
-    }
   }, [hiddenItems, previousHiddenItems, onChange]);
   return {
     visibleItems,

package/es/node_modules/es-toolkit/dist/compat/function/{debounce.mjs.js → debounce.js}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { debounce as debounce$1 } from '../../function/debounce.mjs.js';
+import { debounce as debounce$1 } from '../../function/debounce.js';
 
 function debounce(func, debounceMs = 0, options = {}) {
     if (typeof options !== 'object') {

package/es/node_modules/es-toolkit/dist/compat/function/{throttle.mjs.js → throttle.js}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { debounce } from './debounce.mjs.js';
+import { debounce } from './debounce.js';
 
 function throttle(func, throttleMs = 0, options = {}) {
     if (typeof options !== 'object') {

package/es/prop-types/deprecateComponent.d.ts

@@ -0,0 +1 @@
+export default function deprecateComponent(componentName: any, message: any): any;

package/es/prop-types/deprecateComponent.js

@@ -9,12 +9,9 @@ import { warning } from '../internal/warning.js';
 
 const didWarnAboutDeprecation = {};
 function deprecateComponent(componentName, message) {
-  if (!componentName) {
-    return;
-  }
   if (!didWarnAboutDeprecation[componentName]) {
     didWarnAboutDeprecation[componentName] = true;
-    process.env.NODE_ENV !== "production" ? warning(false, message || `The ${componentName} component has been deprecated and will be removed in the next major release.`) : void 0;
+    process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
   }
   return componentName;
 }

package/es/prop-types/deprecateValuesWithin.d.ts

@@ -0,0 +1 @@
+export default function deprecateValuesWithin(propType: any, allowedValues: any, propMappingFunction: any): (props: any, propName: any, componentName: any, ...rest: any[]) => any;

package/es/prop-types/requiredIfGivenPropIsTruthy.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @param {string} name The name of the prop that must exist to validate
+ * the current prop.
+ * @param {React.Validator} propType The original prop type checker.
+ * @returns {React.Validator} The new prop type checker for the current prop that
+ * becomes required if the prop corresponding to the provided prop name exists.
+ */
+export default function requiredIfGivenPropIsTruthy(name: string, propType: React.Validator): React.Validator;

package/es/tools/mergeRefs.d.ts

@@ -0,0 +1,12 @@
+export default mergeRefs;
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @param {...Ref<Element>} refs List of React refs to merge.
+ * @returns {Ref<Element>} Merged React ref.
+ */
+declare function mergeRefs(...refs: Ref<Element>[]): Ref<Element>;

package/es/tools/mergeRefs.js

@@ -19,6 +19,5 @@ const mergeRefs = (...refs) => el => {
     }
   });
 };
-var mergeRefs$1 = mergeRefs;
 
-export { mergeRefs$1 as default };
+export { mergeRefs as default };

package/icons/index.js

@@ -7,14 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var iconsReact = require('@carbon/icons-react');
 
 
 
 Object.keys(iconsReact).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function () { return iconsReact[k]; }
 	});

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -7,14 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _extends() {
@@ -30,7 +28,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -42,6 +40,6 @@ function _toPropertyKey(t) {
 }
 
 exports.defineProperty = _defineProperty;
-exports["extends"] = _extends;
+exports.extends = _extends;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;

package/lib/components/AILabel/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
@@ -22,20 +20,14 @@ var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _Undo;
-const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(function AILabelContent({
+const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
   className,
   children,
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
-  const hasAILabelActions = React__default["default"].Children.toArray(children).some(child => {
+  const hasAILabelActions = React.Children.toArray(children).some(child => {
     const item = child;
     // TODO: Is there supposed to be a `return` here? If so, this issue would
     // have been caught by ESLint. It's concerning that this code is 7 months
@@ -44,11 +36,11 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
     // https://github.com/carbon-design-system/carbon/issues/18991
     item.type === AILabelActions;
   });
-  const aiLabelContentClasses = cx__default["default"](className, {
+  const aiLabelContentClasses = cx(className, {
     [`${prefix}--ai-label-content`]: true,
     [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
   });
-  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
+  return /*#__PURE__*/React.createElement(index.ToggletipContent, {
     className: aiLabelContentClasses
   }, children);
 });
@@ -57,22 +49,22 @@ AILabelContent.propTypes = {
   /**
    * Specify the content you want rendered inside the AILabel ToggleTip
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the AILabel callout
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
-const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(function AILabelActions({
+const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions({
   className,
   children,
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
-  const aiLabelActionsClasses = cx__default["default"](className, {
+  const aiLabelActionsClasses = cx(className, {
     [`${prefix}--ai-label-actions`]: true
   });
-  return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
+  return /*#__PURE__*/React.createElement(index.ToggletipActions, {
     className: aiLabelActionsClasses
   }, children);
 });
@@ -81,11 +73,11 @@ AILabelActions.propTypes = {
   /**
    * Specify the content you want rendered inside the AILabel callout toolbar
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the AILabel toolbar
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 
 /**
@@ -93,7 +85,7 @@ AILabelActions.propTypes = {
  * @deprecated Use NewPopoverAlignment instead.
  */
 
-const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILabel({
+const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
   aiText = 'AI',
   aiTextLabel,
   textLabel,
@@ -112,11 +104,11 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
 }, ref) {
   const prefix = usePrefix.usePrefix();
   const id = useId.useId('AILabel');
-  const aiLabelClasses = cx__default["default"](className, {
+  const aiLabelClasses = cx(className, {
     [`${prefix}--ai-label`]: true,
     [`${prefix}--ai-label--revert`]: revertActive
   });
-  const aiLabelButtonClasses = cx__default["default"]({
+  const aiLabelButtonClasses = cx({
     [`${prefix}--ai-label__button`]: true,
     [`${prefix}--ai-label__button--${size}`]: size,
     [`${prefix}--ai-label__button--${kind}`]: kind,
@@ -129,25 +121,25 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
   };
   const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
   const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: aiLabelClasses,
     ref: ref,
     id: id
-  }, revertActive ? /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, _rollupPluginBabelHelpers["extends"]({
+  }, revertActive ? /*#__PURE__*/React.createElement(index$1.IconButton, _rollupPluginBabelHelpers.extends({
     onClick: handleOnRevertClick,
     kind: "ghost",
     size: "sm",
     label: revertLabel
-  }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
+  }, rest), _Undo || (_Undo = /*#__PURE__*/React.createElement(iconsReact.Undo, null))) : /*#__PURE__*/React.createElement(index.Toggletip, _rollupPluginBabelHelpers.extends({
     align: align,
     autoAlign: autoAlign,
     alignmentAxisOffset: isSmallIcon ? -24 : 0
-  }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
+  }, rest), /*#__PURE__*/React.createElement(index.ToggletipButton, {
     className: aiLabelButtonClasses,
     label: kind === 'inline' ? '' : ariaLabelText
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--ai-label__text`
-  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--ai-label__additional-text`
   }, aiTextLabel || textLabel)), children));
 });
@@ -156,20 +148,20 @@ AILabel.propTypes = {
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
-  AILabelContent: PropTypes__default["default"].node,
+  AILabelContent: PropTypes.node,
   /**
    * Specify the correct translation of the AI text
    */
-  aiText: PropTypes__default["default"].string,
+  aiText: PropTypes.string,
   /**
    * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: deprecate.deprecate(PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
+  aiTextLabel: deprecate.deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
-  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead
@@ -194,48 +186,48 @@ AILabel.propTypes = {
   /**
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  'aria-label': PropTypes__default["default"].string,
+  'aria-label': PropTypes.string,
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */
-  autoAlign: PropTypes__default["default"].bool,
+  autoAlign: PropTypes.bool,
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the `AILabel`
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify the type of `AILabel`, from the following list of types:
    */
-  kind: PropTypes__default["default"].oneOf(['default', 'inline']),
+  kind: PropTypes.oneOf(['default', 'inline']),
   /**
    * Callback function that fires when the revert button is clicked
    */
-  onRevertClick: PropTypes__default["default"].func,
+  onRevertClick: PropTypes.func,
   /**
    * Specify whether the revert button should be visible
    */
-  revertActive: PropTypes__default["default"].bool,
+  revertActive: PropTypes.bool,
   /**
    * Specify the text that should be shown when the revert button is hovered
    */
-  revertLabel: PropTypes__default["default"].string,
+  revertLabel: PropTypes.string,
   /**
    * Specify the size of the button, from the following list of sizes:
    */
-  size: PropTypes__default["default"].oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+  size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * @deprecated
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugLabel: deprecate.deprecate(PropTypes__default["default"].string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
+  slugLabel: deprecate.deprecate(PropTypes.string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
   /**
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  textLabel: PropTypes__default["default"].string
+  textLabel: PropTypes.string
 };
 
 exports.AILabel = AILabel;

package/lib/components/AISkeleton/AISkeletonIcon.js

@@ -16,21 +16,15 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var SkeletonIcon = require('../SkeletonIcon/SkeletonIcon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const AISkeletonIcon = ({
   className,
   ...rest
 }) => {
   const prefix = usePrefix.usePrefix();
-  const AISkeletonIconClasses = cx__default["default"](className, {
+  const AISkeletonIconClasses = cx(className, {
     [`${prefix}--skeleton__icon--ai`]: true
   });
-  return /*#__PURE__*/React__default["default"].createElement(SkeletonIcon["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(SkeletonIcon.default, _rollupPluginBabelHelpers.extends({
     className: AISkeletonIconClasses
   }, rest));
 };
@@ -38,11 +32,11 @@ AISkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * The CSS styles.
    */
-  style: PropTypes__default["default"].object
+  style: PropTypes.object
 };
 
-exports["default"] = AISkeletonIcon;
+exports.default = AISkeletonIcon;

package/lib/components/AISkeleton/AISkeletonPlaceholder.js

@@ -16,22 +16,16 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var SkeletonPlaceholder = require('../SkeletonPlaceholder/SkeletonPlaceholder.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const AISkeletonPlaceholder = ({
   className,
   ...other
 }) => {
   const prefix = usePrefix.usePrefix();
-  const AISkeletonPlaceholderClasses = cx__default["default"]({
+  const AISkeletonPlaceholderClasses = cx({
     className,
     [`${prefix}--skeleton__placeholder--ai`]: true
   }, className);
-  return /*#__PURE__*/React__default["default"].createElement(SkeletonPlaceholder["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(SkeletonPlaceholder.default, _rollupPluginBabelHelpers.extends({
     className: AISkeletonPlaceholderClasses
   }, other));
 };
@@ -40,7 +34,7 @@ AISkeletonPlaceholder.propTypes = {
    * Add a custom class to the component
    * to set the height and width
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 
-exports["default"] = AISkeletonPlaceholder;
+exports.default = AISkeletonPlaceholder;

package/lib/components/AISkeleton/AISkeletonText.js

@@ -16,21 +16,15 @@ var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var SkeletonText = require('../SkeletonText/SkeletonText.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const AISkeletonText = ({
   className,
   ...rest
 }) => {
   const prefix = usePrefix.usePrefix();
-  const aiSkeletonTextClasses = cx__default["default"](className, {
+  const aiSkeletonTextClasses = cx(className, {
     [`${prefix}--skeleton__text--ai`]: true
   });
-  return /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React.createElement(SkeletonText.default, _rollupPluginBabelHelpers.extends({
     className: aiSkeletonTextClasses
   }, rest));
 };
@@ -38,23 +32,23 @@ AISkeletonText.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * generates skeleton text at a larger size
    */
-  heading: PropTypes__default["default"].bool,
+  heading: PropTypes.bool,
   /**
    * the number of lines shown if paragraph is true
    */
-  lineCount: PropTypes__default["default"].number,
+  lineCount: PropTypes.number,
   /**
    * will generate multiple lines of text
    */
-  paragraph: PropTypes__default["default"].bool,
+  paragraph: PropTypes.bool,
   /**
    * width (in px or %) of single line of text or max-width of paragraph lines
    */
-  width: PropTypes__default["default"].string
+  width: PropTypes.string
 };
 
-exports["default"] = AISkeletonText;
+exports.default = AISkeletonText;