@carbon/react 1.87.1 → 1.88.0

package/lib/components/Popover/index.js

@@ -64,7 +64,14 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (!popover.current?.contains(relatedTarget)) {
+    if (!relatedTarget) {
+      return;
+    }
+    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
+    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+
+    // Only close if focus moved outside both containers
+    if (isOutsideMainContainer && isOutsideFloating) {
       onRequestClose?.();
     }
   });
@@ -293,7 +300,10 @@ Popover.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.string, 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.
+   * 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,
   /**

package/lib/components/Switch/IconSwitch.d.ts

@@ -1,3 +1,45 @@
-export default IconSwitch;
-declare const IconSwitch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { type IconButtonProps } from '../IconButton';
+import type { SwitchEventHandlersParams } from './Switch';
+interface IconSwitchProps extends Omit<IconButtonProps, 'onClick' | 'onKeyDown' | 'label' | 'name'> {
+    /**
+     * The index of the `IconSwitch`.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    index?: number;
+    /**
+     * The name of the `IconSwitch`.
+     */
+    name?: string | number;
+    /**
+     * A handler that is invoked when a user clicks on the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onClick?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * A handler that is invoked on the key down event for the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onKeyDown?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * Whether the `IconSwitch` is selected.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    selected?: boolean;
+    /**
+     * `Tooltip` text.
+     */
+    text?: string;
+}
+declare const IconSwitch: React.ForwardRefExoticComponent<IconSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconSwitch;

package/lib/components/Switch/IconSwitch.js

