@carbon/react 1.68.0 → 1.69.0-rc.0

package/lib/components/Popover/index.js

@@ -21,6 +21,7 @@ var useEvent = require('../../internal/useEvent.js');
 var createPropAdapter = require('../../tools/createPropAdapter.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -75,6 +76,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   const floating = React.useRef(null);
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = createPropAdapter.mapPopoverAlignProp(initialAlign);
 
   // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
@@ -127,7 +129,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     floatingStyles,
     placement,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     placement: align,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -135,13 +137,15 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), react.flip({
+    middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.flip({
       fallbackAxisSideDirection: 'start'
     }), react.arrow({
       element: caretRef
-    }), floatingUi_dom.hide()],
+    }), autoAlign && floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   const value = React.useMemo(() => {
     return {
@@ -158,7 +162,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     }
   }
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -190,7 +194,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
         }
       }
     }
-  }, [floatingStyles, refs.floating, autoAlign, middlewareData, placement, caret]);
+  }, [floatingStyles, refs.floating, enableFloatingStyles, middlewareData, placement, caret]);
   const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
   const currentAlignment = autoAlign && placement !== align ? placement : align;
   const className = cx__default["default"]({
@@ -199,7 +203,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
+    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
@@ -215,8 +219,8 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
      * is on, even if they are a trigger element.
      */
     const isTriggerElement = item?.type === 'button';
-    const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
-    const isAllowedTriggerComponent = autoAlign && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
+    const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if ( /*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;
@@ -235,7 +239,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these caes we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (autoAlign && item?.type?.displayName !== 'PopoverContent' || autoAlign && item?.type?.displayName === 'ToggletipButton') {
+          if (enableFloatingStyles && item?.type?.displayName !== 'PopoverContent' || enableFloatingStyles && item?.type?.displayName === 'ToggletipButton') {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }
@@ -258,7 +262,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref
-  }), autoAlign || isTabTip ? mappedChildren : children));
+  }), enableFloatingStyles || isTabTip ? mappedChildren : children));
 });
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
@@ -269,7 +273,6 @@ if (process.env.NODE_ENV !== "production") {
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
-   
    */
   align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
   // deprecated use top-start instead
@@ -355,18 +358,19 @@ _ref2, forwardRef) {
     autoAlign
   } = React__default["default"].useContext(PopoverContext);
   const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"](`${prefix}--popover-content`, className),
     ref: ref
-  }, children, autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, children, enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]({
       [`${prefix}--popover-caret`]: true,
       [`${prefix}--popover--auto-align`]: true
     }),
     ref: caretRef
-  })), !autoAlign && /*#__PURE__*/React__default["default"].createElement("span", {
+  })), !enableFloatingStyles && /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]({
       [`${prefix}--popover-caret`]: true
     }),

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

@@ -0,0 +1,25 @@
+/**
+ * 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, { ReactNode } from 'react';
+interface PortalProps {
+    /**
+     * Specify the children elements to be rendered inside of the <Portal>
+     */
+    children: ReactNode;
+    /**
+     * Provide a ref for a container node to render the portal
+     */
+    container?: React.RefObject<HTMLElement>;
+}
+/**
+ * Helper component for rendering content within a portal. By default, the
+ * portal will render into document.body. You can customize this behavior with
+ * the `container` prop. Any `children` provided to this component will be
+ * rendered inside of the container.
+ */
+declare function Portal({ container, children, }: PortalProps): React.ReactPortal | null;
+export { Portal };

package/lib/components/Slider/Slider.js

@@ -1114,7 +1114,7 @@ class Slider extends React.PureComponent {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
-        tabIndex: !readOnly ? 0 : -1,
+        tabIndex: readOnly || disabled ? undefined : 0,
         "aria-valuetext": `${formatLabel(value, '')}`,
         "aria-valuemax": twoHandles ? valueUpper : max,
         "aria-valuemin": min,
@@ -1133,7 +1133,7 @@ class Slider extends React.PureComponent {
       }, upperThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: upperThumbClasses,
         role: "slider",
-        tabIndex: !readOnly ? 0 : -1,
+        tabIndex: readOnly || disabled ? undefined : 0,
         "aria-valuemax": max,
         "aria-valuemin": value,
         "aria-valuenow": valueUpper,

package/lib/components/Tag/DismissibleTag.js

@@ -89,7 +89,7 @@ const DismissibleTag = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
-  }, text), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+  }, text), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
     align: "bottom",
     className: tooltipClasses,
