@carbon/react 1.41.1 → 1.42.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +720 -652
  2. package/es/components/Breadcrumb/Breadcrumb.Skeleton.d.ts +25 -0
  3. package/es/components/Breadcrumb/Breadcrumb.d.ts +24 -0
  4. package/es/components/Breadcrumb/Breadcrumb.js +1 -2
  5. package/es/components/Breadcrumb/BreadcrumbItem.d.ts +25 -0
  6. package/es/components/Breadcrumb/BreadcrumbItem.js +8 -7
  7. package/es/components/ComboBox/ComboBox.d.ts +7 -1
  8. package/es/components/ComboBox/ComboBox.js +30 -2
  9. package/es/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
  10. package/es/components/DataTable/TableBatchAction.d.ts +46 -0
  11. package/es/components/DataTable/TableBatchAction.js +1 -2
  12. package/es/components/DataTable/TableExpandRow.d.ts +2 -46
  13. package/es/components/DataTable/TableExpandRow.js +6 -2
  14. package/es/components/Dropdown/Dropdown.d.ts +1 -1
  15. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  16. package/es/components/Notification/Notification.d.ts +8 -8
  17. package/es/components/Tabs/Tabs.js +1 -2
  18. package/es/components/TreeView/TreeNode.js +7 -4
  19. package/es/components/UIShell/HeaderMenu.js +2 -2
  20. package/es/components/UIShell/SideNav.d.ts +1 -1
  21. package/es/components/UIShell/SideNavFooter.d.ts +52 -0
  22. package/es/components/UIShell/SideNavFooter.js +0 -1
  23. package/es/components/UIShell/SideNavItem.d.ts +24 -0
  24. package/es/components/UIShell/SideNavItem.js +2 -2
  25. package/es/components/UIShell/SideNavMenu.js +4 -5
  26. package/es/components/UIShell/SideNavMenuItem.d.ts +25 -0
  27. package/es/components/UIShell/SideNavMenuItem.js +1 -2
  28. package/es/index.js +1 -1
  29. package/icons/index.d.ts +7 -0
  30. package/lib/components/Breadcrumb/Breadcrumb.Skeleton.d.ts +25 -0
  31. package/lib/components/Breadcrumb/Breadcrumb.d.ts +24 -0
  32. package/lib/components/Breadcrumb/Breadcrumb.js +1 -2
  33. package/lib/components/Breadcrumb/BreadcrumbItem.d.ts +25 -0
  34. package/lib/components/Breadcrumb/BreadcrumbItem.js +8 -7
  35. package/lib/components/ComboBox/ComboBox.d.ts +7 -1
  36. package/lib/components/ComboBox/ComboBox.js +30 -2
  37. package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
  38. package/lib/components/DataTable/TableBatchAction.d.ts +46 -0
  39. package/lib/components/DataTable/TableBatchAction.js +1 -2
  40. package/lib/components/DataTable/TableExpandRow.d.ts +2 -46
  41. package/lib/components/DataTable/TableExpandRow.js +6 -2
  42. package/lib/components/Dropdown/Dropdown.d.ts +1 -1
  43. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  44. package/lib/components/Notification/Notification.d.ts +8 -8
  45. package/lib/components/Tabs/Tabs.js +1 -2
  46. package/lib/components/TreeView/TreeNode.js +7 -4
  47. package/lib/components/UIShell/HeaderMenu.js +2 -2
  48. package/lib/components/UIShell/SideNav.d.ts +1 -1
  49. package/lib/components/UIShell/SideNavFooter.d.ts +52 -0
  50. package/lib/components/UIShell/SideNavFooter.js +0 -1
  51. package/lib/components/UIShell/SideNavItem.d.ts +24 -0
  52. package/lib/components/UIShell/SideNavItem.js +2 -2
  53. package/lib/components/UIShell/SideNavMenu.js +4 -5
  54. package/lib/components/UIShell/SideNavMenuItem.d.ts +25 -0
  55. package/lib/components/UIShell/SideNavMenuItem.js +1 -2
  56. package/lib/index.js +2 -2
  57. package/package.json +8 -7
@@ -25,7 +25,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
25
25
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
26
26
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
27
27
 
