@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.
- package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +720 -652
- package/es/components/Breadcrumb/Breadcrumb.Skeleton.d.ts +25 -0
- package/es/components/Breadcrumb/Breadcrumb.d.ts +24 -0
- package/es/components/Breadcrumb/Breadcrumb.js +1 -2
- package/es/components/Breadcrumb/BreadcrumbItem.d.ts +25 -0
- package/es/components/Breadcrumb/BreadcrumbItem.js +8 -7
- package/es/components/ComboBox/ComboBox.d.ts +7 -1
- package/es/components/ComboBox/ComboBox.js +30 -2
- package/es/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
- package/es/components/DataTable/TableBatchAction.d.ts +46 -0
- package/es/components/DataTable/TableBatchAction.js +1 -2
- package/es/components/DataTable/TableExpandRow.d.ts +2 -46
- package/es/components/DataTable/TableExpandRow.js +6 -2
- package/es/components/Dropdown/Dropdown.d.ts +1 -1
- package/es/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
- package/es/components/Notification/Notification.d.ts +8 -8
- package/es/components/Tabs/Tabs.js +1 -2
- package/es/components/TreeView/TreeNode.js +7 -4
- package/es/components/UIShell/HeaderMenu.js +2 -2
- package/es/components/UIShell/SideNav.d.ts +1 -1
- package/es/components/UIShell/SideNavFooter.d.ts +52 -0
- package/es/components/UIShell/SideNavFooter.js +0 -1
- package/es/components/UIShell/SideNavItem.d.ts +24 -0
- package/es/components/UIShell/SideNavItem.js +2 -2
- package/es/components/UIShell/SideNavMenu.js +4 -5
- package/es/components/UIShell/SideNavMenuItem.d.ts +25 -0
- package/es/components/UIShell/SideNavMenuItem.js +1 -2
- package/es/index.js +1 -1
- package/icons/index.d.ts +7 -0
- package/lib/components/Breadcrumb/Breadcrumb.Skeleton.d.ts +25 -0
- package/lib/components/Breadcrumb/Breadcrumb.d.ts +24 -0
- package/lib/components/Breadcrumb/Breadcrumb.js +1 -2
- package/lib/components/Breadcrumb/BreadcrumbItem.d.ts +25 -0
- package/lib/components/Breadcrumb/BreadcrumbItem.js +8 -7
- package/lib/components/ComboBox/ComboBox.d.ts +7 -1
- package/lib/components/ComboBox/ComboBox.js +30 -2
- package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
- package/lib/components/DataTable/TableBatchAction.d.ts +46 -0
- package/lib/components/DataTable/TableBatchAction.js +1 -2
- package/lib/components/DataTable/TableExpandRow.d.ts +2 -46
- package/lib/components/DataTable/TableExpandRow.js +6 -2
- package/lib/components/Dropdown/Dropdown.d.ts +1 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
- package/lib/components/Notification/Notification.d.ts +8 -8
- package/lib/components/Tabs/Tabs.js +1 -2
- package/lib/components/TreeView/TreeNode.js +7 -4
- package/lib/components/UIShell/HeaderMenu.js +2 -2
- package/lib/components/UIShell/SideNav.d.ts +1 -1
- package/lib/components/UIShell/SideNavFooter.d.ts +52 -0
- package/lib/components/UIShell/SideNavFooter.js +0 -1
- package/lib/components/UIShell/SideNavItem.d.ts +24 -0
- package/lib/components/UIShell/SideNavItem.js +2 -2
- package/lib/components/UIShell/SideNavMenu.js +4 -5
- package/lib/components/UIShell/SideNavMenuItem.d.ts +25 -0
- package/lib/components/UIShell/SideNavMenuItem.js +1 -2
- package/lib/index.js +2 -2
- 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
|
-
|
|
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
|
|
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 ||
|
|
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"
|
|
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
|
-
|
|
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 ||
|
|
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
|
|
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;
|
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.
|
|
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.
|
|
51
|
-
"@carbon/layout": "^11.20.
|
|
52
|
-
"@carbon/styles": "^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.
|
|
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.
|
|
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": "
|
|
143
|
+
"gitHead": "5f47b0432b76b562cb152b481fe82d21e74da6d9"
|
|
143
144
|
}
|