@carbon/react 1.68.0 → 1.69.0

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/Tabs/Tabs.js

@@ -333,8 +333,8 @@ function TabList(_ref4) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -345,6 +345,18 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref5) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref5;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce.useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
@@ -430,10 +442,10 @@ function TabList(_ref4) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable.usePressable(previousButton, {
-    onPress(_ref5) {
+    onPress(_ref6) {
       let {
         longPress
-      } = _ref5;
+      } = _ref6;
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -443,10 +455,10 @@ function TabList(_ref4) {
     }
   });
   usePressable.usePressable(nextButton, {
-    onPress(_ref6) {
+    onPress(_ref7) {
       let {
         longPress
-      } = _ref6;
+      } = _ref7;
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -470,7 +482,8 @@ function TabList(_ref4) {
     role: "tablist",
     className: `${prefix}--tab--list`,
     onScroll: debouncedOnScroll,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default["default"].Children.map(children, (child, index) => {
     return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
@@ -555,7 +568,7 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref7) {
+function TabListVertical(_ref8) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -563,7 +576,7 @@ function TabListVertical(_ref7) {
     className: customClassName,
     scrollIntoView,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     activeIndex,
     selectedIndex,
@@ -580,8 +593,8 @@ function TabListVertical(_ref7) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowDown, keys.ArrowUp, keys.Home, keys.End])) {
       event.preventDefault();
-      const filtredTabs = tabs.current.filter(tab => tab !== null);
-      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const filteredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filteredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -592,6 +605,18 @@ function TabListVertical(_ref7) {
       tabs.current[nextIndex]?.focus();
     }
   }
+  function handleBlur(_ref9) {
+    let {
+      relatedTarget: currentActiveNode
+    } = _ref9;
+    if (ref.current?.contains(currentActiveNode)) {
+      return;
+    }
+    // reset active index to selected tab index for manual activation
+    if (activation === 'manual') {
+      setActiveIndex(selectedIndex);
+    }
+  }
   useEffectOnce.useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
@@ -658,7 +683,8 @@ function TabListVertical(_ref7) {
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur
   }), React__default["default"].Children.map(children, (child, index) => {
     return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
@@ -741,7 +767,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   let {
     as = 'button',
     children,
@@ -752,7 +778,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref8;
+  } = _ref10;
   const prefix = usePrefix.usePrefix();
   const {
     selectedIndex,
@@ -994,7 +1020,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref9, ref) {
+const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref11, ref) {
   let {
     children,
     className: customClassName,
@@ -1003,7 +1029,7 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
     leaveDelayMs,
     label,
     ...rest
-  } = _ref9;
+  } = _ref11;
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
@@ -1052,12 +1078,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref10, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref12, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref10;
+  } = _ref12;
   const prefix = usePrefix.usePrefix();
   const panel = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
@@ -1132,10 +1158,10 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref11) {
+function TabPanels(_ref13) {
   let {
     children
-  } = _ref11;
+  } = _ref13;
   const prefix = usePrefix.usePrefix();
   const refs = React.useRef([]);
   const hiddenStates = React.useRef([]);

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 {
@@ -26,6 +26,14 @@ export interface SelectableTagBaseProps {
      * Can be a React component class
      */
     renderIcon?: React.ElementType;
+    /**
+     * Provide an optional hook that is called when selected is changed
+     */
+    onChange?: (selected: boolean) => void;
+    /**
+     * Provide an optional function to be called when the tag is clicked.
+     */
+    onClick?: (e: Event) => void;
     /**
      * Specify the state of the selectable tag.
      */
@@ -35,10 +43,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 +50,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, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -65,6 +69,14 @@ declare const SelectableTag: {
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional hook that is called when selected is changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the tag is clicked.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Specify the state of the selectable tag.
          */
@@ -74,10 +86,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

@@ -34,8 +34,9 @@ const SelectableTag = _ref => {
     disabled,
     id,
     renderIcon,
+    onChange,
+    onClick,
     selected = false,
-    slug,
     size,
     text,
     ...other
@@ -52,21 +53,12 @@ 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
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {
-    onClick,
-    ...otherProps
-  } = other;
+  const handleClick = e => {
+    setSelectedTag(!selectedTag);
+    onChange?.(!selectedTag);
+    onClick?.(e);
+  };
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
       label: text,
@@ -75,31 +67,29 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-      "aria-pressed": selectedTag,
+      "aria-pressed": selectedTag !== false,
       ref: tagRef,
-      slug: slug,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
       className: tagClasses,
       id: tagId,
-      onClick: () => setSelectedTag(!selectedTag)
-    }, otherProps), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      onClick: handleClick
+    }, 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"]({
-    "aria-pressed": selectedTag,
+    "aria-pressed": selectedTag !== false,
     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, {
+    onClick: handleClick
+  }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
@@ -122,6 +112,14 @@ SelectableTag.propTypes = {
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Provide an optional hook that is called when selected is changed
+   */
+  onChange: PropTypes__default["default"].func,
+  /**
+   * Provide an optional function to be called when the tag is clicked.
+   */
+  onClick: PropTypes__default["default"].func,
   /**
    * Specify the state of the selectable tag.
    */
@@ -131,10 +129,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)));