28
- function TreeNode(_ref) {
28
+ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
29
29
  let {
30
30
  active,
31
31
  children,
@@ -230,7 +230,8 @@ function TreeNode(_ref) {
230
230
  /*#__PURE__*/
231
231
  // eslint-disable-next-line jsx-a11y/role-supports-aria-props
232
232
  React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
233
- "aria-expanded": !!expanded
233
+ "aria-expanded": !!expanded,
234
+ ref: ref
234
235
  }), /*#__PURE__*/React__default["default"].createElement("div", {
235
236
  className: `${prefix}--tree-node__label`,
236
237
  ref: currentNodeLabel
@@ -249,7 +250,7 @@ function TreeNode(_ref) {
249
250
  className: `${prefix}--tree-node__children`
250
251
  }, nodesWithProps))
251
252
  );
252
- }
253
+ });
253
254
  TreeNode.propTypes = {
254
255
  /**
255
256
  * The value of the active node in the tree
@@ -309,5 +310,7 @@ TreeNode.propTypes = {
309
310
  */
310
311
  value: PropTypes__default["default"].string
311
312
  };
313
+ TreeNode.displayName = 'TreeNode';
314
+ var TreeNode$1 = TreeNode;
312
315
 
313
- exports["default"] = TreeNode;
316
+ exports["default"] = TreeNode$1;
@@ -158,7 +158,7 @@ class HeaderMenu extends React__default["default"].Component {
158
158
  onKeyDown,
159
159
  ...rest
160
160
  } = this.props;
