@carbon/ibm-products 2.30.0-alpha.9 → 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 +270 -30
- 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 +21 -11
- 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 +270 -30
- 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 +266 -26
- 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/CustomizeColumns/DraggableItemsList.js +4 -2
- 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/CustomizeColumns/DraggableItemsList.js +4 -2
- 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 +5 -4
- package/scss/components/ComboButton/_combo-button.scss +19 -21
- package/scss/components/Datagrid/styles/_datagrid.scss +15 -4
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +5 -2
- 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
@@ -0,0 +1,14 @@
|
|
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 PropTypes from '../../../prop-types/index.js';
|
9
|
+
|
10
|
+
var iconPropTypes = {
|
11
|
+
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
12
|
+
};
|
13
|
+
|
14
|
+
export { iconPropTypes as i };
|
package/es/settings.d.ts
CHANGED
@@ -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 };
|
@@ -16,6 +16,7 @@ var cx = require('classnames');
|
|
16
16
|
var index = require('../../node_modules/prop-types/index.js');
|
17
17
|
var uuidv4 = require('../../global/js/utils/uuidv4.js');
|
18
18
|
var React = require('react');
|
19
|
+
var settings = require('../../settings.js');
|
19
20
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
21
22
|
|
@@ -23,15 +24,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
24
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
25
|
|
25
26
|
var _excluded = ["children", "className", "overflowMenu"],
|
26
|
-
_excluded2 = ["children"]
|
27
|
-
|
28
|
-
var blockClass = 'security--combo-button';
|
27
|
+
_excluded2 = ["children", "renderIcon"];
|
28
|
+
var blockClass = "".concat(settings.pkg.prefix, "--combo-button");
|
29
29
|
var componentName = 'ComboButton';
|
30
|
-
|
31
30
|
/**
|
32
31
|
* The combo button consolidates similar actions, while exposing the most commonly used one.
|
33
32
|
*/
|
34
|
-
var ComboButton = function
|
33
|
+
var ComboButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
35
34
|
var children = _ref.children,
|
36
35
|
className = _ref.className,
|
37
36
|
overflowMenu = _ref.overflowMenu,
|
@@ -42,21 +41,22 @@ var ComboButton = function ComboButton(_ref) {
|
|
42
41
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
43
42
|
isOpen = _useState2[0],
|
44
43
|
setIsOpen = _useState2[1];
|
45
|
-
var _Children$toArray$fil = React.Children.toArray(children).filter(Boolean).map(function (
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
44
|
+
var _Children$toArray$fil = React.Children.toArray(children).filter(Boolean).map(function (child) {
|
45
|
+
if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
|
46
|
+
var props = child.props;
|
47
|
+
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
|
48
|
+
children: /*#__PURE__*/React__default["default"].createElement("span", {
|
49
|
+
className: "".concat(blockClass, "__action")
|
50
|
+
}, child)
|
51
|
+
});
|
52
|
+
}
|
53
|
+
return null;
|
55
54
|
}),
|
56
55
|
_Children$toArray$fil2 = _rollupPluginBabelHelpers.toArray(_Children$toArray$fil),
|
57
56
|
primaryAction = _Children$toArray$fil2[0],
|
58
57
|
restActions = _Children$toArray$fil2.slice(1);
|
59
58
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
59
|
+
ref: ref,
|
60
60
|
className: cx__default["default"](blockClass, className),
|
61
61
|
"data-floating-menu-container": true
|
62
62
|
}), /*#__PURE__*/React__default["default"].createElement(react.Button, primaryAction), restActions.length > 0 && /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, overflowMenu, {
|
@@ -82,10 +82,10 @@ var ComboButton = function ComboButton(_ref) {
|
|
82
82
|
});
|
83
83
|
},
|
84
84
|
flipped: true
|
85
|
-
}), restActions.map(function (
|
86
|
-
var children =
|
87
|
-
Icon =
|
88
|
-
action = _rollupPluginBabelHelpers.objectWithoutProperties(
|
85
|
+
}), restActions.map(function (_ref2, index) {
|
86
|
+
var children = _ref2.children,
|
87
|
+
Icon = _ref2.renderIcon,
|
88
|
+
action = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
|
89
89
|
return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers["extends"]({}, action, {
|
90
90
|
key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
|
91
91
|
className: "".concat(blockClass, "__overflow-menu__item"),
|
@@ -94,17 +94,21 @@ var ComboButton = function ComboButton(_ref) {
|
|
94
94
|
}, /*#__PURE__*/React__default["default"].createElement(Icon, null)))
|
95
95
|
}));
|
96
96
|
})));
|
97
|
-
};
|
97
|
+
});
|
98
|
+
|
99
|
+
/**@ts-ignore*/
|
98
100
|
ComboButton.deprecated = {
|
99
101
|
level: 'warn',
|
100
102
|
details: "Please replace ".concat(componentName, " with Carbon's ComboButton")
|
101
103
|
};
|
104
|
+
ComboButton.displayName = componentName;
|
102
105
|
ComboButton.propTypes = {
|
103
106
|
/** Provide the contents of the `ComboButton` */
|
104
107
|
children: index.propTypesExports.node.isRequired,
|
105
108
|
/** Provide an optional class to be applied to the containing node */
|
106
109
|
className: index.propTypesExports.string,
|
107
110
|
/** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
|
111
|
+
/**@ts-ignore*/
|
108
112
|
overflowMenu: index.propTypesExports.shape(react.OverflowMenu.propTypes)
|
109
113
|
};
|
110
114
|
|
@@ -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 };
|
@@ -16,9 +16,10 @@ var react = require('@carbon/react');
|
|
16
16
|
var common = require('./common.js');
|
17
17
|
var DraggableElement = require('../../DraggableElement.js');
|
18
18
|
var settings = require('../../../../../settings.js');
|
19
|
+
var getNodeTextContent = require('../../../../../global/js/utils/getNodeTextContent.js');
|
19
20
|
var core = require('@dnd-kit/core');
|
20
21
|
var sortable = require('@dnd-kit/sortable');
|
21
|
-
var
|
22
|
+
var modifiers = require('@dnd-kit/modifiers');
|
22
23
|
|
23
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
24
25
|
|
@@ -152,7 +153,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
|
|
152
153
|
onDragEnd: handleDragEnd,
|
153
154
|
onDragStart: handleDragStart,
|
154
155
|
onDragMove: handleDragUpdate,
|
155
|
-
sensors: sensors
|
156
|
+
sensors: sensors,
|
157
|
+
modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis]
|
156
158
|
}, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
157
159
|
className: "".concat(blockClass, "__draggable-underlay"),
|
158
160
|
"aria-hidden": "true",
|
@@ -90,12 +90,19 @@ var stateReducer = function stateReducer(newState, action) {
|
|
90
90
|
getRowId = _ref3.getRowId,
|
91
91
|
indeterminate = _ref3.indeterminate,
|
92
92
|
isChecked = _ref3.isChecked;
|
93
|
+
var newSelectedRowIds = {};
|
93
94
|
if (rows) {
|
94
95
|
var newSelectedRowData = {};
|
95
96
|
rows.forEach(function (row) {
|
97
|
+
var props = row.getRowProps();
|
98
|
+
if (props && props.disabled) {
|
99
|
+
return;
|
100
|
+
}
|
101
|
+
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
96
102
|
newSelectedRowData[getRowId(row.original, row.index)] = row.original;
|
97
103
|
});
|
98
104
|
return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newState), {}, {
|
105
|
+
selectedRowIds: newSelectedRowIds,
|
99
106
|
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
|
100
107
|
});
|
101
108
|
}
|
@@ -151,10 +151,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
151
151
|
className: cx__default["default"](blockClass, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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)),
|
152
152
|
onFocus: onFocusHandler,
|
153
153
|
onBlur: onBlurHandler
|
154
|
-
}, /*#__PURE__*/React__default["default"].createElement("
|
155
|
-
className: "".concat(blockClass, "__text-input-label"),
|
156
|
-
htmlFor: id
|
157
|
-
}, labelText), /*#__PURE__*/React__default["default"].createElement("input", {
|
154
|
+
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
158
155
|
id: id,
|
159
156
|
className: cx__default["default"]("".concat(blockClass, "__text-input"), "".concat(settings.carbon.prefix, "--text-input"), "".concat(settings.carbon.prefix, "--text-input--").concat(size)),
|
160
157
|
type: "text",
|
@@ -163,7 +160,9 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
163
160
|
ref: inputRef
|
164
161
|
// readOnly={readOnly}
|
165
162
|
,
|
166
|
-
onKeyDown: onKeyHandler
|
163
|
+
onKeyDown: onKeyHandler,
|
164
|
+
"aria-label": labelText,
|
165
|
+
"aria-invalid": invalid
|
167
166
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
168
167
|
className: "".concat(blockClass, "__ellipsis"),
|
169
168
|
"aria-hidden": !focused
|
@@ -0,0 +1,161 @@
|
|
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
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var NavList = require('./NavList.js');
|
17
|
+
var NavItem = require('./NavItem.js');
|
18
|
+
var devtools = require('../../global/js/utils/devtools.js');
|
19
|
+
var settings = require('../../settings.js');
|
20
|
+
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
22
|
+
|
23
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
|
+
|
26
|
+
var _excluded = ["activeHref", "className", "children", "heading", "label"];
|
27
|
+
var componentName = 'Nav';
|
28
|
+
var blockClass = "".concat(settings.pkg.prefix, "--nav");
|
29
|
+
exports.Nav = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
30
|
+
var activeHref = _ref.activeHref,
|
31
|
+
className = _ref.className,
|
32
|
+
children = _ref.children,
|
33
|
+
heading = _ref.heading,
|
34
|
+
label = _ref.label,
|
35
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
36
|
+
var _useState = React.useState(activeHref),
|
37
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
38
|
+
_activeHref = _useState2[0],
|
39
|
+
setActiveHref = _useState2[1];
|
40
|
+
var navigationLists = React.useRef({});
|
41
|
+
React.useEffect(function () {
|
42
|
+
if (!_activeHref && window.location) {
|
43
|
+
var _window$location = window.location,
|
44
|
+
hash = _window$location.hash,
|
45
|
+
pathname = _window$location.pathname;
|
46
|
+
setActiveHref(pathname + hash);
|
47
|
+
}
|
48
|
+
}, [_activeHref]);
|
49
|
+
|
50
|
+
/**
|
51
|
+
* Creates a new child list item.
|
52
|
+
* @param {NavItem} child The child list item to create.
|
53
|
+
* @param {number} index The index of the child list item.
|
54
|
+
* @returns {NavItem} The new child list item.
|
55
|
+
*/
|
56
|
+
var buildNewItemChild = function buildNewItemChild(child, index) {
|
57
|
+
var key = "".concat(NavItem.blockClass, "--").concat(index);
|
58
|
+
return /*#__PURE__*/React__default["default"].createElement(NavItem["default"], _rollupPluginBabelHelpers["extends"]({}, child.props, {
|
59
|
+
activeHref: _activeHref,
|
60
|
+
key: key,
|
61
|
+
onClick: function onClick(event, href) {
|
62
|
+
return handleItemClick(event, href, child.props.onClick);
|
63
|
+
}
|
64
|
+
}));
|
65
|
+
};
|
66
|
+
|
67
|
+
/**
|
68
|
+
* Creates a new child list.
|
69
|
+
* @param {NavList} child The child list to create.
|
70
|
+
* @param {number} index The index of the child list.
|
71
|
+
* @returns {NavList} The new child list.
|
72
|
+
*/
|
73
|
+
var buildNewListChild = function buildNewListChild(child, index) {
|
74
|
+
var key = "".concat(NavList.blockClass, "--").concat(index);
|
75
|
+
return /*#__PURE__*/React__default["default"].createElement(NavList["default"], _rollupPluginBabelHelpers["extends"]({}, child.props, {
|
76
|
+
activeHref: _activeHref,
|
77
|
+
id: key,
|
78
|
+
key: key,
|
79
|
+
onListClick: handleListClick,
|
80
|
+
onItemClick: handleItemClick,
|
81
|
+
ref: function ref(el) {
|
82
|
+
return navigationLists.current[key] = el;
|
83
|
+
}
|
84
|
+
}));
|
85
|
+
};
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Handles toggling the list item.
|
89
|
+
* @param {SyntheticEvent} event The event fired when the list item is toggled.
|
90
|
+
* @param {string} href The URL of the list item.
|
91
|
+
*/
|
92
|
+
var handleItemClick = function handleItemClick(event, href, onClick) {
|
93
|
+
event.stopPropagation();
|
94
|
+
var type = event.type,
|
95
|
+
which = event.which;
|
96
|
+
|
97
|
+
// Enter (13) and spacebar (32).
|
98
|
+
var acceptableEvent = which === 13 || which === 32 || type === 'click';
|
99
|
+
var diffHref = href !== _activeHref;
|
100
|
+
if (acceptableEvent && diffHref) {
|
101
|
+
setActiveHref(href);
|
102
|
+
}
|
103
|
+
if (onClick) {
|
104
|
+
onClick(event);
|
105
|
+
}
|
106
|
+
};
|
107
|
+
|
108
|
+
/**
|
109
|
+
* Handles when a list has been selected.
|
110
|
+
* @param {number} id The index of the list.
|
111
|
+
*/
|
112
|
+
var handleListClick = function handleListClick(id) {
|
113
|
+
Object.keys(navigationLists.current).forEach(function (key) {
|
114
|
+
if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
|
115
|
+
navigationLists.current[key].close();
|
116
|
+
}
|
117
|
+
});
|
118
|
+
};
|
119
|
+
return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
|
120
|
+
className: cx__default["default"](blockClass, className),
|
121
|
+
"aria-label": label,
|
122
|
+
ref: ref
|
123
|
+
}, devtools.getDevtoolsProps(componentName), rest), heading && /*#__PURE__*/React__default["default"].createElement("h1", {
|
124
|
+
className: "".concat(blockClass, "__heading")
|
125
|
+
}, heading), /*#__PURE__*/React__default["default"].createElement("ul", {
|
126
|
+
className: "".concat(blockClass, "__wrapper"),
|
127
|
+
role: "menubar"
|
128
|
+
}, React__default["default"].Children.map(children, function (child, index) {
|
129
|
+
var _child$type;
|
130
|
+
return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList["default"].displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
|
131
|
+
})));
|
132
|
+
});
|
133
|
+
exports.Nav.propTypes = {
|
134
|
+
/**
|
135
|
+
* Hypertext reference for active page.
|
136
|
+
*/
|
137
|
+
activeHref: index["default"].string,
|
138
|
+
/**
|
139
|
+
* Child elements.
|
140
|
+
*/
|
141
|
+
children: index["default"].node,
|
142
|
+
/**
|
143
|
+
* Extra classes to add.
|
144
|
+
*/
|
145
|
+
className: index["default"].string,
|
146
|
+
/**
|
147
|
+
* Heading.
|
148
|
+
*/
|
149
|
+
heading: index["default"].string,
|
150
|
+
/**
|
151
|
+
* Aria-label on the rendered `nav` element.
|
152
|
+
*/
|
153
|
+
label: index["default"].string.isRequired
|
154
|
+
};
|
155
|
+
|
156
|
+
// Return a placeholder if not released and not enabled by feature flag
|
157
|
+
exports.Nav = settings.pkg.checkComponentEnabled(exports.Nav, componentName);
|
158
|
+
|
159
|
+
// The display name of the component, used by React. Note that displayName
|
160
|
+
// is used in preference to relying on function.name.
|
161
|
+
exports.Nav.displayName = componentName;
|
@@ -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,160 @@
|
|
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
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
13
|
+
var React = require('react');
|
14
|
+
var index = require('../../node_modules/prop-types/index.js');
|
15
|
+
var cx = require('classnames');
|
16
|
+
var settings = require('../../settings.js');
|
17
|
+
var uuidv4 = require('../../global/js/utils/uuidv4.js');
|
18
|
+
var NavItemLink = require('./NavItemLink.js');
|
19
|
+
var bucket8 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-8.js');
|
20
|
+
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
22
|
+
|
23
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
24
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
25
|
+
|
26
|
+
var _excluded = ["activeHref", "children", "className", "current", "disabled", "element", "href", "id", "label", "onClick", "tabIndex"];
|
27
|
+
|
28
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
29
|
+
var blockClass = "".concat(settings.pkg.prefix, "--nav-item");
|
30
|
+
var componentName = 'NavItem';
|
31
|
+
|
32
|
+
// Default values for props
|
33
|
+
var defaults = {
|
34
|
+
activeHref: '#',
|
35
|
+
disabled: false,
|
36
|
+
element: 'a',
|
37
|
+
onClick: function onClick() {},
|
38
|
+
tabIndex: 0
|
39
|
+
};
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Navigation item component.
|
43
|
+
*/
|
44
|
+
var NavItem = function NavItem(_ref) {
|
45
|
+
var _ref$activeHref = _ref.activeHref,
|
46
|
+
activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
|
47
|
+
_ref$children = _ref.children,
|
48
|
+
children = _ref$children === void 0 ? defaults.children : _ref$children,
|
49
|
+
className = _ref.className,
|
50
|
+
current = _ref.current,
|
51
|
+
_ref$disabled = _ref.disabled,
|
52
|
+
disabled = _ref$disabled === void 0 ? defaults.disabled : _ref$disabled,
|
53
|
+
_ref$element = _ref.element,
|
54
|
+
element = _ref$element === void 0 ? defaults.element : _ref$element,
|
55
|
+
href = _ref.href,
|
56
|
+
id = _ref.id,
|
57
|
+
label = _ref.label,
|
58
|
+
_ref$onClick = _ref.onClick,
|
59
|
+
_onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
|
60
|
+
_ref$tabIndex = _ref.tabIndex,
|
61
|
+
tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
|
62
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
63
|
+
var internalId = React.useRef(uuidv4["default"]());
|
64
|
+
var instanceId = "".concat(blockClass, "__").concat(internalId.current);
|
65
|
+
var navItemId = id || instanceId;
|
66
|
+
var isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
|
67
|
+
var externalLink = isAbsoluteLink.test(href) && href.indexOf(window.location.host) === -1;
|
68
|
+
var linkClassName = "".concat(blockClass, "__link");
|
69
|
+
var handleDisabled = function handleDisabled(action) {
|
70
|
+
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
71
|
+
return !disabled ? action : defaultValue;
|
72
|
+
};
|
73
|
+
var navItemTabIndex = handleDisabled(tabIndex, -1);
|
74
|
+
var externalLinkProps = externalLink && {
|
75
|
+
rel: 'noopener noreferrer',
|
76
|
+
target: '_blank'
|
77
|
+
};
|
78
|
+
return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
79
|
+
className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--active"), current !== null && current === navItemId || activeHref !== undefined && activeHref === href && !externalLink), "".concat(blockClass, "--disabled"), disabled)),
|
80
|
+
label: label,
|
81
|
+
onClick: function onClick(event) {
|
82
|
+
return handleDisabled(_onClick(event, href));
|
83
|
+
},
|
84
|
+
onKeyDown: function onKeyDown(event) {
|
85
|
+
return handleDisabled(_onClick(event, href));
|
86
|
+
},
|
87
|
+
role: "menuitem"
|
88
|
+
}), /*#__PURE__*/React__default["default"].createElement(NavItemLink["default"], _rollupPluginBabelHelpers["extends"]({
|
89
|
+
id: navItemId,
|
90
|
+
className: cx__default["default"](linkClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__link--external"), externalLink)),
|
91
|
+
element: element,
|
92
|
+
href: href,
|
93
|
+
tabIndex: navItemTabIndex
|
94
|
+
}, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default["default"].createElement(bucket8.Launch, {
|
95
|
+
className: "".concat(blockClass, "__link--external__icon")
|
96
|
+
})));
|
97
|
+
};
|
98
|
+
|
99
|
+
// The display name of the component, used by React. Note that displayName
|
100
|
+
// is used in preference to relying on function.name.
|
101
|
+
NavItem.displayName = componentName;
|
102
|
+
|
103
|
+
// The types and DocGen commentary for the component props,
|
104
|
+
// in alphabetical order (for consistency).
|
105
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
106
|
+
NavItem.propTypes = {
|
107
|
+
/**
|
108
|
+
* Hypertext reference for active page.
|
109
|
+
*/
|
110
|
+
activeHref: index["default"].string,
|
111
|
+
/**
|
112
|
+
* Provide the contents of the Nav.
|
113
|
+
*/
|
114
|
+
children: index["default"].node.isRequired,
|
115
|
+
/**
|
116
|
+
* Provide an optional class to be applied to the containing node.
|
117
|
+
*/
|
118
|
+
className: index["default"].string,
|
119
|
+
/**
|
120
|
+
* Currently selected item.
|
121
|
+
*/
|
122
|
+
current: index["default"].string,
|
123
|
+
/**
|
124
|
+
* Whether the item is disabled.
|
125
|
+
*/
|
126
|
+
disabled: index["default"].bool,
|
127
|
+
/**
|
128
|
+
* 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`.
|
129
|
+
*/
|
130
|
+
element: index["default"].elementType,
|
131
|
+
/**
|
132
|
+
* The href of the nav item.
|
133
|
+
*/
|
134
|
+
href: index["default"].string,
|
135
|
+
/**
|
136
|
+
* Identifier.
|
137
|
+
*/
|
138
|
+
id: index["default"].string,
|
139
|
+
/**
|
140
|
+
* Label of an item.
|
141
|
+
*/
|
142
|
+
label: index["default"].string,
|
143
|
+
/**
|
144
|
+
* Whether the item is a link.
|
145
|
+
*/
|
146
|
+
link: index["default"].bool,
|
147
|
+
/**
|
148
|
+
* Click handler of an item.
|
149
|
+
*/
|
150
|
+
onClick: index["default"].func,
|
151
|
+
/**
|
152
|
+
* `tabindex` of an item.
|
153
|
+
*/
|
154
|
+
tabIndex: index["default"].number
|
155
|
+
};
|
156
|
+
var NavItem$1 = NavItem;
|
157
|
+
|
158
|
+
exports.NavItem = NavItem;
|
159
|
+
exports.blockClass = blockClass;
|
160
|
+
exports["default"] = NavItem$1;
|