@carbon-labs/react-ui-shell 0.59.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.
Files changed (81) hide show
  1. package/es/components/HeaderContainer.js +10 -11
  2. package/es/components/HeaderDivider.js +6 -7
  3. package/es/components/HeaderPopover.js +28 -31
  4. package/es/components/Link.js +10 -11
  5. package/es/components/Profile.js +31 -34
  6. package/es/components/SharkFinIcon.js +10 -11
  7. package/es/components/SideNav.js +38 -40
  8. package/es/components/SideNavFlyoutMenu.js +29 -31
  9. package/es/components/SideNavItems.js +12 -13
  10. package/es/components/SideNavLink.js +18 -19
  11. package/es/components/SideNavLinkPopover.js +8 -9
  12. package/es/components/SideNavMenu.js +40 -42
  13. package/es/components/SideNavMenuItem.js +9 -9
  14. package/es/components/SideNavSlot.js +10 -11
  15. package/es/components/SideNavToggle.js +11 -12
  16. package/es/components/TrialCountdown.js +10 -11
  17. package/es/internal/keyboard/match.js +6 -7
  18. package/es/internal/useDelayedState.js +1 -2
  19. package/es/internal/useId.js +4 -6
  20. package/es/internal/useIdPrefix.js +3 -3
  21. package/es/internal/usePrefix.js +3 -3
  22. package/es/internal/warning.js +1 -4
  23. package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +4 -4
  24. package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +10 -10
  25. package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +5 -5
  26. package/es/node_modules/@carbon/ibm-products/es/settings.js +2 -2
  27. package/es/prop-types/deprecate.js +1 -4
  28. package/es/prop-types/isRequiredOneOf.js +1 -4
  29. package/lib/components/HeaderContainer.js +18 -19
  30. package/lib/components/HeaderDivider.js +7 -8
  31. package/lib/components/HeaderPopover.js +34 -37
  32. package/lib/components/Link.js +11 -12
  33. package/lib/components/Profile.js +34 -37
  34. package/lib/components/SharkFinIcon.js +11 -12
  35. package/lib/components/SideNav.js +54 -56
  36. package/lib/components/SideNavFlyoutMenu.js +44 -46
  37. package/lib/components/SideNavItems.js +16 -17
  38. package/lib/components/SideNavLink.js +20 -21
  39. package/lib/components/SideNavLinkPopover.js +9 -10
  40. package/lib/components/SideNavMenu.js +60 -62
  41. package/lib/components/SideNavMenuItem.js +12 -12
  42. package/lib/components/SideNavSlot.js +11 -12
  43. package/lib/components/SideNavToggle.js +12 -13
  44. package/lib/components/TrialCountdown.js +11 -12
  45. package/lib/internal/keyboard/match.js +6 -7
  46. package/lib/internal/useDelayedState.js +5 -6
  47. package/lib/internal/useEvent.js +4 -4
  48. package/lib/internal/useId.js +7 -9
  49. package/lib/internal/useIdPrefix.js +3 -3
  50. package/lib/internal/useMatchMedia.js +3 -3
  51. package/lib/internal/useMergedRefs.js +2 -2
  52. package/lib/internal/usePrefix.js +3 -3
  53. package/lib/internal/warning.js +1 -4
  54. package/lib/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +8 -8
  55. package/lib/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +11 -11
  56. package/lib/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +9 -9
  57. package/lib/node_modules/@carbon/ibm-products/es/settings.js +2 -2
  58. package/lib/prop-types/deprecate.js +1 -4
  59. package/lib/prop-types/isRequiredOneOf.js +1 -4
  60. package/package.json +3 -3
  61. package/scss/styles/_content.scss +3 -1
  62. package/es/_virtual/_commonjsHelpers.js +0 -12
  63. package/es/_virtual/index.js +0 -14
  64. package/es/_virtual/index2.js +0 -10
  65. package/es/node_modules/@carbon/icons-react/es/Icon.js +0 -71
  66. package/es/node_modules/@carbon/icons-react/es/generated/bucket-0.js +0 -2956
  67. package/es/node_modules/@carbon/icons-react/es/generated/bucket-15.js +0 -3043
  68. package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +0 -3181
  69. package/es/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +0 -14
  70. package/es/node_modules/@carbon/icons-react/node_modules/@carbon/icon-helpers/es/index.js +0 -125
  71. package/es/node_modules/classnames/index.js +0 -71
  72. package/lib/_virtual/_commonjsHelpers.js +0 -14
  73. package/lib/_virtual/index.js +0 -18
  74. package/lib/_virtual/index2.js +0 -12
  75. package/lib/node_modules/@carbon/icons-react/es/Icon.js +0 -75
  76. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-0.js +0 -3082
  77. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-15.js +0 -3169
  78. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-3.js +0 -3307
  79. package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +0 -16
  80. package/lib/node_modules/@carbon/icons-react/node_modules/@carbon/icon-helpers/es/index.js +0 -128
  81. package/lib/node_modules/classnames/index.js +0 -73
