@carbon/react 1.89.0 → 1.90.0-rc.0

package/lib/components/DataTable/tools/sorting.js

@@ -44,6 +44,10 @@ const compareStrings = (a, b, locale = 'en') => {
     numeric: isNumeric
   });
 };
+
+// TODO: Should `SortRowParams` in
+// packages/react/src/components/DataTable/state/sorting.ts be used here?
+
 /**
  * Sorts table rows based on the provided column key and direction.
  */

package/lib/components/Modal/Modal.js

@@ -42,7 +42,7 @@ var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debou
 var Text = require('../Text/Text.js');
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
-const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
+const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -68,7 +68,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = !passiveModal,
+  preventCloseOnClickOutside,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -100,9 +100,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
-  if (!passiveModal && preventCloseOnClickOutside === false) {
-    console.error(invalidOutsideClickMessage);
-  }
+  process.env.NODE_ENV !== "production" ? warning.warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -129,7 +127,15 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
       target
     } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    const shouldCloseOnOutsideClick =
+    // Passive modals can close on clicks outside the modal when
+    // preventCloseOnClickOutside is undefined or explicitly set to false.
+    passiveModal && !preventCloseOnClickOutside ||
+    // Non-passive modals have to explicitly opt-in for close on outside
+    // behavior by explicitly setting preventCloseOnClickOutside to false,
+    // rather than just leaving it undefined.
+    !passiveModal && preventCloseOnClickOutside === false;
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }

package/lib/components/NumberInput/NumberInput.js

