@carbon/react 1.103.0 → 1.104.0-rc.0

package/lib/internal/useEvent.js

@@ -1,50 +1,53 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useEvent.ts
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 const useEvent = (elementOrRef, eventName, callback) => {
-  const savedCallback = React.useRef(null);
-  React.useEffect(() => {
-    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);
-      }
-    };
-    element.addEventListener(eventName, handler);
-    return () => {
-      element.removeEventListener(eventName, handler);
-    };
-  }, [elementOrRef, eventName]);
+	const savedCallback = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		const element = "current" in elementOrRef ? elementOrRef.current : elementOrRef;
+		if (!element) return;
+		const handler = (event) => {
+			if (savedCallback.current) savedCallback.current(event);
+		};
+		element.addEventListener(eventName, handler);
+		return () => {
+			element.removeEventListener(eventName, handler);
+		};
+	}, [elementOrRef, eventName]);
 };
 const useWindowEvent = (eventName, callback) => {
-  const savedCallback = React.useRef(null);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-  React.useEffect(() => {
-    const handler = event => {
-      if (savedCallback.current) {
-        savedCallback.current(event);
-      }
-    };
-    window.addEventListener(eventName, handler);
-    return () => {
-      window.removeEventListener(eventName, handler);
-    };
-  }, [eventName]);
+	const savedCallback = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		const handler = (event) => {
+			if (savedCallback.current) savedCallback.current(event);
+		};
+		window.addEventListener(eventName, handler);
+		return () => {
+			window.removeEventListener(eventName, handler);
+		};
+	}, [eventName]);
 };
 
+//#endregion
 exports.useEvent = useEvent;
-exports.useWindowEvent = useWindowEvent;
+exports.useWindowEvent = useWindowEvent;

package/lib/internal/useId.js

@@ -1,112 +1,75 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+const require_setupGetInstanceId = require('../tools/setupGetInstanceId.js');
+const require_useIsomorphicEffect = require('./useIsomorphicEffect.js');
+const require_useIdPrefix = require('./useIdPrefix.js');
+let react = require("react");
+react = require_runtime.__toESM(react);
 
-var React = require('react');
-var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
-var useIsomorphicEffect = require('./useIsomorphicEffect.js');
-var useIdPrefix = require('./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.
-// https://github.com/webpack/webpack/issues/14814
-// https://github.com/mui/material-ui/issues/41190
-const _React = {
-  ...React
-};
-const instanceId = setupGetInstanceId.setupGetInstanceId();
+//#region src/internal/useId.js
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const _React = { ...react.default };
+const instanceId = require_setupGetInstanceId.setupGetInstanceId();
 let serverHandoffCompleted = false;
-const defaultId = 'id';
-
+const defaultId = "id";
 /**
- * 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}
- */
+* 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 useCompatibleId(prefix = defaultId) {
-  const contextPrefix = useIdPrefix.useIdPrefix();
-  const [id, setId] = React.useState(() => {
-    if (serverHandoffCompleted) {
-      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
-    }
-    return null;
-  });
-  useIsomorphicEffect.default(() => {
-    if (id === null) {
-      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
-    }
-  }, [instanceId]);
-  React.useEffect(() => {
-    if (serverHandoffCompleted === false) {
-      serverHandoffCompleted = true;
-    }
-  }, []);
-  return id;
+	const contextPrefix = require_useIdPrefix.useIdPrefix();
+	const [id, setId] = (0, react.useState)(() => {
+		if (serverHandoffCompleted) return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
+		return null;
+	});
+	require_useIsomorphicEffect.default(() => {
+		if (id === null) setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
+	}, [instanceId]);
+	(0, react.useEffect)(() => {
+		if (serverHandoffCompleted === false) serverHandoffCompleted = true;
+	}, []);
+	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}
- */
+* 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(prefix = defaultId) {
-  const contextPrefix = useIdPrefix.useIdPrefix();
-  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
+	const contextPrefix = require_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.
- */
+* 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}
- */
+* 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}
+*/
 function useFallbackId(id) {
-  const fallback = useId();
-  return id ?? fallback;
+	const fallback = useId();
+	return id ?? fallback;
 }
 
-exports.useCompatibleId = useCompatibleId;
+//#endregion
 exports.useFallbackId = useFallbackId;
-exports.useId = useId;
+exports.useId = useId;

package/lib/internal/useIdPrefix.js

@@ -1,18 +1,26 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
+react = require_runtime.__toESM(react);
 
