@carbon/react 1.34.1 → 1.35.0

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -44,8 +44,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     compareItems,
     direction,
@@ -324,9 +322,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setInputValue('');
           }
         });
-        const menuProps = getMenuProps({
-          'aria-label': ariaLabel
-        }, {
+        const menuProps = getMenuProps({}, {
           suppressRefError: true
         });
         const handleFocus = evt => {
@@ -341,7 +337,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
-          "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -431,14 +426,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
 });
 FilterableMultiSelect.propTypes = {
   /**
+   * Deprecated, aria-label is no longer needed
    * Specify a label to be read by screen readers on the container node
    */
-  ['aria-label']: PropTypes__default["default"].string,
+  ['aria-label']: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
-  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -551,7 +547,6 @@ FilterableMultiSelect.propTypes = {
   warnText: PropTypes__default["default"].node
 };
 FilterableMultiSelect.defaultProps = {
-  ['aria-label']: 'Choose an item',
   compareItems: sorting.defaultCompareItems,
   direction: 'bottom',
   disabled: false,

package/lib/components/Select/Select.js

@@ -19,6 +19,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var events = require('../../tools/events.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,6 +48,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     size,
     warn = false,
     warnText,
+    onChange,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -54,6 +56,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
+  const [title, setTitle] = React.useState('');
   const {
     current: selectInstanceId
   } = React.useRef(getInstanceId());
@@ -106,6 +109,9 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
+  const handleChange = evt => {
+    setTitle(evt?.target?.value);
+  };
   const readOnlyEventHandlers = {
     onMouseDown: evt => {
       // NOTE: does not prevent click
@@ -129,7 +135,9 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       className: inputClasses,
       disabled: disabled || undefined,
       "aria-invalid": invalid || undefined,
-      "aria-readonly": readOnly || undefined
+      "aria-readonly": readOnly || undefined,
+      title: title,
+      onChange: events.composeEventHandlers([onChange, handleChange])
     }, readOnlyEventHandlers, {
       ref: ref
     }), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {

package/lib/components/Tabs/Tabs.d.ts

@@ -115,7 +115,7 @@ export interface TabListProps extends DivAttributes {
     /**
      * Provide the props that describe the left overflow button
      */
-    leftOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    leftOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
     /**
      * Specify whether to use the light component variant
      */
@@ -123,7 +123,7 @@ export interface TabListProps extends DivAttributes {
     /**
      * Provide the props that describe the right overflow button
      */
-    rightOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    rightOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
     /**
      * Optionally provide a delay (in milliseconds) passed to the lodash
      * debounce of the onScroll handler. This will impact the responsiveness
@@ -299,7 +299,7 @@ export interface TabPanelsProps {
      */
     children?: ReactNode;
 }
-declare function TabPanels({ children }: TabPanelsProps): JSX.Element[] | null | undefined;
+declare function TabPanels({ children }: TabPanelsProps): JSX.Element;
 declare namespace TabPanels {
     var propTypes: {
         /**

package/lib/components/Tabs/Tabs.js

@@ -802,11 +802,11 @@ function TabPanels(_ref8) {
   let {
     children
   } = _ref8;
-  return React__default["default"].Children.map(children, (child, index) => {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
       value: index
     }, child);
-  });
+  }));
 }
 TabPanels.propTypes = {
   /**

package/lib/components/Tile/Tile.js

@@ -22,6 +22,7 @@ var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var index = require('../FeatureFlags/index.js');
+var useId = require('../../internal/useId.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -385,10 +386,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     if (!aboveTheFold.current || !belowTheFold.current) {
       return;
     }
-    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) {
-      setInteractive(false);
-      return;
-    } else if (!useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current)) {
+
+    // Interactive elements or elements that are given a role should be treated
+    // the same because elements with a role can not be rendered inside a `button`
+    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current)) {
       setInteractive(false);
     }
   }, []);
@@ -413,11 +414,11 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
   }, []);
+  const belowTheFoldId = useId.useId('expandable-tile-interactive');
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     // @ts-expect-error: Needlesly strict & deep typing for the element type
     ref: ref,
-    className: interactiveClassNames,
-    "aria-expanded": isExpanded
+    className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tileContent
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -426,13 +427,15 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     "aria-expanded": isExpanded,
+    "aria-controls": belowTheFoldId,
     onKeyUp: events.composeEventHandlers([onKeyUp, handleKeyUp]),
     onClick: events.composeEventHandlers([onClick, handleClick]),
     "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
     className: chevronInteractiveClassNames
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: belowTheFold,
-    className: `${prefix}--tile-content`
+    className: `${prefix}--tile-content`,
+    id: belowTheFoldId
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button"
     // @ts-expect-error: Needlesly strict & deep typing for the element type

package/lib/components/Tooltip/Tooltip.js

@@ -110,7 +110,7 @@ function Tooltip(_ref) {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
   }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
-    "aria-hidden": "true",
+    "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,
     ref: tooltipRef,

package/lib/components/UIShell/HeaderMenu.js

@@ -17,6 +17,7 @@ var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var events = require('../../tools/events.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -152,6 +153,9 @@ class HeaderMenu extends React__default["default"].Component {
       menuLinkName,
       focusRef,
       // eslint-disable-line no-unused-vars
+      onBlur,
+      onClick,
+      onKeyDown,
       ...rest
     } = this.props;
     const hasActiveChildren = React__default["default"].Children.toArray(children).some(child => child.props.isActive || child.props.isCurrentPage);
@@ -181,9 +185,9 @@ class HeaderMenu extends React__default["default"].Component {
     // - href can be set to javascript:void(0), ideally this will be a button
     return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
       className: itemClassName,
-      onKeyDown: this.handleMenuClose,
-      onClick: this.handleOnClick,
-      onBlur: this.handleOnBlur
+      onKeyDown: events.composeEventHandlers([onKeyDown, this.handleMenuClose]),
+      onClick: events.composeEventHandlers([onClick, this.handleOnClick]),
+      onBlur: events.composeEventHandlers([onBlur, this.handleOnBlur])
     }), /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
       // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
       "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
@@ -228,6 +232,21 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
    * Provide a label for the link text
    */
   menuLinkName: PropTypes__default["default"].string.isRequired,
+  /**
+   * Optionally provide an onBlur handler that is called when the underlying
+   * button fires it's onblur event
+   */
+  onBlur: PropTypes__default["default"].func,
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes__default["default"].func,
+  /**
+   * Optionally provide an onKeyDown handler that is called when the underlying
+   * button fires it's onkeydown event
+   */
+  onKeyDown: PropTypes__default["default"].func,
   /**
    * Optional component to render instead of string
    */

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

@@ -19,6 +19,11 @@ interface SideNavProps extends ComponentProps<'nav'> {
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
+    inert?: boolean;
 }
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
+interface SideNavContextData {
+    isRail?: boolean | undefined;
+}
+export declare const SideNavContext: React.Context<SideNavContextData>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

package/lib/components/UIShell/SideNav.js

@@ -30,6 +30,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
+const SideNavContext = /*#__PURE__*/React.createContext({});
 function SideNavRenderFunction(_ref, ref) {
   let {
     expanded: expandedProp,
@@ -98,27 +99,25 @@ function SideNavRenderFunction(_ref, ref) {
   });
   let childrenToRender = children;
 
-  // if a rail, pass the expansion state as a prop, so children can update themselves to match
-  if (isRail) {
-    childrenToRender = React__default["default"].Children.map(children, child => {
-      // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
-      const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-      if ( /*#__PURE__*/React.isValidElement(child)) {
-        const childJsxElement = child;
-        // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-        return /*#__PURE__*/React__default["default"].cloneElement(childJsxElement, {
-          ...(_utils.CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
-            isSideNavExpanded: currentExpansionState
-          } : {})
-        });
-      }
-      return child;
-    });
-  }
+  // Pass the expansion state as a prop, so children can update themselves to match
+  childrenToRender = React__default["default"].Children.map(children, child => {
+    // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
+    const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      const childJsxElement = child;
+      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+      return /*#__PURE__*/React__default["default"].cloneElement(childJsxElement, {
+        ...(_utils.CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
+          isSideNavExpanded: currentExpansionState
+        } : {})
+      });
+    }
+    return child;
+  });
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onFocus = event => {
-      if (!event.currentTarget.contains(event.relatedTarget)) {
+      if (!event.currentTarget.contains(event.relatedTarget) && isRail) {
         handleToggle(event, true);
       }
     };
@@ -126,7 +125,7 @@ function SideNavRenderFunction(_ref, ref) {
       if (!event.currentTarget.contains(event.relatedTarget)) {
         handleToggle(event, false);
       }
-      if (!event.currentTarget.contains(event.relatedTarget) && expanded) {
+      if (!event.currentTarget.contains(event.relatedTarget) && expanded && !isFixedNav) {
         if (onSideNavBlur) {
           onSideNavBlur();
         }
@@ -163,7 +162,11 @@ function SideNavRenderFunction(_ref, ref) {
       sideNavRef.current.focus();
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFixedNav ? null :
+  return /*#__PURE__*/React__default["default"].createElement(SideNavContext.Provider, {
+    value: {
+      isRail
+    }
+  }, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React__default["default"].createElement("div", {
@@ -172,7 +175,8 @@ function SideNavRenderFunction(_ref, ref) {
   }), /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
     tabIndex: -1,
     ref: navRef,
-    className: `${prefix}--side-nav__navigation ${className}`
+    className: `${prefix}--side-nav__navigation ${className}`,
+    inert: !isRail && (expanded ? undefined : -1)
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 }
 const SideNav = /*#__PURE__*/React__default["default"].forwardRef(SideNavRenderFunction);
@@ -259,4 +263,5 @@ SideNav.propTypes = {
 
 var SideNav$1 = SideNav;
 
+exports.SideNavContext = SideNavContext;
 exports["default"] = SideNav$1;

package/lib/components/UIShell/SideNavLink.js

@@ -18,6 +18,7 @@ var SideNavIcon = require('./SideNavIcon.js');
 var SideNavItem = require('./SideNavItem.js');
 var SideNavLinkText = require('./SideNavLinkText.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var SideNav = require('./SideNav.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,9 +32,12 @@ const SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function S
     className: customClassName,
     renderIcon: IconElement,
     isActive,
+    isSideNavExpanded,
     large = false,
+    tabIndex,
     ...rest
   } = _ref;
+  const isRail = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--side-nav__link`]: true,
@@ -44,7 +48,8 @@ const SideNavLink = /*#__PURE__*/React__default["default"].forwardRef(function S
     large: large
   }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
-    ref: ref
+    ref: ref,
+    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
   }), IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
     small: true
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
@@ -64,6 +69,11 @@ SideNavLink.propTypes = {
    * Specify whether the link is the current page
    */
   isActive: PropTypes__default["default"].bool,
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes__default["default"].bool,
   /**
    * Specify if this is a large variation of the SideNavLink
    */
@@ -71,7 +81,11 @@ SideNavLink.propTypes = {
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
-  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+   */
+  tabIndex: PropTypes__default["default"].number
 };
 var SideNavLink$1 = SideNavLink;
 

package/lib/components/UIShell/SideNavMenu.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var SideNavIcon = require('./SideNavIcon.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var SideNav = require('./SideNav.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -34,8 +35,10 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
+    tabIndex,
     title
   } = props;
+  const isRail = React.useContext(SideNav.SideNavContext);
   const prefix = usePrefix.usePrefix();
   const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
@@ -70,7 +73,8 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
         setIsExpanded(!isExpanded);
       },
       ref: ref,
-      type: "button"
+      type: "button",
+      tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
     }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--side-nav__submenu-title`,
       title: title
@@ -118,6 +122,10 @@ SideNavMenu.propTypes = {
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  /**
+   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+   */
+  tabIndex: PropTypes__default["default"].number,
   /**
    * Provide the text for the overall menu name
    */

package/lib/components/UIShell/_utils.js

@@ -9,6 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const CARBON_SIDENAV_ITEMS = ['SideNavFooter', 'SideNavHeader', 'SideNavItems', 'SideNavMenu'];
+const CARBON_SIDENAV_ITEMS = ['SideNavFooter', 'SideNavHeader', 'SideNavItems', 'SideNavMenu', 'SideNavLink'];
 
 exports.CARBON_SIDENAV_ITEMS = CARBON_SIDENAV_ITEMS;

package/lib/internal/useNoInteractiveChildren.js

@@ -47,6 +47,29 @@ function getInteractiveContent(node) {
   return null;
 }
 
+/**
+ * Determines if a given DOM node has a role, or has itself a role.
+ * It returns the node with a role if one is found
+ *
+ * @param {HTMLElement} node
+ * @returns {HTMLElement}
+ */
+function getRoleContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+  if (node?.getAttribute?.('role') && node.getAttribute('role') !== '') {
+    return node;
+  }
+  for (const childNode of node.childNodes) {
+    const roleNode = getRoleContent(childNode);
+    if (roleNode) {
+      return roleNode;
+    }
+  }
+  return null;
+}
+
 /**
  * Determines if the given element is focusable, or not
  *
@@ -76,4 +99,5 @@ function isFocusable(element) {
 }
 
 exports.getInteractiveContent = getInteractiveContent;
+exports.getRoleContent = getRoleContent;
 exports.useNoInteractiveChildren = useNoInteractiveChildren;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,8 @@
     "react"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
@@ -44,10 +45,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.15.0",
-    "@carbon/icons-react": "^11.23.1",
-    "@carbon/layout": "^11.17.1",
-    "@carbon/styles": "^1.34.1",
+    "@carbon/feature-flags": "^0.16.0",
+    "@carbon/icons-react": "^11.24.0",
+    "@carbon/layout": "^11.18.0",
+    "@carbon/styles": "^1.35.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -75,21 +76,21 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.22.1",
+    "@carbon/themes": "^11.23.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^7.0.23",
-    "@storybook/addon-actions": "^7.0.23",
-    "@storybook/addon-docs": "^7.0.23",
-    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/addon-storysource": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/react-webpack5": "^7.0.23",
-    "@storybook/theming": "^7.0.23",
+    "@storybook/addon-storysource": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-webpack5": "^7.1.0",
+    "@storybook/theming": "^7.1.0",
     "@types/react-is": "~18.2.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -101,7 +102,7 @@
     "css-loader": "^6.5.1",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
@@ -118,7 +119,7 @@
     "rtlcss": "^4.0.0",
     "sass": "^1.51.0",
     "sass-loader": "^13.0.0",
-    "storybook": "^7.0.23",
+    "storybook": "^7.1.0",
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
@@ -137,5 +138,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "22b28f5d05e6caa4565e4e84308abcf2fd977aec"
+  "gitHead": "f9ac32a70a209100bb30ed41edc39c596eae7956"
 }