@carbon/react 1.5.0-rc.0 → 1.6.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/ComposedModal/ComposedModal.js +2 -1
- package/es/components/ComposedModal/next/ComposedModal.js +2 -1
- package/es/components/DataTable/TableActionList.js +3 -1
- package/es/components/DataTable/TableToolbarContent.js +3 -1
- package/es/components/DataTable/TableToolbarSearch.js +10 -2
- package/es/components/DatePicker/DatePicker.js +14 -5
- package/es/components/FileUploader/FileUploader.js +1 -1
- package/es/components/FileUploader/FileUploaderButton.js +1 -1
- package/es/components/FileUploader/Filename.js +1 -1
- package/es/components/Layer/index.js +13 -1
- package/es/components/Link/Link.js +6 -3
- package/es/components/ListBox/ListBoxPropTypes.js +1 -2
- package/es/components/ListBox/ListBoxSelection.js +3 -4
- package/es/components/OverflowMenu/OverflowMenu.js +0 -1
- package/es/components/RadioButton/next/RadioButton.js +2 -1
- package/es/components/Search/next/Search.js +1 -0
- package/es/components/Tabs/next/Tabs.js +42 -4
- package/es/components/Toggle/Toggle.js +147 -109
- package/es/components/UIShell/HeaderGlobalBar.js +3 -1
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/HeaderMenuButton.js +3 -4
- package/es/components/UIShell/HeaderName.js +3 -4
- package/es/components/UIShell/HeaderNavigation.js +27 -75
- package/es/components/UIShell/SideNav.js +3 -3
- package/es/components/UIShell/SideNavFooter.js +3 -10
- package/es/components/UIShell/SideNavIcon.js +3 -4
- package/es/components/UIShell/SideNavItem.js +4 -5
- package/es/components/UIShell/SideNavLink.js +0 -6
- package/es/components/UIShell/SideNavLinkText.js +3 -4
- package/es/components/UIShell/SideNavMenu.js +93 -131
- package/es/components/UIShell/SideNavSwitcher.js +4 -2
- package/es/components/UIShell/SkipToContent.js +3 -4
- package/es/index.js +13 -11
- package/es/tools/wrapComponent.js +6 -4
- package/lib/components/ComposedModal/ComposedModal.js +2 -1
- package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
- package/lib/components/DataTable/TableActionList.js +3 -1
- package/lib/components/DataTable/TableToolbarContent.js +3 -1
- package/lib/components/DataTable/TableToolbarSearch.js +10 -2
- package/lib/components/DatePicker/DatePicker.js +14 -5
- package/lib/components/FileUploader/FileUploader.js +1 -1
- package/lib/components/FileUploader/FileUploaderButton.js +1 -1
- package/lib/components/FileUploader/Filename.js +1 -1
- package/lib/components/Layer/index.js +13 -0
- package/lib/components/Link/Link.js +6 -3
- package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
- package/lib/components/ListBox/ListBoxSelection.js +3 -4
- package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
- package/lib/components/RadioButton/next/RadioButton.js +2 -1
- package/lib/components/Search/next/Search.js +1 -0
- package/lib/components/Tabs/next/Tabs.js +42 -4
- package/lib/components/Toggle/Toggle.js +146 -107
- package/lib/components/UIShell/HeaderGlobalBar.js +3 -1
- package/lib/components/UIShell/HeaderMenu.js +1 -1
- package/lib/components/UIShell/HeaderMenuButton.js +3 -4
- package/lib/components/UIShell/HeaderName.js +3 -4
- package/lib/components/UIShell/HeaderNavigation.js +25 -73
- package/lib/components/UIShell/SideNav.js +3 -3
- package/lib/components/UIShell/SideNavFooter.js +3 -10
- package/lib/components/UIShell/SideNavIcon.js +3 -4
- package/lib/components/UIShell/SideNavItem.js +4 -5
- package/lib/components/UIShell/SideNavLink.js +0 -6
- package/lib/components/UIShell/SideNavLinkText.js +3 -4
- package/lib/components/UIShell/SideNavMenu.js +89 -128
- package/lib/components/UIShell/SideNavSwitcher.js +4 -2
- package/lib/components/UIShell/SkipToContent.js +3 -4
- package/lib/index.js +86 -82
- package/lib/tools/wrapComponent.js +6 -4
- package/package.json +18 -18
- package/es/components/Toggle/index.js +0 -19
- package/es/components/Toggle/next/Toggle.js +0 -158
- package/es/components/UIShell/index.js +0 -17
- package/es/components/UIShell/next/HeaderNavigation.js +0 -52
- package/es/components/UIShell/next/SideNavMenu.js +0 -160
- package/lib/components/Toggle/index.js +0 -23
- package/lib/components/Toggle/next/Toggle.js +0 -169
- package/lib/components/UIShell/index.js +0 -42
- package/lib/components/UIShell/next/HeaderNavigation.js +0 -62
- package/lib/components/UIShell/next/SideNavMenu.js +0 -170
|
@@ -10,121 +10,160 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var PropTypes = require('prop-types');
|
|
14
13
|
var React = require('react');
|
|
14
|
+
var PropTypes = require('prop-types');
|
|
15
15
|
var cx = require('classnames');
|
|
16
|
-
var
|
|
16
|
+
var useControllableState = require('../../internal/useControllableState.js');
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
|
-
var match = require('../../internal/keyboard/match.js');
|
|
19
|
-
var keys = require('../../internal/keyboard/keys.js');
|
|
20
18
|
|
|
21
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
20
|
|
|
23
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
24
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
25
23
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
26
24
|
|
|
27
|
-
var _path
|
|
28
|
-
|
|
29
|
-
var _excluded = ["className", "defaultToggled", "
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
if (typeof toggled !== 'undefined') {
|
|
68
|
-
checkedProps.checked = toggled;
|
|
69
|
-
} else {
|
|
70
|
-
checkedProps.defaultChecked = defaultToggled;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
74
|
-
className: wrapperClasses
|
|
75
|
-
}, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, checkedProps, {
|
|
76
|
-
"aria-label": null,
|
|
77
|
-
type: "checkbox",
|
|
78
|
-
id: id,
|
|
79
|
-
className: toggleClasses,
|
|
80
|
-
onChange: function onChange(evt) {
|
|
81
|
-
_onChange && _onChange(evt);
|
|
82
|
-
onToggle(input.checked, id, evt);
|
|
83
|
-
},
|
|
84
|
-
ref: function ref(el) {
|
|
85
|
-
input = el;
|
|
86
|
-
},
|
|
87
|
-
onKeyUp: function onKeyUp(evt) {
|
|
88
|
-
if (match.match(evt, keys.Enter)) {
|
|
89
|
-
input.checked = !input.checked;
|
|
90
|
-
_onChange && _onChange(evt);
|
|
91
|
-
onToggle(input.checked, id, evt);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
})), /*#__PURE__*/React__default["default"].createElement("label", {
|
|
95
|
-
className: "".concat(prefix, "--toggle-input__label"),
|
|
96
|
-
htmlFor: id,
|
|
97
|
-
"aria-label": typeof labelText === 'string' ? null : this.props['aria-label']
|
|
98
|
-
}, labelText, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
99
|
-
className: "".concat(prefix, "--toggle__switch")
|
|
100
|
-
}, size && /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
101
|
-
className: "".concat(prefix, "--toggle__check"),
|
|
102
|
-
width: "6px",
|
|
103
|
-
height: "5px",
|
|
104
|
-
viewBox: "0 0 6 5"
|
|
105
|
-
}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
|
|
106
|
-
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
107
|
-
}))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
108
|
-
className: "".concat(prefix, "--toggle__text--off"),
|
|
109
|
-
"aria-hidden": "true"
|
|
110
|
-
}, labelA), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
111
|
-
className: "".concat(prefix, "--toggle__text--on"),
|
|
112
|
-
"aria-hidden": "true"
|
|
113
|
-
}, labelB))));
|
|
25
|
+
var _path;
|
|
26
|
+
|
|
27
|
+
var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
|
|
28
|
+
function Toggle(_ref) {
|
|
29
|
+
var className = _ref.className,
|
|
30
|
+
_ref$defaultToggled = _ref.defaultToggled,
|
|
31
|
+
defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
|
|
32
|
+
_ref$disabled = _ref.disabled,
|
|
33
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
34
|
+
_ref$hideLabel = _ref.hideLabel,
|
|
35
|
+
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
|
|
36
|
+
id = _ref.id,
|
|
37
|
+
_ref$labelA = _ref.labelA,
|
|
38
|
+
labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
|
|
39
|
+
_ref$labelB = _ref.labelB,
|
|
40
|
+
labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
|
|
41
|
+
labelText = _ref.labelText,
|
|
42
|
+
onClick = _ref.onClick,
|
|
43
|
+
onToggle = _ref.onToggle,
|
|
44
|
+
_ref$size = _ref.size,
|
|
45
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
46
|
+
toggled = _ref.toggled,
|
|
47
|
+
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
48
|
+
|
|
49
|
+
var prefix = usePrefix.usePrefix();
|
|
50
|
+
|
|
51
|
+
var _useControllableState = useControllableState.useControllableState({
|
|
52
|
+
value: toggled,
|
|
53
|
+
onChange: onToggle,
|
|
54
|
+
defaultValue: defaultToggled
|
|
55
|
+
}),
|
|
56
|
+
_useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
|
|
57
|
+
checked = _useControllableState2[0],
|
|
58
|
+
setChecked = _useControllableState2[1];
|
|
59
|
+
|
|
60
|
+
function handleClick(e) {
|
|
61
|
+
setChecked(!checked);
|
|
62
|
+
|
|
63
|
+
if (onClick) {
|
|
64
|
+
onClick(e);
|
|
114
65
|
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
return Toggle;
|
|
118
|
-
}(React__default["default"].Component);
|
|
119
|
-
|
|
120
|
-
_rollupPluginBabelHelpers.defineProperty(Toggle, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "defaultToggled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelA", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelB", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onToggle", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['sm', 'md'])), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "toggled", PropTypes__default["default"].bool), _defineProperty2));
|
|
121
|
-
|
|
122
|
-
_rollupPluginBabelHelpers.defineProperty(Toggle, "contextType", usePrefix.PrefixContext);
|
|
123
|
-
|
|
124
|
-
_rollupPluginBabelHelpers.defineProperty(Toggle, "defaultProps", (_defineProperty3 = {
|
|
125
|
-
defaultToggled: false
|
|
126
|
-
}, _rollupPluginBabelHelpers.defineProperty(_defineProperty3, 'aria-label', 'Toggle'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "labelA", 'Off'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "labelB", 'On'), _rollupPluginBabelHelpers.defineProperty(_defineProperty3, "onToggle", function onToggle() {}), _defineProperty3));
|
|
127
|
-
|
|
128
|
-
var ToggleClassic = Toggle;
|
|
66
|
+
}
|
|
129
67
|
|
|
130
|
-
|
|
68
|
+
var isSm = size === 'sm';
|
|
69
|
+
var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
70
|
+
var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
|
|
71
|
+
var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
72
|
+
var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|
|
73
|
+
var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
|
|
74
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
75
|
+
className: wrapperClasses
|
|
76
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
|
|
77
|
+
id: id,
|
|
78
|
+
className: "".concat(prefix, "--toggle__button"),
|
|
79
|
+
role: "switch",
|
|
80
|
+
type: "button",
|
|
81
|
+
"aria-checked": checked,
|
|
82
|
+
disabled: disabled,
|
|
83
|
+
onClick: handleClick
|
|
84
|
+
})), /*#__PURE__*/React__default["default"].createElement("label", {
|
|
85
|
+
htmlFor: id,
|
|
86
|
+
className: "".concat(prefix, "--toggle__label")
|
|
87
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
88
|
+
className: labelTextClasses
|
|
89
|
+
}, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
90
|
+
className: appearanceClasses
|
|
91
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
92
|
+
className: switchClasses
|
|
93
|
+
}, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
94
|
+
className: "".concat(prefix, "--toggle__check"),
|
|
95
|
+
width: "6px",
|
|
96
|
+
height: "5px",
|
|
97
|
+
viewBox: "0 0 6 5"
|
|
98
|
+
}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
|
|
99
|
+
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
100
|
+
})))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
101
|
+
className: "".concat(prefix, "--toggle__text"),
|
|
102
|
+
"aria-hidden": "true"
|
|
103
|
+
}, sideLabel))));
|
|
104
|
+
}
|
|
105
|
+
Toggle.propTypes = {
|
|
106
|
+
/**
|
|
107
|
+
* Specify a custom className to apply to the form-item node
|
|
108
|
+
*/
|
|
109
|
+
className: PropTypes__default["default"].string,
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Specify whether the toggle should be on by default
|
|
113
|
+
*/
|
|
114
|
+
defaultToggled: PropTypes__default["default"].bool,
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* Whether this control should be disabled
|
|
118
|
+
*/
|
|
119
|
+
disabled: PropTypes__default["default"].bool,
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Specify whether the label should be hidden, or not
|
|
123
|
+
*/
|
|
124
|
+
hideLabel: PropTypes__default["default"].bool,
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Provide an id that unique represents the underlying `<button>`
|
|
128
|
+
*/
|
|
129
|
+
id: PropTypes__default["default"].string.isRequired,
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Specify the label for the "off" position
|
|
133
|
+
*/
|
|
134
|
+
labelA: PropTypes__default["default"].node,
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Specify the label for the "on" position
|
|
138
|
+
*/
|
|
139
|
+
labelB: PropTypes__default["default"].node,
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Provide the text that will be read by a screen reader when visiting this
|
|
143
|
+
* control
|
|
144
|
+
*/
|
|
145
|
+
labelText: PropTypes__default["default"].node.isRequired,
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Provide an event listener that is called when the control is clicked
|
|
149
|
+
*/
|
|
150
|
+
onClick: PropTypes__default["default"].func,
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Provide an event listener that is called when the control is toggled
|
|
154
|
+
*/
|
|
155
|
+
onToggle: PropTypes__default["default"].func,
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
|
|
159
|
+
*/
|
|
160
|
+
size: PropTypes__default["default"].oneOf(['sm', 'md']),
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Specify whether the control is toggled
|
|
164
|
+
*/
|
|
165
|
+
toggled: PropTypes__default["default"].bool
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
exports.Toggle = Toggle;
|
|
169
|
+
exports["default"] = Toggle;
|
|
@@ -17,7 +17,9 @@ var wrapComponent = require('../../tools/wrapComponent.js');
|
|
|
17
17
|
|
|
18
18
|
var HeaderGlobalBar = wrapComponent["default"]({
|
|
19
19
|
name: 'HeaderGlobalBar',
|
|
20
|
-
className:
|
|
20
|
+
className: function className(prefix) {
|
|
21
|
+
return "".concat(prefix, "--header__global");
|
|
22
|
+
},
|
|
21
23
|
type: 'div'
|
|
22
24
|
});
|
|
23
25
|
|
|
@@ -173,7 +173,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
|
|
|
173
173
|
'aria-label': ariaLabel,
|
|
174
174
|
'aria-labelledby': ariaLabelledBy
|
|
175
175
|
};
|
|
176
|
-
var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx,
|
|
176
|
+
var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
|
|
177
177
|
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
|
|
178
178
|
// - The focus is handled by the <a> menuitem, onMouseOver is for mouse
|
|
179
179
|
// users
|
|
@@ -27,7 +27,7 @@ var _Menu, _Close;
|
|
|
27
27
|
|
|
28
28
|
var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
function HeaderMenuButton(_ref) {
|
|
31
31
|
var _cx;
|
|
32
32
|
|
|
33
33
|
var ariaLabel = _ref['aria-label'],
|
|
@@ -58,7 +58,7 @@ var HeaderMenuButton = function HeaderMenuButton(_ref) {
|
|
|
58
58
|
type: "button",
|
|
59
59
|
onClick: onClick
|
|
60
60
|
}), isActive ? closeIcon : menuIcon);
|
|
61
|
-
}
|
|
61
|
+
}
|
|
62
62
|
|
|
63
63
|
HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
|
|
64
64
|
/**
|
|
@@ -74,6 +74,5 @@ HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlug
|
|
|
74
74
|
*/
|
|
75
75
|
onClick: PropTypes__default["default"].func
|
|
76
76
|
});
|
|
77
|
-
var HeaderMenuButton$1 = HeaderMenuButton;
|
|
78
77
|
|
|
79
|
-
exports["default"] = HeaderMenuButton
|
|
78
|
+
exports["default"] = HeaderMenuButton;
|
|
@@ -24,7 +24,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
24
24
|
|
|
25
25
|
var _excluded = ["children", "className", "prefix", "href"];
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
function HeaderName(_ref) {
|
|
28
28
|
var children = _ref.children,
|
|
29
29
|
customClassName = _ref.className,
|
|
30
30
|
prefix = _ref.prefix,
|
|
@@ -39,7 +39,7 @@ var HeaderName = function HeaderName(_ref) {
|
|
|
39
39
|
}), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
40
40
|
className: "".concat(selectorPrefix, "--header__name--prefix")
|
|
41
41
|
}, prefix), "\xA0"), children);
|
|
42
|
-
}
|
|
42
|
+
}
|
|
43
43
|
|
|
44
44
|
HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
|
|
45
45
|
/**
|
|
@@ -67,6 +67,5 @@ HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabe
|
|
|
67
67
|
HeaderName.defaultProps = {
|
|
68
68
|
prefix: 'IBM'
|
|
69
69
|
};
|
|
70
|
-
var HeaderName$1 = HeaderName;
|
|
71
70
|
|
|
72
|
-
exports["default"] = HeaderName
|
|
71
|
+
exports["default"] = HeaderName;
|
|
@@ -24,75 +24,29 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
24
24
|
|
|
25
25
|
var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
_this.items = [];
|
|
54
|
-
_this.state = {
|
|
55
|
-
selectedIndex: 0
|
|
56
|
-
};
|
|
57
|
-
return _this;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
_rollupPluginBabelHelpers.createClass(HeaderNavigation, [{
|
|
61
|
-
key: "render",
|
|
62
|
-
value: function render() {
|
|
63
|
-
var prefix = this.context;
|
|
64
|
-
|
|
65
|
-
var _this$props = this.props,
|
|
66
|
-
ariaLabel = _this$props['aria-label'],
|
|
67
|
-
ariaLabelledBy = _this$props['aria-labelledby'],
|
|
68
|
-
children = _this$props.children,
|
|
69
|
-
customClassName = _this$props.className,
|
|
70
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
|
|
71
|
-
|
|
72
|
-
var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
|
|
73
|
-
// so when we spread that should be the one that is applied to the node
|
|
74
|
-
|
|
75
|
-
var accessibilityLabel = {
|
|
76
|
-
'aria-label': ariaLabel,
|
|
77
|
-
'aria-labelledby': ariaLabelledBy
|
|
78
|
-
};
|
|
79
|
-
return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
|
|
80
|
-
className: className
|
|
81
|
-
}), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
|
|
82
|
-
className: "".concat(prefix, "--header__menu-bar")
|
|
83
|
-
}), React__default["default"].Children.map(children, this._renderNavItem)));
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Render an individual menuitem, adding a `ref` for each child inside of
|
|
87
|
-
* `this.items` to properly manage focus.
|
|
88
|
-
*/
|
|
89
|
-
|
|
90
|
-
}]);
|
|
91
|
-
|
|
92
|
-
return HeaderNavigation;
|
|
93
|
-
}(React__default["default"].Component);
|
|
94
|
-
|
|
95
|
-
_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
|
|
27
|
+
function HeaderNavigation(props) {
|
|
28
|
+
var ariaLabel = props['aria-label'],
|
|
29
|
+
ariaLabelledBy = props['aria-labelledby'],
|
|
30
|
+
children = props.children,
|
|
31
|
+
customClassName = props.className,
|
|
32
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
|
33
|
+
|
|
34
|
+
var prefix = usePrefix.usePrefix();
|
|
35
|
+
var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
|
|
36
|
+
// so when we spread that should be the one that is applied to the node
|
|
37
|
+
|
|
38
|
+
var accessibilityLabel = {
|
|
39
|
+
'aria-label': ariaLabel,
|
|
40
|
+
'aria-labelledby': ariaLabelledBy
|
|
41
|
+
};
|
|
42
|
+
return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
|
|
43
|
+
className: className
|
|
44
|
+
}), /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
45
|
+
className: "".concat(prefix, "--header__menu-bar")
|
|
46
|
+
}, children));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
|
|
96
50
|
/**
|
|
97
51
|
* Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
|
|
98
52
|
* or `HeaderMenu`
|
|
@@ -103,8 +57,6 @@ _rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "propTypes", _rollupP
|
|
|
103
57
|
* Optionally provide a custom class to apply to the underlying <nav> node
|
|
104
58
|
*/
|
|
105
59
|
className: PropTypes__default["default"].string
|
|
106
|
-
})
|
|
107
|
-
|
|
108
|
-
_rollupPluginBabelHelpers.defineProperty(HeaderNavigation, "contextType", usePrefix.PrefixContext);
|
|
60
|
+
});
|
|
109
61
|
|
|
110
|
-
exports
|
|
62
|
+
exports.HeaderNavigation = HeaderNavigation;
|
|
@@ -222,15 +222,15 @@ SideNav.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHe
|
|
|
222
222
|
* @param {object} event
|
|
223
223
|
* @param {boolean} value
|
|
224
224
|
*/
|
|
225
|
-
onToggle: PropTypes__default["default"].func
|
|
226
|
-
|
|
225
|
+
onToggle: PropTypes__default["default"].func
|
|
227
226
|
/**
|
|
228
227
|
* Provide a custom function for translating all message ids within this
|
|
229
228
|
* component. This function will take in two arguments: the mesasge Id and the
|
|
230
229
|
* state of the component. From this, you should return a string representing
|
|
231
230
|
* the label you want displayed or read by screen readers.
|
|
232
231
|
*/
|
|
233
|
-
translateById:
|
|
232
|
+
// translateById: PropTypes.func,
|
|
233
|
+
|
|
234
234
|
});
|
|
235
235
|
var SideNav$1 = SideNav;
|
|
236
236
|
|
|
@@ -28,7 +28,7 @@ var _Close, _ChevronRight;
|
|
|
28
28
|
* user interaction to expand or collapse the side navigation.
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
function SideNavFooter(_ref) {
|
|
32
32
|
var assistiveText = _ref.assistiveText,
|
|
33
33
|
customClassName = _ref.className,
|
|
34
34
|
expanded = _ref.expanded,
|
|
@@ -53,7 +53,7 @@ var SideNavFooter = function SideNavFooter(_ref) {
|
|
|
53
53
|
}))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
54
54
|
className: "".concat(prefix, "--assistive-text")
|
|
55
55
|
}, assistiveText)));
|
|
56
|
-
}
|
|
56
|
+
}
|
|
57
57
|
|
|
58
58
|
SideNavFooter.propTypes = {
|
|
59
59
|
/**
|
|
@@ -68,12 +68,6 @@ SideNavFooter.propTypes = {
|
|
|
68
68
|
*/
|
|
69
69
|
expanded: PropTypes__default["default"].bool.isRequired,
|
|
70
70
|
|
|
71
|
-
/**
|
|
72
|
-
* Property to indicate if the side nav container is open (or not). Use to
|
|
73
|
-
* keep local state and styling in step with the SideNav expansion state.
|
|
74
|
-
*/
|
|
75
|
-
isSideNavExpanded: PropTypes__default["default"].bool,
|
|
76
|
-
|
|
77
71
|
/**
|
|
78
72
|
* Provide a function that is called when the toggle button is interacted
|
|
79
73
|
* with. Useful for controlling the expansion state of the side navigation.
|
|
@@ -83,6 +77,5 @@ SideNavFooter.propTypes = {
|
|
|
83
77
|
SideNavFooter.defaultProps = {
|
|
84
78
|
assistiveText: 'Toggle opening or closing the side navigation'
|
|
85
79
|
};
|
|
86
|
-
var SideNavFooter$1 = SideNavFooter;
|
|
87
80
|
|
|
88
|
-
exports["default"] = SideNavFooter
|
|
81
|
+
exports["default"] = SideNavFooter;
|
|
@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
21
21
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
function SideNavIcon(_ref) {
|
|
25
25
|
var _cx;
|
|
26
26
|
|
|
27
27
|
var children = _ref.children,
|
|
@@ -32,7 +32,7 @@ var SideNavIcon = function SideNavIcon(_ref) {
|
|
|
32
32
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
33
33
|
className: className
|
|
34
34
|
}, children);
|
|
35
|
-
}
|
|
35
|
+
}
|
|
36
36
|
|
|
37
37
|
SideNavIcon.propTypes = {
|
|
38
38
|
/**
|
|
@@ -54,6 +54,5 @@ SideNavIcon.propTypes = {
|
|
|
54
54
|
SideNavIcon.defaultProps = {
|
|
55
55
|
small: false
|
|
56
56
|
};
|
|
57
|
-
var SideNavIcon$1 = SideNavIcon;
|
|
58
57
|
|
|
59
|
-
exports["default"] = SideNavIcon
|
|
58
|
+
exports["default"] = SideNavIcon;
|
|
@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
21
21
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
22
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
function SideNavItem(_ref) {
|
|
25
25
|
var _cx;
|
|
26
26
|
|
|
27
27
|
var customClassName = _ref.className,
|
|
@@ -33,11 +33,11 @@ var SideNavItem = function SideNavItem(_ref) {
|
|
|
33
33
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
34
34
|
className: className
|
|
35
35
|
}, children);
|
|
36
|
-
}
|
|
36
|
+
}
|
|
37
37
|
|
|
38
38
|
SideNavItem.propTypes = {
|
|
39
39
|
/**
|
|
40
|
-
* Provide a single icon as the child to `
|
|
40
|
+
* Provide a single icon as the child to `SideNavItem` to render in the
|
|
41
41
|
* container
|
|
42
42
|
*/
|
|
43
43
|
children: PropTypes__default["default"].node.isRequired,
|
|
@@ -52,6 +52,5 @@ SideNavItem.propTypes = {
|
|
|
52
52
|
*/
|
|
53
53
|
large: PropTypes__default["default"].bool
|
|
54
54
|
};
|
|
55
|
-
var SideNavItem$1 = SideNavItem;
|
|
56
55
|
|
|
57
|
-
exports["default"] = SideNavItem
|
|
56
|
+
exports["default"] = SideNavItem;
|
|
@@ -59,12 +59,6 @@ SideNavLink.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
|
|
|
59
59
|
*/
|
|
60
60
|
className: PropTypes__default["default"].string,
|
|
61
61
|
|
|
62
|
-
/**
|
|
63
|
-
* Property to indicate if the side nav container is open (or not). Use to
|
|
64
|
-
* keep local state and styling in step with the SideNav expansion state.
|
|
65
|
-
*/
|
|
66
|
-
isSideNavExpanded: PropTypes__default["default"].bool,
|
|
67
|
-
|
|
68
62
|
/**
|
|
69
63
|
* Specify if this is a large variation of the SideNavLink
|
|
70
64
|
*/
|
|
@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
23
23
|
|
|
24
24
|
var _excluded = ["className", "children"];
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
function SideNavLinkText(_ref) {
|
|
27
27
|
var customClassName = _ref.className,
|
|
28
28
|
children = _ref.children,
|
|
29
29
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
@@ -33,7 +33,7 @@ var SideNavLinkText = function SideNavLinkText(_ref) {
|
|
|
33
33
|
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
34
34
|
className: className
|
|
35
35
|
}), children);
|
|
36
|
-
}
|
|
36
|
+
}
|
|
37
37
|
|
|
38
38
|
SideNavLinkText.propTypes = {
|
|
39
39
|
/**
|
|
@@ -46,6 +46,5 @@ SideNavLinkText.propTypes = {
|
|
|
46
46
|
*/
|
|
47
47
|
className: PropTypes__default["default"].string
|
|
48
48
|
};
|
|
49
|
-
var SideNavLinkText$1 = SideNavLinkText;
|
|
50
49
|
|
|
51
|
-
exports["default"] = SideNavLinkText
|
|
50
|
+
exports["default"] = SideNavLinkText;
|