@carbon/react 1.88.0 → 1.89.0-rc.1

package/lib/components/TextArea/TextArea.js

@@ -63,7 +63,11 @@ const TextArea = frFn((props, forwardRef) => {
     value
   } = other;
   const textAreaInstanceId = useId.useId();
+  const wrapperRef = React.useRef(null);
   const textareaRef = React.useRef(null);
+  const helperTextRef = React.useRef(null);
+  const errorTextRef = React.useRef(null);
+  const warnTextRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
     const targetValue = defaultValue || value || textareaRef.current?.value || '';
@@ -80,13 +84,20 @@ const TextArea = frFn((props, forwardRef) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, defaultValue, counterMode]);
   useIsomorphicEffect.default(() => {
+    const measuredWidth = wrapperRef.current?.scrollWidth;
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
       textareaRef.current.style.resize = 'none';
     } else if (textareaRef.current) {
       textareaRef.current.style.width = `100%`;
     }
-  }, [other.cols]);
+    [helperTextRef, errorTextRef, warnTextRef].forEach(r => {
+      if (r.current) {
+        r.current.style.maxWidth = `${measuredWidth}px`;
+        r.current.style.overflowWrap = 'break-word';
+      }
+    });
+  }, [other.cols, invalid, warn]);
   const textareaProps = {
     id,
     onKeyDown: evt => {
@@ -194,21 +205,26 @@ const TextArea = frFn((props, forwardRef) => {
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     id: helperId,
-    className: helperTextClasses
+    className: helperTextClasses,
+    ref: helperTextRef
   }, helperText) : null;
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
-    id: errorId
+    id: errorId,
+    ref: errorTextRef
   }, invalidText, isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
+  const warnId = id + '-warn-msg';
   const warning = warn ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     role: "alert",
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnId,
+    ref: warnTextRef
   }, warnText, isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
@@ -274,6 +290,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {

package/lib/components/Toggletip/index.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ElementType, type ReactNode } from 'react';
-import { type PopoverAlignment } from '../Popover';
+import { type PopoverAlignment, PopoverBaseProps } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ToggletipLabelProps<E extends ElementType> = {
@@ -36,12 +36,7 @@ export declare namespace ToggletipLabel {
         className: PropTypes.Requireable<string>;
     };
 }
-export interface ToggletipBaseProps {
-    align?: PopoverAlignment;
-    alignmentAxisOffset?: number;
-    autoAlign?: boolean;
-    className?: string;
-    children?: ReactNode;
+export interface ToggletipBaseProps extends Omit<PopoverBaseProps, 'open'> {
     defaultOpen?: boolean;
 }
 export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, ToggletipBaseProps>;
@@ -53,39 +48,21 @@ export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWith
 export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
-        /**
-         * Specify how the toggletip should align with the button
-         */
-        align: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
-         */
-        alignmentAxisOffset: PropTypes.Requireable<number>;
-        /**
-         * Provide a custom element or component to render the top-level node for the
-         * component.
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Will auto-align the popover on first render if it is not visible. This prop
-         * is currently experimental and is subject to future changes. Requires
-         * React v17+
-         * @see https://github.com/carbon-design-system/carbon/issues/18714
-         */
-        autoAlign: PropTypes.Requireable<boolean>;
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
         /**
          * Specify if the toggletip should be open by default
          */
         defaultOpen: PropTypes.Requireable<boolean>;
+        align?: PopoverAlignment;
+        alignmentAxisOffset?: number;
+        autoAlign?: boolean;
+        autoAlignBoundary?: import("@floating-ui/dom").Boundary;
+        caret?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        dropShadow?: boolean;
+        highContrast?: boolean;
+        isTabTip?: boolean;
+        onRequestClose?: () => void;
     };
 }
 export interface ToggletipButtonBaseProps {

package/lib/components/Toggletip/index.js

@@ -151,57 +151,17 @@ function Toggletip({
     autoAlign: autoAlign
   }, rest), children));
 }
