@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.
Files changed (79) hide show
  1. package/es/components/ComposedModal/ComposedModal.js +2 -1
  2. package/es/components/ComposedModal/next/ComposedModal.js +2 -1
  3. package/es/components/DataTable/TableActionList.js +3 -1
  4. package/es/components/DataTable/TableToolbarContent.js +3 -1
  5. package/es/components/DataTable/TableToolbarSearch.js +10 -2
  6. package/es/components/DatePicker/DatePicker.js +14 -5
  7. package/es/components/FileUploader/FileUploader.js +1 -1
  8. package/es/components/FileUploader/FileUploaderButton.js +1 -1
  9. package/es/components/FileUploader/Filename.js +1 -1
  10. package/es/components/Layer/index.js +13 -1
  11. package/es/components/Link/Link.js +6 -3
  12. package/es/components/ListBox/ListBoxPropTypes.js +1 -2
  13. package/es/components/ListBox/ListBoxSelection.js +3 -4
  14. package/es/components/OverflowMenu/OverflowMenu.js +0 -1
  15. package/es/components/RadioButton/next/RadioButton.js +2 -1
  16. package/es/components/Search/next/Search.js +1 -0
  17. package/es/components/Tabs/next/Tabs.js +42 -4
  18. package/es/components/Toggle/Toggle.js +147 -109
  19. package/es/components/UIShell/HeaderGlobalBar.js +3 -1
  20. package/es/components/UIShell/HeaderMenu.js +1 -1
  21. package/es/components/UIShell/HeaderMenuButton.js +3 -4
  22. package/es/components/UIShell/HeaderName.js +3 -4
  23. package/es/components/UIShell/HeaderNavigation.js +27 -75
  24. package/es/components/UIShell/SideNav.js +3 -3
  25. package/es/components/UIShell/SideNavFooter.js +3 -10
  26. package/es/components/UIShell/SideNavIcon.js +3 -4
  27. package/es/components/UIShell/SideNavItem.js +4 -5
  28. package/es/components/UIShell/SideNavLink.js +0 -6
  29. package/es/components/UIShell/SideNavLinkText.js +3 -4
  30. package/es/components/UIShell/SideNavMenu.js +93 -131
  31. package/es/components/UIShell/SideNavSwitcher.js +4 -2
  32. package/es/components/UIShell/SkipToContent.js +3 -4
  33. package/es/index.js +13 -11
  34. package/es/tools/wrapComponent.js +6 -4
  35. package/lib/components/ComposedModal/ComposedModal.js +2 -1
  36. package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
  37. package/lib/components/DataTable/TableActionList.js +3 -1
  38. package/lib/components/DataTable/TableToolbarContent.js +3 -1
  39. package/lib/components/DataTable/TableToolbarSearch.js +10 -2
  40. package/lib/components/DatePicker/DatePicker.js +14 -5
  41. package/lib/components/FileUploader/FileUploader.js +1 -1
  42. package/lib/components/FileUploader/FileUploaderButton.js +1 -1
  43. package/lib/components/FileUploader/Filename.js +1 -1
  44. package/lib/components/Layer/index.js +13 -0
  45. package/lib/components/Link/Link.js +6 -3
  46. package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
  47. package/lib/components/ListBox/ListBoxSelection.js +3 -4
  48. package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
  49. package/lib/components/RadioButton/next/RadioButton.js +2 -1
  50. package/lib/components/Search/next/Search.js +1 -0
  51. package/lib/components/Tabs/next/Tabs.js +42 -4
  52. package/lib/components/Toggle/Toggle.js +146 -107
  53. package/lib/components/UIShell/HeaderGlobalBar.js +3 -1
  54. package/lib/components/UIShell/HeaderMenu.js +1 -1
  55. package/lib/components/UIShell/HeaderMenuButton.js +3 -4
  56. package/lib/components/UIShell/HeaderName.js +3 -4
  57. package/lib/components/UIShell/HeaderNavigation.js +25 -73
  58. package/lib/components/UIShell/SideNav.js +3 -3
  59. package/lib/components/UIShell/SideNavFooter.js +3 -10
  60. package/lib/components/UIShell/SideNavIcon.js +3 -4
  61. package/lib/components/UIShell/SideNavItem.js +4 -5
  62. package/lib/components/UIShell/SideNavLink.js +0 -6
  63. package/lib/components/UIShell/SideNavLinkText.js +3 -4
  64. package/lib/components/UIShell/SideNavMenu.js +89 -128
  65. package/lib/components/UIShell/SideNavSwitcher.js +4 -2
  66. package/lib/components/UIShell/SkipToContent.js +3 -4
  67. package/lib/index.js +86 -82
  68. package/lib/tools/wrapComponent.js +6 -4
  69. package/package.json +18 -18
  70. package/es/components/Toggle/index.js +0 -19
  71. package/es/components/Toggle/next/Toggle.js +0 -158
  72. package/es/components/UIShell/index.js +0 -17
  73. package/es/components/UIShell/next/HeaderNavigation.js +0 -52
  74. package/es/components/UIShell/next/SideNavMenu.js +0 -160
  75. package/lib/components/Toggle/index.js +0 -23
  76. package/lib/components/Toggle/next/Toggle.js +0 -169
  77. package/lib/components/UIShell/index.js +0 -42
  78. package/lib/components/UIShell/next/HeaderNavigation.js +0 -62
  79. 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 setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
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, _defineProperty2, _defineProperty3;
28
-
29
- var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB", "size"];
30
- var getInstanceId = setupGetInstanceId["default"]();
31
-
32
- var Toggle = /*#__PURE__*/function (_React$Component) {
33
- _rollupPluginBabelHelpers.inherits(Toggle, _React$Component);
34
-
35
- var _super = _rollupPluginBabelHelpers.createSuper(Toggle);
36
-
37
- function Toggle() {
38
- _rollupPluginBabelHelpers.classCallCheck(this, Toggle);
39
-
40
- return _super.apply(this, arguments);
41
- }
42
-
43
- _rollupPluginBabelHelpers.createClass(Toggle, [{
44
- key: "render",
45
- value: function render() {
46
- var prefix = this.context;
47
-
48
- var _this$props = this.props,
49
- className = _this$props.className,
50
- defaultToggled = _this$props.defaultToggled,
51
- toggled = _this$props.toggled,
52
- _onChange = _this$props.onChange,
53
- onToggle = _this$props.onToggle,
54
- _this$props$id = _this$props.id,
55
- id = _this$props$id === void 0 ? this.inputId = this.inputId || "__carbon-toggle_".concat(getInstanceId()) : _this$props$id,
56
- labelText = _this$props.labelText,
57
- labelA = _this$props.labelA,
58
- labelB = _this$props.labelB,
59
- size = _this$props.size,
60
- other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
61
-
62
- var input;
63
- var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
64
- var toggleClasses = cx__default["default"]("".concat(prefix, "--toggle-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle-input--small"), size === 'sm'));
65
- var checkedProps = {};
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
- exports["default"] = ToggleClassic;
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: "cds--header__global",
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, customClassName, true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _cx)); // Notes on eslint comments and based on the examples in:
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
- var HeaderMenuButton = function HeaderMenuButton(_ref) {
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$1;
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
- var HeaderName = function HeaderName(_ref) {
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$1;
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
- var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
28
- _rollupPluginBabelHelpers.inherits(HeaderNavigation, _React$Component);
29
-
30
- var _super = _rollupPluginBabelHelpers.createSuper(HeaderNavigation);
31
-
32
- function HeaderNavigation(props) {
33
- var _this;
34
-
35
- _rollupPluginBabelHelpers.classCallCheck(this, HeaderNavigation);
36
-
37
- _this = _super.call(this, props);
38
-
39
- _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
40
- return function (node) {
41
- _this.items[index] = node;
42
- };
43
- });
44
-
45
- _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderNavItem", function (child, index) {
46
- if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
47
- return /*#__PURE__*/React__default["default"].cloneElement(child, {
48
- ref: _this.handleItemRef(index)
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["default"] = HeaderNavigation;
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: PropTypes__default["default"].func
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
- var SideNavFooter = function SideNavFooter(_ref) {
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$1;
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
- var SideNavIcon = function SideNavIcon(_ref) {
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$1;
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
- var SideNavItem = function SideNavItem(_ref) {
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 `SideNavIcon` to render in the
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$1;
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
- var SideNavLinkText = function SideNavLinkText(_ref) {
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$1;
50
+ exports["default"] = SideNavLinkText;