@carbon/ibm-products 2.30.0 → 2.31.0-alpha.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +242 -23
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +4 -4
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +242 -23
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +238 -19
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ComboButton/ComboButton.d.ts +38 -18
- package/es/components/ComboButton/ComboButton.js +25 -21
- package/es/components/ComboButton/ComboButtonItem/index.d.ts +22 -13
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +7 -0
- package/es/components/EditInPlace/EditInPlace.js +4 -5
- package/es/components/Nav/Nav.d.ts +3 -0
- package/es/components/Nav/Nav.js +154 -0
- package/es/components/Nav/NavItem.d.ts +35 -0
- package/es/components/Nav/NavItem.js +149 -0
- package/es/components/Nav/NavItemLink.d.ts +3 -0
- package/es/components/Nav/NavItemLink.js +30 -0
- package/es/components/Nav/NavList.d.ts +4 -0
- package/es/components/Nav/NavList.js +168 -0
- package/es/components/Nav/index.d.ts +3 -0
- package/es/components/Tearsheet/TearsheetShell.js +22 -7
- package/es/components/index.d.ts +1 -0
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/node_modules/@carbon/icon-helpers/es/index.js +140 -0
- package/es/node_modules/@carbon/icons-react/es/Icon.js +73 -0
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-2.js +3091 -0
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-8.js +3004 -0
- package/es/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +14 -0
- package/es/settings.d.ts +1 -0
- package/lib/components/ComboButton/ComboButton.d.ts +38 -18
- package/lib/components/ComboButton/ComboButton.js +24 -20
- package/lib/components/ComboButton/ComboButtonItem/index.d.ts +22 -13
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +7 -0
- package/lib/components/EditInPlace/EditInPlace.js +4 -5
- package/lib/components/Nav/Nav.d.ts +3 -0
- package/lib/components/Nav/Nav.js +161 -0
- package/lib/components/Nav/NavItem.d.ts +35 -0
- package/lib/components/Nav/NavItem.js +160 -0
- package/lib/components/Nav/NavItemLink.d.ts +3 -0
- package/lib/components/Nav/NavItemLink.js +38 -0
- package/lib/components/Nav/NavList.d.ts +4 -0
- package/lib/components/Nav/NavList.js +179 -0
- package/lib/components/Nav/index.d.ts +3 -0
- package/lib/components/Tearsheet/TearsheetShell.js +22 -7
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/node_modules/@carbon/icon-helpers/es/index.js +145 -0
- package/lib/node_modules/@carbon/icons-react/es/Icon.js +81 -0
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-2.js +3223 -0
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-8.js +3136 -0
- package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +18 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +3 -3
- package/scss/components/ComboButton/_combo-button.scss +19 -21
- package/scss/components/Nav/_carbon-imports.scss +9 -0
- package/scss/components/Nav/_index-with-carbon.scss +9 -0
- package/scss/components/Nav/_index.scss +8 -0
- package/scss/components/Nav/_nav.scss +259 -0
- package/scss/components/Tearsheet/_tearsheet.scss +24 -6
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -1,21 +1,41 @@
|
|
1
1
|
/**
|
2
|
-
*
|
2
|
+
* Copyright IBM Corp. 2020, 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.
|
3
6
|
*/
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
7
|
+
import React, { ComponentProps, ReactNode } from 'react';
|
8
|
+
interface ComboButtonProps extends ComponentProps<'div'> {
|
9
|
+
/** Provide the contents of the `ComboButton` */
|
10
|
+
children?: ReactNode;
|
11
|
+
/** Provide an optional class to be applied to the containing node */
|
12
|
+
className?: string;
|
13
|
+
/** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
|
14
|
+
overflowMenu: {
|
15
|
+
/**
|
16
|
+
* The event handler for the `click` event.
|
17
|
+
*/
|
18
|
+
onClick?(): void;
|
19
|
+
/**
|
20
|
+
* Function called when menu is closed
|
21
|
+
*/
|
22
|
+
onClose?(): void;
|
23
|
+
/**
|
24
|
+
* The event handler for the `focus` event.
|
25
|
+
*/
|
26
|
+
onFocus?(): void;
|
27
|
+
/**
|
28
|
+
* The event handler for the `keydown` event.
|
29
|
+
*/
|
30
|
+
onKeyDown?(): void;
|
31
|
+
/**
|
32
|
+
* Function called when menu is opened
|
33
|
+
*/
|
34
|
+
onOpen?(): void;
|
35
|
+
};
|
20
36
|
}
|
21
|
-
|
37
|
+
/**
|
38
|
+
* The combo button consolidates similar actions, while exposing the most commonly used one.
|
39
|
+
*/
|
40
|
+
declare const ComboButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<ComboButtonProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
41
|
+
export { ComboButton };
|
@@ -11,18 +11,17 @@ import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
|
|
11
11
|
import cx from 'classnames';
|
12
12
|
import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
|
13
13
|
import uuidv4 from '../../global/js/utils/uuidv4.js';
|
14
|
-
import React__default, { useRef, useState, Children, createElement } from 'react';
|
14
|
+
import React__default, { forwardRef, useRef, useState, Children, createElement } from 'react';
|
15
|
+
import { pkg } from '../../settings.js';
|
15
16
|
|
16
17
|
var _excluded = ["children", "className", "overflowMenu"],
|
17
|
-
_excluded2 = ["children"]
|
18
|
-
|
19
|
-
var blockClass = 'security--combo-button';
|
18
|
+
_excluded2 = ["children", "renderIcon"];
|
19
|
+
var blockClass = "".concat(pkg.prefix, "--combo-button");
|
20
20
|
var componentName = 'ComboButton';
|
21
|
-
|
22
21
|
/**
|
23
22
|
* The combo button consolidates similar actions, while exposing the most commonly used one.
|
24
23
|
*/
|
25
|
-
var ComboButton = function
|
24
|
+
var ComboButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
26
25
|
var children = _ref.children,
|
27
26
|
className = _ref.className,
|
28
27
|
overflowMenu = _ref.overflowMenu,
|
@@ -33,21 +32,22 @@ var ComboButton = function ComboButton(_ref) {
|
|
33
32
|
_useState2 = _slicedToArray(_useState, 2),
|
34
33
|
isOpen = _useState2[0],
|
35
34
|
setIsOpen = _useState2[1];
|
36
|
-
var _Children$toArray$fil = Children.toArray(children).filter(Boolean).map(function (
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
35
|
+
var _Children$toArray$fil = Children.toArray(children).filter(Boolean).map(function (child) {
|
36
|
+
if ( /*#__PURE__*/React__default.isValidElement(child)) {
|
37
|
+
var props = child.props;
|
38
|
+
return _objectSpread2(_objectSpread2({}, props), {}, {
|
39
|
+
children: /*#__PURE__*/React__default.createElement("span", {
|
40
|
+
className: "".concat(blockClass, "__action")
|
41
|
+
}, child)
|
42
|
+
});
|
43
|
+
}
|
44
|
+
return null;
|
46
45
|
}),
|
47
46
|
_Children$toArray$fil2 = _toArray(_Children$toArray$fil),
|
48
47
|
primaryAction = _Children$toArray$fil2[0],
|
49
48
|
restActions = _Children$toArray$fil2.slice(1);
|
50
49
|
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
50
|
+
ref: ref,
|
51
51
|
className: cx(blockClass, className),
|
52
52
|
"data-floating-menu-container": true
|
53
53
|
}), /*#__PURE__*/React__default.createElement(Button, primaryAction), restActions.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({}, overflowMenu, {
|
@@ -73,10 +73,10 @@ var ComboButton = function ComboButton(_ref) {
|
|
73
73
|
});
|
74
74
|
},
|
75
75
|
flipped: true
|
76
|
-
}), restActions.map(function (
|
77
|
-
var children =
|
78
|
-
Icon =
|
79
|
-
action = _objectWithoutProperties(
|
76
|
+
}), restActions.map(function (_ref2, index) {
|
77
|
+
var children = _ref2.children,
|
78
|
+
Icon = _ref2.renderIcon,
|
79
|
+
action = _objectWithoutProperties(_ref2, _excluded2);
|
80
80
|
return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({}, action, {
|
81
81
|
key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
|
82
82
|
className: "".concat(blockClass, "__overflow-menu__item"),
|
@@ -85,17 +85,21 @@ var ComboButton = function ComboButton(_ref) {
|
|
85
85
|
}, /*#__PURE__*/React__default.createElement(Icon, null)))
|
86
86
|
}));
|
87
87
|
})));
|
88
|
-
};
|
88
|
+
});
|
89
|
+
|
90
|
+
/**@ts-ignore*/
|
89
91
|
ComboButton.deprecated = {
|
90
92
|
level: 'warn',
|
91
93
|
details: "Please replace ".concat(componentName, " with Carbon's ComboButton")
|
92
94
|
};
|
95
|
+
ComboButton.displayName = componentName;
|
93
96
|
ComboButton.propTypes = {
|
94
97
|
/** Provide the contents of the `ComboButton` */
|
95
98
|
children: propTypesExports.node.isRequired,
|
96
99
|
/** Provide an optional class to be applied to the containing node */
|
97
100
|
className: propTypesExports.string,
|
98
101
|
/** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
|
102
|
+
/**@ts-ignore*/
|
99
103
|
overflowMenu: propTypesExports.shape(OverflowMenu.propTypes)
|
100
104
|
};
|
101
105
|
|
@@ -1,16 +1,25 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 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
|
+
*/
|
1
7
|
/**
|
2
8
|
* The combo button item provides additional actions a user can take.
|
3
9
|
*/
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
import
|
10
|
+
declare const ComboButtonItem: {
|
11
|
+
({ ...rest }: {
|
12
|
+
[x: string]: any;
|
13
|
+
}): import("react/jsx-runtime").JSX.Element;
|
14
|
+
propTypes: {
|
15
|
+
/** Provide the contents of the `ComboButtonItem` */
|
16
|
+
children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
|
17
|
+
/** Specify whether the `ComboButton` should be disabled, or not */
|
18
|
+
disabled: import("prop-types").Requireable<boolean>;
|
19
|
+
/** Provide an optional `href` for the `ComboButtonItem` to become an `a` element */
|
20
|
+
href: import("prop-types").Requireable<string>;
|
21
|
+
/** Provide an optional icon to render */
|
22
|
+
renderIcon: import("prop-types").Requireable<object>;
|
23
|
+
};
|
24
|
+
};
|
25
|
+
export { ComboButtonItem };
|
@@ -86,12 +86,19 @@ var stateReducer = function stateReducer(newState, action) {
|
|
86
86
|
getRowId = _ref3.getRowId,
|
87
87
|
indeterminate = _ref3.indeterminate,
|
88
88
|
isChecked = _ref3.isChecked;
|
89
|
+
var newSelectedRowIds = {};
|
89
90
|
if (rows) {
|
90
91
|
var newSelectedRowData = {};
|
91
92
|
rows.forEach(function (row) {
|
93
|
+
var props = row.getRowProps();
|
94
|
+
if (props && props.disabled) {
|
95
|
+
return;
|
96
|
+
}
|
97
|
+
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
92
98
|
newSelectedRowData[getRowId(row.original, row.index)] = row.original;
|
93
99
|
});
|
94
100
|
return _objectSpread2(_objectSpread2({}, newState), {}, {
|
101
|
+
selectedRowIds: newSelectedRowIds,
|
95
102
|
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
|
96
103
|
});
|
97
104
|
}
|
@@ -142,10 +142,7 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
142
142
|
className: cx(blockClass, "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
|
143
143
|
onFocus: onFocusHandler,
|
144
144
|
onBlur: onBlurHandler
|
145
|
-
}, /*#__PURE__*/React__default.createElement("
|
146
|
-
className: "".concat(blockClass, "__text-input-label"),
|
147
|
-
htmlFor: id
|
148
|
-
}, labelText), /*#__PURE__*/React__default.createElement("input", {
|
145
|
+
}, /*#__PURE__*/React__default.createElement("input", {
|
149
146
|
id: id,
|
150
147
|
className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--").concat(size)),
|
151
148
|
type: "text",
|
@@ -154,7 +151,9 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
154
151
|
ref: inputRef
|
155
152
|
// readOnly={readOnly}
|
156
153
|
,
|
157
|
-
onKeyDown: onKeyHandler
|
154
|
+
onKeyDown: onKeyHandler,
|
155
|
+
"aria-label": labelText,
|
156
|
+
"aria-invalid": invalid
|
158
157
|
}), /*#__PURE__*/React__default.createElement("div", {
|
159
158
|
className: "".concat(blockClass, "__ellipsis"),
|
160
159
|
"aria-hidden": !focused
|
@@ -0,0 +1,154 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 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
|
+
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
10
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import NavList, { blockClass as blockClass$2 } from './NavList.js';
|
13
|
+
import NavItem, { blockClass as blockClass$1 } from './NavItem.js';
|
14
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
15
|
+
import { pkg } from '../../settings.js';
|
16
|
+
|
17
|
+
var _excluded = ["activeHref", "className", "children", "heading", "label"];
|
18
|
+
var componentName = 'Nav';
|
19
|
+
var blockClass = "".concat(pkg.prefix, "--nav");
|
20
|
+
var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
21
|
+
var activeHref = _ref.activeHref,
|
22
|
+
className = _ref.className,
|
23
|
+
children = _ref.children,
|
24
|
+
heading = _ref.heading,
|
25
|
+
label = _ref.label,
|
26
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
27
|
+
var _useState = useState(activeHref),
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
29
|
+
_activeHref = _useState2[0],
|
30
|
+
setActiveHref = _useState2[1];
|
31
|
+
var navigationLists = useRef({});
|
32
|
+
useEffect(function () {
|
33
|
+
if (!_activeHref && window.location) {
|
34
|
+
var _window$location = window.location,
|
35
|
+
hash = _window$location.hash,
|
36
|
+
pathname = _window$location.pathname;
|
37
|
+
setActiveHref(pathname + hash);
|
38
|
+
}
|
39
|
+
}, [_activeHref]);
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Creates a new child list item.
|
43
|
+
* @param {NavItem} child The child list item to create.
|
44
|
+
* @param {number} index The index of the child list item.
|
45
|
+
* @returns {NavItem} The new child list item.
|
46
|
+
*/
|
47
|
+
var buildNewItemChild = function buildNewItemChild(child, index) {
|
48
|
+
var key = "".concat(blockClass$1, "--").concat(index);
|
49
|
+
return /*#__PURE__*/React__default.createElement(NavItem, _extends({}, child.props, {
|
50
|
+
activeHref: _activeHref,
|
51
|
+
key: key,
|
52
|
+
onClick: function onClick(event, href) {
|
53
|
+
return handleItemClick(event, href, child.props.onClick);
|
54
|
+
}
|
55
|
+
}));
|
56
|
+
};
|
57
|
+
|
58
|
+
/**
|
59
|
+
* Creates a new child list.
|
60
|
+
* @param {NavList} child The child list to create.
|
61
|
+
* @param {number} index The index of the child list.
|
62
|
+
* @returns {NavList} The new child list.
|
63
|
+
*/
|
64
|
+
var buildNewListChild = function buildNewListChild(child, index) {
|
65
|
+
var key = "".concat(blockClass$2, "--").concat(index);
|
66
|
+
return /*#__PURE__*/React__default.createElement(NavList, _extends({}, child.props, {
|
67
|
+
activeHref: _activeHref,
|
68
|
+
id: key,
|
69
|
+
key: key,
|
70
|
+
onListClick: handleListClick,
|
71
|
+
onItemClick: handleItemClick,
|
72
|
+
ref: function ref(el) {
|
73
|
+
return navigationLists.current[key] = el;
|
74
|
+
}
|
75
|
+
}));
|
76
|
+
};
|
77
|
+
|
78
|
+
/**
|
79
|
+
* Handles toggling the list item.
|
80
|
+
* @param {SyntheticEvent} event The event fired when the list item is toggled.
|
81
|
+
* @param {string} href The URL of the list item.
|
82
|
+
*/
|
83
|
+
var handleItemClick = function handleItemClick(event, href, onClick) {
|
84
|
+
event.stopPropagation();
|
85
|
+
var type = event.type,
|
86
|
+
which = event.which;
|
87
|
+
|
88
|
+
// Enter (13) and spacebar (32).
|
89
|
+
var acceptableEvent = which === 13 || which === 32 || type === 'click';
|
90
|
+
var diffHref = href !== _activeHref;
|
91
|
+
if (acceptableEvent && diffHref) {
|
92
|
+
setActiveHref(href);
|
93
|
+
}
|
94
|
+
if (onClick) {
|
95
|
+
onClick(event);
|
96
|
+
}
|
97
|
+
};
|
98
|
+
|
99
|
+
/**
|
100
|
+
* Handles when a list has been selected.
|
101
|
+
* @param {number} id The index of the list.
|
102
|
+
*/
|
103
|
+
var handleListClick = function handleListClick(id) {
|
104
|
+
Object.keys(navigationLists.current).forEach(function (key) {
|
105
|
+
if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
|
106
|
+
navigationLists.current[key].close();
|
107
|
+
}
|
108
|
+
});
|
109
|
+
};
|
110
|
+
return /*#__PURE__*/React__default.createElement("nav", _extends({
|
111
|
+
className: cx(blockClass, className),
|
112
|
+
"aria-label": label,
|
113
|
+
ref: ref
|
114
|
+
}, getDevtoolsProps(componentName), rest), heading && /*#__PURE__*/React__default.createElement("h1", {
|
115
|
+
className: "".concat(blockClass, "__heading")
|
116
|
+
}, heading), /*#__PURE__*/React__default.createElement("ul", {
|
117
|
+
className: "".concat(blockClass, "__wrapper"),
|
118
|
+
role: "menubar"
|
119
|
+
}, React__default.Children.map(children, function (child, index) {
|
120
|
+
var _child$type;
|
121
|
+
return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
|
122
|
+
})));
|
123
|
+
});
|
124
|
+
Nav.propTypes = {
|
125
|
+
/**
|
126
|
+
* Hypertext reference for active page.
|
127
|
+
*/
|
128
|
+
activeHref: PropTypes.string,
|
129
|
+
/**
|
130
|
+
* Child elements.
|
131
|
+
*/
|
132
|
+
children: PropTypes.node,
|
133
|
+
/**
|
134
|
+
* Extra classes to add.
|
135
|
+
*/
|
136
|
+
className: PropTypes.string,
|
137
|
+
/**
|
138
|
+
* Heading.
|
139
|
+
*/
|
140
|
+
heading: PropTypes.string,
|
141
|
+
/**
|
142
|
+
* Aria-label on the rendered `nav` element.
|
143
|
+
*/
|
144
|
+
label: PropTypes.string.isRequired
|
145
|
+
};
|
146
|
+
|
147
|
+
// Return a placeholder if not released and not enabled by feature flag
|
148
|
+
Nav = pkg.checkComponentEnabled(Nav, componentName);
|
149
|
+
|
150
|
+
// The display name of the component, used by React. Note that displayName
|
151
|
+
// is used in preference to relying on function.name.
|
152
|
+
Nav.displayName = componentName;
|
153
|
+
|
154
|
+
export { Nav };
|
@@ -0,0 +1,35 @@
|
|
1
|
+
export const blockClass: string;
|
2
|
+
export function NavItem({ activeHref, children, className, current, disabled, element, href, id, label, onClick, tabIndex, ...rest }: {
|
3
|
+
[x: string]: any;
|
4
|
+
activeHref?: string | undefined;
|
5
|
+
children?: any;
|
6
|
+
className: any;
|
7
|
+
current: any;
|
8
|
+
disabled?: boolean | undefined;
|
9
|
+
element?: string | undefined;
|
10
|
+
href: any;
|
11
|
+
id: any;
|
12
|
+
label: any;
|
13
|
+
onClick?: (() => void) | undefined;
|
14
|
+
tabIndex?: number | undefined;
|
15
|
+
}): import("react/jsx-runtime").JSX.Element;
|
16
|
+
export namespace NavItem {
|
17
|
+
export { componentName as displayName };
|
18
|
+
export namespace propTypes {
|
19
|
+
let activeHref: PropTypes.Requireable<string>;
|
20
|
+
let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
|
21
|
+
let className: PropTypes.Requireable<string>;
|
22
|
+
let current: PropTypes.Requireable<string>;
|
23
|
+
let disabled: PropTypes.Requireable<boolean>;
|
24
|
+
let element: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
25
|
+
let href: PropTypes.Requireable<string>;
|
26
|
+
let id: PropTypes.Requireable<string>;
|
27
|
+
let label: PropTypes.Requireable<string>;
|
28
|
+
let link: PropTypes.Requireable<boolean>;
|
29
|
+
let onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
30
|
+
let tabIndex: PropTypes.Requireable<number>;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
export default NavItem;
|
34
|
+
declare const componentName: "NavItem";
|
35
|
+
import PropTypes from 'prop-types';
|
@@ -0,0 +1,149 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 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
|
+
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import React__default, { useRef } from 'react';
|
10
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import { pkg } from '../../settings.js';
|
13
|
+
import uuidv4 from '../../global/js/utils/uuidv4.js';
|
14
|
+
import NavItemLink from './NavItemLink.js';
|
15
|
+
import { Launch } from '../../node_modules/@carbon/icons-react/es/generated/bucket-8.js';
|
16
|
+
|
17
|
+
var _excluded = ["activeHref", "children", "className", "current", "disabled", "element", "href", "id", "label", "onClick", "tabIndex"];
|
18
|
+
|
19
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
20
|
+
var blockClass = "".concat(pkg.prefix, "--nav-item");
|
21
|
+
var componentName = 'NavItem';
|
22
|
+
|
23
|
+
// Default values for props
|
24
|
+
var defaults = {
|
25
|
+
activeHref: '#',
|
26
|
+
disabled: false,
|
27
|
+
element: 'a',
|
28
|
+
onClick: function onClick() {},
|
29
|
+
tabIndex: 0
|
30
|
+
};
|
31
|
+
|
32
|
+
/**
|
33
|
+
* Navigation item component.
|
34
|
+
*/
|
35
|
+
var NavItem = function NavItem(_ref) {
|
36
|
+
var _ref$activeHref = _ref.activeHref,
|
37
|
+
activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
|
38
|
+
_ref$children = _ref.children,
|
39
|
+
children = _ref$children === void 0 ? defaults.children : _ref$children,
|
40
|
+
className = _ref.className,
|
41
|
+
current = _ref.current,
|
42
|
+
_ref$disabled = _ref.disabled,
|
43
|
+
disabled = _ref$disabled === void 0 ? defaults.disabled : _ref$disabled,
|
44
|
+
_ref$element = _ref.element,
|
45
|
+
element = _ref$element === void 0 ? defaults.element : _ref$element,
|
46
|
+
href = _ref.href,
|
47
|
+
id = _ref.id,
|
48
|
+
label = _ref.label,
|
49
|
+
_ref$onClick = _ref.onClick,
|
50
|
+
_onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
|
51
|
+
_ref$tabIndex = _ref.tabIndex,
|
52
|
+
tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
|
53
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
54
|
+
var internalId = useRef(uuidv4());
|
55
|
+
var instanceId = "".concat(blockClass, "__").concat(internalId.current);
|
56
|
+
var navItemId = id || instanceId;
|
57
|
+
var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
|
58
|
+
var externalLink = isAbsoluteLink.test(href) && href.indexOf(window.location.host) === -1;
|
59
|
+
var linkClassName = "".concat(blockClass, "__link");
|
60
|
+
var handleDisabled = function handleDisabled(action) {
|
61
|
+
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
62
|
+
return !disabled ? action : defaultValue;
|
63
|
+
};
|
64
|
+
var navItemTabIndex = handleDisabled(tabIndex, -1);
|
65
|
+
var externalLinkProps = externalLink && {
|
66
|
+
rel: 'noopener noreferrer',
|
67
|
+
target: '_blank'
|
68
|
+
};
|
69
|
+
return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
|
70
|
+
className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--active"), current !== null && current === navItemId || activeHref !== undefined && activeHref === href && !externalLink), "".concat(blockClass, "--disabled"), disabled)),
|
71
|
+
label: label,
|
72
|
+
onClick: function onClick(event) {
|
73
|
+
return handleDisabled(_onClick(event, href));
|
74
|
+
},
|
75
|
+
onKeyDown: function onKeyDown(event) {
|
76
|
+
return handleDisabled(_onClick(event, href));
|
77
|
+
},
|
78
|
+
role: "menuitem"
|
79
|
+
}), /*#__PURE__*/React__default.createElement(NavItemLink, _extends({
|
80
|
+
id: navItemId,
|
81
|
+
className: cx(linkClassName, _defineProperty({}, "".concat(blockClass, "__link--external"), externalLink)),
|
82
|
+
element: element,
|
83
|
+
href: href,
|
84
|
+
tabIndex: navItemTabIndex
|
85
|
+
}, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default.createElement(Launch, {
|
86
|
+
className: "".concat(blockClass, "__link--external__icon")
|
87
|
+
})));
|
88
|
+
};
|
89
|
+
|
90
|
+
// The display name of the component, used by React. Note that displayName
|
91
|
+
// is used in preference to relying on function.name.
|
92
|
+
NavItem.displayName = componentName;
|
93
|
+
|
94
|
+
// The types and DocGen commentary for the component props,
|
95
|
+
// in alphabetical order (for consistency).
|
96
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
97
|
+
NavItem.propTypes = {
|
98
|
+
/**
|
99
|
+
* Hypertext reference for active page.
|
100
|
+
*/
|
101
|
+
activeHref: PropTypes.string,
|
102
|
+
/**
|
103
|
+
* Provide the contents of the Nav.
|
104
|
+
*/
|
105
|
+
children: PropTypes.node.isRequired,
|
106
|
+
/**
|
107
|
+
* Provide an optional class to be applied to the containing node.
|
108
|
+
*/
|
109
|
+
className: PropTypes.string,
|
110
|
+
/**
|
111
|
+
* Currently selected item.
|
112
|
+
*/
|
113
|
+
current: PropTypes.string,
|
114
|
+
/**
|
115
|
+
* Whether the item is disabled.
|
116
|
+
*/
|
117
|
+
disabled: PropTypes.bool,
|
118
|
+
/**
|
119
|
+
* The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`.
|
120
|
+
*/
|
121
|
+
element: PropTypes.elementType,
|
122
|
+
/**
|
123
|
+
* The href of the nav item.
|
124
|
+
*/
|
125
|
+
href: PropTypes.string,
|
126
|
+
/**
|
127
|
+
* Identifier.
|
128
|
+
*/
|
129
|
+
id: PropTypes.string,
|
130
|
+
/**
|
131
|
+
* Label of an item.
|
132
|
+
*/
|
133
|
+
label: PropTypes.string,
|
134
|
+
/**
|
135
|
+
* Whether the item is a link.
|
136
|
+
*/
|
137
|
+
link: PropTypes.bool,
|
138
|
+
/**
|
139
|
+
* Click handler of an item.
|
140
|
+
*/
|
141
|
+
onClick: PropTypes.func,
|
142
|
+
/**
|
143
|
+
* `tabindex` of an item.
|
144
|
+
*/
|
145
|
+
tabIndex: PropTypes.number
|
146
|
+
};
|
147
|
+
var NavItem$1 = NavItem;
|
148
|
+
|
149
|
+
export { NavItem, blockClass, NavItem$1 as default };
|
@@ -0,0 +1,30 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 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
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
10
|
+
import React__default from 'react';
|
11
|
+
|
12
|
+
var _excluded = ["element"];
|
13
|
+
var NavItemLink = /*#__PURE__*/React__default.forwardRef(function NavItemLink(props, ref) {
|
14
|
+
var element = props.element,
|
15
|
+
rest = _objectWithoutProperties(props, _excluded);
|
16
|
+
return /*#__PURE__*/React__default.createElement(element, _objectSpread2(_objectSpread2({}, rest), {}, {
|
17
|
+
ref: ref
|
18
|
+
}));
|
19
|
+
});
|
20
|
+
NavItemLink.displayName = 'NavItemLink';
|
21
|
+
NavItemLink.propTypes = {
|
22
|
+
/** @type {elementType} The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`. */
|
23
|
+
element: PropTypes.elementType
|
24
|
+
};
|
25
|
+
NavItemLink.defaultProps = {
|
26
|
+
element: 'a'
|
27
|
+
};
|
28
|
+
var NavItemLink$1 = NavItemLink;
|
29
|
+
|
30
|
+
export { NavItemLink$1 as default };
|