@@ -15,9 +15,10 @@ var React = require('react');
 var cx = require('classnames');
 var index = require('../IconButton/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
-const noopFn = () => {};
-const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
+const frFn = React.forwardRef;
+const IconSwitch = frFn((props, ref) => {
   const {
     align,
     children,
@@ -27,8 +28,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     index: index$1,
     leaveDelayMs = 0,
     name,
-    onClick = noopFn,
-    onKeyDown = noopFn,
+    onClick = noopFn.noopFn,
+    onKeyDown = noopFn.noopFn,
     selected = false,
     size,
     text,
@@ -36,8 +37,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
   } = props;
   const prefix = usePrefix.usePrefix();
   const [isHovered, setIsHovered] = React.useState(false);
-  const handleClick = e => {
-    e.preventDefault();
+  const handleClick = event => {
+    event.preventDefault();
     onClick({
       index: index$1,
       name,
@@ -45,6 +46,7 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown({
       index: index$1,
@@ -66,20 +68,10 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     [`${prefix}--content-switcher-popover--selected`]: selected,
     [`${prefix}--content-switcher-popover--disabled`]: disabled
   });
-  const commonProps = {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    className: classes,
-    disabled,
-    align,
-    enterDelayMs,
-    leaveDelayMs,
-    size
-  };
   return /*#__PURE__*/React.createElement(index.IconButton, _rollupPluginBabelHelpers.extends({
     label: text,
     type: "button",
-    ref: tabRef,
+    ref: ref,
     role: "tab",
     tabIndex: selected || isHovered ? 0 : -1,
     onMouseEnter: handleMouseEnter,
@@ -89,7 +81,16 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     "aria-selected": selected,
     "aria-label": text,
     wrapperClasses: iconButtonClasses
-  }, other, commonProps), children);
+  }, other, {
+    align: align,
+    className: classes,
+    disabled: disabled,
+    enterDelayMs: enterDelayMs,
+    leaveDelayMs: leaveDelayMs,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    size: size
+  }), children);
 });
 IconSwitch.displayName = 'IconSwitch';
 IconSwitch.propTypes = {
@@ -98,15 +99,15 @@ IconSwitch.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
-   * Provide child elements to be rendered inside of the Switch
+   * Children to be rendered inside of the `IconSwitch`.
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to your Switch
+   * Specify an optional className to be added to your `IconSwitch`.
    */
   className: PropTypes.string,
   /**
-   * Specify whether or not the Switch should be disabled
+   * Whether the `IconSwitch` should be disabled.
    */
   disabled: PropTypes.bool,
   /**
@@ -114,8 +115,9 @@ IconSwitch.propTypes = {
    */
   enterDelayMs: PropTypes.number,
   /**
-   * The index of your Switch in your ContentSwitcher that is used for event handlers.
-   * Reserved for usage in ContentSwitcher
+   * The index of the `IconSwitch`.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   index: PropTypes.number,
   /**
@@ -123,29 +125,34 @@ IconSwitch.propTypes = {
    */
   leaveDelayMs: PropTypes.number,
   /**
-   * Provide the name of your Switch that is used for event handlers
+   * The name of the `IconSwitch`.
    */
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * A handler that is invoked when a user clicks on the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onClick: PropTypes.func,
   /**
    * A handler that is invoked on the key down event for the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onKeyDown: PropTypes.func,
   /**
-   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   * Whether the `IconSwitch` is selected.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   selected: PropTypes.bool,
+  // TODO: Icon only variant of what? Isn't the `IconSwitch` always icon only?
   /**
    * Passed in from `ContentSwitcher` to render icon-only variant
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide the visible text displayed by the Tooltip
+   * `Tooltip` text.
    */
   text: PropTypes.string
 };

package/lib/components/Switch/Switch.js

@@ -39,6 +39,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown?.({
       index,

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

@@ -67,7 +67,10 @@ export declare namespace Toggletip {
          */
         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.
+         * 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>;
         /**

package/lib/components/Toggletip/index.js

@@ -187,7 +187,10 @@ Toggletip.propTypes = {
    */
   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.
+   * 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,
   /**

package/lib/components/Tooltip/DefinitionTooltip.d.ts

@@ -12,13 +12,15 @@ export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+     * Will auto-align Definition Tooltip. 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?: boolean;
     /**
      * The `children` prop will be used as the value that is being defined
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
      * Specify an optional className to be applied to the container node
      */

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -103,7 +103,9 @@ DefinitionTooltip.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. 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,
   /**

package/lib/components/Tooltip/Tooltip.d.ts

@@ -54,9 +54,6 @@ 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/lib/components/Tooltip/Tooltip.js

@@ -48,20 +48,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.usePrefix();
   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 ? undefined : 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 labelledBy = ariaLabelledBy ?? (hasLabel ? id : undefined);
+  const describedBy = ariaDescribedBy ?? (!hasLabel ? id : undefined);
   const triggerProps = {
     onFocus: () => !focusByMouse && setOpen(true),
     onBlur: () => {

package/lib/components/TreeView/TreeNode.d.ts

@@ -88,7 +88,8 @@ export type TreeNodeProps = {
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
@@ -173,7 +174,8 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;

package/lib/components/TreeView/TreeNode.js

@@ -494,7 +494,8 @@ TreeNode.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool
 };

package/lib/components/UIShell/HeaderPanel.js

@@ -19,14 +19,14 @@ var match = require('../../internal/keyboard/match.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var Switcher = require('./Switcher.js');
+var noopFn = require('../../internal/noopFn.js');
 
-const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
   children,
   className: customClassName,
   expanded,
   addFocusListeners = true,
-  onHeaderPanelFocus = noopFn,
+  onHeaderPanelFocus = noopFn.noopFn,
   href,
   ...rest
 }, ref) {

package/lib/internal/Selection.d.ts

@@ -18,6 +18,7 @@ interface UseSelectionProps<ItemType> {
 export declare const useSelection: <ItemType>({ disabled, onChange, initialSelectedItems, selectedItems: controlledItems, selectAll, filteredItems, }: UseSelectionProps<ItemType>) => {
     clearSelection: () => void;
     onItemChange: (item: ItemType) => void;
+    toggleAll: (items: ItemType[]) => void;
     selectedItems: ItemType[];
 };
 interface SelectionRenderProps<ItemType> {

package/lib/internal/Selection.js

@@ -92,6 +92,15 @@ const useSelection = ({
       selectedItems: []
     });
   }, [disabled, isControlled]);
+  const toggleAll = React.useCallback(items => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: items
+    });
+  }, [isControlled]);
   React.useEffect(() => {
     savedOnChange.current = onChange;
   }, [onChange]);
@@ -111,6 +120,7 @@ const useSelection = ({
   return {
     clearSelection,
     onItemChange,
+    toggleAll,
     selectedItems
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.87.1",
+  "version": "1.88.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.28.1",
-    "@carbon/icons-react": "^11.63.0",
-    "@carbon/layout": "^11.37.0",
-    "@carbon/styles": "^1.86.1",
+    "@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",
     "@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.56.0",
+    "@carbon/themes": "^11.57.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "f420c48d3859804a62811e6420d940f2e2602219"
+  "gitHead": "6568a3389c2a82348c693b167b511dea66b7b269"
 }

package/telemetry.yml

@@ -26,6 +26,7 @@ collect:
         - autoAlign
         - autoComplete
         - buttonKind
+        - caption
         - checked
         - children
         - className
@@ -450,6 +451,7 @@ collect:
         - notificationType
         # NumberInput
         - hideSteppers
+        - stepStartValue
         # OrderedList
         - native
         # OverflowMenuItem
@@ -601,7 +603,6 @@ collect:
         - warning
         - warningText
         # ToastNotification
-        - caption
         - timeout
         # Toggle
         - defaultToggled
@@ -850,17 +851,9 @@ collect:
         - g90
         - white
         # General - tooltipAlignment
-        - bottom
-        - bottom-left
-        - bottom-right
         - center
         - end
-        - left
-        - right
         - start
-        - top
-        - top-left
-        - top-right
         # General - tooltipPosition
         - bottom
         - left