@carbon/react 1.85.0 → 1.86.0-rc.0

package/es/components/UIShell/Switcher.js

@@ -6,13 +6,40 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import './Content.js';
+import './Header.js';
+import './HeaderContainer.js';
+import './HeaderGlobalAction.js';
+import './HeaderGlobalBar.js';
+import './HeaderMenu.js';
+import './HeaderMenuButton.js';
+import './HeaderMenuItem.js';
+import './HeaderName.js';
+import './HeaderNavigation.js';
+import './HeaderPanel.js';
+import './HeaderSideNavItems.js';
 import SwitcherItem from './SwitcherItem.js';
+import SwitcherDivider from './SwitcherDivider.js';
+import './SkipToContent.js';
+import './SideNav.js';
+import './SideNavDetails.js';
+import './SideNavDivider.js';
+import './SideNavFooter.js';
+import './SideNavHeader.js';
+import './SideNavIcon.js';
+import './SideNavItem.js';
+import './SideNavItems.js';
+import './SideNavLink.js';
+import './SideNavLinkText.js';
+import './SideNavMenu.js';
+import './SideNavMenuItem.js';
+import './SideNavSwitcher.js';
 
 const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
@@ -36,8 +63,8 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
     currentIndex,
     direction
   }) => {
-    const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/React.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
+    const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
+      if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem && Object.keys(child.props).length) {
         acc.push(i);
       }
       return acc;
@@ -63,21 +90,21 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       switcherItem.focus();
     }
   };
-  const childrenWithProps = React.Children.toArray(children).map((child, index) => {
-    // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem) {
-      return /*#__PURE__*/React.cloneElement(child, {
+  const childrenWithProps = Children.toArray(children).map((child, index) => {
+    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem) {
+      return /*#__PURE__*/cloneElement(child, {
         handleSwitcherItemFocus,
         index,
         key: index,
         expanded
       });
     }
-    return /*#__PURE__*/React.cloneElement(child, {
-      index,
-      key: index,
-      expanded
-    });
+    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherDivider) {
+      return /*#__PURE__*/cloneElement(child, {
+        key: index
+      });
+    }
+    return child;
   });
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref,

package/es/index.js

@@ -33,7 +33,7 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
-export { default as DataTable } from './components/DataTable/DataTable.js';
+export { DataTable } from './components/DataTable/DataTable.js';
 export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';
 export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';

package/es/internal/useNoInteractiveChildren.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+import { type RefObject } from 'react';
+export declare const useNoInteractiveChildren: (ref: RefObject<HTMLElement | null>, message?: string) => void;
+export declare const useInteractiveChildrenNeedDescription: (ref: RefObject<HTMLElement | null>, message?: string) => void;
+/**
+ * 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.
+ */
+export declare const getInteractiveContent: (node: HTMLElement) => HTMLElement | 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.
+ */
+export declare const getRoleContent: (node: HTMLElement) => HTMLElement | null;

package/es/internal/useNoInteractiveChildren.js

@@ -7,7 +7,8 @@
 
 import { useEffect } from 'react';
 
-function useNoInteractiveChildren(ref, message = 'component should have no interactive child nodes') {
+const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
+  // TODO: Why can't the condition go inside the hook?
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*
@@ -17,14 +18,14 @@ function useNoInteractiveChildren(ref, message = 'component should have no inter
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node) {
         const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
-        // eslint-disable-next-line no-console
         console.error(errorMessage);
         throw new Error(errorMessage);
       }
     }, []);
   }
