@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/lib/components/Grid/Column.js

@@ -42,18 +42,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Column = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    children,
-    className: customClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    ...rest
-  } = _ref;
+const Column = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  children,
+  className: customClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  ...rest
+}, ref) => {
   const {
     mode
   } = GridContext.useGridSettings();
@@ -65,6 +64,7 @@ const Column = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
       className: customClassName,
       sm: sm,
       md: md,
+      ref: ref,
       lg: lg,
       xlg: xlg,
       max: max
@@ -143,19 +143,19 @@ Column.propTypes = {
    */
   xlg: spanPropType
 };
-function CSSGridColumn(_ref2) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className: containerClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    span,
-    ...rest
-  } = _ref2;
+const CSSGridColumn = /*#__PURE__*/React__default["default"].forwardRef(({
+  as: BaseComponent = 'div',
+  children,
+  className: containerClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  span,
+  ...rest
+}, ref) => {
+  // Add ref parameter
   const prefix = usePrefix.usePrefix();
   const breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
   const spanClassName = getClassNameForSpan(span, prefix);
@@ -163,9 +163,10 @@ function CSSGridColumn(_ref2) {
     [`${prefix}--css-grid-column`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
-    className: className
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 CSSGridColumn.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/components/Grid/ColumnHang.js

@@ -25,13 +25,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different gutter modes
  */
-function ColumnHang(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+function ColumnHang({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](customClassName, `${prefix}--grid-column-hang`);
   // cast as any to let TypeScript allow passing in attributes to base component

package/lib/components/Grid/FlexGrid.js

@@ -22,16 +22,15 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    condensed = false,
-    narrow = false,
-    fullWidth = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  condensed = false,
+  narrow = false,
+  fullWidth = false,
+  className: containerClassName,
+  children,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--grid`]: true,

package/lib/components/Grid/GridContext.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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 * as React from 'react';
+import React from 'react';
 export type GridMode = 'flexbox' | 'css-grid';
 export interface GridSettingContext {
     /**

package/lib/components/Grid/GridContext.js

@@ -14,48 +14,29 @@ var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return 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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-const GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
+const GridSettingsContext = /*#__PURE__*/React__default["default"].createContext({
   mode: 'flexbox',
   subgrid: false
 });
-const GridSettings = _ref => {
-  let {
-    children,
-    mode,
-    subgrid = false
-  } = _ref;
-  const value = React__namespace.useMemo(() => {
+const GridSettings = ({
+  children,
+  mode,
+  subgrid = false
+}) => {
+  const value = React__default["default"].useMemo(() => {
     return {
       mode,
       subgrid
     };
   }, [mode, subgrid]);
-  return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
 };
@@ -80,7 +61,7 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 const useGridSettings = () => {
-  return React__namespace.useContext(GridSettingsContext);
+  return React__default["default"].useContext(GridSettingsContext);
 };
 
 exports.GridSettings = GridSettings;

package/lib/components/Grid/Row.js

@@ -21,15 +21,14 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Row(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    condensed = false,
-    narrow = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+function Row({
+  as: BaseComponent = 'div',
+  condensed = false,
+  narrow = false,
+  className: containerClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](containerClassName, {
     [`${prefix}--row`]: true,

package/lib/components/Heading/index.js

@@ -19,12 +19,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
-const Section = /*#__PURE__*/React__default["default"].forwardRef(function Section(_ref, ref) {
-  let {
-    as: BaseComponent = 'section',
-    level: levelOverride,
-    ...rest
-  } = _ref;
+const Section = /*#__PURE__*/React__default["default"].forwardRef(function Section({
+  as: BaseComponent = 'section',
+  level: levelOverride,
+  ...rest
+}, ref) {
   const parentLevel = React__default["default"].useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent;

package/lib/components/Icon/Icon.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const IconSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const IconSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--icon--skeleton`, className)

package/lib/components/IconButton/index.js

@@ -29,27 +29,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(_ref, ref) {
-  let {
-    align,
-    autoAlign = false,
-    badgeCount,
-    children,
-    className,
-    closeOnActivation = true,
-    defaultOpen = false,
-    disabled,
-    dropShadow = false,
-    enterDelayMs = 100,
-    highContrast = true,
-    kind,
-    label,
-    leaveDelayMs = 100,
-    wrapperClasses,
-    size,
-    isSelected,
-    ...rest
-  } = _ref;
+const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton({
+  align,
+  autoAlign = false,
+  badgeCount,
+  children,
+  className,
+  closeOnActivation = true,
+  defaultOpen = false,
+  disabled,
+  dropShadow = false,
+  enterDelayMs = 100,
+  highContrast = true,
+  kind,
+  label,
+  leaveDelayMs = 100,
+  wrapperClasses,
+  size,
+  isSelected,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
@@ -77,7 +76,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     isSelected: isSelected,
     hasIconOnly: true,
     className: className,
-    "aria-describedby": badgeCount && badgeId
+    "aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
   }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
     id: badgeId,
     count: badgeCount > 0 ? badgeCount : undefined
@@ -165,8 +164,13 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
+   * If the child node already has an `aria-label`, the tooltip will not apply
+   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
+   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
+   * If using `badgeCount={0}`, make sure the label explains that there is a
+   * new notification.
    */
   label: PropTypes__default["default"].node.isRequired,
   /**

package/lib/components/IconIndicator/index.js

@@ -36,14 +36,13 @@ const iconTypes = {
   unknown: iconsReact.UnknownFilled,
   informative: iconsReact.WarningSquareFilled
 };
-const IconIndicator = /*#__PURE__*/React__default["default"].forwardRef(function IconIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    kind,
-    label,
-    size = 16,
-    ...rest
-  } = _ref;
+const IconIndicator = /*#__PURE__*/React__default["default"].forwardRef(function IconIndicatorContent({
+  className: customClassName,
+  kind,
+  label,
+  size = 16,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--icon-indicator`, customClassName, {
     [`${prefix}--icon-indicator--20`]: size == 20

package/lib/components/IdPrefix/index.js

@@ -18,11 +18,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function IdPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
+function IdPrefix({
+  children,
+  prefix
+}) {
   return /*#__PURE__*/React__default["default"].createElement(useIdPrefix.IdPrefixContext.Provider, {
     value: prefix
   }, children);

package/lib/components/InlineLoading/InlineLoading.js

@@ -23,16 +23,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const InlineLoading = _ref => {
-  let {
-    className,
-    status = 'active',
-    iconDescription,
-    description,
-    onSuccess,
-    successDelay = 1500,
-    ...rest
-  } = _ref;
+const InlineLoading = ({
+  className,
+  status = 'active',
+  iconDescription,
+  description,
+  onSuccess,
+  successDelay = 1500,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const loadingClasses = cx__default["default"](`${prefix}--inline-loading`, className);
   const timerRef = React.useRef(null);

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

@@ -29,6 +29,10 @@ export interface LayerBaseProps {
      * Specify the layer level and override any existing levels based on hierarchy
      */
     level?: LayerLevel;
+    /**
+     * Applies a css background-color set to $layer-background
+     */
+    withBackground?: boolean;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
 declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {

package/lib/components/Layer/index.js

@@ -35,18 +35,20 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    className: customClassName,
-    children,
-    level: overrideLevel,
-    ...rest
-  } = _ref;
+const Layer = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  className: customClassName,
+  children,
+  level: overrideLevel,
+  withBackground = false,
+  ...rest
+}, ref) => {
   const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
+  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, {
+    [`${prefix}--layer__with-background`]: withBackground
+  }, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = clamp.clamp(level + 1, LayerLevel.MIN_LEVEL, LayerLevel.MAX_LEVEL);
   const BaseComponent = as || 'div';
@@ -77,7 +79,11 @@ Layer.propTypes = {
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */
-  level: PropTypes__default["default"].oneOf([0, 1, 2])
+  level: PropTypes__default["default"].oneOf([0, 1, 2]),
+  /**
+   * Applies a css background-color set to $layer-background
+   */
+  withBackground: PropTypes__default["default"].bool
 };
 
 exports.Layer = Layer;

package/lib/components/Layout/index.js

@@ -32,15 +32,14 @@ const densities = ['condensed', 'normal'];
  * Size of components within this layout
  */
 
-const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref;
+const Layout = /*#__PURE__*/React__default["default"].forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](className, `${prefix}--layout`, {
     [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
@@ -75,27 +74,23 @@ Layout.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(sizes)
 };
-const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(function Layout(_ref2, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref2;
+const LayoutConstraint = /*#__PURE__*/React__default["default"].forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](className, Object.entries({
     size,
     density
-  }).map(_ref3 => {
-    let [group, constraints] = _ref3;
-    return {
-      [`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
-      [`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
-      [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
-    };
-  }));
+  }).map(([group, constraints]) => ({
+    [`${prefix}--layout-constraint--${group}__default-${constraints?.default}`]: constraints?.default,
+    [`${prefix}--layout-constraint--${group}__min-${constraints?.min}`]: constraints?.min,
+    [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
+  })));
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: forwardRef,
     className: classes

package/lib/components/LayoutDirection/LayoutDirection.js

@@ -19,13 +19,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function LayoutDirection(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    dir,
-    ...rest
-  } = _ref;
+function LayoutDirection({
+  as: BaseComponent = 'div',
+  children,
+  dir,
+  ...rest
+}) {
   const value = React__default["default"].useMemo(() => {
     return {
       direction: dir

package/lib/components/Link/Link.d.ts

@@ -35,7 +35,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     renderIcon?: ComponentType;
     /**
-     * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     * Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
     size?: 'sm' | 'md' | 'lg';
     /**

package/lib/components/Link/Link.js

@@ -22,20 +22,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // First create the component with basic types
-const LinkBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as: BaseComponent,
-    children,
-    className: customClassName,
-    href,
-    disabled = false,
-    inline = false,
-    visited = false,
-    renderIcon: Icon,
-    size,
-    target,
-    ...rest
-  } = _ref;
+const LinkBase = /*#__PURE__*/React__default["default"].forwardRef(({
+  as: BaseComponent,
+  children,
+  className: customClassName,
+  href,
+  disabled = false,
+  inline = false,
+  visited = false,
+  renderIcon: Icon,
+  size,
+  target,
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--link`, customClassName, {
     [`${prefix}--link--disabled`]: disabled,
@@ -45,7 +44,7 @@ const LinkBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   });
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
-    className: BaseComponent ? undefined : className,
+    className,
     rel,
     target
   };
@@ -98,7 +97,7 @@ Link.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
-   * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**

package/lib/components/ListBox/ListBox.d.ts

@@ -4,11 +4,10 @@
  * 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 HTMLAttributes } from 'react';
 import { type ListBoxSize, type ListBoxType } from '.';
-import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
-export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
     /**
      * Specify whether the ListBox is currently disabled
      */

package/lib/components/ListBox/ListBoxField.d.ts

@@ -1,13 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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 React from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 export declare const translationIds: {};
-export interface ListBoxFieldProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxFieldProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify if the parent <ListBox> is disabled
      */