@@ -7,21 +7,20 @@
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React, { useState, useCallback, useLayoutEffect, useEffect } from 'react';
10
+ import React__default, { useState, useCallback, useLayoutEffect, useEffect } from 'react';
11
11
  import { Escape } from '../internal/keyboard/keys.js';
12
12
  import { match } from '../internal/keyboard/match.js';
13
13
  import { useWindowEvent } from '../internal/useEvent.js';
14
14
  import { usePrefix } from '../internal/usePrefix.js';
15
15
 
16
- function HeaderContainer(_ref) {
17
- let {
18
- render: Children,
19
- isSideNavExpanded = false,
20
- isSwitcherExpanded = false,
21
- isProfileExpanded = false,
22
- themeSetting,
23
- ...rest
24
- } = _ref;
16
+ function HeaderContainer({
17
+ render: Children,
18
+ isSideNavExpanded = false,
19
+ isSwitcherExpanded = false,
20
+ isProfileExpanded = false,
21
+ themeSetting,
22
+ ...rest
23
+ }) {
25
24
  const prefix = usePrefix();
26
25
  const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
27
26
  const [isSwitcherExpandedState, setSwitcherExpandedState] = useState(isSwitcherExpanded);
@@ -63,7 +62,7 @@ function HeaderContainer(_ref) {
63
62
  document.removeEventListener('focusin', handleProfileClosing);
64
63
  };
65
64
  }, []);
