@carbon-labs/react-ui-shell 0.60.0 → 0.61.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/es/components/HeaderContainer.js +10 -11
- package/es/components/HeaderDivider.js +6 -7
- package/es/components/HeaderPopover.js +28 -31
- package/es/components/Link.js +10 -11
- package/es/components/Profile.js +31 -34
- package/es/components/SharkFinIcon.js +10 -11
- package/es/components/SideNav.js +38 -40
- package/es/components/SideNavFlyoutMenu.js +29 -31
- package/es/components/SideNavItems.js +12 -13
- package/es/components/SideNavLink.js +18 -19
- package/es/components/SideNavLinkPopover.js +8 -9
- package/es/components/SideNavMenu.js +40 -42
- package/es/components/SideNavMenuItem.js +9 -9
- package/es/components/SideNavSlot.js +10 -11
- package/es/components/SideNavToggle.js +11 -12
- package/es/components/TrialCountdown.js +10 -11
- package/es/internal/keyboard/match.js +6 -7
- package/es/internal/useDelayedState.js +1 -2
- package/es/internal/useId.js +4 -6
- package/es/internal/useIdPrefix.js +3 -3
- package/es/internal/usePrefix.js +3 -3
- package/es/internal/warning.js +1 -4
- package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +4 -4
- package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +10 -10
- package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +5 -5
- package/es/node_modules/@carbon/ibm-products/es/settings.js +2 -2
- package/es/prop-types/deprecate.js +1 -4
- package/es/prop-types/isRequiredOneOf.js +1 -4
- package/lib/components/HeaderContainer.js +18 -19
- package/lib/components/HeaderDivider.js +7 -8
- package/lib/components/HeaderPopover.js +34 -37
- package/lib/components/Link.js +11 -12
- package/lib/components/Profile.js +34 -37
- package/lib/components/SharkFinIcon.js +11 -12
- package/lib/components/SideNav.js +54 -56
- package/lib/components/SideNavFlyoutMenu.js +44 -46
- package/lib/components/SideNavItems.js +16 -17
- package/lib/components/SideNavLink.js +20 -21
- package/lib/components/SideNavLinkPopover.js +9 -10
- package/lib/components/SideNavMenu.js +60 -62
- package/lib/components/SideNavMenuItem.js +12 -12
- package/lib/components/SideNavSlot.js +11 -12
- package/lib/components/SideNavToggle.js +12 -13
- package/lib/components/TrialCountdown.js +11 -12
- package/lib/internal/keyboard/match.js +6 -7
- package/lib/internal/useDelayedState.js +5 -6
- package/lib/internal/useEvent.js +4 -4
- package/lib/internal/useId.js +7 -9
- package/lib/internal/useIdPrefix.js +3 -3
- package/lib/internal/useMatchMedia.js +3 -3
- package/lib/internal/useMergedRefs.js +2 -2
- package/lib/internal/usePrefix.js +3 -3
- package/lib/internal/warning.js +1 -4
- package/lib/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +8 -8
- package/lib/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +11 -11
- package/lib/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +9 -9
- package/lib/node_modules/@carbon/ibm-products/es/settings.js +2 -2
- package/lib/prop-types/deprecate.js +1 -4
- package/lib/prop-types/isRequiredOneOf.js +1 -4
- package/package.json +3 -3
- package/es/_virtual/_commonjsHelpers.js +0 -12
- package/es/_virtual/index.js +0 -14
- package/es/_virtual/index2.js +0 -10
- package/es/node_modules/@carbon/icons-react/es/Icon.js +0 -71
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-0.js +0 -2956
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-15.js +0 -3043
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +0 -3181
- package/es/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +0 -14
- package/es/node_modules/@carbon/icons-react/node_modules/@carbon/icon-helpers/es/index.js +0 -125
- package/es/node_modules/classnames/index.js +0 -71
- package/lib/_virtual/_commonjsHelpers.js +0 -14
- package/lib/_virtual/index.js +0 -18
- package/lib/_virtual/index2.js +0 -12
- package/lib/node_modules/@carbon/icons-react/es/Icon.js +0 -75
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-0.js +0 -3082
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-15.js +0 -3169
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-3.js +0 -3307
- package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +0 -16
- package/lib/node_modules/@carbon/icons-react/node_modules/@carbon/icon-helpers/es/index.js +0 -128
- package/lib/node_modules/classnames/index.js +0 -73
|
@@ -6,20 +6,19 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import cx from '
|
|
9
|
+
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React__default, { useContext, useRef, useEffect } from 'react';
|
|
12
12
|
import { CARBON_SIDENAV_ITEMS } from './_utils.js';
|
|
13
13
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
14
14
|
import { SideNavContext } from './SideNav.js';
|
|
15
15
|
|
|
16
|
-
const SideNavItems =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref;
|
|
16
|
+
const SideNavItems = ({
|
|
17
|
+
className: customClassName,
|
|
18
|
+
children,
|
|
19
|
+
isSideNavExpanded,
|
|
20
|
+
accessibilityLabel: accessibilityLabel
|
|
21
|
+
}) => {
|
|
23
22
|
const {
|
|
24
23
|
isTreeview,
|
|
25
24
|
currentPrimaryMenu
|
|
@@ -27,14 +26,14 @@ const SideNavItems = _ref => {
|
|
|
27
26
|
const listRef = useRef(null); // Adjust type if necessary
|
|
28
27
|
const prefix = usePrefix();
|
|
29
28
|
const className = cx([`${prefix}--side-nav__items`], customClassName);
|
|
30
|
-
const childrenWithExpandedState =
|
|
31
|
-
if (/*#__PURE__*/
|
|
29
|
+
const childrenWithExpandedState = React__default.Children.map(children, child => {
|
|
30
|
+
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
32
31
|
// avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
|
|
33
32
|
const childJsxElement = child;
|
|
34
33
|
const childDisplayName = childJsxElement.type?.displayName ?? childJsxElement.type?.name;
|
|
35
34
|
const isCarbonSideNavItem = CARBON_SIDENAV_ITEMS.includes(childDisplayName);
|
|
36
35
|
const isSideNavMenu = childDisplayName === 'SideNavMenu';
|
|
37
|
-
return /*#__PURE__*/
|
|
36
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
38
37
|
...(isCarbonSideNavItem && {
|
|
39
38
|
isSideNavExpanded: isSideNavExpanded
|
|
40
39
|
}),
|
|
@@ -55,7 +54,7 @@ const SideNavItems = _ref => {
|
|
|
55
54
|
});
|
|
56
55
|
}
|
|
57
56
|
}, [isTreeview]);
|
|
58
|
-
return /*#__PURE__*/
|
|
57
|
+
return /*#__PURE__*/React__default.createElement("ul", _extends({}, isTreeview && accessibilityLabel, {
|
|
59
58
|
ref: listRef,
|
|
60
59
|
className: className,
|
|
61
60
|
tabIndex: currentPrimaryMenu ? -1 : undefined,
|
|
@@ -6,26 +6,25 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import cx from '
|
|
9
|
+
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React__default, { forwardRef, useContext } from 'react';
|
|
12
12
|
import Link, { LinkPropTypes } from './Link.js';
|
|
13
13
|
import { SideNavItem, SideNavLinkText, SideNavIcon } from '@carbon/react';
|
|
14
14
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
15
15
|
import { SideNavContext } from './SideNav.js';
|
|
16
16
|
import { SideNavLinkPopover } from './SideNavLinkPopover.js';
|
|
17
17
|
|
|
18
|
-
const SideNavLink = /*#__PURE__*/forwardRef(function SideNavLink(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
} = _ref;
|
|
18
|
+
const SideNavLink = /*#__PURE__*/forwardRef(function SideNavLink({
|
|
19
|
+
children,
|
|
20
|
+
className: customClassName,
|
|
21
|
+
renderIcon: IconElement,
|
|
22
|
+
isActive,
|
|
23
|
+
isSideNavExpanded,
|
|
24
|
+
large = false,
|
|
25
|
+
tabIndex,
|
|
26
|
+
...rest
|
|
27
|
+
}, ref) {
|
|
29
28
|
const {
|
|
30
29
|
expanded,
|
|
31
30
|
isRail,
|
|
@@ -37,22 +36,22 @@ const SideNavLink = /*#__PURE__*/forwardRef(function SideNavLink(_ref, ref) {
|
|
|
37
36
|
[`${prefix}--side-nav__link--current`]: isActive,
|
|
38
37
|
[customClassName]: !!customClassName
|
|
39
38
|
});
|
|
40
|
-
const SideNavLinkIcon = IconElement && /*#__PURE__*/
|
|
39
|
+
const SideNavLinkIcon = IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, {
|
|
41
40
|
small: true
|
|
42
|
-
}, /*#__PURE__*/
|
|
41
|
+
}, /*#__PURE__*/React__default.createElement(IconElement, null));
|
|
43
42
|
if (!expanded && navType === 'panel') {
|
|
44
|
-
return /*#__PURE__*/
|
|
43
|
+
return /*#__PURE__*/React__default.createElement(SideNavLinkPopover, _extends({
|
|
45
44
|
align: "right",
|
|
46
45
|
label: children
|
|
47
46
|
}, rest), SideNavLinkIcon);
|
|
48
47
|
}
|
|
49
|
-
return /*#__PURE__*/
|
|
48
|
+
return /*#__PURE__*/React__default.createElement(SideNavItem, {
|
|
50
49
|
large: large
|
|
51
|
-
}, /*#__PURE__*/
|
|
50
|
+
}, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
|
|
52
51
|
className: className,
|
|
53
52
|
ref: ref,
|
|
54
53
|
tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
|
|
55
|
-
}), SideNavLinkIcon, /*#__PURE__*/
|
|
54
|
+
}), SideNavLinkIcon, /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
|
|
56
55
|
});
|
|
57
56
|
SideNavLink.displayName = 'SideNavLink';
|
|
58
57
|
SideNavLink.propTypes = {
|
|
@@ -6,20 +6,19 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import cx from '
|
|
9
|
+
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React__default from 'react';
|
|
12
12
|
import { IconButton } from '@carbon/react';
|
|
13
13
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
14
14
|
|
|
15
|
-
function SideNavLinkPopover(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
15
|
+
function SideNavLinkPopover({
|
|
16
|
+
className,
|
|
17
|
+
children,
|
|
18
|
+
...rest
|
|
19
|
+
}) {
|
|
21
20
|
const prefix = usePrefix();
|
|
22
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/React__default.createElement(IconButton, _extends({
|
|
23
22
|
className: cx(className, `${prefix}--side-nav-link-popover`),
|
|
24
23
|
dropShadow: true,
|
|
25
24
|
highContrast: false,
|
|
@@ -5,11 +5,12 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import { ArrowLeft, ChevronRight, ChevronDown } from '@carbon/icons-react';
|
|
8
9
|
import { SideNavIcon, Layer, Button } from '@carbon/react';
|
|
9
10
|
import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
|
|
10
|
-
import cx from '
|
|
11
|
+
import cx from 'classnames';
|
|
11
12
|
import PropTypes from 'prop-types';
|
|
12
|
-
import
|
|
13
|
+
import React__default, { useContext, useState, useRef, useEffect } from 'react';
|
|
13
14
|
import { CARBON_SIDENAV_ITEMS } from './_utils.js';
|
|
14
15
|
import { useId } from '../internal/useId.js';
|
|
15
16
|
import { Escape, Tab, ArrowLeft as ArrowLeft$1, ArrowRight } from '../internal/keyboard/keys.js';
|
|
@@ -21,30 +22,27 @@ import { SharkFinIcon } from './SharkFinIcon.js';
|
|
|
21
22
|
import { SideNavFlyoutMenu } from './SideNavFlyoutMenu.js';
|
|
22
23
|
import { SideNavItems } from './SideNavItems.js';
|
|
23
24
|
import { useMatchMedia } from '../internal/useMatchMedia.js';
|
|
24
|
-
import { ArrowLeft } from '../node_modules/@carbon/icons-react/es/generated/bucket-0.js';
|
|
25
|
-
import { ChevronRight, ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
|
|
26
25
|
|
|
27
26
|
var _ArrowLeft, _SharkFinIcon, _ChevronRight, _ChevronDown;
|
|
28
27
|
const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
|
|
29
|
-
const SideNavMenu = /*#__PURE__*/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
} = _ref;
|
|
28
|
+
const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu({
|
|
29
|
+
backButtonRenderIcon = () => _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React__default.createElement(ArrowLeft, {
|
|
30
|
+
size: 16
|
|
31
|
+
})),
|
|
32
|
+
backButtonTitle = 'My products',
|
|
33
|
+
className: customClassName,
|
|
34
|
+
children,
|
|
35
|
+
defaultExpanded = false,
|
|
36
|
+
depth: propDepth,
|
|
37
|
+
id,
|
|
38
|
+
isActive = false,
|
|
39
|
+
large = false,
|
|
40
|
+
renderIcon: IconElement,
|
|
41
|
+
isSideNavExpanded,
|
|
42
|
+
title,
|
|
43
|
+
onMenuToggle,
|
|
44
|
+
primary
|
|
45
|
+
}, ref) {
|
|
48
46
|
const depth = propDepth;
|
|
49
47
|
const {
|
|
50
48
|
isTreeview,
|
|
@@ -96,12 +94,12 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
96
94
|
let childrenToRender = children;
|
|
97
95
|
|
|
98
96
|
// modify nested SideNavMenus
|
|
99
|
-
childrenToRender =
|
|
100
|
-
if (/*#__PURE__*/
|
|
97
|
+
childrenToRender = React__default.Children.map(children, child => {
|
|
98
|
+
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
101
99
|
const childJsxElement = child;
|
|
102
100
|
const childDisplayName = childJsxElement.type?.displayName ?? childJsxElement.type?.name;
|
|
103
101
|
const isCarbonSideNavItem = CARBON_SIDENAV_ITEMS.includes(childDisplayName);
|
|
104
|
-
return /*#__PURE__*/
|
|
102
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
105
103
|
...(isCarbonSideNavItem && {
|
|
106
104
|
isSideNavExpanded: isSideNavExpanded
|
|
107
105
|
}),
|
|
@@ -120,7 +118,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
120
118
|
function hasActiveDescendant(children) {
|
|
121
119
|
if (Array.isArray(children)) {
|
|
122
120
|
return children.some(child => {
|
|
123
|
-
if (! /*#__PURE__*/
|
|
121
|
+
if (! /*#__PURE__*/React__default.isValidElement(child)) {
|
|
124
122
|
setActive(false);
|
|
125
123
|
return false;
|
|
126
124
|
}
|
|
@@ -139,7 +137,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
139
137
|
|
|
140
138
|
// We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
|
|
141
139
|
|
|
142
|
-
if (/*#__PURE__*/
|
|
140
|
+
if (/*#__PURE__*/React__default.isValidElement(children)) {
|
|
143
141
|
const props = children.props;
|
|
144
142
|
if (props.isActive === true || props['aria-current']) {
|
|
145
143
|
setActive(true);
|
|
@@ -290,7 +288,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
290
288
|
setIsExpanded(true);
|
|
291
289
|
}
|
|
292
290
|
}, [sideNavExpanded]);
|
|
293
|
-
const [openPopover, setOpenPopover] =
|
|
291
|
+
const [openPopover, setOpenPopover] = React__default.useState(false);
|
|
294
292
|
const isSm = useMatchMedia(smMediaQuery);
|
|
295
293
|
|
|
296
294
|
// keeps the secondary open when moving from small to large breakpoints
|
|
@@ -302,14 +300,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
302
300
|
const content =
|
|
303
301
|
/*#__PURE__*/
|
|
304
302
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
305
|
-
|
|
303
|
+
React__default.createElement("li", {
|
|
306
304
|
role: isTreeview ? 'treeitem' : undefined,
|
|
307
305
|
"aria-expanded": isExpanded,
|
|
308
306
|
className: className,
|
|
309
307
|
ref: listRef,
|
|
310
308
|
onKeyDown: handleKeyDown,
|
|
311
309
|
id: uniqueId
|
|
312
|
-
}, /*#__PURE__*/
|
|
310
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
313
311
|
"aria-expanded": isExpanded,
|
|
314
312
|
className: buttonClassName,
|
|
315
313
|
onClick: () => {
|
|
@@ -331,37 +329,37 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
331
329
|
ref: menuRef,
|
|
332
330
|
type: "button",
|
|
333
331
|
tabIndex: isTreeview ? -1 : 0
|
|
334
|
-
}, IconElement && /*#__PURE__*/
|
|
332
|
+
}, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React__default.createElement("div", {
|
|
335
333
|
className: `${prefix}--side-nav--panel-submenu-caret-container`
|
|
336
|
-
}, /*#__PURE__*/
|
|
334
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
337
335
|
className: `${prefix}--side-nav--panel-submenu-caret`
|
|
338
|
-
}, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/
|
|
336
|
+
}, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/React__default.createElement(SharkFinIcon, null)))), /*#__PURE__*/React__default.createElement("span", {
|
|
339
337
|
className: `${prefix}--side-nav__submenu-title`
|
|
340
|
-
}, title), /*#__PURE__*/
|
|
338
|
+
}, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
|
|
341
339
|
className: `${prefix}--side-nav__submenu-chevron`,
|
|
342
340
|
small: true
|
|
343
|
-
}, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/
|
|
341
|
+
}, primary ? _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(ChevronRight, {
|
|
344
342
|
size: 20
|
|
345
|
-
})) : _ChevronDown || (_ChevronDown = /*#__PURE__*/
|
|
343
|
+
})) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
|
|
346
344
|
size: 20
|
|
347
|
-
})))), primary ? /*#__PURE__*/
|
|
345
|
+
})))), primary ? /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("div", {
|
|
348
346
|
className: primaryClassNames
|
|
349
|
-
}, /*#__PURE__*/
|
|
347
|
+
}, /*#__PURE__*/React__default.createElement(SideNavItems, {
|
|
350
348
|
accessibilityLabel: {
|
|
351
349
|
'aria-label': `${title} submenu`
|
|
352
350
|
}
|
|
353
|
-
}, isSm && /*#__PURE__*/
|
|
351
|
+
}, isSm && /*#__PURE__*/React__default.createElement(Button, {
|
|
354
352
|
ref: backButtonRef,
|
|
355
353
|
kind: "ghost",
|
|
356
354
|
size: "md",
|
|
357
355
|
onClick: handleOnBackButtonClick,
|
|
358
356
|
className: `${prefix}--side-nav__back-button`,
|
|
359
357
|
renderIcon: backButtonRenderIcon
|
|
360
|
-
}, backButtonTitle), childrenToRender))) : /*#__PURE__*/
|
|
358
|
+
}, backButtonTitle), childrenToRender))) : /*#__PURE__*/React__default.createElement("ul", {
|
|
361
359
|
className: `${prefix}--side-nav__menu`,
|
|
362
360
|
role: "group"
|
|
363
361
|
}, childrenToRender));
|
|
364
|
-
return navType == SIDE_NAV_TYPE.PANEL && !sideNavExpanded ? /*#__PURE__*/
|
|
362
|
+
return navType == SIDE_NAV_TYPE.PANEL && !sideNavExpanded ? /*#__PURE__*/React__default.createElement(SideNavFlyoutMenu, {
|
|
365
363
|
selected: active,
|
|
366
364
|
className: `${prefix}--side-nav-flyout-menu`,
|
|
367
365
|
title: title,
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import cx from '
|
|
9
|
+
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React__default, { useContext } from 'react';
|
|
12
12
|
import { SideNavIcon, SideNavLinkText } from '@carbon/react';
|
|
13
13
|
import Link from './Link.js';
|
|
14
14
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
15
15
|
import { SideNavContext } from './SideNav.js';
|
|
16
|
-
import { Checkmark } from '
|
|
16
|
+
import { Checkmark } from '@carbon/icons-react';
|
|
17
17
|
|
|
18
18
|
var _SideNavIcon;
|
|
19
|
-
const SideNavMenuItem = /*#__PURE__*/
|
|
19
|
+
const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavMenuItem(props, ref) {
|
|
20
20
|
const prefix = usePrefix();
|
|
21
21
|
const {
|
|
22
22
|
children,
|
|
@@ -39,19 +39,19 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
|
|
|
39
39
|
[`${prefix}--side-nav__link--active`]: isActive && isFlyoutMenuItem,
|
|
40
40
|
[`${prefix}--side-nav__link--current`]: isActive && !isFlyoutMenuItem
|
|
41
41
|
});
|
|
42
|
-
return /*#__PURE__*/
|
|
42
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
43
43
|
className: className
|
|
44
|
-
}, /*#__PURE__*/
|
|
44
|
+
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, rest, {
|
|
45
45
|
"aria-selected": isActive ? 'true' : 'false',
|
|
46
46
|
role: isTreeview ? 'treeitem' : undefined,
|
|
47
47
|
className: linkClassName,
|
|
48
48
|
tabIndex: isTreeview ? -1 : 0,
|
|
49
49
|
ref: ref
|
|
50
|
-
}), IconElement && !isFlyoutMenuItem && /*#__PURE__*/
|
|
50
|
+
}), IconElement && !isFlyoutMenuItem && /*#__PURE__*/React__default.createElement(SideNavIcon, {
|
|
51
51
|
small: true
|
|
52
|
-
}, /*#__PURE__*/
|
|
52
|
+
}, /*#__PURE__*/React__default.createElement(IconElement, null)), isActive && isFlyoutMenuItem && (_SideNavIcon || (_SideNavIcon = /*#__PURE__*/React__default.createElement(SideNavIcon, {
|
|
53
53
|
small: true
|
|
54
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
|
|
55
55
|
});
|
|
56
56
|
SideNavMenuItem.displayName = 'SideNavMenuItem';
|
|
57
57
|
SideNavMenuItem.propTypes = {
|
|
@@ -5,17 +5,16 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import cx from '
|
|
8
|
+
import cx from 'classnames';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React__default from 'react';
|
|
11
11
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
12
12
|
|
|
13
|
-
const SideNavSlot =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
13
|
+
const SideNavSlot = ({
|
|
14
|
+
children,
|
|
15
|
+
className: customClassName,
|
|
16
|
+
renderIcon: IconElement
|
|
17
|
+
}) => {
|
|
19
18
|
const prefix = usePrefix();
|
|
20
19
|
const className = cx(`${prefix}--side-nav__slot`, customClassName);
|
|
21
20
|
const handleKeyDown = e => {
|
|
@@ -23,11 +22,11 @@ const SideNavSlot = _ref => {
|
|
|
23
22
|
e.stopPropagation();
|
|
24
23
|
}
|
|
25
24
|
};
|
|
26
|
-
return /*#__PURE__*/
|
|
25
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
27
26
|
className: className
|
|
28
|
-
}, IconElement && /*#__PURE__*/
|
|
27
|
+
}, IconElement && /*#__PURE__*/React__default.createElement("div", {
|
|
29
28
|
className: `${prefix}--side-nav__icon`
|
|
30
|
-
}, /*#__PURE__*/
|
|
29
|
+
}, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", {
|
|
31
30
|
role: "presentation",
|
|
32
31
|
tabIndex: -1,
|
|
33
32
|
onKeyDown: handleKeyDown,
|
|
@@ -6,29 +6,28 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import cx from '
|
|
9
|
+
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React__default from 'react';
|
|
12
12
|
import { SideNavIcon } from '@carbon/react';
|
|
13
13
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
14
14
|
|
|
15
|
-
const SideNavToggle = /*#__PURE__*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref;
|
|
15
|
+
const SideNavToggle = /*#__PURE__*/React__default.forwardRef(function SideNavToggle({
|
|
16
|
+
className: customClassName,
|
|
17
|
+
renderIcon: IconElement,
|
|
18
|
+
tabIndex,
|
|
19
|
+
children,
|
|
20
|
+
...rest
|
|
21
|
+
}, ref) {
|
|
23
22
|
const prefix = usePrefix();
|
|
24
|
-
return /*#__PURE__*/
|
|
23
|
+
return /*#__PURE__*/React__default.createElement("button", _extends({
|
|
25
24
|
className: cx(customClassName, {
|
|
26
25
|
[`${prefix}--side-nav__toggle`]: true
|
|
27
26
|
}),
|
|
28
27
|
ref: ref,
|
|
29
28
|
type: "button",
|
|
30
29
|
tabIndex: tabIndex ?? 0
|
|
31
|
-
}, rest), IconElement && /*#__PURE__*/
|
|
30
|
+
}, rest), IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
|
|
32
31
|
className: `${prefix}--side-nav__toggle-text`
|
|
33
32
|
}, children));
|
|
34
33
|
});
|
|
@@ -5,25 +5,24 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import cx from '
|
|
8
|
+
import cx from 'classnames';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React__default from 'react';
|
|
11
11
|
import { usePrefix } from '../internal/usePrefix.js';
|
|
12
12
|
|
|
13
|
-
const TrialCountdown =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
13
|
+
const TrialCountdown = ({
|
|
14
|
+
className,
|
|
15
|
+
count,
|
|
16
|
+
text = 'Trial days left',
|
|
17
|
+
warning = false
|
|
18
|
+
}) => {
|
|
20
19
|
const prefix = usePrefix();
|
|
21
20
|
const classNames = cx(`${prefix}--trial-countdown`, className, {
|
|
22
21
|
[`${prefix}--trial-countdown--warning`]: warning
|
|
23
22
|
});
|
|
24
|
-
return /*#__PURE__*/
|
|
23
|
+
return /*#__PURE__*/React__default.createElement("p", {
|
|
25
24
|
className: classNames
|
|
26
|
-
}, /*#__PURE__*/
|
|
25
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
27
26
|
className: `${prefix}--trial-countdown__count`
|
|
28
27
|
}, count), ' ', text);
|
|
29
28
|
};
|
|
@@ -66,13 +66,12 @@ function matches(event, keysToMatch) {
|
|
|
66
66
|
* @param {Key} key
|
|
67
67
|
* @returns {boolean}
|
|
68
68
|
*/
|
|
69
|
-
function match(eventOrCode
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
69
|
+
function match(eventOrCode, {
|
|
70
|
+
key,
|
|
71
|
+
which,
|
|
72
|
+
keyCode,
|
|
73
|
+
code
|
|
74
|
+
} = {}) {
|
|
76
75
|
if (typeof eventOrCode === 'string') {
|
|
77
76
|
return eventOrCode === key;
|
|
78
77
|
}
|
|
@@ -32,8 +32,7 @@ function useDelayedState(initialState) {
|
|
|
32
32
|
const timeoutId = useRef(null);
|
|
33
33
|
// We use `useCallback` to match the signature of React's `useState` which will
|
|
34
34
|
// always return the same reference for the `setState` updater
|
|
35
|
-
const setStateWithDelay = useCallback(
|
|
36
|
-
let delayMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
35
|
+
const setStateWithDelay = useCallback((stateToSet, delayMs = 0) => {
|
|
37
36
|
window.clearTimeout(timeoutId.current ?? undefined);
|
|
38
37
|
timeoutId.current = null;
|
|
39
38
|
if (delayMs === 0) {
|
package/es/internal/useId.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import React__default, { useState, useEffect, useLayoutEffect } from 'react';
|
|
9
9
|
import setupGetInstanceId from './setupGetInstanceId.js';
|
|
10
10
|
import { useIdPrefix } from './useIdPrefix.js';
|
|
11
11
|
import { canUseDOM } from './environment.js';
|
|
@@ -43,7 +43,7 @@ import { canUseDOM } from './environment.js';
|
|
|
43
43
|
// https://github.com/webpack/webpack/issues/14814
|
|
44
44
|
// https://github.com/mui/material-ui/issues/41190
|
|
45
45
|
const _React = {
|
|
46
|
-
...
|
|
46
|
+
...React__default
|
|
47
47
|
};
|
|
48
48
|
const instanceId = setupGetInstanceId();
|
|
49
49
|
const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
|
|
@@ -56,8 +56,7 @@ const defaultId = 'id';
|
|
|
56
56
|
* @param {string} [prefix] the optional prefix id
|
|
57
57
|
* @returns {string}
|
|
58
58
|
*/
|
|
59
|
-
function useCompatibleId() {
|
|
60
|
-
let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
|
|
59
|
+
function useCompatibleId(prefix = defaultId) {
|
|
61
60
|
const contextPrefix = useIdPrefix();
|
|
62
61
|
const [id, setId] = useState(() => {
|
|
63
62
|
if (serverHandoffCompleted) {
|
|
@@ -84,8 +83,7 @@ function useCompatibleId() {
|
|
|
84
83
|
* @param {string} [prefix] the optional prefix id
|
|
85
84
|
* @returns {string}
|
|
86
85
|
*/
|
|
87
|
-
function useReactId() {
|
|
88
|
-
let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
|
|
86
|
+
function useReactId(prefix = defaultId) {
|
|
89
87
|
const contextPrefix = useIdPrefix();
|
|
90
88
|
return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
|
|
91
89
|
}
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import React__default from 'react';
|
|
9
9
|
|
|
10
|
-
const IdPrefixContext = /*#__PURE__*/
|
|
10
|
+
const IdPrefixContext = /*#__PURE__*/React__default.createContext(null);
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
*
|
|
14
14
|
*/
|
|
15
15
|
function useIdPrefix() {
|
|
16
|
-
return
|
|
16
|
+
return React__default.useContext(IdPrefixContext);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export { IdPrefixContext, useIdPrefix };
|
package/es/internal/usePrefix.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import
|
|
8
|
+
import React__default from 'react';
|
|
9
9
|
|
|
10
10
|
/* eslint-disable jsdoc/require-jsdoc */
|
|
11
11
|
/**
|
|
@@ -15,7 +15,7 @@ import React from 'react';
|
|
|
15
15
|
* LICENSE file in the root directory of this source tree.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
const PrefixContext = /*#__PURE__*/
|
|
18
|
+
const PrefixContext = /*#__PURE__*/React__default.createContext('cds');
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* An internal function to return the prefix used in components and styles.
|
|
@@ -23,7 +23,7 @@ const PrefixContext = /*#__PURE__*/React.createContext('cds');
|
|
|
23
23
|
* @returns a react context including the prefix
|
|
24
24
|
*/
|
|
25
25
|
function usePrefix() {
|
|
26
|
-
return
|
|
26
|
+
return React__default.useContext(PrefixContext);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { PrefixContext, usePrefix };
|
package/es/internal/warning.js
CHANGED
|
@@ -15,10 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
// const emptyFunction = function () {};
|
|
17
17
|
|
|
18
|
-
function warning(condition, format) {
|
|
19
|
-
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
20
|
-
args[_key - 2] = arguments[_key];
|
|
21
|
-
}
|
|
18
|
+
function warning(condition, format, ...args) {
|
|
22
19
|
{
|
|
23
20
|
let index = 0;
|
|
24
21
|
const message = format.replace(/%s/g, () => {
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import React__default from 'react';
|
|
10
10
|
import PropTypes from '../../_virtual/index.js';
|
|
11
|
-
import cx from '
|
|
11
|
+
import cx from 'classnames';
|
|
12
12
|
import { pkg } from '../../settings.js';
|
|
13
13
|
|
|
14
14
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
@@ -21,14 +21,14 @@ const componentName = 'TooltipTrigger';
|
|
|
21
21
|
* This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
|
|
22
22
|
* no blanked button.
|
|
23
23
|
*/
|
|
24
|
-
let TooltipTrigger = /*#__PURE__*/
|
|
24
|
+
let TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
25
25
|
let {
|
|
26
26
|
children,
|
|
27
27
|
className,
|
|
28
28
|
// Collect any other property values passed in.
|
|
29
29
|
...rest
|
|
30
30
|
} = _ref;
|
|
31
|
-
return /*#__PURE__*/
|
|
31
|
+
return /*#__PURE__*/React__default.createElement("button", _extends({
|
|
32
32
|
type: "button",
|
|
33
33
|
ref: ref
|
|
34
34
|
}, rest, {
|