@carbon-labs/react-ui-shell 0.11.0 → 0.13.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/HeaderPanel.js +6 -6
- package/es/components/Link.d.ts +48 -0
- package/es/components/Link.js +60 -0
- package/es/components/SideNav.d.ts +3 -3
- package/es/components/SideNav.js +22 -18
- package/es/components/SideNavItems.js +1 -1
- package/es/components/SideNavMenu.js +8 -8
- package/es/components/SideNavMenuItem.d.ts +1 -1
- package/es/components/SideNavMenuItem.js +4 -4
- package/es/components/SideNavToggle.js +2 -2
- package/es/internal/environment.d.ts +12 -0
- package/es/internal/environment.js +15 -0
- package/es/internal/keyboard/index.d.ts +3 -0
- package/es/internal/keyboard/keys.d.ts +126 -0
- package/es/internal/keyboard/keys.js +67 -0
- package/es/internal/keyboard/match.d.ts +63 -0
- package/es/internal/keyboard/match.js +88 -0
- package/es/internal/keyboard/navigation.d.ts +19 -0
- package/es/internal/useDelayedState.d.ts +19 -0
- package/es/internal/useDelayedState.js +56 -0
- package/es/internal/useEvent.d.ts +31 -0
- package/es/internal/useEvent.js +55 -0
- package/es/internal/useMatchMedia.d.ts +1 -0
- package/es/internal/useMatchMedia.js +52 -0
- package/es/internal/useMergedRefs.d.ts +13 -0
- package/es/internal/useMergedRefs.js +38 -0
- package/es/internal/usePrefix.d.ts +9 -0
- package/es/internal/usePrefix.js +23 -0
- package/es/internal/warning.d.ts +7 -0
- package/es/internal/warning.js +31 -0
- package/es/prop-types/AriaPropTypes.d.ts +1 -0
- package/es/prop-types/AriaPropTypes.js +16 -0
- package/es/prop-types/deprecate.d.ts +1 -0
- package/es/prop-types/deprecate.js +39 -0
- package/es/prop-types/isRequiredOneOf.d.ts +13 -0
- package/es/prop-types/isRequiredOneOf.js +40 -0
- package/es/types/common.d.ts +29 -0
- package/lib/components/HeaderPanel.js +6 -6
- package/lib/components/Link.d.ts +48 -0
- package/lib/components/Link.js +65 -0
- package/lib/components/SideNav.d.ts +3 -3
- package/lib/components/SideNav.js +22 -37
- package/lib/components/SideNavItems.js +1 -1
- package/lib/components/SideNavMenu.js +10 -29
- package/lib/components/SideNavMenuItem.d.ts +1 -1
- package/lib/components/SideNavMenuItem.js +6 -6
- package/lib/components/SideNavToggle.js +2 -2
- package/lib/internal/environment.d.ts +12 -0
- package/lib/internal/environment.js +17 -0
- package/lib/internal/keyboard/index.d.ts +3 -0
- package/lib/internal/keyboard/keys.d.ts +126 -0
- package/lib/internal/keyboard/keys.js +76 -0
- package/lib/internal/keyboard/match.d.ts +63 -0
- package/lib/internal/keyboard/match.js +91 -0
- package/lib/internal/keyboard/navigation.d.ts +19 -0
- package/lib/internal/useDelayedState.d.ts +19 -0
- package/lib/internal/useDelayedState.js +58 -0
- package/lib/internal/useEvent.d.ts +31 -0
- package/lib/internal/useEvent.js +57 -0
- package/lib/internal/useMatchMedia.d.ts +1 -0
- package/lib/internal/useMatchMedia.js +54 -0
- package/lib/internal/useMergedRefs.d.ts +13 -0
- package/lib/internal/useMergedRefs.js +40 -0
- package/lib/internal/usePrefix.d.ts +9 -0
- package/lib/internal/usePrefix.js +26 -0
- package/lib/internal/warning.d.ts +7 -0
- package/lib/internal/warning.js +33 -0
- package/lib/prop-types/AriaPropTypes.d.ts +1 -0
- package/lib/prop-types/AriaPropTypes.js +18 -0
- package/lib/prop-types/deprecate.d.ts +1 -0
- package/lib/prop-types/deprecate.js +43 -0
- package/lib/prop-types/isRequiredOneOf.d.ts +13 -0
- package/lib/prop-types/isRequiredOneOf.js +44 -0
- package/lib/types/common.d.ts +29 -0
- package/package.json +2 -2
|
@@ -0,0 +1,48 @@
|
|
|
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 PropTypes from 'prop-types';
|
|
8
|
+
import React, { type ElementType, type Ref } from 'react';
|
|
9
|
+
import { type PolymorphicProps } from '../types/common';
|
|
10
|
+
type LinkBaseProps<E extends ElementType> = {
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `as` instead
|
|
13
|
+
*/
|
|
14
|
+
element?: E | undefined;
|
|
15
|
+
ref?: Ref<E>;
|
|
16
|
+
};
|
|
17
|
+
export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps<E>>;
|
|
18
|
+
/**
|
|
19
|
+
* Link is a custom component that allows us to supporting rendering elements
|
|
20
|
+
* other than `a` in our markup. The goal is to allow users to support passing
|
|
21
|
+
* in their own components to support use-cases like `react-router` or
|
|
22
|
+
* `@reach/router`
|
|
23
|
+
*/
|
|
24
|
+
declare const Link: (<E extends React.ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
|
|
25
|
+
displayName?: string | undefined;
|
|
26
|
+
propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
|
|
27
|
+
};
|
|
28
|
+
declare const LinkPropTypes: {
|
|
29
|
+
/**
|
|
30
|
+
* Provide a custom element or component to render the top-level node for the
|
|
31
|
+
* component.
|
|
32
|
+
*/
|
|
33
|
+
as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
34
|
+
/**
|
|
35
|
+
* The base element to use to build the link. Defaults to `a`, can also accept
|
|
36
|
+
* alternative tag names or custom components like `Link` from `react-router`.
|
|
37
|
+
* @deprecated Use `as` instead
|
|
38
|
+
*
|
|
39
|
+
*/
|
|
40
|
+
element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
|
|
41
|
+
/**
|
|
42
|
+
* Property to indicate if the side nav container is open (or not). Use to
|
|
43
|
+
* keep local state and styling in step with the SideNav expansion state.
|
|
44
|
+
*/
|
|
45
|
+
isSideNavExpanded: PropTypes.Requireable<boolean>;
|
|
46
|
+
};
|
|
47
|
+
export { LinkPropTypes };
|
|
48
|
+
export default Link;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
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
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
+
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
+
var PropTypes = require('prop-types');
|
|
14
|
+
var React = require('react');
|
|
15
|
+
var deprecate = require('../prop-types/deprecate.js');
|
|
16
|
+
|
|
17
|
+
// Note: Maybe we should use `as` instead of `element`? `as` appears to be
|
|
18
|
+
// standard and is used in other places in this project.
|
|
19
|
+
|
|
20
|
+
function LinkRenderFunction(_ref, ref) {
|
|
21
|
+
let {
|
|
22
|
+
element,
|
|
23
|
+
as: BaseComponent,
|
|
24
|
+
// Captured here to prevent it from being passed into the created element.
|
|
25
|
+
// See https://github.com/carbon-design-system/carbon/issues/3970
|
|
26
|
+
isSideNavExpanded: _isSideNavExpanded,
|
|
27
|
+
...rest
|
|
28
|
+
} = _ref;
|
|
29
|
+
const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
|
|
30
|
+
return /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({
|
|
31
|
+
ref: ref
|
|
32
|
+
}, rest));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Link is a custom component that allows us to supporting rendering elements
|
|
37
|
+
* other than `a` in our markup. The goal is to allow users to support passing
|
|
38
|
+
* in their own components to support use-cases like `react-router` or
|
|
39
|
+
* `@reach/router`
|
|
40
|
+
*/
|
|
41
|
+
const Link = /*#__PURE__*/React.forwardRef(LinkRenderFunction);
|
|
42
|
+
const LinkPropTypes = {
|
|
43
|
+
/**
|
|
44
|
+
* Provide a custom element or component to render the top-level node for the
|
|
45
|
+
* component.
|
|
46
|
+
*/
|
|
47
|
+
as: PropTypes.elementType,
|
|
48
|
+
/**
|
|
49
|
+
* The base element to use to build the link. Defaults to `a`, can also accept
|
|
50
|
+
* alternative tag names or custom components like `Link` from `react-router`.
|
|
51
|
+
* @deprecated Use `as` instead
|
|
52
|
+
*
|
|
53
|
+
*/
|
|
54
|
+
element: deprecate.default(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
|
|
55
|
+
/**
|
|
56
|
+
* Property to indicate if the side nav container is open (or not). Use to
|
|
57
|
+
* keep local state and styling in step with the SideNav expansion state.
|
|
58
|
+
*/
|
|
59
|
+
isSideNavExpanded: PropTypes.bool
|
|
60
|
+
};
|
|
61
|
+
Link.displayName = 'Link';
|
|
62
|
+
Link.propTypes = LinkPropTypes;
|
|
63
|
+
|
|
64
|
+
exports.LinkPropTypes = LinkPropTypes;
|
|
65
|
+
exports.default = Link;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
|
|
8
|
-
import { TranslateWithId } from '
|
|
8
|
+
import { TranslateWithId } from '../types/common';
|
|
9
9
|
export declare enum SIDE_NAV_TYPE {
|
|
10
10
|
DEFAULT = "default",
|
|
11
11
|
RAIL = "rail",
|
|
@@ -31,8 +31,8 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
|
|
|
31
31
|
onSideNavBlur?: () => void;
|
|
32
32
|
enterDelayMs?: number;
|
|
33
33
|
inert?: boolean;
|
|
34
|
-
isCollapsible
|
|
35
|
-
hideOverlay
|
|
34
|
+
isCollapsible?: boolean;
|
|
35
|
+
hideOverlay?: boolean;
|
|
36
36
|
navType: SIDE_NAV_TYPE;
|
|
37
37
|
}
|
|
38
38
|
interface SideNavContextData {
|
|
@@ -11,38 +11,19 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
|
|
|
11
11
|
var React = require('react');
|
|
12
12
|
var index = require('../_virtual/index.js');
|
|
13
13
|
var PropTypes = require('prop-types');
|
|
14
|
-
var AriaPropTypes = require('
|
|
14
|
+
var AriaPropTypes = require('../prop-types/AriaPropTypes.js');
|
|
15
15
|
var _utils = require('./_utils.js');
|
|
16
|
-
var usePrefix = require('
|
|
17
|
-
var keys = require('
|
|
18
|
-
var match = require('
|
|
19
|
-
var useMergedRefs = require('
|
|
20
|
-
var useEvent = require('
|
|
21
|
-
var useDelayedState = require('
|
|
16
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
17
|
+
var keys = require('../internal/keyboard/keys.js');
|
|
18
|
+
var match = require('../internal/keyboard/match.js');
|
|
19
|
+
var useMergedRefs = require('../internal/useMergedRefs.js');
|
|
20
|
+
var useEvent = require('../internal/useEvent.js');
|
|
21
|
+
var useDelayedState = require('../internal/useDelayedState.js');
|
|
22
22
|
var index$1 = require('../node_modules/@carbon/layout/es/index.js');
|
|
23
|
-
var useMatchMedia = require('
|
|
23
|
+
var useMatchMedia = require('../internal/useMatchMedia.js');
|
|
24
24
|
var SideNavToggle = require('./SideNavToggle.js');
|
|
25
25
|
var bucket15 = require('../node_modules/@carbon/icons-react/es/generated/bucket-15.js');
|
|
26
26
|
|
|
27
|
-
function _interopNamespaceDefault(e) {
|
|
28
|
-
var n = Object.create(null);
|
|
29
|
-
if (e) {
|
|
30
|
-
Object.keys(e).forEach(function (k) {
|
|
31
|
-
if (k !== 'default') {
|
|
32
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
33
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
34
|
-
enumerable: true,
|
|
35
|
-
get: function () { return e[k]; }
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
n.default = e;
|
|
41
|
-
return Object.freeze(n);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
var keys__namespace = /*#__PURE__*/_interopNamespaceDefault(keys);
|
|
45
|
-
|
|
46
27
|
let SIDE_NAV_TYPE = /*#__PURE__*/function (SIDE_NAV_TYPE) {
|
|
47
28
|
SIDE_NAV_TYPE["DEFAULT"] = "default";
|
|
48
29
|
SIDE_NAV_TYPE["RAIL"] = "rail";
|
|
@@ -200,7 +181,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
200
181
|
event.stopPropagation();
|
|
201
182
|
|
|
202
183
|
// stops page from scrolling
|
|
203
|
-
if (match.matches(event, [
|
|
184
|
+
if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
|
|
204
185
|
// @ts-ignore - `matches` doesn't like the object syntax without missing properties
|
|
205
186
|
{
|
|
206
187
|
code: 'KeyA'
|
|
@@ -209,7 +190,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
209
190
|
}
|
|
210
191
|
treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
|
|
211
192
|
let nextFocusNode = null;
|
|
212
|
-
if (match.match(event,
|
|
193
|
+
if (match.match(event, keys.ArrowUp)) {
|
|
213
194
|
const parentNode = parentSideNavMenu(treeWalker.currentNode);
|
|
214
195
|
let previousSideNavMenu = parentNode?.previousElementSibling;
|
|
215
196
|
|
|
@@ -230,7 +211,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
230
211
|
}
|
|
231
212
|
}
|
|
232
213
|
}
|
|
233
|
-
if (match.match(event,
|
|
214
|
+
if (match.match(event, keys.ArrowDown)) {
|
|
234
215
|
if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
|
|
235
216
|
nextFocusNode = treeWalker.nextSibling();
|
|
236
217
|
} else {
|
|
@@ -239,19 +220,19 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
239
220
|
}
|
|
240
221
|
|
|
241
222
|
// Home/End functionality
|
|
242
|
-
if (match.matches(event, [
|
|
223
|
+
if (match.matches(event, [keys.Home, keys.End])) {
|
|
243
224
|
if (!sideNavRef?.current) {
|
|
244
225
|
return;
|
|
245
226
|
}
|
|
246
227
|
const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
|
|
247
|
-
if (match.match(event,
|
|
228
|
+
if (match.match(event, keys.Home)) {
|
|
248
229
|
const firstElement = allItems[0];
|
|
249
230
|
if (firstElement) {
|
|
250
231
|
firstElement.tabIndex = 0;
|
|
251
232
|
firstElement?.focus();
|
|
252
233
|
}
|
|
253
234
|
}
|
|
254
|
-
if (match.match(event,
|
|
235
|
+
if (match.match(event, keys.End)) {
|
|
255
236
|
const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
|
|
256
237
|
const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
|
|
257
238
|
if (lastVisibleItem) {
|
|
@@ -277,7 +258,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
277
258
|
}
|
|
278
259
|
|
|
279
260
|
// close menu
|
|
280
|
-
if (match.match(event,
|
|
261
|
+
if (match.match(event, keys.Escape)) {
|
|
281
262
|
if (expanded && !isFixedNav) {
|
|
282
263
|
if (onSideNavBlur) {
|
|
283
264
|
onSideNavBlur();
|
|
@@ -310,14 +291,18 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
310
291
|
const focusedElement = document.activeElement;
|
|
311
292
|
|
|
312
293
|
// going from header menu to sideNav
|
|
313
|
-
if (match.match(event,
|
|
294
|
+
if (match.match(event, keys.Tab) && expanded && !isFixedNav && sideNavRef?.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
|
|
314
295
|
sideNavRef.current.focus();
|
|
315
296
|
}
|
|
316
297
|
});
|
|
317
298
|
const lgMediaQuery = `(min-width: ${index$1.breakpoints.lg.width})`;
|
|
318
299
|
const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
|
|
319
300
|
function resetNodeTabIndices() {
|
|
320
|
-
|
|
301
|
+
const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
|
|
302
|
+
items.forEach(item => {
|
|
303
|
+
if (item.classList.contains(`${prefix}--side-nav__toggle`)) {
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
321
306
|
item.tabIndex = -1;
|
|
322
307
|
});
|
|
323
308
|
}
|
|
@@ -336,7 +321,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
336
321
|
tabIndex: -1,
|
|
337
322
|
ref: navRef,
|
|
338
323
|
className: `${prefix}--side-nav__navigation ${className}`,
|
|
339
|
-
inert: !isRail
|
|
324
|
+
inert: !isRail && navType !== SIDE_NAV_TYPE.PANEL && !(expanded || isLg) ? -1 : undefined
|
|
340
325
|
}, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
|
|
341
326
|
renderIcon: expandedState ? bucket15.SidePanelClose : bucket15.SidePanelOpen,
|
|
342
327
|
onClick: () => setExpandedState(!expandedState)
|
|
@@ -11,7 +11,7 @@ var index = require('../_virtual/index.js');
|
|
|
11
11
|
var PropTypes = require('prop-types');
|
|
12
12
|
var React = require('react');
|
|
13
13
|
var _utils = require('./_utils.js');
|
|
14
|
-
var usePrefix = require('
|
|
14
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
15
15
|
|
|
16
16
|
const SideNavItems = _ref => {
|
|
17
17
|
let {
|
|
@@ -11,33 +11,14 @@ var index = require('../_virtual/index.js');
|
|
|
11
11
|
var PropTypes = require('prop-types');
|
|
12
12
|
var React = require('react');
|
|
13
13
|
var _utils = require('./_utils.js');
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
14
|
+
var react = require('@carbon/react');
|
|
15
|
+
var keys = require('../internal/keyboard/keys.js');
|
|
16
|
+
var match = require('../internal/keyboard/match.js');
|
|
17
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
17
18
|
var SideNav = require('./SideNav.js');
|
|
18
|
-
var useMergedRefs = require('
|
|
19
|
-
var keys = require('@carbon/react/lib/internal/keyboard/keys');
|
|
19
|
+
var useMergedRefs = require('../internal/useMergedRefs.js');
|
|
20
20
|
var bucket3 = require('../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
|
|
21
21
|
|
|
22
|
-
function _interopNamespaceDefault(e) {
|
|
23
|
-
var n = Object.create(null);
|
|
24
|
-
if (e) {
|
|
25
|
-
Object.keys(e).forEach(function (k) {
|
|
26
|
-
if (k !== 'default') {
|
|
27
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
28
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
29
|
-
enumerable: true,
|
|
30
|
-
get: function () { return e[k]; }
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
n.default = e;
|
|
36
|
-
return Object.freeze(n);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
var keys__namespace = /*#__PURE__*/_interopNamespaceDefault(keys);
|
|
40
|
-
|
|
41
22
|
var _ChevronDown;
|
|
42
23
|
const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
|
|
43
24
|
let {
|
|
@@ -130,14 +111,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
130
111
|
return node;
|
|
131
112
|
}
|
|
132
113
|
function handleKeyDown(event) {
|
|
133
|
-
if (match.match(event,
|
|
114
|
+
if (match.match(event, keys.Escape)) {
|
|
134
115
|
setIsExpanded(false);
|
|
135
116
|
}
|
|
136
117
|
const node = event.target;
|
|
137
118
|
const isMenu = node.hasAttribute('aria-expanded');
|
|
138
119
|
const isExpanded = node.getAttribute('aria-expanded');
|
|
139
120
|
const parent = parentSideNavMenu(node);
|
|
140
|
-
if (match.match(event,
|
|
121
|
+
if (match.match(event, keys.ArrowLeft)) {
|
|
141
122
|
event.stopPropagation();
|
|
142
123
|
if (isMenu) {
|
|
143
124
|
// collapse menu
|
|
@@ -160,7 +141,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
160
141
|
button?.focus();
|
|
161
142
|
}
|
|
162
143
|
}
|
|
163
|
-
if (match.match(event,
|
|
144
|
+
if (match.match(event, keys.ArrowRight)) {
|
|
164
145
|
event.stopPropagation();
|
|
165
146
|
|
|
166
147
|
// expand menu
|
|
@@ -196,9 +177,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
|
|
|
196
177
|
ref: menuRef,
|
|
197
178
|
type: "button",
|
|
198
179
|
tabIndex: -1
|
|
199
|
-
}, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
|
|
180
|
+
}, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
|
|
200
181
|
className: `${prefix}--side-nav__submenu-title`
|
|
201
|
-
}, title), /*#__PURE__*/React.createElement(SideNavIcon, {
|
|
182
|
+
}, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
|
|
202
183
|
className: `${prefix}--side-nav__submenu-chevron`,
|
|
203
184
|
small: true
|
|
204
185
|
}, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React, { ElementType, ComponentProps } from 'react';
|
|
8
|
-
import Link from '
|
|
8
|
+
import Link from './Link';
|
|
9
9
|
export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
|
|
10
10
|
/**
|
|
11
11
|
* Specify the children to be rendered inside of the `SideNavMenuItem`
|
|
@@ -11,10 +11,10 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
|
|
|
11
11
|
var index = require('../_virtual/index.js');
|
|
12
12
|
var PropTypes = require('prop-types');
|
|
13
13
|
var React = require('react');
|
|
14
|
-
var
|
|
15
|
-
var Link = require('
|
|
16
|
-
var usePrefix = require('
|
|
17
|
-
var useMergedRefs = require('
|
|
14
|
+
var react = require('@carbon/react');
|
|
15
|
+
var Link = require('./Link.js');
|
|
16
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
17
|
+
var useMergedRefs = require('../internal/useMergedRefs.js');
|
|
18
18
|
|
|
19
19
|
const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
|
|
20
20
|
const prefix = usePrefix.usePrefix();
|
|
@@ -22,7 +22,7 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
|
|
|
22
22
|
children,
|
|
23
23
|
className: customClassName,
|
|
24
24
|
depth: propDepth,
|
|
25
|
-
as: Component = Link,
|
|
25
|
+
as: Component = Link.default,
|
|
26
26
|
isActive,
|
|
27
27
|
...rest
|
|
28
28
|
} = props;
|
|
@@ -50,7 +50,7 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
|
|
|
50
50
|
className: linkClassName,
|
|
51
51
|
tabIndex: -1,
|
|
52
52
|
ref: itemRef
|
|
53
|
-
}), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
|
|
53
|
+
}), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
|
|
54
54
|
});
|
|
55
55
|
SideNavMenuItem.displayName = 'SideNavMenuItem';
|
|
56
56
|
SideNavMenuItem.propTypes = {
|
|
@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
|
|
|
13
13
|
var PropTypes = require('prop-types');
|
|
14
14
|
var React = require('react');
|
|
15
15
|
var react = require('@carbon/react');
|
|
16
|
-
var usePrefix = require('
|
|
16
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
17
17
|
|
|
18
18
|
const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref, ref) {
|
|
19
19
|
let {
|
|
@@ -37,7 +37,7 @@ SideNavToggle.propTypes = {
|
|
|
37
37
|
/**
|
|
38
38
|
* Specify the text content for the toggle
|
|
39
39
|
*/
|
|
40
|
-
children: PropTypes.
|
|
40
|
+
children: PropTypes.node,
|
|
41
41
|
/**
|
|
42
42
|
* Provide an optional function to be called when clicked
|
|
43
43
|
*/
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
/**
|
|
8
|
+
* Indicate whether current execution environment can access the DOM.
|
|
9
|
+
*
|
|
10
|
+
* @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
|
|
11
|
+
*/
|
|
12
|
+
export const canUseDOM: boolean;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
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
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Indicate whether current execution environment can access the DOM.
|
|
12
|
+
*
|
|
13
|
+
* @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
|
|
14
|
+
*/
|
|
15
|
+
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
16
|
+
|
|
17
|
+
exports.canUseDOM = canUseDOM;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
export namespace Tab {
|
|
2
|
+
let key: string;
|
|
3
|
+
let which: number;
|
|
4
|
+
let keyCode: number;
|
|
5
|
+
let code: string;
|
|
6
|
+
}
|
|
7
|
+
export namespace Enter {
|
|
8
|
+
let key_1: string;
|
|
9
|
+
export { key_1 as key };
|
|
10
|
+
let which_1: number;
|
|
11
|
+
export { which_1 as which };
|
|
12
|
+
let keyCode_1: number;
|
|
13
|
+
export { keyCode_1 as keyCode };
|
|
14
|
+
let code_1: string;
|
|
15
|
+
export { code_1 as code };
|
|
16
|
+
}
|
|
17
|
+
export namespace Escape {
|
|
18
|
+
let key_2: string[];
|
|
19
|
+
export { key_2 as key };
|
|
20
|
+
let which_2: number;
|
|
21
|
+
export { which_2 as which };
|
|
22
|
+
let keyCode_2: number;
|
|
23
|
+
export { keyCode_2 as keyCode };
|
|
24
|
+
let code_2: string;
|
|
25
|
+
export { code_2 as code };
|
|
26
|
+
}
|
|
27
|
+
export namespace Space {
|
|
28
|
+
let key_3: string;
|
|
29
|
+
export { key_3 as key };
|
|
30
|
+
let which_3: number;
|
|
31
|
+
export { which_3 as which };
|
|
32
|
+
let keyCode_3: number;
|
|
33
|
+
export { keyCode_3 as keyCode };
|
|
34
|
+
let code_3: string;
|
|
35
|
+
export { code_3 as code };
|
|
36
|
+
}
|
|
37
|
+
export namespace PageUp {
|
|
38
|
+
let key_4: string;
|
|
39
|
+
export { key_4 as key };
|
|
40
|
+
let which_4: number;
|
|
41
|
+
export { which_4 as which };
|
|
42
|
+
let keyCode_4: number;
|
|
43
|
+
export { keyCode_4 as keyCode };
|
|
44
|
+
let code_4: string;
|
|
45
|
+
export { code_4 as code };
|
|
46
|
+
}
|
|
47
|
+
export namespace PageDown {
|
|
48
|
+
let key_5: string;
|
|
49
|
+
export { key_5 as key };
|
|
50
|
+
let which_5: number;
|
|
51
|
+
export { which_5 as which };
|
|
52
|
+
let keyCode_5: number;
|
|
53
|
+
export { keyCode_5 as keyCode };
|
|
54
|
+
let code_5: string;
|
|
55
|
+
export { code_5 as code };
|
|
56
|
+
}
|
|
57
|
+
export namespace End {
|
|
58
|
+
let key_6: string;
|
|
59
|
+
export { key_6 as key };
|
|
60
|
+
let which_6: number;
|
|
61
|
+
export { which_6 as which };
|
|
62
|
+
let keyCode_6: number;
|
|
63
|
+
export { keyCode_6 as keyCode };
|
|
64
|
+
let code_6: string;
|
|
65
|
+
export { code_6 as code };
|
|
66
|
+
}
|
|
67
|
+
export namespace Home {
|
|
68
|
+
let key_7: string;
|
|
69
|
+
export { key_7 as key };
|
|
70
|
+
let which_7: number;
|
|
71
|
+
export { which_7 as which };
|
|
72
|
+
let keyCode_7: number;
|
|
73
|
+
export { keyCode_7 as keyCode };
|
|
74
|
+
let code_7: string;
|
|
75
|
+
export { code_7 as code };
|
|
76
|
+
}
|
|
77
|
+
export namespace ArrowLeft {
|
|
78
|
+
let key_8: string;
|
|
79
|
+
export { key_8 as key };
|
|
80
|
+
let which_8: number;
|
|
81
|
+
export { which_8 as which };
|
|
82
|
+
let keyCode_8: number;
|
|
83
|
+
export { keyCode_8 as keyCode };
|
|
84
|
+
let code_8: string;
|
|
85
|
+
export { code_8 as code };
|
|
86
|
+
}
|
|
87
|
+
export namespace ArrowUp {
|
|
88
|
+
let key_9: string;
|
|
89
|
+
export { key_9 as key };
|
|
90
|
+
let which_9: number;
|
|
91
|
+
export { which_9 as which };
|
|
92
|
+
let keyCode_9: number;
|
|
93
|
+
export { keyCode_9 as keyCode };
|
|
94
|
+
let code_9: string;
|
|
95
|
+
export { code_9 as code };
|
|
96
|
+
}
|
|
97
|
+
export namespace ArrowRight {
|
|
98
|
+
let key_10: string;
|
|
99
|
+
export { key_10 as key };
|
|
100
|
+
let which_10: number;
|
|
101
|
+
export { which_10 as which };
|
|
102
|
+
let keyCode_10: number;
|
|
103
|
+
export { keyCode_10 as keyCode };
|
|
104
|
+
let code_10: string;
|
|
105
|
+
export { code_10 as code };
|
|
106
|
+
}
|
|
107
|
+
export namespace ArrowDown {
|
|
108
|
+
let key_11: string;
|
|
109
|
+
export { key_11 as key };
|
|
110
|
+
let which_11: number;
|
|
111
|
+
export { which_11 as which };
|
|
112
|
+
let keyCode_11: number;
|
|
113
|
+
export { keyCode_11 as keyCode };
|
|
114
|
+
let code_11: string;
|
|
115
|
+
export { code_11 as code };
|
|
116
|
+
}
|
|
117
|
+
export namespace Delete {
|
|
118
|
+
let key_12: string;
|
|
119
|
+
export { key_12 as key };
|
|
120
|
+
let which_12: number;
|
|
121
|
+
export { which_12 as which };
|
|
122
|
+
let keyCode_12: number;
|
|
123
|
+
export { keyCode_12 as keyCode };
|
|
124
|
+
let code_12: string;
|
|
125
|
+
export { code_12 as code };
|
|
126
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
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
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
11
|
+
/**
|
|
12
|
+
* Copyright IBM Corp. 2016, 2023
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
const Tab = {
|
|
19
|
+
key: 'Tab',
|
|
20
|
+
which: 9,
|
|
21
|
+
keyCode: 9,
|
|
22
|
+
code: 'Tab'
|
|
23
|
+
};
|
|
24
|
+
const Escape = {
|
|
25
|
+
key: ['Escape',
|
|
26
|
+
// IE11 Escape
|
|
27
|
+
'Esc'],
|
|
28
|
+
which: 27,
|
|
29
|
+
keyCode: 27,
|
|
30
|
+
code: 'Esc'
|
|
31
|
+
};
|
|
32
|
+
const End = {
|
|
33
|
+
key: 'End',
|
|
34
|
+
which: 35,
|
|
35
|
+
keyCode: 35,
|
|
36
|
+
code: 'Numpad1'
|
|
37
|
+
};
|
|
38
|
+
const Home = {
|
|
39
|
+
key: 'Home',
|
|
40
|
+
which: 36,
|
|
41
|
+
keyCode: 36,
|
|
42
|
+
code: 'Numpad7'
|
|
43
|
+
};
|
|
44
|
+
const ArrowLeft = {
|
|
45
|
+
key: 'ArrowLeft',
|
|
46
|
+
which: 37,
|
|
47
|
+
keyCode: 37,
|
|
48
|
+
code: 'ArrowLeft'
|
|
49
|
+
};
|
|
50
|
+
const ArrowUp = {
|
|
51
|
+
key: 'ArrowUp',
|
|
52
|
+
which: 38,
|
|
53
|
+
keyCode: 38,
|
|
54
|
+
code: 'ArrowUp'
|
|
55
|
+
};
|
|
56
|
+
const ArrowRight = {
|
|
57
|
+
key: 'ArrowRight',
|
|
58
|
+
which: 39,
|
|
59
|
+
keyCode: 39,
|
|
60
|
+
code: 'ArrowRight'
|
|
61
|
+
};
|
|
62
|
+
const ArrowDown = {
|
|
63
|
+
key: 'ArrowDown',
|
|
64
|
+
which: 40,
|
|
65
|
+
keyCode: 40,
|
|
66
|
+
code: 'ArrowDown'
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
exports.ArrowDown = ArrowDown;
|
|
70
|
+
exports.ArrowLeft = ArrowLeft;
|
|
71
|
+
exports.ArrowRight = ArrowRight;
|
|
72
|
+
exports.ArrowUp = ArrowUp;
|
|
73
|
+
exports.End = End;
|
|
74
|
+
exports.Escape = Escape;
|
|
75
|
+
exports.Home = Home;
|
|
76
|
+
exports.Tab = Tab;
|