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

package/es/components/Toggle/Toggle.Skeleton.js

@@ -7,22 +7,21 @@
 
 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 ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: skeletonClassNames
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--toggle__skeleton-circle`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--toggle__skeleton-rectangle`
   }));
 };

package/es/components/Toggle/Toggle.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -15,24 +15,23 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _path;
-function Toggle(_ref) {
-  let {
-    'aria-labelledby': ariaLabelledby,
-    className,
-    defaultToggled = false,
-    disabled = false,
-    hideLabel = false,
-    id,
-    labelA = 'Off',
-    labelB = 'On',
-    labelText,
-    onClick,
-    onToggle,
-    readOnly,
-    size = 'md',
-    toggled,
-    ...other
-  } = _ref;
+function Toggle({
+  'aria-labelledby': ariaLabelledby,
+  className,
+  defaultToggled = false,
+  disabled = false,
+  hideLabel = false,
+  id,
+  labelA = 'Off',
+  labelB = 'On',
+  labelText,
+  onClick,
+  onToggle,
+  readOnly,
+  size = 'md',
+  toggled,
+  ...other
+}) {
   const prefix = usePrefix();
   const buttonElement = useRef(null);
   const [checked, setChecked] = useControllableState({
@@ -69,7 +68,7 @@ function Toggle(_ref) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", {
+    React.createElement("div", {
       className: wrapperClasses,
       onClick: !labelText ? e => {
         // the underlying <button> can only be activated by keyboard as it is visually hidden;
@@ -82,7 +81,7 @@ function Toggle(_ref) {
           buttonElement.current.focus();
         }
       } : undefined
-    }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+    }, /*#__PURE__*/React.createElement("button", _extends({}, other, {
       ref: buttonElement,
       id: id,
       className: `${prefix}--toggle__button`,
@@ -92,26 +91,26 @@ function Toggle(_ref) {
       "aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
       disabled: disabled,
       onClick: handleClick
-    })), /*#__PURE__*/React__default.createElement(LabelComponent, {
+    })), /*#__PURE__*/React.createElement(LabelComponent, {
       id: labelId,
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
-    }, labelText && /*#__PURE__*/React__default.createElement(Text, {
+    }, labelText && /*#__PURE__*/React.createElement(Text, {
       className: labelTextClasses
-    }, labelText), /*#__PURE__*/React__default.createElement("div", {
+    }, labelText), /*#__PURE__*/React.createElement("div", {
       className: appearanceClasses
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: switchClasses
-    }, isSm && /*#__PURE__*/React__default.createElement("svg", {
+    }, isSm && /*#__PURE__*/React.createElement("svg", {
       "aria-hidden": "true",
       focusable: "false",
       className: `${prefix}--toggle__check`,
       width: "6px",
       height: "5px",
       viewBox: "0 0 6 5"
-    }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+    }, _path || (_path = /*#__PURE__*/React.createElement("path", {
       d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-    })))), renderSideLabel && /*#__PURE__*/React__default.createElement(Text, {
+    })))), renderSideLabel && /*#__PURE__*/React.createElement(Text, {
       className: `${prefix}--toggle__text`,
       "aria-hidden": "true"
     }, sideLabel))))

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -7,38 +7,37 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React, { useContext } from 'react';
 import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = useContext(PrefixContext);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)
-  }, rest), /*#__PURE__*/React__default.createElement("input", {
+  }, rest), /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: id,
     className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default.createElement("label", {
+  }), /*#__PURE__*/React.createElement("label", {
     className: `${prefix}--toggle__label ${prefix}--skeleton`,
     htmlFor: id
-  }, labelText && /*#__PURE__*/React__default.createElement("span", {
+  }, labelText && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--toggle__label-text`
-  }, labelText), /*#__PURE__*/React__default.createElement("span", {
+  }, labelText), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--toggle__appearance`
-  }, /*#__PURE__*/React__default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     className: `${prefix}--toggle__check`,
     width: "6px",
     height: "5px",
     viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+  }, _path || (_path = /*#__PURE__*/React.createElement("path", {
     d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
   }))))));
 };