@@ -101,7 +101,7 @@ const DismissibleTag = _ref => {
     onClick: handleClose,
     disabled: disabled,
     "aria-label": title
-  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))), normalizedSlug));
+  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))))));
 };
 DismissibleTag.propTypes = {
   /**

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 declare const TYPES: {
@@ -44,10 +44,6 @@ export interface OperationalTagBaseProps {
      * `md` (default) or `lg` sizes.
      */
     size?: keyof typeof SIZES;
-    /**
-     * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-     */
-    slug?: ReactNode;
     /**
      * Provide text to be rendered inside of a the tag.
      */
@@ -59,7 +55,7 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -83,10 +79,6 @@ declare const OperationalTag: {
          * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/lib/components/Tag/OperationalTag.js

@@ -46,7 +46,6 @@ const OperationalTag = _ref => {
     disabled,
     id,
     renderIcon,
-    slug,
     size,
     text,
     type = 'gray',
@@ -61,13 +60,6 @@ const OperationalTag = _ref => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
   const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
@@ -88,7 +80,7 @@ const OperationalTag = _ref => {
     }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       title: text,
       className: `${prefix}--tag__label`
-    }, text), normalizedSlug));
+    }, text)));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
     ref: tagRef,
@@ -98,7 +90,7 @@ const OperationalTag = _ref => {
     disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -126,10 +118,6 @@ OperationalTag.propTypes = {
    * `md` (default) or `lg` sizes.
    */
   size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-   */
-  slug: PropTypes__default["default"].node,
   /**
    * Provide text to be rendered inside of a the tag.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -35,10 +35,6 @@ export interface SelectableTagBaseProps {
      * `md` (default) or `lg` sizes.
      */
     size?: keyof typeof SIZES;
-    /**
-     * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-     */
-    slug?: ReactNode;
     /**
      * Provide text to be rendered inside of a the tag.
      */
@@ -46,7 +42,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -74,10 +70,6 @@ declare const SelectableTag: {
          * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/lib/components/Tag/SelectableTag.js

@@ -35,7 +35,6 @@ const SelectableTag = _ref => {
     id,
     renderIcon,
     selected = false,
-    slug,
     size,
     text,
     ...other
@@ -52,13 +51,6 @@ const SelectableTag = _ref => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
   const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 
   // Removing onClick from the spread operator
@@ -77,7 +69,6 @@ const SelectableTag = _ref => {
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
       "aria-pressed": selectedTag,
       ref: tagRef,
-      slug: slug,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
@@ -87,19 +78,18 @@ const SelectableTag = _ref => {
     }, otherProps), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       title: text,
       className: `${prefix}--tag__label`
-    }, text), normalizedSlug));
+    }, text)));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
     "aria-pressed": selectedTag,
     ref: tagRef,
-    slug: slug,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
     className: tagClasses,
     id: tagId,
     onClick: () => setSelectedTag(!selectedTag)