-Toggletip.propTypes = {
-  /**
-   * Specify how the toggletip should align with the button
-   */
-  align: PropTypes.oneOf(['top', 'top-left',
-  // deprecated use top-start instead
-  'top-right',
-  // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
-  // deprecated use bottom-start instead
-  'bottom-right',
-  // deprecated use bottom-end instead
 
-  'left', 'left-bottom',
-  // deprecated use left-end instead
-  'left-top',
-  // deprecated use left-start instead
-
-  'right', 'right-bottom',
-  // deprecated use right-end instead
-  'right-top',
-  // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  /**
-   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
-   */
-  alignmentAxisOffset: PropTypes.number,
-  /**
-   * Provide a custom element or component to render the top-level node for the
-   * component.
-   */
-  as: PropTypes.elementType,
-  /**
-   * Will auto-align the popover on first render if it is not visible. This prop
-   * is currently experimental and is subject to future changes. Requires
-   * React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool,
-  /**
-   * Custom children to be rendered as the content of the label
-   */
-  children: PropTypes.node,
-  /**
-   * Provide a custom class name to be added to the outermost node in the
-   * component
-   */
-  className: PropTypes.string,
+// Get all the properties from Popover except for "open".
+// The Typescript types for PropTypes are really messed up so we need lots of
+// casting.  It will be great when we can finally get rid of PropTypes altogether.
+const {
+  open,
+  ...popoverNonOpenPropTypes
+} = index.Popover.propTypes ?? {};
+Toggletip.propTypes = {
+  // Has all of Popover's PropTypes except for "open".
+  ...popoverNonOpenPropTypes,
   /**
    * Specify if the toggletip should be open by default
    */

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

@@ -8,15 +8,15 @@ import React, { ReactNode } from 'react';
 export interface HeaderProps {
     children?: ReactNode;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-label
      */
     'aria-label'?: string;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-labelledby
      */
     'aria-labelledby'?: string;
     /**
-     * Optionally provide a custom class name that is applied to the underlying <header>
+     * Optionally provide a custom class name that is applied to the underlying header
      */
     className?: string;
 }

package/lib/components/UIShell/Header.js

@@ -13,7 +13,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 const Header = ({
@@ -29,11 +28,15 @@ const Header = ({
 };
 Header.propTypes = {
   /**
-   * Required props for the accessibility label of the header
+   * Optionally provide aria-label
    */
-  ...AriaPropTypes.AriaLabelPropType,
+  'aria-label': PropTypes.string,
   /**
-   * Optionally provide a custom class name that is applied to the underlying <header>
+   * Optionally provide aria-labelledby
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * Optionally provide a custom class name that is applied to the underlying header
    */
   className: PropTypes.string
 };

package/lib/internal/Selection.js

@@ -50,7 +50,7 @@ const useSelection = ({
 
     // Assert special properties (e.g., `disabled`, `isSelectAll`, etc.) are
     // `any` since those properties aren’t part of the generic type.
-    const allSelectableItems = filteredItems.filter(item => !item?.disabled);
+    const allSelectableItems = filteredItems.filter(item => !item?.disabled && !item?.isSelectAll);
     const disabledItemCount = filteredItems.filter(item => item?.disabled).length;
     let newSelectedItems;
 

package/lib/internal/useMergedRefs.js

@@ -18,15 +18,16 @@ var React = require('react');
  * node, assigns that node to every ref in the array.
  */
 const useMergedRefs = refs => {
+  const memoizedRefs = React.useMemo(() => refs, refs);
   return React.useCallback(node => {
-    refs.forEach(ref => {
+    memoizedRefs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref) {
         ref.current = node;
       }
     });
-  }, [refs]);
+  }, [memoizedRefs]);
 };
 
 exports.useMergedRefs = useMergedRefs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.88.0",
+  "version": "1.89.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.29.0",
-    "@carbon/icons-react": "^11.64.0",
-    "@carbon/layout": "^11.38.0",
-    "@carbon/styles": "^1.87.0",
-    "@carbon/utilities": "^0.7.0",
+    "@carbon/feature-flags": "^0.29.1-rc.0",
+    "@carbon/icons-react": "^11.65.0-rc.1",
+    "@carbon/layout": "^11.39.0-rc.1",
+    "@carbon/styles": "^1.88.0-rc.1",
+    "@carbon/utilities": "^0.7.1-rc.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,8 +79,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.57.0",
+    "@carbon/test-utils": "^10.36.1-rc.0",
+    "@carbon/themes": "^11.58.0-rc.1",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -96,19 +96,18 @@
     "autoprefixer": "^10.4.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.7.0",
+    "babel-preset-carbon": "^0.8.0-rc.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
-    "clipboardy": "^2.1.0",
+    "clipboardy": "^4.0.0",
     "css-loader": "^7.0.0",
     "enquirer": "^2.3.6",
-    "fast-glob": "^3.2.7",
+    "fast-glob": "^3.3.3",
     "fs-extra": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
     "postcss-loader": "^8.0.0",
-    "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
@@ -139,5 +138,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "6568a3389c2a82348c693b167b511dea66b7b269"
+  "gitHead": "573fc72ac30bc2d71ebb90644b803ba8408fe82e"
 }

package/telemetry.yml

@@ -496,6 +496,7 @@ collect:
         - itemsShown
         - loop
         # Popover
+        - alignmentAxisOffset
         - autoAlignBoundary
         - caret
         - isTabTip
@@ -544,6 +545,8 @@ collect:
         - unstable_ariaLabelHandleUpper
         # StructuredListCell
         - noWrap
+        # StructuredListWrapper
+        - selectedInitialRow
         # SwitcherItem
         - handleSwitcherItemFocus
         # Tab
@@ -609,8 +612,6 @@ collect:
         - labelA
         - labelB
         - toggled
-        # Toggletip
-        - alignmentAxisOffset
         # TreeNode
         - defaultIsExpanded
         - depth