161
- const hasActiveChildren = React__default["default"].Children.toArray(children).some(child => child.props.isActive || child.props.isCurrentPage);
161
+ const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children));
162
162
  const accessibilityLabel = {
163
163
  'aria-label': ariaLabel,
164
164
  'aria-labelledby': ariaLabelledBy
@@ -173,7 +173,7 @@ class HeaderMenu extends React__default["default"].Component {
173
173
  [`${prefix}--header__menu-title`]: true,
174
174
  // We set the current class only if `isActive` is passed in and we do
175
175
  // not have an `aria-current="page"` set for the breadcrumb item
176
- [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveChildren && !this.state.expanded
176
+ [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !this.state.expanded
177
177
  });
178
178
 
179
179
  // Notes on eslint comments and based on the examples in:
@@ -25,5 +25,5 @@ interface SideNavContextData {
25
25
  isRail?: boolean | undefined;
26
26
  }
27
27
  export declare const SideNavContext: React.Context<SideNavContextData>;
28
- 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" | "tabIndex" | "color" | "lang" | "role" | "href" | "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" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
28
+ 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" | "tabIndex" | "color" | "lang" | "role" | "href" | "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" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "expanded" | "enterDelayMs" | "defaultExpanded" | "inert" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
29
29
  export default SideNav;
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ import PropTypes from 'prop-types';
9
+ export interface SideNavFooterProps {
10
+ /**
11
+ * Provide text to be read to screen readers and shown as a tooltip when
12
+ * interacting with the toggle button in the footer
13
+ */
14
+ assistiveText: string;
15
+ className?: string;
16
+ /**
17
+ * Specify whether the side navigation is expanded or collapsed
18
+ */
19
+ expanded: boolean;
20
+ /**
21
+ * Provide a function that is called when the toggle button is interacted
22
+ * with. Useful for controlling the expansion state of the side navigation.
23
+ */
24
+ onToggle: (event: React.MouseEvent<HTMLButtonElement>) => void;
25
+ }
26
+ /**
27
+ * SideNavFooter is used for rendering the button at the bottom of the side
28
+ * navigation that is a part of the UI Shell. It is responsible for handling the
29
+ * user interaction to expand or collapse the side navigation.
30
+ */
31
+ declare function SideNavFooter({ assistiveText, className: customClassName, expanded, onToggle, }: SideNavFooterProps): JSX.Element;
32
+ declare namespace SideNavFooter {
33
+ var displayName: string;
34
+ var propTypes: {
35
+ /**
36
+ * Provide text to be read to screen readers and shown as a tooltip when
37
+ * interacting with the toggle button in the footer
38
+ */
39
+ assistiveText: PropTypes.Requireable<string>;
40
+ className: PropTypes.Requireable<string>;
41
+ /**
42
+ * Specify whether the side navigation is expanded or collapsed
43
+ */
44
+ expanded: PropTypes.Validator<boolean>;
45
+ /**
46
+ * Provide a function that is called when the toggle button is interacted
47
+ * with. Useful for controlling the expansion state of the side navigation.
48
+ */
49
+ onToggle: PropTypes.Validator<(...args: any[]) => any>;
50
+ };
51
+ }
52
+ export default SideNavFooter;
@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
22
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
23
 
24
24
  var _Close, _ChevronRight;
25
-
26
25
  /**
27
26
  * SideNavFooter is used for rendering the button at the bottom of the side
28
27
  * navigation that is a part of the UI Shell. It is responsible for handling the
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ interface SideNavItemProps {
9
+ /**
10
+ * Provide a single icon as the child to `SideNavItem` to render in the
11
+ * container
12
+ */
13
+ children: React.ReactNode;
14
+ /**
15
+ * Provide an optional class to be applied to the containing node
16
+ */
17
+ className?: string;
18
+ /**
19
+ * Specify if this is a large variation of the SideNavItem
20
+ */
21
+ large?: boolean;
22
+ }
23
+ declare const SideNavItem: React.FC<SideNavItemProps>;
24
+ export default SideNavItem;
@@ -20,7 +20,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
20
20
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
21
21
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
22
 
23
- function SideNavItem(_ref) {
23
+ const SideNavItem = _ref => {
24
24
  let {
25
25
  className: customClassName,
26
26
  children,
@@ -35,7 +35,7 @@ function SideNavItem(_ref) {
35
35
  return /*#__PURE__*/React__default["default"].createElement("li", {
36
36
  className: className
37
37
  }, children);
38
- }
38
+ };
39
39
  SideNavItem.propTypes = {
40
40
  /**
41
41
  * Provide a single icon as the child to `SideNavItem` to render in the
@@ -44,7 +44,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
44
44
  const [prevExpanded, setPrevExpanded] = React.useState(defaultExpanded);
45
45
  const className = cx__default["default"]({
46
46
  [`${prefix}--side-nav__item`]: true,
47
- [`${prefix}--side-nav__item--active`]: isActive || hasActiveChild(children) && !isExpanded,
47
+ [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
48
48
  [`${prefix}--side-nav__item--icon`]: IconElement,
49
49
  [`${prefix}--side-nav__item--large`]: large,
50
50
  [customClassName]: !!customClassName
@@ -76,8 +76,7 @@ const SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function S
76
76
  type: "button",
77
77
  tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
78
78
  }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
79
- className: `${prefix}--side-nav__submenu-title`,
80
- title: title
79
+ className: `${prefix}--side-nav__submenu-title`
81
80
  }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
82
81
  className: `${prefix}--side-nav__submenu-chevron`,
83
82
  small: true
@@ -137,7 +136,7 @@ SideNavMenu.propTypes = {
137
136
  Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
138
137
  a single element, an array of elements, or null or undefined.
139
138
  **/
140
- function hasActiveChild(children) {
139
+ function hasActiveDescendant(children) {
141
140
  if (Array.isArray(children)) {
142
141
  return children.some(child => {
143
142
  if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
@@ -148,7 +147,7 @@ function hasActiveChild(children) {
148
147
  safety when accessing their props.
149
148
  **/
150
149
  const props = child.props;
151
- if (props.isActive === true || props['aria-current']) {
150
+ if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
152
151
  return true;
153
152
  }
154
153
  return false;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { HTMLAttributes } from 'react';
8
+ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
9
+ /**
10
+ * Specify the children to be rendered inside of the `SideNavMenuItem`
11
+ */
12
+ children?: React.ReactNode;
13
+ /**
14
+ * Provide an optional class to be applied to the containing node
15
+ */
16
+ className?: string;
17
+ /**
18
+ * Optionally specify whether the link is "active". An active link is one that
19
+ * has an href that is the same as the current page. Can also pass in
20
+ * `aria-current="page"`, as well.
21
+ */
22
+ isActive?: boolean;
23
+ }
24
+ declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
25
+ export default SideNavMenuItem;
@@ -60,6 +60,5 @@ SideNavMenuItem.propTypes = {
60
60
  */
61
61
  isActive: PropTypes__default["default"].bool
62
62
  };
63
- var SideNavMenuItem$1 = SideNavMenuItem;
64
63
 
65
- exports["default"] = SideNavMenuItem$1;
64
+ exports["default"] = SideNavMenuItem;
package/lib/index.js CHANGED
@@ -165,7 +165,6 @@ var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
165
165
  var ProgressIndicator_Skeleton = require('./components/ProgressIndicator/ProgressIndicator.Skeleton.js');
166
166
  var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
167
167
  var TextInput = require('./components/TextInput/TextInput.js');
168
- var TreeNode = require('./components/TreeView/TreeNode.js');
169
168
  var TreeView = require('./components/TreeView/TreeView.js');
170
169
  var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
171
170
  var FluidComboBox = require('./components/FluidComboBox/FluidComboBox.js');
@@ -223,6 +222,7 @@ var SkeletonIcon = require('./components/SkeletonIcon/SkeletonIcon.js');
223
222
  var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
224
223
  var Switch = require('./components/Switch/Switch.js');
225
224
  var IconSwitch = require('./components/Switch/IconSwitch.js');
225
+ var TreeNode = require('./components/TreeView/TreeNode.js');
226
226
  var Stack = require('./components/Stack/Stack.js');
227
227
 
228
228
 
@@ -418,7 +418,6 @@ exports.ModalWrapper = ModalWrapper["default"];
418
418
  exports.ProgressIndicatorSkeleton = ProgressIndicator_Skeleton["default"];
419
419
  exports.TextInputSkeleton = TextInput_Skeleton["default"];
420
420
  exports.TextInput = TextInput["default"];
421
- exports.TreeNode = TreeNode["default"];
422
421
  exports.TreeView = TreeView["default"];
423
422
  exports.ProgressBar = ProgressBar["default"];
424
423
  exports.unstable__FluidComboBox = FluidComboBox["default"];
@@ -481,4 +480,5 @@ exports.SkeletonIcon = SkeletonIcon["default"];
481
480
  exports.SliderSkeleton = Slider_Skeleton["default"];
482
481
  exports.Switch = Switch["default"];
483
482
  exports.IconSwitch = IconSwitch["default"];
483
+ exports.TreeNode = TreeNode["default"];
484
484
  exports.Stack = Stack.Stack;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.41.1",
4
+ "version": "1.42.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -18,6 +18,7 @@
18
18
  "index.scss",
19
19
  "icons/index.js",
20
20
  "icons/index.esm.js",
21
+ "icons/index.d.ts",
21
22
  "icons/package.json",
22
23
  ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
23
24
  ],
@@ -47,9 +48,9 @@
47
48
  "dependencies": {
48
49
  "@babel/runtime": "^7.18.3",
49
50
  "@carbon/feature-flags": "^0.16.0",
50
- "@carbon/icons-react": "^11.29.1",
51
- "@carbon/layout": "^11.20.1",
52
- "@carbon/styles": "^1.41.1",
51
+ "@carbon/icons-react": "^11.30.0-rc.0",
52
+ "@carbon/layout": "^11.20.0",
53
+ "@carbon/styles": "^1.42.0-rc.0",
53
54
  "@carbon/telemetry": "0.1.0",
54
55
  "classnames": "2.3.2",
55
56
  "copy-to-clipboard": "^3.3.1",
@@ -77,7 +78,7 @@
77
78
  "@babel/preset-react": "^7.22.3",
78
79
  "@babel/preset-typescript": "^7.21.5",
79
80
  "@carbon/test-utils": "^10.30.0",
80
- "@carbon/themes": "^11.26.1",
81
+ "@carbon/themes": "^11.26.0",
81
82
  "@rollup/plugin-babel": "^6.0.0",
82
83
  "@rollup/plugin-commonjs": "^25.0.0",
83
84
  "@rollup/plugin-node-resolve": "^15.0.0",
@@ -124,7 +125,7 @@
124
125
  "storybook-readme": "^5.0.9",
125
126
  "stream-browserify": "^3.0.0",
126
127
  "style-loader": "^3.3.1",
127
- "typescript-config-carbon": "^0.2.1",
128
+ "typescript-config-carbon": "^0.2.0",
128
129
  "webpack": "^5.65.0",
129
130
  "webpack-dev-server": "^4.7.4"
130
131
  },
@@ -139,5 +140,5 @@
139
140
  "**/*.scss",
140
141
  "**/*.css"
141
142
  ],
142
- "gitHead": "d6904c019acc9b8cb8f5a01732bc963a71fa93bf"
143
+ "gitHead": "5f47b0432b76b562cb152b481fe82d21e74da6d9"
143
144
  }