@carbon/react 1.103.0 → 1.104.0

package/es/internal/useIdPrefix.js

@@ -1,15 +1,23 @@
 /**
- * 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.
  */
 
-import React from 'react';
+import React from "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.createContext(null);
 function useIdPrefix() {
-  return React.useContext(IdPrefixContext);
+	return React.useContext(IdPrefixContext);
 }
 
-export { IdPrefixContext, useIdPrefix };
+//#endregion
+export { IdPrefixContext, useIdPrefix };

package/es/internal/useIsomorphicEffect.js

@@ -1,13 +1,21 @@
 /**
- * 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.
  */
 
-import { useLayoutEffect, useEffect } from 'react';
+import { useEffect, useLayoutEffect } from "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' ? useLayoutEffect : useEffect;
+const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
-export { useIsomorphicEffect as default };
+//#endregion
+export { useIsomorphicEffect as default };

package/es/internal/useMatchMedia.js

@@ -1,32 +1,40 @@
 /**
- * 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.
  */
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "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] = useState(defaultState);
-  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] = useState(defaultState);
+	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;
 };
 
-export { useMatchMedia };
+//#endregion
+export { useMatchMedia };

package/es/internal/useMergedRefs.js

@@ -1,32 +1,36 @@
 /**
- * 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.
  */
 
-import { useMemo, useCallback } from 'react';
+import { useCallback, useMemo } from "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 = useMemo(() => refs, refs);
-  return 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 = useMemo(() => refs, refs);
+	return useCallback((node) => {
+		memoizedRefs.forEach((ref) => {
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		});
+	}, [memoizedRefs]);
 };
 
-export { useMergedRefs };
+//#endregion
+export { useMergedRefs };

package/es/internal/useNoInteractiveChildren.js

@@ -1,116 +1,87 @@
 /**
- * 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.
  */
 
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
-const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
-  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") => {
+	useEffect(() => {
+		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`) => {
-  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]);
+	useEffect(() => {
+		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;
+	}
 };
 
-export { getInteractiveContent, getRoleContent, useInteractiveChildrenNeedDescription, useNoInteractiveChildren };
+//#endregion
+export { getInteractiveContent, getRoleContent, useInteractiveChildrenNeedDescription, useNoInteractiveChildren };

package/es/internal/useNormalizedInputProps.js

@@ -1,61 +1,57 @@
 /**
- * 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.
  */
 
-import React from 'react';
-import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import { Text } from '../components/Text/Text.js';
-import '../components/Text/TextDirection.js';
-import { usePrefix } from './usePrefix.js';
+import { usePrefix } from "./usePrefix.js";
+import { Text } from "../components/Text/Text.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
 
+//#region src/internal/useNormalizedInputProps.tsx
 /**
- * Returns an object containing normalized properties for an input component.
- *
- * This hook ensures that only one of `invalid` or `warn` is active (with
- * `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
- * `invalid`, and `warn` states. It generates unique IDs for error, warning, and
- * helper messages, and conditionally provides the appropriate validation
- * message and accompanying icon.
- */
-const useNormalizedInputProps = ({
-  id,
-  readOnly,
-  disabled,
-  invalid,
-  invalidText,
-  warn,
-  warnText
-}) => {
-  const prefix = usePrefix();
-  const normalizedProps = {
-    disabled: !readOnly && disabled,
-    invalid: !readOnly && !disabled && invalid,
-    invalidId: `${id}-error-msg`,
-    warn: !readOnly && !invalid && !disabled && warn,
-    warnId: `${id}-warn-msg`,
-    validation: null,
-    icon: null,
-    helperId: `${id}-helper-text`
-  };
-  if (normalizedProps.invalid) {
-    normalizedProps.icon = WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
-      as: "div",
-      className: `${prefix}--form-requirement`,
-      id: normalizedProps.invalidId
-    }, invalidText);
-  } else if (normalizedProps.warn) {
-    normalizedProps.icon = WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
-      as: "div",
-      className: `${prefix}--form-requirement`,
-      id: normalizedProps.warnId
-    }, warnText);
-  }
-  return normalizedProps;
+* Returns an object containing normalized properties for an input component.
+*
+* This hook ensures that only one of `invalid` or `warn` is active (with
+* `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
+* `invalid`, and `warn` states. It generates unique IDs for error, warning, and
+* helper messages, and conditionally provides the appropriate validation
+* message and accompanying icon.
+*/
+const useNormalizedInputProps = ({ id, readOnly, disabled, invalid, invalidText, warn, warnText }) => {
+	const prefix = usePrefix();
+	const normalizedProps = {
+		disabled: !readOnly && disabled,
+		invalid: !readOnly && !disabled && invalid,
+		invalidId: `${id}-error-msg`,
+		warn: !readOnly && !invalid && !disabled && warn,
+		warnId: `${id}-warn-msg`,
+		validation: null,
+		icon: null,
+		helperId: `${id}-helper-text`
+	};
+	if (normalizedProps.invalid) {
+		normalizedProps.icon = WarningFilled;
+		normalizedProps.validation = /* @__PURE__ */ jsx(Text, {
+			as: "div",
+			className: `${prefix}--form-requirement`,
+			id: normalizedProps.invalidId,
+			children: invalidText
+		});
+	} else if (normalizedProps.warn) {
+		normalizedProps.icon = WarningAltFilled;
+		normalizedProps.validation = /* @__PURE__ */ jsx(Text, {
+			as: "div",
+			className: `${prefix}--form-requirement`,
+			id: normalizedProps.warnId,
+			children: warnText
+		});
+	}
+	return normalizedProps;
 };
 
-export { useNormalizedInputProps };
+//#endregion
+export { useNormalizedInputProps };

package/es/internal/useOutsideClick.js

@@ -1,34 +1,31 @@
 /**
- * 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.
  */
 
-import { useRef, useEffect } from 'react';
-import { canUseDOM } from './environment.js';
-import { useWindowEvent } from './useEvent.js';
+import { useWindowEvent } from "./useEvent.js";
+import { canUseDOM } from "./environment.js";
+import { useEffect, useRef } from "react";
 
+//#region src/internal/useOutsideClick.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 useOutsideClick = (ref, callback) => {
-  const savedCallback = useRef(callback);
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
-  // treated as a constant as it will be false when executed in a Node.js
-  // environment and true when executed in the browser
-  if (canUseDOM) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useWindowEvent('click', event => {
-      const {
-        target
-      } = event;
-      if (target instanceof Node && ref.current && !ref.current.contains(target)) {
-        savedCallback.current(event);
-      }
-    });
-  }
+	const savedCallback = useRef(callback);
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	if (canUseDOM) useWindowEvent("click", (event) => {
+		const { target } = event;
+		if (target instanceof Node && ref.current && !ref.current.contains(target)) savedCallback.current(event);
+	});
 };
 
-export { useOutsideClick };
+//#endregion
+export { useOutsideClick };