@carbon/react 1.51.1 → 1.52.0

package/lib/components/Menu/MenuItem.js

@@ -35,7 +35,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
 
-const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function MenuItem(_ref, forwardRef) {
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
     className,
@@ -55,7 +55,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     x: -1,
     y: -1
   });
-  const [isRtl, setRtl] = React.useState(false);
+  const [rtl, setRtl] = React.useState(false);
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = React.useState(false);
   const hoverIntentTimeout = React.useRef(null);
@@ -80,7 +80,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       width,
       height
     } = menuItem.current.getBoundingClientRect();
-    if (isRtl) {
+    if (rtl) {
       setBoundaries({
         x: [-x, x - width],
         y: [y, y + height]
@@ -148,7 +148,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Set RTL based on document direction or `LayoutDirection`
+  // Set RTL based on the document direction or `LayoutDirection`
   const {
     direction
   } = useLayoutDirection.useLayoutDirection();
@@ -162,6 +162,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   React.useEffect(() => {
     if (iconsAllowed && IconElement && !context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -173,8 +174,8 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     ref: ref,
     className: classNames,
     tabIndex: -1,
-    "aria-disabled": isDisabled,
-    "aria-haspopup": hasChildren || undefined,
+    "aria-disabled": isDisabled ?? undefined,
+    "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
     onMouseEnter: hasChildren ? handleMouseEnter : undefined,
@@ -190,7 +191,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, isRtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     label: label,
     open: submenuOpen,
     onClose: () => {
@@ -225,17 +226,20 @@ MenuItem.propTypes = {
   /**
    * Provide an optional function to be called when the MenuItem is clicked.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes__default["default"].func,
   /**
    * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   shortcut: PropTypes__default["default"].string
 };
-const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
   let {
     className,
     defaultSelected,
@@ -262,6 +266,7 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
   }
   React.useEffect(() => {
     if (!context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -286,6 +291,7 @@ MenuItemSelectable.propTypes = {
   /**
    * Specify whether the option should be selected by default.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   defaultSelected: PropTypes__default["default"].bool,
   /**
    * A required label titling this option.
@@ -294,13 +300,15 @@ MenuItemSelectable.propTypes = {
   /**
    * Provide an optional function to be called when the selection state changes.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes__default["default"].func,
   /**
    * Pass a bool to props.selected to control the state of this option.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   selected: PropTypes__default["default"].bool
 };
-const MenuItemGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+const MenuItemGroup = /*#__PURE__*/React.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
   let {
     children,
     className,
@@ -333,7 +341,7 @@ MenuItemGroup.propTypes = {
   label: PropTypes__default["default"].string.isRequired
 };
 const defaultItemToString = item => item.toString();
-const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
+const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
   let {
     className,
     defaultSelectedItem,
@@ -362,6 +370,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   }
   React.useEffect(() => {
     if (!context.state.hasIcons) {
+      // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -375,7 +384,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "group",
     "aria-label": label
-  }), items?.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+  }), items.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",
@@ -398,10 +407,12 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   itemToString: PropTypes__default["default"].func,
   /**
    * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   items: PropTypes__default["default"].array,
   /**
    * A required label titling this radio group.
@@ -410,13 +421,14 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide an optional function to be called when the selection changes.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes__default["default"].func,
   /**
    * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
    */
   selectedItem: PropTypes__default["default"].any
 };
-const MenuItemDivider = /*#__PURE__*/React__default["default"].forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+const MenuItemDivider = /*#__PURE__*/React.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
   let {
     className,
     ...rest

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 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, { ComponentProps, ReactNode } from 'react';
+export interface MenuButtonProps extends ComponentProps<'div'> {
+    /**
+     * A collection of MenuItems to be rendered as actions for this MenuButton.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuButton should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the type of button to be used as the base for the trigger button.
+     */
+    kind?: 'primary' | 'tertiary' | 'ghost';
+    /**
+     * Provide the label to be rendered on the trigger button.
+     */
+    label: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * Specify the size of the button and menu.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the tabIndex of the button.
+     */
+    tabIndex?: number;
+}
+declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MenuButton };

package/lib/components/MenuButton/index.js

@@ -32,7 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
-const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function MenuButton(_ref, forwardRef) {
+const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwardRef) {
   let {
     children,
     className,
@@ -68,10 +68,12 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     }
   }
   function handleOpen() {
-    menuRef.current.style.inlineSize = `${width}px`;
-    menuRef.current.style.minInlineSize = `${width}px`;
-    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-      menuRef.current.style.inlineSize = `fit-content`;
+    if (menuRef.current) {
+      menuRef.current.style.inlineSize = `${width}px`;
+      menuRef.current.style.minInlineSize = `${width}px`;
+      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+        menuRef.current.style.inlineSize = `fit-content`;
+      }
     }
   }
   const containerClasses = cx__default["default"](`${prefix}--menu-button__container`, className);
@@ -79,23 +81,22 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     [`${prefix}--menu-button__trigger--open`]: open
   });
   const menuClasses = cx__default["default"](`${prefix}--menu-button__${menuAlignment}`);
-  const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     className: containerClasses
   }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
     tabIndex: tabIndex,
-    kind: buttonKind,
+    kind: kind,
     renderIcon: iconsReact.ChevronDown,
     disabled: disabled,
     "aria-haspopup": true,
     "aria-expanded": open,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    "aria-controls": open ? id : null
+    "aria-controls": open ? id : undefined
   }, label), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     containerRef: triggerRef,
     menuAlignment: menuAlignment,
@@ -128,6 +129,7 @@ MenuButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes__default["default"].oneOf(validButtonKinds),
   /**
    * Provide the label to be renderd on the trigger button.
@@ -136,14 +138,17 @@ MenuButton.propTypes = {
   /**
    * Experimental property. Specify how the menu should align with the button element
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   menuAlignment: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Specify the size of the button and menu.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**
    * Specify the tabIndex of the button.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes__default["default"].number
 };
 

package/lib/components/Modal/Modal.js

@@ -97,6 +97,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
   function handleKeyDown(evt) {
+    evt.stopPropagation();
     if (open) {
       if (match.match(evt, keys.Escape)) {
         onRequestClose(evt);
@@ -108,6 +109,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   }
   function handleMousedown(evt) {
     const target = evt.target;
+    evt.stopPropagation();
     if (innerModal.current && !innerModal.current.contains(target) && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
@@ -239,7 +241,6 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
-    title: closeButtonLabel,
     "aria-label": closeButtonLabel,
     align: "left",
     ref: button

package/lib/components/Notification/Notification.d.ts

@@ -518,6 +518,10 @@ export declare namespace ActionableNotification {
  * ==================
  */
 export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pass in the action button label that will be rendered within the ActionableNotification.
+     */
+    actionButtonLabel?: string;
     /**
      * Specify the content
      */
@@ -534,6 +538,10 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      * Specify whether you are using the low contrast variant of the StaticNotification.
      */
     lowContrast?: boolean;
+    /**
+     * Provide a function that is called when the action is clicked
+     */
+    onActionButtonClick?(): void;
     /**
      * Provide a description for "status" icon that can be read by screen readers
      */
@@ -551,9 +559,13 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      */
     titleId?: string;
 }
-export declare function StaticNotification({ children, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
+export declare function StaticNotification({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StaticNotification {
     var propTypes: {
+        /**
+         * Pass in the action button label that will be rendered within the ActionableNotification.
+         */
+        actionButtonLabel: PropTypes.Requireable<string>;
         /**
          * Specify the content
          */
@@ -570,6 +582,10 @@ export declare namespace StaticNotification {
          * Specify whether you are using the low contrast variant of the StaticNotification.
          */
         lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a function that is called when the action is clicked
+         */
+        onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Provide a description for "status" icon that can be read by screen readers
          */

package/lib/components/Notification/Notification.js

@@ -695,7 +695,9 @@ ActionableNotification.propTypes = {
 
 function StaticNotification(_ref8) {
   let {
+    actionButtonLabel,
     children,
+    onActionButtonClick,
     title,
     titleId,
     subtitle,
@@ -707,10 +709,10 @@ function StaticNotification(_ref8) {
   } = _ref8;
   const prefix = usePrefix.usePrefix();
   const containerClassName = cx__default["default"](className, {
-    [`${prefix}--inline-notification`]: true,
-    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
-    [`${prefix}--inline-notification--${kind}`]: kind,
-    [`${prefix}--inline-notification--hide-close-button`]: true
+    [`${prefix}--actionable-notification`]: true,
+    [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
+    [`${prefix}--actionable-notification--${kind}`]: kind,
+    [`${prefix}--actionable-notification--hide-close-button`]: true
   });
   const ref = React.useRef(null);
   useNoInteractiveChildren.useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
@@ -719,23 +721,32 @@ function StaticNotification(_ref8) {
   }, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--inline-notification__details`
+    className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: "inline",
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--inline-notification__text-wrapper`
+    className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     id: titleId,
-    className: `${prefix}--inline-notification__title`
+    className: `${prefix}--actionable-notification__title`
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
-    className: `${prefix}--inline-notification__subtitle`
-  }, subtitle), children)));
+    className: `${prefix}--actionable-notification__subtitle`
+  }, subtitle), children)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--actionable-notification__button-wrapper`
+  }, actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
+    onClick: onActionButtonClick,
+    inline: true
+  }, actionButtonLabel)));
 }
 StaticNotification.propTypes = {
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  actionButtonLabel: PropTypes__default["default"].string,
   /**
    * Specify the content
    */
@@ -752,6 +763,10 @@ StaticNotification.propTypes = {
    * Specify whether you are using the low contrast variant of the StaticNotification.
    */
   lowContrast: PropTypes__default["default"].bool,
+  /**
+   * Provide a function that is called when the action is clicked
+   */
+  onActionButtonClick: PropTypes__default["default"].func,
   /**
    * Provide a description for "status" icon that can be read by screen readers
    */

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

@@ -47,7 +47,7 @@ interface ToggletipProps<E extends ElementType> {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
         /**

package/lib/components/Toggletip/index.js

@@ -76,7 +76,8 @@ function Toggletip(_ref2) {
     autoAlign,
     className: customClassName,
     children,
-    defaultOpen = false
+    defaultOpen = false,
+    ...rest
   } = _ref2;
   const ref = React.useRef(null);
   const [open, setOpen] = React.useState(defaultOpen);
@@ -138,7 +139,7 @@ function Toggletip(_ref2) {
   });
   return /*#__PURE__*/React__default["default"].createElement(ToggletipContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({
     align: align,
     as: as,
     caret: true,
@@ -150,7 +151,7 @@ function Toggletip(_ref2) {
     onBlur: handleBlur,
     ref: ref,
     autoAlign: autoAlign
-  }, children));
+  }, rest), children));
 }
 Toggletip.propTypes = {
   /**

package/lib/components/TreeView/TreeNode.js

@@ -16,6 +16,8 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useControllableState = require('../../internal/useControllableState.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -34,6 +36,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     disabled,
     id: nodeId,
     isExpanded,
+    defaultIsExpanded,
     label,
     onNodeFocusEvent,
     onSelect: onNodeSelect,
@@ -44,10 +47,17 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     value,
     ...rest
   } = _ref;
+  const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
   } = React.useRef(nodeId || uniqueId["default"]());
-  const [expanded, setExpanded] = React.useState(isExpanded);
+  const controllableExpandedState = useControllableState.useControllableState({
+    value: isExpanded,
+    onChange: onToggle,
+    defaultValue: defaultIsExpanded
+  });
+  const uncontrollableExpandedState = React.useState(isExpanded);
+  const [expanded, setExpanded] = enableTreeviewControllable ? controllableExpandedState : uncontrollableExpandedState;
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
@@ -83,12 +93,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
     // Prevent the node from being selected
     event.stopPropagation();
-    onToggle?.(event, {
-      id,
-      isExpanded: !expanded,
-      label,
-      value
-    });
+    if (!enableTreeviewControllable) {
+      onToggle?.(event, {
+        id,
+        isExpanded: !expanded,
+        label,
+        value
+      });
+    }
     setExpanded(!expanded);
   }
   function handleClick(event) {
@@ -125,12 +137,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
         return findParentTreeNode(node.parentNode);
       };
       if (children && expanded) {
-        onToggle?.(event, {
-          id,
-          isExpanded: false,
-          label,
-          value
-        });
+        if (!enableTreeviewControllable) {
+          onToggle?.(event, {
+            id,
+            isExpanded: false,
+            label,
+            value
+          });
+        }
         setExpanded(false);
       } else {
         /**
@@ -148,12 +162,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle?.(event, {
-          id,
-          isExpanded: true,
-          label,
-          value
-        });
+        if (!enableTreeviewControllable) {
+          onToggle?.(event, {
+            id,
+            isExpanded: true,
+            label,
+            value
+          });
+        }
         setExpanded(true);
       }
     }
@@ -204,10 +220,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
       currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
     }
-
-    // sync props and state
-    setExpanded(isExpanded);
-  }, [children, depth, Icon, isExpanded]);
+    if (!enableTreeviewControllable) {
+      // sync props and state
+      setExpanded(isExpanded);
+    }
+  }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
   const treeNodeProps = {
     ...rest,
     ['aria-current']: isActive || null,
@@ -270,7 +287,12 @@ TreeNode.propTypes = {
    */
   className: PropTypes__default["default"].string,
   /**
-   * * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * **[Experimental]** The default expansion state of the node.
+   * *This is only supported with the `enable-treeview-controllable` feature flag!*
+   */
+  defaultIsExpanded: PropTypes__default["default"].bool,
+  /**
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * TreeNode depth to determine spacing
    */
   depth: PropTypes__default["default"].number,