@carbon/react 1.101.0 → 1.102.0

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -31,7 +31,7 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(({
   hideLabel,
   invalid = false,
   invalidText = '',
-  helperText = '',
+  helperText,
   light,
   type = 'password',
   togglePasswordVisibility,

package/lib/components/TileGroup/TileGroup.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/lib/components/TileGroup/TileGroup.js

@@ -11,6 +11,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var RadioTile = require('../RadioTile/RadioTile.js');
+var utils = require('../../internal/utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 
@@ -44,7 +45,7 @@ const TileGroup = ({
         if (! /*#__PURE__*/React.isValidElement(child)) return child;
 
         // If a `RadioTile` is found, return it with necessary props,
-        if (/*#__PURE__*/React.isValidElement(child) && child.type === RadioTile.default) {
+        if (utils.isComponentElement(child, RadioTile.default)) {
           const {
             value,
             ...otherProps

package/lib/components/TimePickerSelect/TimePickerSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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, { type SelectHTMLAttributes } from 'react';
 export type TimePickerSelectProps = {
     /**
      * Provide the contents of your TimePickerSelect
@@ -17,7 +17,7 @@ export type TimePickerSelectProps = {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */
@@ -39,7 +39,7 @@ declare const TimePickerSelect: React.ForwardRefExoticComponent<{
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>["defaultValue"];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/Toggletip/index.js

@@ -138,8 +138,7 @@ function Toggletip({
     const eventType = 'PointerEvent' in window ? 'pointerdown' : 'mousedown';
     const handleOutsideClick = event => {
       const node = event.target;
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-      if (open && node && !ref.current.contains(node)) {
+      if (open && node && !ref.current?.contains(node)) {
         setOpen(false);
       }
     };

package/lib/components/TreeView/TreeNode.js

@@ -245,7 +245,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
           return node;
         }
         if (node.classList.contains(`${prefix}--tree-node-link-parent`)) {
-          return node.firstChild;
+          return node.firstElementChild;
         }
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
@@ -267,7 +267,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        const parentNode = findParentTreeNode(href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement);
+        const parentNode = findParentTreeNode((href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement) ?? null);
         if (parentNode instanceof HTMLElement) {
           parentNode.focus();
         }

package/lib/components/TreeView/TreeView.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/lib/components/UIShell/HeaderPanel.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/lib/components/UIShell/HeaderPanel.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var utils = require('../../internal/utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
@@ -63,10 +64,12 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(({
     };
   }
   useEvent.useWindowEvent('click', event => {
-    const target = event.target;
-    if (!(target instanceof HTMLElement)) return;
+    const {
+      target
+    } = event;
+    if (!(target instanceof Element)) return;
     setLastClickedElement(target);
-    const isChildASwitcher = /*#__PURE__*/React.isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher.default;
+    const isChildASwitcher = utils.isComponentElement(children, Switcher.default);
     if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();

package/lib/components/UIShell/SideNav.js

@@ -24,7 +24,7 @@ var useDelayedState = require('../../internal/useDelayedState.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 
-// TO-DO: comment back in when footer is added for rails
+// TODO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
 const SideNavContext = /*#__PURE__*/React.createContext({});
@@ -39,7 +39,7 @@ const SideNav = frFn((props, ref) => {
     children,
     onToggle,
     className: customClassName,
-    // TO-DO: comment back in when footer is added for rails
+    // TODO: comment back in when footer is added for rails
     // translateById: t = (id) => translations[id],
     href,
     isFixedNav = false,
@@ -77,7 +77,7 @@ const SideNav = frFn((props, ref) => {
     'aria-labelledby': ariaLabelledBy
   };
 
-  // TO-DO: comment back in when footer is added for rails
+  // TODO: comment back in when footer is added for rails
   // const assistiveText = expanded
   //   ? t('carbon.sidenav.state.open')
   //   : t('carbon.sidenav.state.closed');

package/lib/components/UIShell/Switcher.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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.

package/lib/components/UIShell/Switcher.js

@@ -14,6 +14,7 @@ var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var utils = require('../../internal/utils.js');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var SwitcherItem = require('./SwitcherItem.js');
@@ -42,7 +43,7 @@ const Switcher = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     direction
   }) => {
     const enabledIndices = React.Children.toArray(children).reduce((acc, child, i) => {
-      if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem.default && Object.keys(child.props).length) {
+      if (utils.isComponentElement(child, SwitcherItem.default) && Object.keys(child.props).length) {
         acc.push(i);
       }
       return acc;
@@ -65,12 +66,12 @@ const Switcher = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       }
     })();
     const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
-    if (switcherItem) {
+    if (switcherItem instanceof HTMLElement) {
       switcherItem.focus();
     }
   };
   const childrenWithProps = React.Children.toArray(children).map((child, index) => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem.default) {
+    if (utils.isComponentElement(child, SwitcherItem.default)) {
       return /*#__PURE__*/React.cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -78,7 +79,7 @@ const Switcher = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         expanded
       });
     }
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherDivider.default) {
+    if (utils.isComponentElement(child, SwitcherDivider.default)) {
       return /*#__PURE__*/React.cloneElement(child, {
         key: index
       });

package/lib/feature-flags.js

@@ -7,28 +7,9 @@
 
 'use strict';
 
-var FeatureFlags = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
-
-FeatureFlags__namespace.merge({
+featureFlags.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,

package/lib/internal/FloatingMenu.js

@@ -8,7 +8,7 @@
 'use strict';
 
 var React = require('react');
-var FeatureFlags = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 var ReactDOM = require('react-dom');
 var keys = require('./keyboard/keys.js');
 var match = require('./keyboard/match.js');
@@ -18,25 +18,6 @@ var usePrefix = require('./usePrefix.js');
 var warning = require('./warning.js');
 var wrapFocus = require('./wrapFocus.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
-
 const DIRECTION_LEFT = 'left';
 const DIRECTION_TOP = 'top';
 const DIRECTION_RIGHT = 'right';
@@ -295,8 +276,8 @@ const FloatingMenu = ({
       });
     }
   };
-  const deprecatedFlag = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinelsFlag = FeatureFlags__namespace.enabled('enable-focus-wrap-without-sentinels');
+  const deprecatedFlag = featureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = featureFlags.enabled('enable-focus-wrap-without-sentinels');
   const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;

package/lib/internal/useOverflowItems.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025, 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.
@@ -18,10 +18,6 @@ type Item = {
  * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
  */
 declare const useOverflowItems: <T extends Item>(items: T[] | ReactNode, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
-    visibleItems: T[];
-    hiddenItems: T[];
-    itemRefHandler: () => void;
-} | {
     visibleItems: T[];
     itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
     hiddenItems: T[];

package/lib/internal/useOverflowItems.js

@@ -22,17 +22,10 @@ var usePreviousValue = require('./usePreviousValue.js');
  * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
  * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
  */
-
 const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
   const itemsRef = React.useRef(null);
   const [maxWidth, setMaxWidth] = React.useState(0);
-  if (!items || !Array.isArray(items)) {
-    return {
-      visibleItems: [],
-      hiddenItems: [],
-      itemRefHandler: () => {}
-    };
-  }
+  const overflowItems = React.useMemo(() => Array.isArray(items) ? items : [], [items]);
   const handleResize = () => {
     if (containerRef.current) {
       const offset = offsetRef?.current?.offsetWidth || 0;
@@ -40,7 +33,6 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
       setMaxWidth(newMax);
     }
   };
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   useResizeObserver.useResizeObserver({
     ref: containerRef,
     onResize: handleResize
@@ -63,16 +55,13 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
     };
   };
   const getVisibleItems = () => {
-    if (!items || Array.isArray(items) === false) {
-      return [];
-    }
     if (!containerRef) {
-      return items;
+      return overflowItems;
     }
     const map = getMap();
     let maxReached = false;
     let accumulatedWidth = 0;
-    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+    const visibleItems = overflowItems.slice(0, maxItems).reduce((prev, cur) => {
       if (maxReached) {
         return prev;
       }
@@ -90,30 +79,20 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
   };
 
   // Memoize visible items calculation to avoid recalculating on every render
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const visibleItems = React.useMemo(() => {
-    if (!Array.isArray(items)) {
-      return [];
-    }
     return getVisibleItems();
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [items, maxWidth, maxItems]);
+  }, [overflowItems, maxWidth, maxItems]);
 
   // Memoize hidden items calculation
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const hiddenItems = React.useMemo(() => {
-    if (!Array.isArray(items)) {
-      return [];
-    }
-    return items.slice(visibleItems.length);
-  }, [items, visibleItems]);
+    return overflowItems.slice(visibleItems.length);
+  }, [overflowItems, visibleItems]);
 
   // Use previous value to compare and only call onChange when needed
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const previousHiddenItems = usePreviousValue.usePreviousValue(hiddenItems);
 
   // Only call onChange if hidden items actually changed
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   React.useEffect(() => {
   }, [hiddenItems, previousHiddenItems, onChange]);
   return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.101.0",
+  "version": "1.102.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "1.0.0",
-    "@carbon/icons-react": "^11.75.0",
-    "@carbon/layout": "^11.48.0",
-    "@carbon/styles": "^1.100.0",
+    "@carbon/feature-flags": "^1.0.0",
+    "@carbon/icons-react": "^11.76.0",
+    "@carbon/layout": "^11.49.0",
+    "@carbon/styles": "^1.101.0",
     "@carbon/utilities": "^0.16.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,8 +79,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.40.0",
-    "@carbon/themes": "^11.68.0",
-    "@figma/code-connect": "^1.3.5",
+    "@carbon/themes": "^11.69.0",
+    "@figma/code-connect": "^1.3.13",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -131,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "6dde90f9edfb378e1585f1954c92484a37f22f02"
+  "gitHead": "4f48ac426be7302a57460b1c81d74dd5d6071ad6"
 }

package/telemetry.yml

@@ -305,7 +305,6 @@ collect:
         - onAnimationEnd
         # DataTableSkeleton
         - columnCount
-        - compact
         - showHeader
         - showToolbar
         - zebra