@carbon/react 1.86.0 → 1.87.0

package/lib/internal/deprecateFieldOnObject.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var warning = require('./warning.js');
 
 const deprecateFieldOnObject = (object, field, Component, message) => {
@@ -17,7 +15,7 @@ const deprecateFieldOnObject = (object, field, Component, message) => {
     enumerable: true,
     get: () => {
       if (!didWarnAboutDeprecation[field]) {
-        process.env.NODE_ENV !== "production" ? warning.warning(false, message || `The ${field} field has been deprecated on the ${object.displayName} object. ` + `Please import and use ${Component.displayName || Component.name || 'the field'} directly.`) : void 0;
+        process.env.NODE_ENV !== "production" ? warning.warning(false, `The ${field} field has been deprecated on the ${object.displayName} object. ` + `Please import and use ${Component.displayName || Component.name || 'the field'} directly.`) : void 0;
         didWarnAboutDeprecation[field] = true;
       }
       return Component;

package/lib/internal/environment.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Indicate whether current execution environment can access the DOM.
  *

package/lib/internal/getAnnouncement.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /** Returns an announcement message when the remaining count is low. */
 const getAnnouncement = (count, maxCount, singularEntityName = 'character', pluralEntityName = 'characters') => {
   if (typeof maxCount === 'undefined') return null;

package/lib/internal/keyboard/keys.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const Tab = {
   key: 'Tab',
   which: 9,

package/lib/internal/keyboard/match.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Check to see if at least one key code matches the key code of the
  * given event.

package/lib/internal/keyboard/navigation.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var keys = require('./keys.js');
 var match = require('./match.js');
 

package/lib/internal/noopFn.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const noopFn = () => {};
 
 exports.noopFn = noopFn;

package/lib/internal/useAttachedMenu.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/useControllableState.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var warning = require('./warning.js');
 

package/lib/internal/useDelayedState.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/useEvent.d.ts

@@ -4,6 +4,6 @@
  * 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 { type MutableRefObject } from 'react';
-export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | MutableRefObject<HTMLElement | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
+import { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
 export declare const useWindowEvent: <E extends keyof WindowEventMap>(eventName: E, callback: (event: WindowEventMap[E]) => void) => void;

package/lib/internal/useEvent.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 const useEvent = (elementOrRef, eventName, callback) => {
@@ -17,15 +15,16 @@ const useEvent = (elementOrRef, eventName, callback) => {
     savedCallback.current = callback;
   }, [callback]);
   React.useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) return;
     const handler = event => {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     };
-    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
-    element?.addEventListener(eventName, handler);
+    element.addEventListener(eventName, handler);
     return () => {
-      element?.removeEventListener(eventName, handler);
+      element.removeEventListener(eventName, handler);
     };
   }, [elementOrRef, eventName]);
 };

package/lib/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/lib/internal/useId.js

@@ -7,25 +7,45 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
 var environment = require('./environment.js');
 var useIdPrefix = require('./useIdPrefix.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 // 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.
 // https://github.com/webpack/webpack/issues/14814
 // https://github.com/mui/material-ui/issues/41190
 const _React = {
-  ...React__default["default"]
+  ...React
 };
 const instanceId = setupGetInstanceId.setupGetInstanceId();
 const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;

package/lib/internal/useIdPrefix.js

@@ -7,17 +7,11 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const IdPrefixContext = /*#__PURE__*/React__default["default"].createContext(null);
+const IdPrefixContext = /*#__PURE__*/React.createContext(null);
 function useIdPrefix() {
-  return React__default["default"].useContext(IdPrefixContext);
+  return React.useContext(IdPrefixContext);
 }
 
 exports.IdPrefixContext = IdPrefixContext;

package/lib/internal/useIsomorphicEffect.js

@@ -14,4 +14,4 @@ var React = require('react');
 /** `useLayoutEffect` on the client, `useEffect` on the server */
 const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
-exports["default"] = useIsomorphicEffect;
+exports.default = useIsomorphicEffect;

package/lib/internal/useMatchMedia.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/useMergedRefs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/useNoInteractiveChildren.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {

package/lib/internal/useNormalizedInputProps.js

@@ -7,18 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 require('../components/Text/index.js');
 var usePrefix = require('./usePrefix.js');
 var Text = require('../components/Text/Text.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 /**
  * Returns an object containing normalized properties for an input component.
  *
@@ -50,14 +44,14 @@ const useNormalizedInputProps = ({
   };
   if (normalizedProps.invalid) {
     normalizedProps.icon = iconsReact.WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text.Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.invalidId
     }, invalidText);
   } else if (normalizedProps.warn) {
     normalizedProps.icon = iconsReact.WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text.Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.warnId

package/lib/internal/useOutsideClick.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var environment = require('./environment.js');
 var useEvent = require('./useEvent.js');

package/lib/internal/useOverflowItems.js

@@ -109,12 +109,6 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
 
   // Only call onChange if hidden items actually changed
   React.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,
@@ -123,4 +117,4 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
   };
 };
 
-exports["default"] = useOverflowItems;
+exports.default = useOverflowItems;

package/lib/internal/usePrefix.js

@@ -7,17 +7,11 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const PrefixContext = /*#__PURE__*/React__default["default"].createContext('cds');
+const PrefixContext = /*#__PURE__*/React.createContext('cds');
 function usePrefix() {
-  return React__default["default"].useContext(PrefixContext);
+  return React.useContext(PrefixContext);
 }
 
 exports.PrefixContext = PrefixContext;

package/lib/internal/usePreviousValue.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/useResizeObserver.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 const useResizeObserver = ({

package/lib/internal/useSavedCallback.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/utils.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 /**

package/lib/internal/warning.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var noopFn = require('./noopFn.js');
 
 /**

package/lib/internal/wrapFocus.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tabbable = require('tabbable');
 var navigation = require('./keyboard/navigation.js');
 

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

@@ -7,9 +7,7 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var debounce$1 = require('../../function/debounce.mjs.js');
+var debounce$1 = require('../../function/debounce.js');
 
 function debounce(func, debounceMs = 0, options = {}) {
     if (typeof options !== 'object') {

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

@@ -7,9 +7,7 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var debounce = require('./debounce.mjs.js');
+var debounce = require('./debounce.js');
 
 function throttle(func, throttleMs = 0, options = {}) {
     if (typeof options !== 'object') {

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

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function debounce(func, debounceMs, { signal, edges } = {}) {
     let pendingThis = undefined;
     let pendingArgs = null;

package/lib/prop-types/AriaPropTypes.js

@@ -7,18 +7,12 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var PropTypes = require('prop-types');
 var isRequiredOneOf = require('./isRequiredOneOf.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
 const AriaLabelPropType = isRequiredOneOf.isRequiredOneOf({
-  'aria-label': PropTypes__default["default"].string,
-  'aria-labelledby': PropTypes__default["default"].string
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string
 });
 
 exports.AriaLabelPropType = AriaLabelPropType;

package/lib/prop-types/deprecate.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var warning = require('../internal/warning.js');
 
 const warningCache = new Map();

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

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

package/lib/prop-types/deprecateComponent.js

@@ -13,14 +13,11 @@ var warning = require('../internal/warning.js');
 
 const didWarnAboutDeprecation = {};
 function deprecateComponent(componentName, message) {
-  if (!componentName) {
-    return;
-  }
   if (!didWarnAboutDeprecation[componentName]) {
     didWarnAboutDeprecation[componentName] = true;
-    process.env.NODE_ENV !== "production" ? warning.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.warning(false, message) : void 0;
   }
   return componentName;
 }
 
-exports["default"] = deprecateComponent;
+exports.default = deprecateComponent;

package/lib/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/lib/prop-types/deprecateValuesWithin.js

@@ -33,4 +33,4 @@ function deprecateValuesWithin(propType, allowedValues, propMappingFunction) {
   };
 }
 
-exports["default"] = deprecateValuesWithin;
+exports.default = deprecateValuesWithin;

package/lib/prop-types/isRequiredOneOf.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Returns a set of prop-type validators that enforce at least one of the
  * specified props must be provided.

package/lib/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/lib/prop-types/requiredIfGivenPropIsTruthy.js

@@ -25,4 +25,4 @@ function requiredIfGivenPropIsTruthy(name, propType) {
   };
 }
 
-exports["default"] = requiredIfGivenPropIsTruthy;
+exports.default = requiredIfGivenPropIsTruthy;

package/lib/tools/events.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Composes multiple event handler functions into a single event handler. The
  * composed handler calls each provided function sequentially with the event and

package/lib/tools/mapPopoverAlign.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const popoverAlignMapping = {
   'top-left': 'top-start',
   'top-right': 'top-end',

package/lib/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/lib/tools/mergeRefs.js

@@ -23,6 +23,5 @@ const mergeRefs = (...refs) => el => {
     }
   });
 };
-var mergeRefs$1 = mergeRefs;
 
-exports["default"] = mergeRefs$1;
+exports.default = mergeRefs;

package/lib/tools/setupGetInstanceId.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Creates an instance ID generator.
  *

package/lib/tools/toggleClass.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Toggles a class on an element.
  *