66
- return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
65
+ return /*#__PURE__*/React__default.createElement(Children, _extends({}, rest, {
67
66
  isSideNavExpanded: isSideNavExpandedState,
68
67
  isSwitcherExpanded: isSwitcherExpandedState,
69
68
  isProfileExpanded: isProfileExpandedState,
@@ -5,18 +5,17 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import cx from '../_virtual/index.js';
8
+ import cx from 'classnames';
9
9
  import PropTypes from 'prop-types';
10
- import React from 'react';
10
+ import React__default from 'react';
11
11
  import { usePrefix } from '../internal/usePrefix.js';
12
12
 
13
- const HeaderDivider = _ref => {
14
- let {
15
- className
16
- } = _ref;
13
+ const HeaderDivider = ({
14
+ className
15
+ }) => {
17
16
  const prefix = usePrefix();
18
17
  const classNames = cx(`${prefix}--header__divider`, className);
19
- return /*#__PURE__*/React.createElement("span", {
18
+ return /*#__PURE__*/React__default.createElement("span", {
20
19
  className: classNames
21
20
  });
22
21
  };
@@ -6,9 +6,9 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
- import cx from '../_virtual/index.js';
9
+ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React, { useRef, useState, useContext } from 'react';
11
+ import React__default, { useRef, useState, useContext } from 'react';
12
12
  import { Popover, ToggletipContent, ToggletipActions, IconButton } from '@carbon/react';
13
13
  import { Escape } from '../internal/keyboard/keys.js';
14
14
  import { match } from '../internal/keyboard/match.js';
@@ -18,7 +18,7 @@ import { usePrefix } from '../internal/usePrefix.js';
18
18
 
19
19
  // Used to coordinate accessibility props between button and content along with
20
20
  // the actions to open and close the toggletip
21
- const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
21
+ const HeaderPopoverContext = /*#__PURE__*/React__default.createContext(undefined);
22
22
  function useToggletip() {
23
23
  return useContext(HeaderPopoverContext);
24
24
  }
@@ -28,16 +28,15 @@ function useToggletip() {
28
28
  * is responsible for coordinating between interactions with the button and the
29
29
  * visibility of the content
30
30
  */
31
- function HeaderPopover(_ref) {
32
- let {
33
- align,
34
- as,
35
- autoAlign,
36
- className: customClassName,
37
- children,
38
- defaultOpen = false,
39
- ...rest
40
- } = _ref;
31
+ function HeaderPopover({
32
+ align,
33
+ as,
34
+ autoAlign,
35
+ className: customClassName,
36
+ children,
37
+ defaultOpen = false,
38
+ ...rest
39
+ }) {
41
40
  const ref = useRef(null);
42
41
  const [open, setOpen] = useState(defaultOpen);
43
42
  const prefix = usePrefix();
@@ -100,9 +99,9 @@ function HeaderPopover(_ref) {
100
99
  actions.close();
101
100
  }
102
101
  });
103
- return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
102
+ return /*#__PURE__*/React__default.createElement(HeaderPopoverContext.Provider, {
104
103
  value: value
105
- }, /*#__PURE__*/React.createElement(Popover, _extends({
104
+ }, /*#__PURE__*/React__default.createElement(Popover, _extends({
106
105
  align: align,
107
106
  autoAlign: autoAlign,
108
107
  as: as,
@@ -154,21 +153,20 @@ HeaderPopover.propTypes = {
154
153
  * clicks and keyboard interactions.
155
154
  */
156
155
 
157
- function HeaderPopoverButton(_ref2) {
158
- let {
159
- children,
160
- className: customClassName,
161
- label = 'Show information',
162
- as: BaseComponent,
163
- ...rest
164
- } = _ref2;
156
+ function HeaderPopoverButton({
157
+ children,
158
+ className: customClassName,
159
+ label = 'Show information',
160
+ as: BaseComponent,
161
+ ...rest
162
+ }) {
165
163
  const toggletip = useToggletip();
166
164
  const prefix = usePrefix();
167
165
  const className = cx(customClassName, {
168
166
  [`${prefix}--header-action__button`]: true
169
167
  });
170
168
  const ComponentToggle = BaseComponent ?? IconButton;
171
- return /*#__PURE__*/React.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
169
+ return /*#__PURE__*/React__default.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
172
170
  className: className,
173
171
  kind: BaseComponent ? null : 'ghost',
174
172
  label: label,
@@ -196,14 +194,13 @@ HeaderPopoverButton.propTypes = {
196
194
  * `children` passed in as a prop inside of `PopoverContent` so that they will
197
195
  * be rendered inside of the popover for this component.
198
196
  */
199
- function HeaderPopoverContent(_ref3) {
200
- let {
201
- children,
202
- className,
203
- ...rest
204
- } = _ref3;
197
+ function HeaderPopoverContent({
198
+ children,
199
+ className,
200
+ ...rest
201
+ }) {
205
202
  const prefix = usePrefix();
206
- return /*#__PURE__*/React.createElement(ToggletipContent, _extends({
203
+ return /*#__PURE__*/React__default.createElement(ToggletipContent, _extends({
207
204
  className: cx(className, {
208
205
  [`${prefix}--header-action__content`]: true
209
206
  })
@@ -7,23 +7,22 @@
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React, { forwardRef } from 'react';
10
+ import React__default, { forwardRef } from 'react';
11
11
  import deprecate from '../prop-types/deprecate.js';
12
12
 
13
13
  // Note: Maybe we should use `as` instead of `element`? `as` appears to be
14
14
  // standard and is used in other places in this project.
15
15
 
16
- function LinkRenderFunction(_ref, ref) {
17
- let {
18
- element,
19
- as: BaseComponent,
20
- // Captured here to prevent it from being passed into the created element.
21
- // See https://github.com/carbon-design-system/carbon/issues/3970
22
- isSideNavExpanded: _isSideNavExpanded,
23
- ...rest
24
- } = _ref;
16
+ function LinkRenderFunction({
17
+ element,
18
+ as: BaseComponent,
19
+ // Captured here to prevent it from being passed into the created element.
20
+ // See https://github.com/carbon-design-system/carbon/issues/3970
21
+ isSideNavExpanded: _isSideNavExpanded,
22
+ ...rest
23
+ }, ref) {
25
24
  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
26
- return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
25
+ return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
27
26
  ref: ref
28
27
  }, rest));
29
28
  }
@@ -6,33 +6,32 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
- import cx from '../_virtual/index.js';
9
+ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React from 'react';
11
+ import React__default from 'react';
12
12
  import { usePrefix } from '../internal/usePrefix.js';
13
13
  import { HeaderPopover, HeaderPopoverButton, HeaderPopoverContent } from './HeaderPopover.js';
14
14
  import { UserAvatar } from '../node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js';
15
15
 
16
- const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
17
- let {
18
- className: customClassName,
19
- label,
20
- children,
21
- renderIcon: IconElement,
22
- ...rest
23
- } = _ref;
16
+ const Profile = /*#__PURE__*/React__default.forwardRef(function Profile({
17
+ className: customClassName,
18
+ label,
19
+ children,
20
+ renderIcon: IconElement,
21
+ ...rest
22
+ }) {
24
23
  const prefix = usePrefix();
25
24
  const className = cx({
26
25
  [`${prefix}--profile`]: true,
27
26
  [customClassName]: !!customClassName
28
27
  });
29
- return /*#__PURE__*/React.createElement(HeaderPopover, _extends({
28
+ return /*#__PURE__*/React__default.createElement(HeaderPopover, _extends({
30
29
  align: "bottom-right",
31
30
  className: className
32
- }, rest), /*#__PURE__*/React.createElement(HeaderPopoverButton, {
31
+ }, rest), /*#__PURE__*/React__default.createElement(HeaderPopoverButton, {
33
32
  align: "bottom",
34
33
  label: label
35
- }, IconElement), /*#__PURE__*/React.createElement(HeaderPopoverContent, null, children));
34
+ }, IconElement), /*#__PURE__*/React__default.createElement(HeaderPopoverContent, null, children));
36
35
  });
37
36
  Profile.displayName = 'Profile';
38
37
  Profile.propTypes = {
@@ -54,28 +53,27 @@ Profile.propTypes = {
54
53
  // @ts-expect-error - PropTypes are unable to cover this case.
55
54
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
56
55
  };
57
- const ProfileUserInfo = /*#__PURE__*/React.forwardRef(function ProfileUserInfo(_ref2) {
58
- let {
59
- className: customClassName,
60
- name,
61
- email,
62
- ...rest
63
- } = _ref2;
56
+ const ProfileUserInfo = /*#__PURE__*/React__default.forwardRef(function ProfileUserInfo({
57
+ className: customClassName,
58
+ name,
59
+ email,
60
+ ...rest
61
+ }) {
64
62
  const prefix = usePrefix();
65
63
  const className = cx({
66
64
  [`${prefix}--profile-user-info`]: true,
67
65
  [customClassName]: !!customClassName
68
66
  });
69
- return /*#__PURE__*/React.createElement("div", {
67
+ return /*#__PURE__*/React__default.createElement("div", {
70
68
  className: className
71
- }, /*#__PURE__*/React.createElement(UserAvatar, _extends({
69
+ }, /*#__PURE__*/React__default.createElement(UserAvatar, _extends({
72
70
  size: "lg",
73
71
  name: name
74
- }, rest)), /*#__PURE__*/React.createElement("div", {
72
+ }, rest)), /*#__PURE__*/React__default.createElement("div", {
75
73
  className: `${prefix}--profile-user-info__text-wrapper`
76
- }, /*#__PURE__*/React.createElement("div", {
74
+ }, /*#__PURE__*/React__default.createElement("div", {
77
75
  className: `${prefix}--profile-user-info__name`
78
- }, name), /*#__PURE__*/React.createElement("div", {
76
+ }, name), /*#__PURE__*/React__default.createElement("div", {
79
77
  className: `${prefix}--profile-user-info__email`
80
78
  }, email)));
81
79
  });
@@ -94,24 +92,23 @@ ProfileUserInfo.propTypes = {
94
92
  */
95
93
  name: PropTypes.string.isRequired
96
94
  };
97
- const ProfileReadOnly = /*#__PURE__*/React.forwardRef(function ProfileReadOnly(_ref3) {
98
- let {
99
- className: customClassName,
100
- items
101
- } = _ref3;
95
+ const ProfileReadOnly = /*#__PURE__*/React__default.forwardRef(function ProfileReadOnly({
96
+ className: customClassName,
97
+ items
98
+ }) {
102
99
  const prefix = usePrefix();
103
100
  const className = cx({
104
101
  [`${prefix}--profile-read-only`]: true,
105
102
  [customClassName]: !!customClassName
106
103
  });
107
- return /*#__PURE__*/React.createElement("div", {
104
+ return /*#__PURE__*/React__default.createElement("div", {
108
105
  className: className
109
- }, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
106
+ }, items?.map((item, index) => /*#__PURE__*/React__default.createElement("div", {
110
107
  className: `${prefix}--profile-read-only__items`,
111
108
  key: index
112
- }, /*#__PURE__*/React.createElement("div", {
109
+ }, /*#__PURE__*/React__default.createElement("div", {
113
110
  className: `${prefix}--profile-read-only__label`
114
- }, item.label), /*#__PURE__*/React.createElement("div", {
111
+ }, item.label), /*#__PURE__*/React__default.createElement("div", {
115
112
  className: `${prefix}--profile-read-only__title`
116
113
  }, item.title))));
117
114
  });
@@ -5,36 +5,35 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import cx from '../_virtual/index.js';
8
+ import cx from 'classnames';
9
9
  import PropTypes from 'prop-types';
10
- import React from 'react';
10
+ import React__default from 'react';
11
11
  import { usePrefix } from '../internal/usePrefix.js';
12
12
 
13
13
  var _g, _defs;
14
- const SharkFinIcon = _ref => {
15
- let {
16
- className: customClassName
17
- } = _ref;
14
+ const SharkFinIcon = ({
15
+ className: customClassName
16
+ }) => {
18
17
  const prefix = usePrefix();
19
18
  const className = cx({
20
19
  [`${prefix}--side-nav__icon`]: true,
21
20
  [`${prefix}--shark-fin__icon`]: true,
22
21
  [customClassName]: !!customClassName
23
22
  });
24
- return /*#__PURE__*/React.createElement("svg", {
23
+ return /*#__PURE__*/React__default.createElement("svg", {
25
24
  className: className,
26
25
  width: "4",
27
26
  height: "4",
28
27
  viewBox: "0 0 4 4",
29
28
  fill: "none",
30
29
  xmlns: "http://www.w3.org/2000/svg"
31
- }, _g || (_g = /*#__PURE__*/React.createElement("g", {
30
+ }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
32
31
  "clip-path": "url(#clip0_519_52879)"
33
- }, /*#__PURE__*/React.createElement("path", {
32
+ }, /*#__PURE__*/React__default.createElement("path", {
34
33
  d: "M2 2L4 0V4H0L2 2Z"
35
- }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
34
+ }))), _defs || (_defs = /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
36
35
  id: "clip0_519_52879"
37
- }, /*#__PURE__*/React.createElement("rect", {
36
+ }, /*#__PURE__*/React__default.createElement("rect", {
38
37
  width: "4",
39
38
  height: "4",
40
39
  fill: "white"
@@ -6,8 +6,8 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
- import React, { createContext, useState, useRef, isValidElement, useEffect } from 'react';
10
- import cx from '../_virtual/index.js';
9
+ import React__default, { createContext, useState, useRef, isValidElement, useEffect } from 'react';
10
+ import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
12
  import { AriaLabelPropType } from '../prop-types/AriaPropTypes.js';
13
13
  import { CARBON_SIDENAV_ITEMS } from './_utils.js';
@@ -19,8 +19,8 @@ import { useWindowEvent } from '../internal/useEvent.js';
19
19
  import { useDelayedState } from '../internal/useDelayedState.js';
20
20
  import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
21
21
  import { useMatchMedia } from '../internal/useMatchMedia.js';
22
+ import { SidePanelClose, SidePanelOpen } from '@carbon/icons-react';
22
23
  import { SideNavToggle } from './SideNavToggle.js';
23
- import { SidePanelClose, SidePanelOpen } from '../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
24
24
 
25
25
  let SIDE_NAV_TYPE = /*#__PURE__*/function (SIDE_NAV_TYPE) {
26
26
  SIDE_NAV_TYPE["DEFAULT"] = "default";
@@ -38,33 +38,32 @@ const defaultTranslations = {
38
38
  };
39
39
  const defaultTranslateWithId = id => defaultTranslations[id];
40
40
  const SideNavContext = /*#__PURE__*/createContext({});
41
- function SideNavRenderFunction(_ref, ref) {
42
- let {
43
- expanded: expandedProp,
44
- defaultExpanded = false,
45
- isChildOfHeader = true,
46
- 'aria-label': ariaLabel,
47
- 'aria-labelledby': ariaLabelledBy,
48
- children,
49
- onToggle,
50
- className: customClassName,
51
- hideRailBreakpointDown,
52
- href,
53
- isFixedNav = false,
54
- isRail,
55
- isPersistent = true,
56
- isTreeview: isTreeviewProp,
57
- navType = SIDE_NAV_TYPE.DEFAULT,
58
- addFocusListeners = true,
59
- addMouseListeners = true,
60
- onOverlayClick,
61
- onSideNavBlur,
62
- enterDelayMs = 100,
63
- isCollapsible = false,
64
- hideOverlay = false,
65
- translateWithId: t = defaultTranslateWithId,
66
- ...other
67
- } = _ref;
41
+ function SideNavRenderFunction({
42
+ expanded: expandedProp,
43
+ defaultExpanded = false,
44
+ isChildOfHeader = true,
45
+ 'aria-label': ariaLabel,
46
+ 'aria-labelledby': ariaLabelledBy,
47
+ children,
48
+ onToggle,
49
+ className: customClassName,
50
+ hideRailBreakpointDown,
51
+ href,
52
+ isFixedNav = false,
53
+ isRail,
54
+ isPersistent = true,
55
+ isTreeview: isTreeviewProp,
56
+ navType = SIDE_NAV_TYPE.DEFAULT,
57
+ addFocusListeners = true,
58
+ addMouseListeners = true,
59
+ onOverlayClick,
60
+ onSideNavBlur,
61
+ enterDelayMs = 100,
62
+ isCollapsible = false,
63
+ hideOverlay = false,
64
+ translateWithId: t = defaultTranslateWithId,
65
+ ...other
66
+ }, ref) {
68
67
  const [internalIsTreeview, setInternalIsTreeview] = useState(isTreeviewProp ?? false);
69
68
  const prefix = usePrefix();
70
69
  const {
@@ -77,8 +76,7 @@ function SideNavRenderFunction(_ref, ref) {
77
76
  const navRef = useMergedRefs([sideNavRef, ref]);
78
77
  const [currentPrimaryMenu, setCurrentPrimaryMenu] = useState();
79
78
  const sideNavToggleText = expandedState ? t('collapse.sidenav') : t('expand.sidenav');
80
- const handleToggle = function (event) {
81
- let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
79
+ const handleToggle = (event, value = !expanded) => {
82
80
  if (!controlled) {
83
81
  setExpandedState(value, enterDelayMs);
84
82
  }
@@ -112,13 +110,13 @@ function SideNavRenderFunction(_ref, ref) {
112
110
  let childrenToRender = children;
113
111
 
114
112
  // Pass the expansion state as a prop, so children can update themselves to match
115
- childrenToRender = React.Children.map(children, child => {
113
+ childrenToRender = React__default.Children.map(children, child => {
116
114
  // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
117
115
  const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
118
116
  if (/*#__PURE__*/isValidElement(child)) {
119
117
  const childJsxElement = child;
120
118
  // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
121
- return /*#__PURE__*/React.cloneElement(childJsxElement, {
119
+ return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
122
120
  ...(CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
123
121
  isSideNavExpanded: currentExpansionState,
124
122
  ...(childJsxElement.type?.displayName === 'SideNavItems' && {
@@ -376,12 +374,12 @@ function SideNavRenderFunction(_ref, ref) {
376
374
  setInternalIsTreeview(value);
377
375
  }
378
376
  };
379
- const SideNavToggleButton = /*#__PURE__*/React.createElement(SideNavToggle, {
377
+ const SideNavToggleButton = /*#__PURE__*/React__default.createElement(SideNavToggle, {
380
378
  className: !expandedState ? `${prefix}--side-nav__toggle--collapsed` : '',
381
379
  renderIcon: expandedState ? SidePanelClose : SidePanelOpen,
382
380
  onClick: () => setExpandedState(!expandedState)
383
381
  }, sideNavToggleText);
384
- return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
382
+ return /*#__PURE__*/React__default.createElement(SideNavContext.Provider, {
385
383
  value: {
386
384
  expanded,
387
385
  isRail,
@@ -394,20 +392,20 @@ function SideNavRenderFunction(_ref, ref) {
394
392
  }, isFixedNav || hideOverlay ? null :
395
393
  /*#__PURE__*/
396
394
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
397
- React.createElement("div", {
395
+ React__default.createElement("div", {
398
396
  className: overlayClassName,
399
397
  onClick: onOverlayClick
400
- }), /*#__PURE__*/React.createElement("nav", _extends({
398
+ }), /*#__PURE__*/React__default.createElement("nav", _extends({
401
399
  role: 'navigation',
402
400
  tabIndex: -1,
403
401
  ref: navRef,
404
402
  className: `${prefix}--side-nav__navigation ${className}`,
405
403
  inert: !isRail && navType !== SIDE_NAV_TYPE.PANEL && !(expanded || isLg) ? -1 : undefined
406
- }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React.createElement("div", {
404
+ }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React__default.createElement("div", {
407
405
  className: `${prefix}--side-nav__toggle-container`
408
406
  }, SideNavToggleButton))));
409
407
  }
410
- const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
408
+ const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);
411
409
  SideNav.displayName = 'SideNav';
412
410
  SideNav.propTypes = {
413
411
  /**
@@ -6,9 +6,9 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
9
- import cx from '../_virtual/index.js';
9
+ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React, { useRef, useState, useCallback, useEffect } from 'react';
11
+ import React__default, { useRef, useState, useCallback, useEffect } from 'react';
12
12
  import { Popover, PopoverContent, FormLabel } from '@carbon/react';
13
13
  import { Escape, Enter, Space } from '../internal/keyboard/keys.js';
14
14
  import { match } from '../internal/keyboard/match.js';
@@ -20,23 +20,22 @@ import { usePrefix } from '../internal/usePrefix.js';
20
20
  * Event types that trigger a "drag" to stop.
21
21
  */
22
22
  const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
23
- function SideNavFlyoutMenu(_ref) {
24
- let {
25
- align = 'right-start',
26
- className: customClassName,
27
- children,
28
- label,
29
- description,
30
- enterDelayMs = 100,
31
- leaveDelayMs = 300,
32
- defaultOpen = false,
33
- dropShadow = true,
34
- highContrast = false,
35
- menuContent,
36
- selected = false,
37
- title,
38
- ...rest
39
- } = _ref;
23
+ function SideNavFlyoutMenu({
24
+ align = 'right-start',
25
+ className: customClassName,
26
+ children,
27
+ label,
28
+ description,
29
+ enterDelayMs = 100,
30
+ leaveDelayMs = 300,
31
+ defaultOpen = false,
32
+ dropShadow = true,
33
+ highContrast = false,
34
+ menuContent,
35
+ selected = false,
36
+ title,
37
+ ...rest
38
+ }) {
40
39
  const popoverRef = useRef(null);
41
40
  const [open, setOpen] = useDelayedState(defaultOpen);
42
41
  const [isDragging, setIsDragging] = useState(false);
@@ -44,15 +43,15 @@ function SideNavFlyoutMenu(_ref) {
44
43
  const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
45
44
  const id = useId('tooltip');
46
45
  const prefix = usePrefix();
47
- const child = React.Children.only(children);
46
+ const child = React__default.Children.only(children);
48
47
  const menuButton = useRef();
49
48
  const [clickMode, setClickMode] = useState(false);
50
49
  const isFocusedInsideRef = useRef(false);
51
50
  const popoverMenuLinks = useRef(null);
52
51
  const [isButtonFocused, setIsButtonFocused] = useState(false);
53
- const flyoutMenuItems = React.Children.map(menuContent, child => {
54
- if (/*#__PURE__*/React.isValidElement(child)) {
55
- return /*#__PURE__*/React.cloneElement(child, {
52
+ const flyoutMenuItems = React__default.Children.map(menuContent, child => {
53
+ if (/*#__PURE__*/React__default.isValidElement(child)) {
54
+ return /*#__PURE__*/React__default.cloneElement(child, {
56
55
  ...{
57
56
  isFlyoutMenuItem: true
58
57
  }
@@ -204,10 +203,9 @@ function SideNavFlyoutMenu(_ref) {
204
203
  closeMenu();
205
204
  }
206
205
  }
207
- function closeMenu() {
208
- let {
209
- revertFocus = false
210
- } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
206
+ function closeMenu({
207
+ revertFocus = false
208
+ } = {}) {
211
209
  if (revertFocus) {
212
210
  menuButton.current?.focus();
213
211
  setOpen(true);
@@ -242,7 +240,7 @@ function SideNavFlyoutMenu(_ref) {
242
240
  return (
243
241
  /*#__PURE__*/
244
242
  // @ts-ignore-error Popover throws a TS error everytime is imported
245
- React.createElement(Popover, _extends({
243
+ React__default.createElement(Popover, _extends({
246
244
  ref: popoverRef
247
245
  }, rest, {
248
246
  align: isButtonFocused ? 'right' : align,
@@ -258,10 +256,10 @@ function SideNavFlyoutMenu(_ref) {
258
256
  onKeyDown: onKeyDown,
259
257
  onMouseLeave: onMouseLeave,
260
258
  open: open
261
- }), child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
259
+ }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
262
260
  ...triggerProps,
263
261
  ...getChildEventHandlers(child.props)
264
- }) : null, /*#__PURE__*/React.createElement(PopoverContent, {
262
+ }) : null, /*#__PURE__*/React__default.createElement(PopoverContent, {
265
263
  "aria-hidden": open ? 'false' : 'true',
266
264
  className: cx({
267
265
  [`${prefix}--side-nav-menu--popover-content`]: !isButtonFocused,
@@ -270,7 +268,7 @@ function SideNavFlyoutMenu(_ref) {
270
268
  id: id,
271
269
  onMouseEnter: onMouseEnter,
272
270
  role: "tooltip"
273
- }, !isButtonFocused ? /*#__PURE__*/React.createElement(FormLabel, null, title) : title, /*#__PURE__*/React.createElement("div", {
271
+ }, !isButtonFocused ? /*#__PURE__*/React__default.createElement(FormLabel, null, title) : title, /*#__PURE__*/React__default.createElement("div", {
274
272
  style: {
275
273
  display: isButtonFocused ? 'none' : 'block'
276
274
  }