-}
-function useInteractiveChildrenNeedDescription(ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) {
+};
+const useInteractiveChildrenNeedDescription = (ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) => {
+  // TODO: Why can't the condition go inside the hook?
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*
@@ -37,16 +38,16 @@ function useInteractiveChildrenNeedDescription(ref, message = `interactive child
       }
     });
   }
-}
+};
 
 /**
  * Determines if a given DOM node has interactive content, or is itself
- * interactive. It returns the interactive node if one is found
+ * interactive. It returns the interactive node if one is found.
  *
- * @param {HTMLElement} node
- * @returns {HTMLElement}
+ * @param node - The node to check.
+ * @returns The interactive node, or `null` if none is found.
  */
-function getInteractiveContent(node) {
+const getInteractiveContent = node => {
   if (!node || !node.childNodes) {
     return null;
   }
@@ -54,59 +55,65 @@ function getInteractiveContent(node) {
     return node;
   }
   for (const childNode of node.childNodes) {
-    const interactiveNode = getInteractiveContent(childNode);
-    if (interactiveNode) {
-      return interactiveNode;
+    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
+ * 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 {HTMLElement} node
- * @returns {HTMLElement}
+ * @param node - The node to check.
+ * @returns The node with a `role`, or `null` if none is found.
  */
-function getRoleContent(node) {
+const getRoleContent = node => {
   if (!node || !node.childNodes) {
     return null;
   }
-  if (node?.getAttribute?.('role') && node.getAttribute('role') !== '') {
+  if (node.getAttribute('role') && node.getAttribute('role') !== '') {
     return node;
   }
   for (const childNode of node.childNodes) {
-    const roleNode = getRoleContent(childNode);
-    if (roleNode) {
-      return roleNode;
+    if (childNode instanceof HTMLElement) {
+      const roleNode = getRoleContent(childNode);
+      if (roleNode) {
+        return roleNode;
+      }
     }
   }
   return null;
-}
+};
 
 /**
- * Determines if the given element is focusable, or not
+ * Determines if the given element is focusable.
  *
- * @param {HTMLElement} element
- * @returns {boolean}
+ * @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
  */
-function isFocusable(element) {
+const isFocusable = element => {
   if (element.tabIndex === undefined || element.tabIndex < 0) {
     return false;
   }
-  if (element.disabled) {
-    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.href && element.rel !== 'ignore';
+      return element instanceof HTMLAnchorElement && !!element.href && element.rel !== 'ignore';
     case 'INPUT':
-      return element.type !== 'hidden';
+      return element instanceof HTMLInputElement && element.type !== 'hidden';
     default:
       return true;
   }
-}
+};
 
 export { getInteractiveContent, getRoleContent, useInteractiveChildrenNeedDescription, useNoInteractiveChildren };

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

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+type PropValidator = (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+/**
+ * Wraps a prop-type validator with a deprecation warning.
+ *
+ * @param propType - The original prop validator function.
+ * @param message - Deprecation message.
+ * @returns A new validator function that emits a warning the first time a
+ *          deprecated prop is used.
+ */
+export declare const deprecate: (propType: PropValidator, message?: string) => PropValidator;
+export {};

package/es/prop-types/deprecate.js

@@ -7,22 +7,32 @@
 
 import { warning } from '../internal/warning.js';
 
-const didWarnAboutDeprecation = {};
-function deprecate(propType, message) {
-  function checker(props, propName, componentName, ...rest) {
-    if (props[propName] === undefined) {
+const warningCache = new Map();
+
+/**
+ * Wraps a prop-type validator with a deprecation warning.
+ *
+ * @param propType - The original prop validator function.
+ * @param message - Deprecation message.
+ * @returns A new validator function that emits a warning the first time a
+ *          deprecated prop is used.
+ */
+const deprecate = (propType, message) => {
+  const checker = (props, propName, componentName, ...rest) => {
+    if (typeof props[propName] === 'undefined') {
       return;
     }
-    if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
-      didWarnAboutDeprecation[componentName] = {
-        ...didWarnAboutDeprecation[componentName],
-        [propName]: true
-      };
+    if (!warningCache.has(componentName)) {
+      warningCache.set(componentName, new Set());
+    }
+    const warnedProps = warningCache.get(componentName);
+    if (warnedProps && !warnedProps.has(propName)) {
+      warnedProps.add(propName);
       process.env.NODE_ENV !== "production" ? warning(false, message || `The prop \`${propName}\` has been deprecated for the ` + `${componentName} component. It will be removed in the next major ` + `release`) : void 0;
     }
     return propType(props, propName, componentName, ...rest);
-  }
+  };
   return checker;
-}
+};
 
-export { deprecate as default };
+export { deprecate };

package/lib/components/AILabel/index.js

@@ -165,7 +165,7 @@ AILabel.propTypes = {
    * @deprecated
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
-  aiTextLabel: deprecate["default"](PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
+  aiTextLabel: deprecate.deprecate(PropTypes__default["default"].string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
   /**
    * Specify how the popover should align with the button
    */
@@ -231,7 +231,7 @@ AILabel.propTypes = {
    * @deprecated
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
-  slugLabel: deprecate["default"](PropTypes__default["default"].string, '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'),
+  slugLabel: deprecate.deprecate(PropTypes__default["default"].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
    */

package/lib/components/Accordion/AccordionItem.d.ts

@@ -90,7 +90,7 @@ declare namespace AccordionItem {
          * The callback function to render the expand button.
          * Can be a React component class.
          */
-        renderExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        renderExpando: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * The callback function to render the expand button.
          * Can be a React component class.

package/lib/components/Accordion/AccordionItem.js

@@ -153,7 +153,7 @@ AccordionItem.propTypes = {
    * The callback function to render the expand button.
    * Can be a React component class.
    */
-  renderExpando: deprecate["default"](PropTypes__default["default"].func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
+  renderExpando: deprecate.deprecate(PropTypes__default["default"].func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
   /**
    * The callback function to render the expand button.
    * Can be a React component class.

package/lib/components/Checkbox/Checkbox.js

@@ -194,7 +194,7 @@ Checkbox.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -135,7 +135,7 @@ CheckboxGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the form group is currently in warning state
    */

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -120,7 +120,7 @@ declare namespace CodeSnippet {
          * Specify a label to be read by screen readers on the containing textbox
          * node
          */
-        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip
          */
@@ -162,7 +162,7 @@ declare namespace CodeSnippet {
          * Specify whether you are using the light variant of the Code Snippet,
          * typically used for inline snippet to display an alternate color
          */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * Specify the maximum number of rows to be shown when in collapsed view
          */

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -276,7 +276,7 @@ CodeSnippet.propTypes = {
    * Specify a label to be read by screen readers on the containing textbox
    * node
    */
-  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  ariaLabel: deprecate.deprecate(PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */
@@ -319,7 +319,7 @@ CodeSnippet.propTypes = {
    * typically used for inline snippet to display an alternate color
    */
 
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
    * Specify the maximum number of rows to be shown when in collapsed view
    */

package/lib/components/ComboBox/ComboBox.js

@@ -781,7 +781,7 @@ ComboBox.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    * 'aria-label' of the ListBox component.
    */
-  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  ariaLabel: deprecate.deprecate(PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
@@ -868,7 +868,7 @@ ComboBox.propTypes = {
   /**
    * should use "light theme" (white background)?
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `Combobox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component when a specific dropdown item is selected.
@@ -913,7 +913,7 @@ ComboBox.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSizePropType,
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.

package/lib/components/ComposedModal/ComposedModal.js

@@ -416,7 +416,7 @@ ComposedModal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 
 exports.ModalBody = ModalBody;

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -65,7 +65,7 @@ export declare const ContentSwitcher: {
         /**
          * `true` to use the light variant.
          */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * `true` to use the low contrast version.
          */

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -134,7 +134,7 @@ ContentSwitcher.propTypes = {
   /**
    * `true` to use the light variant.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * `true` to use the low contrast version.
    */