-  }, otherProps), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -131,10 +121,6 @@ SelectableTag.propTypes = {
    * `md` (default) or `lg` sizes.
    */
   size: PropTypes__default["default"].oneOf(Object.keys(Tag.SIZES)),
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-   */
-  slug: PropTypes__default["default"].node,
   /**
    * Provide text to be rendered inside of a the tag.
    */

package/lib/components/Toggle/Toggle.js

@@ -113,6 +113,8 @@ function Toggle(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: switchClasses
     }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
       className: `${prefix}--toggle__check`,
       width: "6px",
       height: "5px",

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+interface ToggleSmallSkeletonProps {
+    ['aria-label']: string;
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Provide an id that unique represents the underlying `<input>`
+     */
+    id?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     * `aria-label` is always required but will be null if `labelText` is also
+     * provided
+     */
+    labelText?: string;
+}
+declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonProps> {
+    static propTypes: {
+        "aria-label": PropTypes.Validator<string>;
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an id that unique represents the underlying `<input>`
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the text that will be read by a screen reader when visiting this
+         * control
+         * `aria-label` is always required but will be null if `labelText` is also
+         * provided
+         */
+        labelText: PropTypes.Requireable<string>;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default ToggleSmallSkeleton;
+export { ToggleSmallSkeleton };

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * from './ToggleSmall.Skeleton';

package/lib/components/TreeView/TreeNode.js

@@ -281,9 +281,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     className: `${prefix}--tree-node__label__details`
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: `${prefix}--tree-node__icon`
-  }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
+  }), label)), /*#__PURE__*/React__default["default"].createElement("ul", {
     role: "group",
-    className: `${prefix}--tree-node__children`
+    className: cx__default["default"](`${prefix}--tree-node__children`, {
+      [`${prefix}--tree-node--hidden`]: !expanded
+    })
   }, nodesWithProps));
 });
 TreeNode.propTypes = {

package/lib/components/TreeView/TreeView.js

@@ -161,12 +161,12 @@ const TreeView = _ref => {
     }])) {
       const nodeIds = [];
       if (match.matches(event, [keys.Home, keys.End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
           nodeIds.push(treeWalker.current.currentNode?.id);
         }
         while (match.match(event, keys.Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
-          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled')) {
+          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled') && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) {
             nodeIds.push(nextFocusNode?.id);
           }
         }
@@ -177,7 +177,7 @@ const TreeView = _ref => {
       }) && event.ctrlKey) {
         treeWalker.current.currentNode = treeWalker.current.root;
         while (treeWalker.current.nextNode()) {
-          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
+          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
             nodeIds.push(treeWalker.current.currentNode?.id);
           }
         }
@@ -199,7 +199,7 @@ const TreeView = _ref => {
         if (!(node instanceof Element)) {
           return NodeFilter.FILTER_SKIP;
         }
-        if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
+        if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
           return NodeFilter.FILTER_REJECT;
         }
         if (node.matches(`li.${prefix}--tree-node`)) {

package/lib/components/UIShell/SideNavMenuItem.d.ts

@@ -4,8 +4,9 @@
  * 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, { HTMLAttributes } from 'react';
-interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
+import React, { ComponentProps } from 'react';
+import Link from './Link';
+interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
      * Specify the children to be rendered inside of the `SideNavMenuItem`
      */
@@ -25,5 +26,5 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
      */
     href?: string;
 }
-declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
+declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/lib/components/UIShell/SideNavMenuItem.js

@@ -29,7 +29,6 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     children,
     className: customClassName,
     isActive,
-    href,
     ...rest
   } = props;
   const className = cx__default["default"](`${prefix}--side-nav__menu-item`, customClassName);
@@ -39,9 +38,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
   });
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
-    href: href
-  }, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));

package/lib/index.js

@@ -22,6 +22,7 @@ var Button_Skeleton = require('./components/Button/Button.Skeleton.js');
 var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
 var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
+var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var index$4 = require('./components/ClassPrefix/index.js');
 var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
@@ -215,7 +216,6 @@ var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js')
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
 var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
-var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var DataTable = require('./components/DataTable/DataTable.js');
 var Table = require('./components/DataTable/Table.js');
 var TableActionList = require('./components/DataTable/TableActionList.js');
@@ -259,6 +259,7 @@ exports.ButtonSkeleton = Button_Skeleton["default"];
 exports.ButtonSet = ButtonSet["default"];
 exports.Checkbox = Checkbox["default"];
 exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
+exports.CheckboxGroup = CheckboxGroup["default"];
 exports.ClassPrefix = index$4.ClassPrefix;
 exports.CodeSnippet = CodeSnippet["default"];
 exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
@@ -498,7 +499,6 @@ exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
 exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
-exports.CheckboxGroup = CheckboxGroup["default"];
 exports.DataTable = DataTable["default"];
 exports.Table = Table.Table;
 exports.TableActionList = TableActionList["default"];

package/lib/internal/useIdPrefix.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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';
+export declare const IdPrefixContext: React.Context<string | null | undefined>;
+export declare function useIdPrefix(): string | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.68.0",
+  "version": "1.69.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.23.0",
-    "@carbon/icons-react": "^11.51.0",
-    "@carbon/layout": "^11.27.0",
-    "@carbon/styles": "^1.67.0",
+    "@carbon/feature-flags": "^0.24.0-rc.0",
+    "@carbon/icons-react": "^11.52.0-rc.0",
+    "@carbon/layout": "^11.28.0-rc.0",
+    "@carbon/styles": "^1.68.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.33.0",
-    "@carbon/themes": "^11.42.0",
+    "@carbon/themes": "^11.43.0-rc.0",
     "@figma/code-connect": "^1.1.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
@@ -144,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a4e466817cb1f68711d5691468dd12a6756c275e"
+  "gitHead": "e48f5e6815bd93e518e8da73c7555590b85cda22"
 }