package/es/components/Toggletip/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, { useRef, useState, useContext } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -19,17 +19,16 @@ import { usePrefix } from '../../internal/usePrefix.js';
 /**
  * Used to render the label for a Toggletip
  */
-function ToggletipLabel(_ref) {
-  let {
-    as: BaseComponent = 'span',
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function ToggletipLabel({
+  as: BaseComponent = 'span',
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }
@@ -51,7 +50,7 @@ ToggletipLabel.propTypes = {
 };
 // Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
-const ToggletipContext = /*#__PURE__*/React__default.createContext(undefined);
+const ToggletipContext = /*#__PURE__*/React.createContext(undefined);
 function useToggletip() {
   return useContext(ToggletipContext);
 }
@@ -60,16 +59,15 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-function Toggletip(_ref2) {
-  let {
-    align,
-    as,
-    autoAlign,
-    className: customClassName,
-    children,
-    defaultOpen = false,
-    ...rest
-  } = _ref2;
+function Toggletip({
+  align,
+  as,
+  autoAlign,
+  className: customClassName,
+  children,
+  defaultOpen = false,
+  ...rest
+}) {
   const ref = useRef(null);
   const [open, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
@@ -127,17 +125,16 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useWindowEvent('click', _ref3 => {
-    let {
-      target
-    } = _ref3;
+  useWindowEvent('click', ({
+    target
+  }) => {
     if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
   });
-  return /*#__PURE__*/React__default.createElement(ToggletipContext.Provider, {
+  return /*#__PURE__*/React.createElement(ToggletipContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(Popover, _extends({
+  }, /*#__PURE__*/React.createElement(Popover, _extends({
     align: align,
     as: as,
     caret: true,
@@ -209,24 +206,23 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref4, ref) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref4;
+const ToggletipButton = /*#__PURE__*/React.forwardRef(function ToggletipButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
   const ComponentToggle = BaseComponent ?? 'button';
   if (ComponentToggle !== 'button') {
-    return /*#__PURE__*/React__default.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+    return /*#__PURE__*/React.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
       className: className
     }, rest), children);
   }
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip?.buttonProps, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className,
@@ -254,19 +250,18 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React__default.forwardRef(function ToggletipContent(_ref5, ref) {
-  let {
-    children,
-    className: customClassName
-  } = _ref5;
+const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent({
+  children,
+  className: customClassName
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
+  return /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: customClassName
   }, toggletip?.contentProps, {
     ref: ref,
     "aria-live": "polite"
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));
 });
@@ -286,14 +281,13 @@ ToggletipContent.displayName = 'ToggletipContent';
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-function ToggletipActions(_ref6) {
-  let {
-    children,
-    className: customClassName
-  } = _ref6;
+function ToggletipActions({
+  children,
+  className: customClassName
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-actions`, customClassName);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
   }, children);
 }

package/es/components/Tooltip/DefinitionTooltip.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, { useState } from 'react';
+import React, { useState } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -16,20 +16,19 @@ import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const DefinitionTooltip = _ref => {
-  let {
-    align = 'bottom',
-    autoAlign,
-    className,
-    children,
-    definition,
-    defaultOpen = false,
-    id,
-    openOnHover,
-    tooltipText,
-    triggerClassName,
-    ...rest
-  } = _ref;
+const DefinitionTooltip = ({
+  align = 'bottom',
+  autoAlign,
+  className,
+  children,
+  definition,
+  defaultOpen = false,
+  id,
+  openOnHover,
+  tooltipText,
+  triggerClassName,
+  ...rest
+}) => {
   const [isOpen, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
   const tooltipId = useFallbackId(id);
@@ -39,7 +38,7 @@ const DefinitionTooltip = _ref => {
       setOpen(false);
     }
   }
-  return /*#__PURE__*/React__default.createElement(Popover, {
+  return /*#__PURE__*/React.createElement(Popover, {
     align: align,
     className: className,
     autoAlign: autoAlign,
@@ -55,7 +54,7 @@ const DefinitionTooltip = _ref => {
       setOpen(true);
     },
     open: isOpen
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement("button", _extends({}, rest, {
     className: cx(`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
     "aria-expanded": isOpen,
@@ -69,7 +68,7 @@ const DefinitionTooltip = _ref => {
     },
     onKeyDown: onKeyDown,
     type: "button"
-  }), children), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }), children), /*#__PURE__*/React.createElement(PopoverContent, {
     className: `${prefix}--definition-tooltip`,
     id: tooltipId
   }, tooltipText ?? definition));

package/es/components/Tooltip/Tooltip.d.ts

@@ -54,6 +54,9 @@ interface TooltipBaseProps {
     /**
      * 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 already has an `aria-label`, the tooltip will not apply
+     * `aria-labelledby`. If the child has its own `aria-labelledby`, that value
+     * will be kept. Otherwise, the tooltip will use its own ID to label the child.
      * This means that if you have text in the child node, that it will not be
      * announced to the screen reader.
      *

package/es/components/Tooltip/Tooltip.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, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -22,22 +22,21 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    as,
-    align = 'top',
-    className: customClassName,
-    children,
-    label,
-    description,
-    enterDelayMs = 100,
-    leaveDelayMs = 300,
-    defaultOpen = false,
-    closeOnActivation = false,
-    dropShadow = false,
-    highContrast = true,
-    ...rest
-  } = _ref;
+const Tooltip = /*#__PURE__*/React.forwardRef(({
+  as,
+  align = 'top',
+  className: customClassName,
+  children,
+  label,
+  description,
+  enterDelayMs = 100,
+  leaveDelayMs = 300,
+  defaultOpen = false,
+  closeOnActivation = false,
+  dropShadow = false,
+  highContrast = true,
+  ...rest
+}, ref) => {
   const tooltipRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = useState(false);
@@ -45,7 +44,22 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
   const id = useId('tooltip');
   const prefix = usePrefix();
-  const child = React__default.Children.only(children);
+  const child = React.Children.only(children);
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  } = child?.props ?? {};
+  const hasLabel = !!label;
+  const hasAriaLabel = typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
+
+  // An `aria-label` takes precedence over `aria-describedby`, but when it's
+  // needed and the user doesn't specify one, the fallback `id` is used.
+  const labelledBy = hasAriaLabel ? null : hasLabel ? ariaLabelledBy ?? id : undefined;
+
+  // If `aria-label` is present, use any provided `aria-describedby`.
+  // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
+  const describedBy = hasAriaLabel ? ariaDescribedBy : ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined);
   const triggerProps = {
     onFocus: () => !focusByMouse && setOpen(true),
     onBlur: () => {
@@ -58,7 +72,9 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onMouseLeave,
     onMouseDown,
     onMouseMove: onMouseMove,
-    onTouchStart: onDragStart
+    onTouchStart: onDragStart,
+    'aria-labelledby': labelledBy,
+    'aria-describedby': describedBy
   };
   function getChildEventHandlers(childProps) {
     const eventHandlerFunctions = Object.keys(triggerProps).filter(prop => prop.startsWith('on'));
@@ -73,11 +89,6 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     });
     return eventHandlers;
   }
-  if (label) {
-    triggerProps['aria-labelledby'] = id;
-  } else {
-    triggerProps['aria-describedby'] = id;
-  }
   const onKeyDown = useCallback(event => {
     if (open && match(event, Escape)) {
       event.stopPropagation();
@@ -151,7 +162,7 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default.createElement(Popover, _extends({
+  return /*#__PURE__*/React.createElement(Popover, _extends({
     as: as,
     ref: ref
   }, rest, {
@@ -162,12 +173,12 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
     open: open
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+  }, child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }) : null), /*#__PURE__*/React.createElement(PopoverContent, {
     "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,