@@ -175,11 +175,16 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--number__invalid--warning`]: normalizedProps.warn
   });
-  if (controlledValue !== prevControlledValue && !(isNaN(Number(controlledValue)) === isNaN(Number(prevControlledValue)))) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    setValue(controlledValue);
-    setPrevControlledValue(controlledValue);
-  }
+  React.useEffect(() => {
+    if (type === 'number' && controlledValue !== undefined) {
+      if (allowEmpty && controlledValue === '') {
+        setValue('');
+      } else {
+        setValue(controlledValue);
+      }
+      setPrevControlledValue(controlledValue);
+    }
+  }, [controlledValue, type, allowEmpty]);
   let ariaDescribedBy = undefined;
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;

package/lib/components/Popover/index.js

@@ -63,8 +63,12 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-
-    // No relatedTarget, focus moved to nowhere, so close the popover
+    if (isTabTip) {
+      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+        onRequestClose?.();
+      }
+      return;
+    }
     if (!relatedTarget) {
       onRequestClose?.();
       return;

package/lib/components/Tag/DismissibleTag.d.ts

@@ -7,6 +7,7 @@
 import React, { type ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
+import { PopoverAlignment } from '../Popover';
 export interface DismissibleTagBaseProps {
     /**
      * Provide a custom className that is applied to the containing <span>
@@ -20,6 +21,10 @@ export interface DismissibleTagBaseProps {
      * Specify if the `DismissibleTag` is disabled
      */
     disabled?: boolean;
+    /**
+     * Specify the tooltip alignment for the dismiss button
+     */
+    dismissTooltipAlignment?: PopoverAlignment;
     /**
      * Provide a custom tooltip label for the dismiss button
      */

package/lib/components/Tag/DismissibleTag.js

@@ -41,6 +41,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
   text,
   tagTitle,
   type,
+  dismissTooltipAlignment = 'bottom',
   dismissTooltipLabel = 'Dismiss tag',
   ...other
 }, forwardRef) => {
@@ -92,7 +93,7 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--tag__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
     label: dismissActionLabel,
-    align: "bottom",
+    align: dismissTooltipAlignment,
     className: tooltipClasses,
     leaveDelayMs: 0,
     closeOnActivation: true
@@ -117,6 +118,10 @@ DismissibleTag.propTypes = {
    * Specify if the `DismissibleTag` is disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify the tooltip alignment for the dismiss button
+   */
+  dismissTooltipAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Provide a custom tooltip label for the dismiss button
    */

package/lib/components/Toggletip/index.js

@@ -129,13 +129,24 @@ function Toggletip({
       actions.close();
     }
   });
-  useEvent.useWindowEvent('click', ({
-    target
-  }) => {
-    if (open && target instanceof Node && !ref.current?.contains(target)) {
-      actions.close();
-    }
-  });
+  React.useEffect(() => {
+    if (!ref.current) return;
+    const targetDocument = ref.current.ownerDocument || document;
+    const eventType = 'PointerEvent' in window ? 'pointerdown' : 'mousedown';
+    const handleOutsideClick = event => {
+      const node = event.target;
+      if (open && node && !ref.current.contains(node)) {
+        setOpen(false);
+      }
+    };
+    const options = {
+      capture: true
+    };
+    targetDocument.addEventListener(eventType, handleOutsideClick, options);
+    return () => {
+      targetDocument.removeEventListener(eventType, handleOutsideClick, options);
+    };
+  }, [open]);
   return /*#__PURE__*/React.createElement(ToggletipContext.Provider, {
     value: value
   }, /*#__PURE__*/React.createElement(index.Popover, _rollupPluginBabelHelpers.extends({

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

@@ -11,6 +11,9 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * The ID of the active node in the tree
+     *
+     * @deprecated The `active` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     active?: string | number;
     /**
@@ -29,6 +32,9 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * TreeNode depth to determine spacing
+     *
+     * @deprecated The `depth` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     depth?: number;
     /**
@@ -49,6 +55,9 @@ export type TreeNodeProps = {
     label: React.ReactNode;
     /**
      * Callback function for when the node receives or loses focus
+     *
+     * @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
@@ -61,6 +70,9 @@ export type TreeNodeProps = {
     onToggle?: UncontrolledOnToggle | ControlledOnToggle;
     /**
      * Callback function for when any node in the tree is selected
+     *
+     * @deprecated The `onTreeSelect` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>) => void;
     /**
@@ -70,6 +82,8 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
+     * @deprecated The `selected` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     selected?: Array<string | number>;
     /**
@@ -97,6 +111,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * The ID of the active node in the tree
+     *
+     * @deprecated The `active` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     active?: string | number;
     /**
@@ -115,6 +132,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * TreeNode depth to determine spacing
+     *
+     * @deprecated The `depth` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     depth?: number;
     /**
@@ -135,6 +155,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     label: React.ReactNode;
     /**
      * Callback function for when the node receives or loses focus
+     *
+     * @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
@@ -147,6 +170,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     onToggle?: UncontrolledOnToggle | ControlledOnToggle;
     /**
      * Callback function for when any node in the tree is selected
+     *
+     * @deprecated The `onTreeSelect` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, "id" | "label" | "value">) => void;
     /**
@@ -156,6 +182,8 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
+     * @deprecated The `selected` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     selected?: Array<string | number>;
     /**

package/lib/components/TreeView/TreeNode.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
@@ -417,7 +418,7 @@ TreeNode.propTypes = {
    * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * The ID of the active node in the tree
    */
-  active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  active: deprecate.deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `active` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * Specify the children of the TreeNode
    */
@@ -435,7 +436,7 @@ TreeNode.propTypes = {
    * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * TreeNode depth to determine spacing
    */
-  depth: PropTypes.number,
+  depth: deprecate.deprecate(PropTypes.number, 'The `depth` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * Specify if the TreeNode is disabled
    */
@@ -455,7 +456,7 @@ TreeNode.propTypes = {
   /**
    * Callback function for when the node receives or loses focus
    */
-  onNodeFocusEvent: PropTypes.func,
+  onNodeFocusEvent: deprecate.deprecate(PropTypes.func, 'The `onNodeFocusEvent` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * Callback function for when the node is selected
    */
@@ -467,7 +468,7 @@ TreeNode.propTypes = {
   /**
    * Callback function for when any node in the tree is selected
    */
-  onTreeSelect: PropTypes.func,
+  onTreeSelect: deprecate.deprecate(PropTypes.func, 'The `onTreeSelect` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * A component used to render an icon.
    */
@@ -478,7 +479,7 @@ TreeNode.propTypes = {
    * Array containing all selected node IDs in the tree
    */
   // @ts-ignore
-  selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  selected: deprecate.deprecate(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), 'The `selected` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
   /**
    * Specify the value of the TreeNode
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.89.0",
+  "version": "1.90.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.30.0",
-    "@carbon/icons-react": "^11.65.0",
-    "@carbon/layout": "^11.39.0",
-    "@carbon/styles": "^1.88.0",
+    "@carbon/icons-react": "^11.66.0-rc.0",
+    "@carbon/layout": "^11.40.0-rc.0",
+    "@carbon/styles": "^1.89.0-rc.0",
     "@carbon/utilities": "^0.8.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,8 +79,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@carbon/test-utils": "^10.37.0",
-    "@carbon/themes": "^11.58.0",
+    "@carbon/test-utils": "^10.38.0-rc.0",
+    "@carbon/themes": "^11.59.0-rc.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -106,8 +106,8 @@
     "fs-extra": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.5",
-    "postcss-loader": "^8.0.0",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
@@ -138,5 +138,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "d66cc6afbdf6802cf8b14042f20f7c350beef90b"
+  "gitHead": "2c49b938cb0508beea4a04512813118549d90898"
 }

package/telemetry.yml

@@ -328,6 +328,7 @@ collect:
         - focusAfterCloseRef
         - modal
         # DismissibleTag
+        - dismissTooltipAlignment
         - dismissTooltipLabel
         - tagTitle
         # ErrorBoundary
@@ -899,6 +900,19 @@ collect:
         # ContentSwitcher - selectionMode
         - automatic
         - manual
+        # DismissibleTag - dismissTooltipAlignment
+        - bottom
+        - bottom-end
+        - bottom-start
+        - left
+        - left-end
+        - left-start
+        - right
+        - right-end
+        - right-start
+        - top
+        - top-end
+        - top-start
         # FileUploader - filenameStatus
         - complete
         - edit