@carbon/react 1.101.0 → 1.102.0-rc.0

package/lib/components/SelectItem/SelectItem.d.ts

@@ -1,11 +1,11 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes, type OptionHTMLAttributes } from 'react';
 export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
     /**
      * Specify an optional className to be applied to the node
@@ -26,7 +26,7 @@ export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
     /**
      * Specify the value of the <SelectItem>
      */
-    value: any;
+    value: OptionHTMLAttributes<HTMLOptionElement>['value'];
 }
 declare const SelectItem: {
     ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/StructuredList/StructuredList.js

@@ -152,8 +152,8 @@ function StructuredListRow(props) {
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const rowId = id ?? useId.useId('grid-input');
+  const generatedRowId = useId.useId('grid-input');
+  const rowId = id ?? generatedRowId;
   const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix.usePrefix();

package/lib/components/Tabs/Tabs.js

@@ -850,8 +850,8 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     if (tabRef.current && tabRef.current.parentElement) {
       // determine number of tabs, excluding disabled
       const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
-        const element = node;
-        return element.classList.contains(`${prefix}--tabs__nav-link`) && !element.classList.contains(`${prefix}--tabs__nav-item--disabled`);
+        if (!(node instanceof HTMLElement)) return false;
+        return node.classList.contains(`${prefix}--tabs__nav-link`) && !node.classList.contains(`${prefix}--tabs__nav-item--disabled`);
       }).length;
 
       // if not removing last tab focus on next tab
@@ -861,7 +861,10 @@ const Tab = /*#__PURE__*/React.forwardRef(({
       // if removing last tab focus on previous tab
       else {
         const prevTabIndex = (tabCount - 2) * 2;
-        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+        const previousTab = tabRef.current.parentElement.childNodes[prevTabIndex];
+        if (previousTab instanceof HTMLElement) {
+          previousTab.focus();
+        }
       }
     }
   };
@@ -1162,7 +1165,9 @@ function TabPanels({
       // set max height to TabList
       const heights = refs.current.map(ref => ref?.offsetHeight || 0);
       const max = Math.max(...heights);
-      tabContainer.style.height = max + 'px';
+      if (tabContainer instanceof HTMLElement) {
+        tabContainer.style.height = max + 'px';
+      }
 
       // re-hide hidden Tab Panels
       refs.current.forEach((ref, index) => {

package/lib/components/Tag/DismissibleTag.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/Tag/DismissibleTag.js

@@ -49,8 +49,8 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagLabelRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {

package/lib/components/Tag/OperationalTag.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/Tag/OperationalTag.js

@@ -49,8 +49,8 @@ const OperationalTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {

package/lib/components/Tag/SelectableTag.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/Tag/SelectableTag.js

@@ -41,8 +41,8 @@ const SelectableTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [selectedTag, setSelectedTag] = useControllableState.useControllableState({
     value: selected,
     onChange: onChange,

package/lib/components/Tag/Tag.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/Tag/Tag.js

@@ -78,8 +78,8 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
     console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
   }
   const ref = useMergedRefs.useMergedRefs([forwardRef, tagRef]);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];

package/lib/components/TextArea/TextArea.d.ts

@@ -7,8 +7,7 @@
 import React, { type ReactNode } from 'react';
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
-     * Provide a custom className that is applied directly to the underlying
-     * `<textarea>` node
+     * Provide a custom className that is applied to the wrapper node
      */
     className?: string;
     /**

package/lib/components/TextArea/TextArea.js

@@ -42,7 +42,7 @@ const TextArea = frFn((props, forwardRef) => {
     onKeyDown = noopFn.noopFn,
     invalid = false,
     invalidText = '',
-    helperText = '',
+    helperText,
     light,
     placeholder = '',
     enableCounter = false,
@@ -243,7 +243,7 @@ const TextArea = frFn((props, forwardRef) => {
     ariaDescribedBy = warnId;
   } else {
     const ids = [];
-    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (!isFluid && hasHelper && helperId) ids.push(helperId);
     if (counterDescriptionId) ids.push(counterDescriptionId);
     ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
@@ -282,7 +282,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React.createElement("textarea", _rollupPluginBabelHelpers.extends({}, other, textareaProps, {
     placeholder: placeholder,
-    "aria-readonly": Boolean(other.readOnly),
+    "aria-readonly": other.readOnly,
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
@@ -328,8 +328,7 @@ const TextArea = frFn((props, forwardRef) => {
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
   /**
-   * Provide a custom className that is applied directly to the underlying
-   * `<textarea>` node
+   * Provide a custom className that is applied to the wrapper node
    */
   className: PropTypes.string,
   /**

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/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

@@ -63,8 +63,10 @@ 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;
     if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {

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

@@ -65,7 +65,7 @@ const Switcher = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       }
     })();
     const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
-    if (switcherItem) {
+    if (switcherItem instanceof HTMLElement) {
       switcherItem.focus();
     }
   };

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/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-rc.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/feature-flags": "^1.0.0",
+    "@carbon/icons-react": "^11.76.0-rc.0",
     "@carbon/layout": "^11.48.0",
-    "@carbon/styles": "^1.100.0",
+    "@carbon/styles": "^1.101.0-rc.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-rc.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": "be65faf18c90ab4e6e60afdfad77d412220bd077"
 }

package/telemetry.yml

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