-var React = require('react');
-
-const IdPrefixContext = /*#__PURE__*/React.createContext(null);
+//#region src/internal/useIdPrefix.ts
+/**
+* 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.
+*/
+const IdPrefixContext = react.default.createContext(null);
 function useIdPrefix() {
-  return React.useContext(IdPrefixContext);
+	return react.default.useContext(IdPrefixContext);
 }
 
+//#endregion
 exports.IdPrefixContext = IdPrefixContext;
-exports.useIdPrefix = useIdPrefix;
+exports.useIdPrefix = useIdPrefix;

package/lib/internal/useIsomorphicEffect.js

@@ -1,17 +1,22 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useIsomorphicEffect.ts
+/**
+* Copyright IBM Corp. 2021, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 /** `useLayoutEffect` on the client, `useEffect` on the server */
-const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 
-exports.default = useIsomorphicEffect;
+//#endregion
+exports.default = useIsomorphicEffect;

package/lib/internal/useMatchMedia.js

@@ -1,34 +1,41 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useMatchMedia.ts
 /**
- * Listens to changes in a media query and returns whether it matches.
- * @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
- * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
- * @returns Whether the media query matches.
- */
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Listens to changes in a media query and returns whether it matches.
+* @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
+* @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
+* @returns Whether the media query matches.
+*/
 const useMatchMedia = (mediaQuery, defaultState = false) => {
-  const [matches, setMatches] = React.useState(defaultState);
-  React.useEffect(() => {
-    const listener = event => {
-      setMatches(event.matches);
-    };
-    const mediaQueryList = window.matchMedia(mediaQuery);
-    mediaQueryList.addEventListener('change', listener);
-    setMatches(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener('change', listener);
-    };
-  }, [mediaQuery]);
-  return matches;
+	const [matches, setMatches] = (0, react.useState)(defaultState);
+	(0, react.useEffect)(() => {
+		const listener = (event) => {
+			setMatches(event.matches);
+		};
+		const mediaQueryList = window.matchMedia(mediaQuery);
+		mediaQueryList.addEventListener("change", listener);
+		setMatches(mediaQueryList.matches);
+		return () => {
+			mediaQueryList.removeEventListener("change", listener);
+		};
+	}, [mediaQuery]);
+	return matches;
 };
 
-exports.useMatchMedia = useMatchMedia;
+//#endregion
+exports.useMatchMedia = useMatchMedia;

package/lib/internal/useMergedRefs.js

@@ -1,34 +1,37 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useMergedRefs.ts
 /**
- * Merges multiple refs into a single callback ref.
- *
- * This hook is useful when you need to attach multiple refs (for example, a ref
- * passed from `forwardRef` and a local ref from `useRef`) to the same node. It
- * accepts an array of refs and returns a callback ref that, when attached to a
- * node, assigns that node to every ref in the array.
- */
-const useMergedRefs = refs => {
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  const memoizedRefs = React.useMemo(() => refs, refs);
-  return React.useCallback(node => {
-    memoizedRefs.forEach(ref => {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    });
-  }, [memoizedRefs]);
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Merges multiple refs into a single callback ref.
+*
+* This hook is useful when you need to attach multiple refs (for example, a ref
+* passed from `forwardRef` and a local ref from `useRef`) to the same node. It
+* accepts an array of refs and returns a callback ref that, when attached to a
+* node, assigns that node to every ref in the array.
+*/
+const useMergedRefs = (refs) => {
+	const memoizedRefs = (0, react.useMemo)(() => refs, refs);
+	return (0, react.useCallback)((node) => {
+		memoizedRefs.forEach((ref) => {
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		});
+	}, [memoizedRefs]);
 };
 
-exports.useMergedRefs = useMergedRefs;
+//#endregion
+exports.useMergedRefs = useMergedRefs;

package/lib/internal/useNoInteractiveChildren.js

@@ -1,121 +1,93 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
-var React = require('react');
-
-const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'production') return;
-    const {
-      current
-    } = ref;
-    const node = current ? getInteractiveContent(current) : null;
-    if (node) {
-      const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
-      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-      console.error(errorMessage);
-      throw new Error(errorMessage);
-    }
-  }, [message, ref]);
+//#region src/internal/useNoInteractiveChildren.ts
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const useNoInteractiveChildren = (ref, message = "component should have no interactive child nodes") => {
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV === "production") return;
+		const { current } = ref;
+		const node = current ? getInteractiveContent(current) : null;
+		if (node) {
+			const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
+			console.error(errorMessage);
+			throw new Error(errorMessage);
+		}
+	}, [message, ref]);
 };
 const useInteractiveChildrenNeedDescription = (ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) => {
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'production') return;
-    const {
-      current
-    } = ref;
-    const node = current ? getInteractiveContent(current) : null;
-    if (node && !node.hasAttribute('aria-describedby')) {
-      throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
-    }
-  }, [message, ref]);
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV === "production") return;
+		const { current } = ref;
+		const node = current ? getInteractiveContent(current) : null;
+		if (node && !node.hasAttribute("aria-describedby")) throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
+	}, [message, ref]);
 };
