@carbon/react 1.88.0 → 1.89.0-rc.0

package/es/components/ContainedList/ContainedList.d.ts

@@ -7,9 +7,9 @@
 import React, { ReactNode } from 'react';
 import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-export interface ContainedListType extends React.FC<ContainedListProps> {
+export type ContainedListType = React.FC<ContainedListProps> & {
     ContainedListItem: typeof ContainedListItem;
-}
+};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**

package/es/components/Popover/index.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -361,29 +361,12 @@ function PopoverContentRenderFunction(
     caretRef,
     autoAlign
   } = React.useContext(PopoverContext);
-  const textRef = useRef(null);
-  const [isMultiLine, setIsMultiLine] = React.useState(false);
-  const ref = useMergedRefs([setFloating, textRef, forwardRef]);
+  const ref = useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  useEffect(() => {
-    checkIfMultiLine();
-  }, [children]);
-  const checkIfMultiLine = () => {
-    const el = textRef.current;
-    if (el) {
-      const style = getComputedStyle(el);
-      const lineHeight = parseFloat(style.lineHeight);
-      const height = el.offsetHeight;
-      const lines = Math.floor(height / lineHeight);
-      setIsMultiLine(lines > 1);
-    }
-  };
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React.createElement("span", {
-    className: cx(`${prefix}--popover-content`, className, {
-      [`${prefix}--tooltip-content--multiline`]: isMultiLine
-    }),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
     className: cx({

package/es/components/TextArea/TextArea.js

@@ -59,7 +59,11 @@ const TextArea = frFn((props, forwardRef) => {
     value
   } = other;
   const textAreaInstanceId = useId();
+  const wrapperRef = useRef(null);
   const textareaRef = useRef(null);
+  const helperTextRef = useRef(null);
+  const errorTextRef = useRef(null);
+  const warnTextRef = useRef(null);
   const ref = useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
     const targetValue = defaultValue || value || textareaRef.current?.value || '';
@@ -76,13 +80,20 @@ const TextArea = frFn((props, forwardRef) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, defaultValue, counterMode]);
   useIsomorphicEffect(() => {
+    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 => {
@@ -190,21 +201,26 @@ const TextArea = frFn((props, forwardRef) => {
   const helper = helperText ? /*#__PURE__*/React.createElement(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, {
     as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
-    id: errorId
+    id: errorId,
+    ref: errorTextRef
   }, invalidText, isFluid && /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
+  const warnId = id + '-warn-msg';
   const warning = warn ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     role: "alert",
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnId,
+    ref: warnTextRef
   }, warnText, isFluid && /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
@@ -270,6 +286,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(WarningFilled, {

package/es/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/es/components/UIShell/Header.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const Header = ({
@@ -25,11 +24,15 @@ const Header = ({
 };
 Header.propTypes = {
   /**
-   * Required props for the accessibility label of the header
+   * Optionally provide aria-label
    */
-  ...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/components/ContainedList/ContainedList.d.ts

@@ -7,9 +7,9 @@
 import React, { ReactNode } from 'react';
 import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-export interface ContainedListType extends React.FC<ContainedListProps> {
+export type ContainedListType = React.FC<ContainedListProps> & {
     ContainedListItem: typeof ContainedListItem;
-}
+};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**

package/lib/components/Popover/index.js

@@ -363,29 +363,12 @@ function PopoverContentRenderFunction(
     caretRef,
     autoAlign
   } = React.useContext(PopoverContext);
-  const textRef = React.useRef(null);
-  const [isMultiLine, setIsMultiLine] = React.useState(false);
-  const ref = useMergedRefs.useMergedRefs([setFloating, textRef, forwardRef]);
+  const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  React.useEffect(() => {
-    checkIfMultiLine();
-  }, [children]);
-  const checkIfMultiLine = () => {
-    const el = textRef.current;
-    if (el) {
-      const style = getComputedStyle(el);
-      const lineHeight = parseFloat(style.lineHeight);
-      const height = el.offsetHeight;
-      const lines = Math.floor(height / lineHeight);
-      setIsMultiLine(lines > 1);
-    }
-  };
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React.createElement("span", {
-    className: cx(`${prefix}--popover-content`, className, {
-      [`${prefix}--tooltip-content--multiline`]: isMultiLine
-    }),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
     className: cx({

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/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/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.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "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/icons-react": "^11.65.0-rc.0",
+    "@carbon/layout": "^11.39.0-rc.0",
+    "@carbon/styles": "^1.88.0-rc.0",
     "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.57.0",
+    "@carbon/themes": "^11.58.0-rc.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -96,7 +96,7 @@
     "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",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "6568a3389c2a82348c693b167b511dea66b7b269"
+  "gitHead": "babd7a9692f8c0595b67877417d7ebf915e19b20"
 }