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

package/es/components/Heading/index.js

@@ -7,21 +7,20 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 
-const HeadingContext = /*#__PURE__*/React__default.createContext(1);
-const Section = /*#__PURE__*/React__default.forwardRef(function Section(_ref, ref) {
-  let {
-    as: BaseComponent = 'section',
-    level: levelOverride,
-    ...rest
-  } = _ref;
-  const parentLevel = React__default.useContext(HeadingContext);
+const HeadingContext = /*#__PURE__*/React.createContext(1);
+const Section = /*#__PURE__*/React.forwardRef(function Section({
+  as: BaseComponent = 'section',
+  level: levelOverride,
+  ...rest
+}, ref) {
+  const parentLevel = React.useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
-  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     ref: ref
   }, rest)));
 });
@@ -44,9 +43,9 @@ Section.propTypes = {
    */
   level: PropTypes.number
 };
-const Heading = /*#__PURE__*/React__default.forwardRef(function Heading(props, ref) {
-  const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
-  return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, _extends({
+const Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
+  const HeadingIntrinsic = `h${React.useContext(HeadingContext)}`;
+  return /*#__PURE__*/React.createElement(HeadingIntrinsic, _extends({
     ref: ref
   }, props));
 });

package/es/components/Icon/Icon.Skeleton.js

@@ -7,17 +7,16 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const IconSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const IconSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--icon--skeleton`, className)
   }, rest));
 };

package/es/components/IconButton/index.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -19,27 +19,26 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const IconButton = /*#__PURE__*/React__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.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();
   const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
@@ -48,7 +47,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
   }
   const badgeId = useId('badge-indicator');
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
     autoAlign: autoAlign,
     closeOnActivation: closeOnActivation,
@@ -59,7 +58,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     highContrast: highContrast,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default.createElement(ButtonBase, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
     disabled: disabled,
     kind: kind,
     ref: ref,
@@ -67,8 +66,8 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     isSelected: isSelected,
     hasIconOnly: true,
     className: className,
-    "aria-describedby": badgeCount && badgeId
-  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
+    "aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React.createElement(BadgeIndicator, {
     id: badgeId,
     count: badgeCount > 0 ? badgeCount : undefined
   })));
@@ -155,8 +154,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.node.isRequired,
   /**

package/es/components/IconIndicator/index.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
@@ -26,14 +26,13 @@ const iconTypes = {
   unknown: UnknownFilled,
   informative: WarningSquareFilled
 };
-const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    kind,
-    label,
-    size = 16,
-    ...rest
-  } = _ref;
+const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent({
+  className: customClassName,
+  kind,
+  label,
+  size = 16,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--icon-indicator`, customClassName, {
     [`${prefix}--icon-indicator--20`]: size == 20
@@ -42,10 +41,10 @@ const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndica
   if (!IconForKind) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames,
     ref: ref
-  }, /*#__PURE__*/React__default.createElement(IconForKind, {
+  }, /*#__PURE__*/React.createElement(IconForKind, {
     size: size,
     className: `${prefix}--icon-indicator--${kind}`
   }), label);

package/es/components/IdPrefix/index.js

@@ -6,15 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { IdPrefixContext } from '../../internal/useIdPrefix.js';
 
-function IdPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(IdPrefixContext.Provider, {
+function IdPrefix({
+  children,
+  prefix
+}) {
+  return /*#__PURE__*/React.createElement(IdPrefixContext.Provider, {
     value: prefix
   }, children);
 }

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -6,12 +6,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
+const InlineCheckbox = /*#__PURE__*/React.forwardRef(function InlineCheckbox(props, forwardRef) {
   const {
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
@@ -56,19 +56,19 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     }
     onClick?.(evt);
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox--inline`
-  }, /*#__PURE__*/React__default.createElement("input", inputProps),
+  }, /*#__PURE__*/React.createElement("input", inputProps),
   /*#__PURE__*/
   /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-  React__default.createElement("label", {
+  React.createElement("label", {
     htmlFor: id,
     className: `${prefix}--checkbox-label`,
     title: title,
     onClick: evt => {
       evt.stopPropagation();
     }
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, deprecatedAriaLabel || ariaLabel)));
 });

package/es/components/InlineLoading/InlineLoading.js

@@ -6,23 +6,22 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import Loading from '../Loading/Loading.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-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();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
   const timerRef = useRef(null);
@@ -44,20 +43,20 @@ const InlineLoading = _ref => {
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
-      return /*#__PURE__*/React__default.createElement(ErrorFilled, {
+      return /*#__PURE__*/React.createElement(ErrorFilled, {
         className: `${prefix}--inline-loading--error`
-      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
+      }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
     if (status === 'finished') {
-      return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
+      return /*#__PURE__*/React.createElement(CheckmarkFilled, {
         className: `${prefix}--inline-loading__checkmark-container`
-      }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
+      }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
     if (status === 'active') {
       if (!iconDescription) {
         iconLabel = 'loading';
       }
-      return /*#__PURE__*/React__default.createElement(Loading, {
+      return /*#__PURE__*/React.createElement(Loading, {
         small: true,
         description: iconLabel,
         withOverlay: false,
@@ -68,20 +67,20 @@ const InlineLoading = _ref => {
       if (!iconDescription) {
         iconLabel = 'not loading';
       }
-      return /*#__PURE__*/React__default.createElement("title", {
+      return /*#__PURE__*/React.createElement("title", {
         className: `${prefix}--inline-loading__inactive-status`
       }, iconLabel);
     }
     return undefined;
   };
-  const loadingText = description && /*#__PURE__*/React__default.createElement("div", {
+  const loadingText = description && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
-  const loadingAnimation = loading && /*#__PURE__*/React__default.createElement("div", {
+  const loadingAnimation = loading && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__animation`
   }, loading);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'

package/es/components/Layer/LayerContext.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const LayerContext = /*#__PURE__*/React__default.createContext(1);
+const LayerContext = /*#__PURE__*/React.createContext(1);
 
 export { LayerContext };

package/es/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/es/components/Layer/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,29 +20,31 @@ import { clamp } from '../../internal/clamp.js';
  * calls this hook is currently in
  */
 function useLayer() {
-  const level = React__default.useContext(LayerContext);
+  const level = React.useContext(LayerContext);
   return {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    as,
-    className: customClassName,
-    children,
-    level: overrideLevel,
-    ...rest
-  } = _ref;
-  const contextLevel = React__default.useContext(LayerContext);
+const Layer = /*#__PURE__*/React.forwardRef(({
+  as,
+  className: customClassName,
+  children,
+  level: overrideLevel,
+  withBackground = false,
+  ...rest
+}, ref) => {
+  const contextLevel = React.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
+  const className = cx(`${prefix}--layer-${levels[level]}`, {
+    [`${prefix}--layer__with-background`]: withBackground
+  }, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
+  return /*#__PURE__*/React.createElement(LayerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     ref: ref
   }, rest, {
     className: className
@@ -67,7 +69,11 @@ Layer.propTypes = {
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */
-  level: PropTypes.oneOf([0, 1, 2])
+  level: PropTypes.oneOf([0, 1, 2]),
+  /**
+   * Applies a css background-color set to $layer-background
+   */
+  withBackground: PropTypes.bool
 };
 
 export { Layer, useLayer };

package/es/components/Layout/index.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
@@ -22,21 +22,20 @@ const densities = ['condensed', 'normal'];
  * Size of components within this layout
  */
 
-const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(_ref, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref;
+const Layout = /*#__PURE__*/React.forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classes = cx(className, `${prefix}--layout`, {
     [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
     [`${prefix}--layout--density-${density}`]: density && densities.includes(density)
   });
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
     ref: forwardRef,
     className: classes
   }), children);
@@ -65,28 +64,24 @@ Layout.propTypes = {
    */
   size: PropTypes.oneOf(sizes)
 };
-const LayoutConstraint = /*#__PURE__*/React__default.forwardRef(function Layout(_ref2, forwardRef) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className,
-    density,
-    size,
-    ...rest
-  } = _ref2;
+const LayoutConstraint = /*#__PURE__*/React.forwardRef(function Layout({
+  as: BaseComponent = 'div',
+  children,
+  className,
+  density,
+  size,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const classes = cx(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
-    };
-  }));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  }).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.createElement(BaseComponent, _extends({}, rest, {
     ref: forwardRef,
     className: classes
   }), children);

package/es/components/LayoutDirection/LayoutDirection.js

@@ -7,25 +7,24 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext.js';
 export { LayoutDirectionContext } from './LayoutDirectionContext.js';
 
-function LayoutDirection(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    dir,
-    ...rest
-  } = _ref;
-  const value = React__default.useMemo(() => {
+function LayoutDirection({
+  as: BaseComponent = 'div',
+  children,
+  dir,
+  ...rest
+}) {
+  const value = React.useMemo(() => {
     return {
       direction: dir
     };
   }, [dir]);
-  return /*#__PURE__*/React__default.createElement(LayoutDirectionContext.Provider, {
+  return /*#__PURE__*/React.createElement(LayoutDirectionContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     dir: dir
   }, rest), children));
 }

package/es/components/LayoutDirection/LayoutDirectionContext.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const LayoutDirectionContext = /*#__PURE__*/React__default.createContext({
+const LayoutDirectionContext = /*#__PURE__*/React.createContext({
   direction: 'ltr'
 });
 

package/es/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';
     /**