-
 /**
- * Determines if a given DOM node has interactive content, or is itself
- * interactive. It returns the interactive node if one is found.
- *
- * @param node - The node to check.
- * @returns The interactive node, or `null` if none is found.
- */
-const getInteractiveContent = node => {
-  // TODO: This check shouldn't be necessary. Investigate deleting it.
-  if (!node || !node.childNodes) {
-    return null;
-  }
-  if (isFocusable(node)) {
-    return node;
-  }
-  for (const childNode of node.childNodes) {
-    if (childNode instanceof HTMLElement) {
-      const interactiveNode = getInteractiveContent(childNode);
-      if (interactiveNode) {
-        return interactiveNode;
-      }
-    }
-  }
-  return null;
+* Determines if a given DOM node has interactive content, or is itself
+* interactive. It returns the interactive node if one is found.
+*
+* @param node - The node to check.
+* @returns The interactive node, or `null` if none is found.
+*/
+const getInteractiveContent = (node) => {
+	if (!node || !node.childNodes) return null;
+	if (isFocusable(node)) return node;
+	for (const childNode of node.childNodes) if (childNode instanceof HTMLElement) {
+		const interactiveNode = getInteractiveContent(childNode);
+		if (interactiveNode) return interactiveNode;
+	}
+	return null;
 };
-
 /**
- * Determines if a given DOM node has a `role`, or has itself a `role`.
- * It returns the node with a `role` if one is found.
- *
- * @param node - The node to check.
- * @returns The node with a `role`, or `null` if none is found.
- */
-const getRoleContent = node => {
-  // TODO: This check shouldn't be necessary. Investigate deleting it.
-  if (!node || !node.childNodes) {
-    return null;
-  }
-  if (node.getAttribute('role') && node.getAttribute('role') !== '') {
-    return node;
-  }
-  for (const childNode of node.childNodes) {
-    if (childNode instanceof HTMLElement) {
-      const roleNode = getRoleContent(childNode);
-      if (roleNode) {
-        return roleNode;
-      }
-    }
-  }
-  return null;
+* Determines if a given DOM node has a `role`, or has itself a `role`.
+* It returns the node with a `role` if one is found.
+*
+* @param node - The node to check.
+* @returns The node with a `role`, or `null` if none is found.
+*/
+const getRoleContent = (node) => {
+	if (!node || !node.childNodes) return null;
+	if (node.getAttribute("role") && node.getAttribute("role") !== "") return node;
+	for (const childNode of node.childNodes) if (childNode instanceof HTMLElement) {
+		const roleNode = getRoleContent(childNode);
+		if (roleNode) return roleNode;
+	}
+	return null;
 };
-
 /**
- * Determines if the given element is focusable.
- *
- * @param element - The element to check.
- * @returns Whether the element is focusable.
- * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
- */
-const isFocusable = element => {
-  if (element.tabIndex === undefined || element.tabIndex < 0) {
-    return false;
-  }
-  if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
-    if (element.disabled) {
-      return false;
-    }
-  }
-  switch (element.nodeName) {
-    case 'A':
-      return element instanceof HTMLAnchorElement && !!element.href && element.rel !== 'ignore';
-    case 'INPUT':
-      return element instanceof HTMLInputElement && element.type !== 'hidden';
-    default:
-      return true;
-  }
+* Determines if the given element is focusable.
+*
+* @param element - The element to check.
+* @returns Whether the element is focusable.
+* @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
+*/
+const isFocusable = (element) => {
+	if (element.tabIndex === void 0 || element.tabIndex < 0) return false;
+	if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+		if (element.disabled) return false;
+	}
+	switch (element.nodeName) {
+		case "A": return element instanceof HTMLAnchorElement && !!element.href && element.rel !== "ignore";
+		case "INPUT": return element instanceof HTMLInputElement && element.type !== "hidden";
+		default: return true;
+	}
 };
 
+//#endregion
 exports.getInteractiveContent = getInteractiveContent;
 exports.getRoleContent = getRoleContent;
 exports.useInteractiveChildrenNeedDescription = useInteractiveChildrenNeedDescription;
-exports.useNoInteractiveChildren = useNoInteractiveChildren;
+exports.useNoInteractiveChildren = useNoInteractiveChildren;